merge branch 'main' into feat-cm-edit-goal

src/components/breadcrumbs/Breadcrumbs.module.css

@@ -0,0 +1,18 @@
+.container {
+  position: fixed;
+  display: flex;
+  left: 200px;
+  z-index: 1;
+  padding: 1rem 0 1rem 2rem;
+  width: 100%;
+  background-color: var(--grey-100);
+}
+
+.link {
+  text-decoration: none;
+  color: var(--grey-10);
+}
+
+.link:hover {
+  text-decoration: underline;
+}

src/components/breadcrumbs/BreadcrumbsNav.tsx

@@ -0,0 +1,60 @@
+import { trpc } from "@/client/lib/trpc";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { SelectableForTable } from "zapatos/schema";
+import $breadcrumbs from "./Breadcrumbs.module.css";
+
+type Student = SelectableForTable<"student">;
+type Para = SelectableForTable<"user">;
+
+const BreadcrumbsNav = () => {
+  const router = useRouter();
+  const paths = router.asPath.split("/");
+
+  // student and para queries will only runs if enabled options are both true
+  // Only 1 of these will run at a time based on the conditions
+  const { data: student } = trpc.student.getStudentById.useQuery(
+    { student_id: paths[2] },
+    { enabled: Boolean(paths[2] && paths[1] === "students") }
+  );
+  const { data: para } = trpc.para.getParaById.useQuery(
+    { user_id: paths[2] },
+    { enabled: Boolean(paths[2] && paths[1] === "staff") }
+  );
+
+  const personData: Student | Para | undefined = student || para;
+
+  // An array of breadcrumbs fixed to students/staff as the first index. This will be modified depending on how the address bar will be displayed.
+  const breadcrumbs = paths.map((path, index) => {
+    // 0th index seems to only be empty string
+    if (index === 0) return "";
+    // 1st index currently is either students or staff
+    if (index % 2 === 1) {
+      return (
+        <Link key={index} href={`/${path}`} className={$breadcrumbs.link}>
+          {path.toUpperCase()}
+        </Link>
+      );
+    }
+    // 2nd index is the ID referencing 1st index
+    if (index === 2) {
+      return (
+        <div key={index} style={{ color: "var(--grey-10)" }}>
+          {personData?.first_name} {personData?.last_name}
+        </div>
+      );
+    }
+    return <div key={index}>{path}</div>;
+  });
+
+  return (
+    <div className={$breadcrumbs.container}>
+      <Breadcrumbs separator="/" aria-label="breadcrumb">
+        {breadcrumbs}
+      </Breadcrumbs>
+    </div>
+  );
+};
+
+export default BreadcrumbsNav;

src/components/design_system/breadcrumbs/Breadcrumbs.module.css

@@ -0,0 +1,2 @@
+/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
+see notes in component file */

src/components/design_system/breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,9 @@
+/** DESIGN SYSTEM COMPONENT PLACEHOLDER
+ * 1) Make a local branch for organizing your component (e.g. "design-systems-button")
+ * 2) Replace this file and the corresponding css file(s) with your component file(s), cleaning up any duplicate files that are outside of the design components folder.
+ * 3) Search and find all use cases for your component (likely linting will tell you where they are) and update the import paths
+ * 4) Check code for errors and delete this comment
+ * 5) Push code to branch and do a PR referencing the specific issue task you took for issue # 255.
+ * NOTE: If you want a css.d.ts file to be generated to help with any type issues, you can run `npm run type-css`
+ * */
+export {};

src/styles/Button.module.css → src/components/design_system/button/Button.module.css

@@ -4,28 +4,26 @@
   font-family: var(--quicksand);
   border: none;
   color: var(--on-primary);
-  padding: 10px;
-  border-radius: 4px;
+  padding: 10px 12px;
+  border-radius: 8px;
   cursor: pointer;
   text-decoration: none;
   text-align: center;
   font-size: 16px;
-}
-.about {
-  border: none;
-  background-color: transparent;
-}
-.about {
-  cursor: pointer;
+  text-transform: none;
+  line-height: normal;
+  letter-spacing: 0;
+  min-width: 0;
 }
 
 .default:hover {
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3),
     0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+  background-color: var(--primary-50);
 }
 
 .default:active {
-  background-color: var(--primary-40);
+  background-color: var(--primary-60);
 }
 
 .default:disabled {
@@ -41,14 +39,32 @@
 .secondary {
   display: block;
   border: 1px solid var(--primary-50);
-  color: var(--primary);
-  padding: 10px;
-  border-radius: 4px;
+  color: var(--primary-50);
+  padding: 10px 12px;
+  border-radius: 8px;
   cursor: pointer;
   text-decoration: none;
   text-align: center;
   font-size: 16px;
   background-color: inherit;
+  font-family: var(--quicksand);
+  text-transform: none;
+  line-height: normal;
+  letter-spacing: 0;
+  min-width: 0;
+}
+
+.secondary:hover {
+  background-color: var(--primary-container);
+}
+
+.about {
+  border: none;
+  background-color: transparent;
+}
+
+.about {
+  cursor: pointer;
 }
 
 .pilled {

src/components/design_system/button/Button.tsx

@@ -0,0 +1,9 @@
+/** DESIGN SYSTEM COMPONENT PLACEHOLDER
+ * 1) Make a local branch for organizing your component (e.g. "design-systems-button")
+ * 2) Replace this file and the corresponding css file(s) with your component file(s), cleaning up any duplicate files that are outside of the design components folder.
+ * 3) Search and find all use cases for your component (likely linting will tell you where they are) and update the import paths
+ * 4) Check code for errors and delete this comment
+ * 5) Push code to branch and do a PR referencing the specific issue task you took for issue # 255.
+ * NOTE: If you want a css.d.ts file to be generated or updated to help with any type issues, you can run `npm run type-css`
+ * */
+export {};

src/components/design_system/checkbox/Checkbox.module.css

@@ -0,0 +1,2 @@
+/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
+see notes in component file */

src/components/design_system/checkbox/Checkbox.tsx

@@ -0,0 +1,9 @@
+/** DESIGN SYSTEM COMPONENT PLACEHOLDER
+ * 1) Make a local branch for organizing your component (e.g. "design-systems-button")
+ * 2) Replace this file and the corresponding css file(s) with your component file(s), cleaning up any duplicate files that are outside of the design components folder.
+ * 3) Search and find all use cases for your component (likely linting will tell you where they are) and update the import paths
+ * 4) Check code for errors and delete this comment
+ * 5) Push code to branch and do a PR referencing the specific issue task you took for issue # 255.
+ * NOTE: If you want a css.d.ts file to be generated or updated to help with any type issues, you can run `npm run type-css`
+ * */
+export {};

src/components/design_system/dropdown/Dropdown.module.css

@@ -0,0 +1,2 @@
+/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
+see notes in component file */

src/components/design_system/dropdown/Dropdown.tsx

@@ -0,0 +1,9 @@
+/** DESIGN SYSTEM COMPONENT PLACEHOLDER
+ * 1) Make a local branch for organizing your component (e.g. "design-systems-button")
+ * 2) Replace this file and the corresponding css file(s) with your component file(s), cleaning up any duplicate files that are outside of the design components folder.
+ * 3) Search and find all use cases for your component (likely linting will tell you where they are) and update the import paths
+ * 4) Check code for errors and delete this comment
+ * 5) Push code to branch and do a PR referencing the specific issue task you took for issue # 255.
+ * NOTE: If you want a css.d.ts file to be generated or updated to help with any type issues, you can run `npm run type-css`
+ * */
+export {};

src/components/design_system/input/Input.module.css

@@ -0,0 +1,4 @@
+/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
+see notes in component file */
+/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
+see notes in component file */

src/components/design_system/input/Input.tsx

@@ -0,0 +1,9 @@
+/** DESIGN SYSTEM COMPONENT PLACEHOLDER
+ * 1) Make a local branch for organizing your component (e.g. "design-systems-button")
+ * 2) Replace this file and the corresponding css file(s) with your component file(s), cleaning up any duplicate files that are outside of the design components folder.
+ * 3) Search and find all use cases for your component (likely linting will tell you where they are) and update the import paths
+ * 4) Check code for errors and delete this comment
+ * 5) Push code to branch and do a PR referencing the specific issue task you took for issue # 255.
+ * NOTE: If you want a css.d.ts file to be generated or updated to help with any type issues, you can run `npm run type-css`
+ * */
+export {};

src/components/design_system/modal/Modal.module.css

@@ -0,0 +1,2 @@
+/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
+see notes in component file */

src/components/design_system/modal/Modal.tsx

@@ -0,0 +1,9 @@
+/** DESIGN SYSTEM COMPONENT PLACEHOLDER
+ * 1) Make a local branch for organizing your component (e.g. "design-systems-button")
+ * 2) Replace this file and the corresponding css file(s) with your component file(s), cleaning up any duplicate files that are outside of the design components folder.
+ * 3) Search and find all use cases for your component (likely linting will tell you where they are) and update the import paths
+ * 4) Check code for errors and delete this comment
+ * 5) Push code to branch and do a PR referencing the specific issue task you took for issue # 255.
+ * NOTE: If you want a css.d.ts file to be generated or updated to help with any type issues, you can run `npm run type-css`
+ * */
+export {};

src/components/design_system/progressBar/ProgressBar.module.css

@@ -0,0 +1,2 @@
+/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
+see notes in component file */

src/components/design_system/progressBar/ProgressBar.tsx

@@ -0,0 +1,9 @@
+/** DESIGN SYSTEM COMPONENT PLACEHOLDER
+ * 1) Make a local branch for organizing your component (e.g. "design-systems-button")
+ * 2) Replace this file and the corresponding css file(s) with your component file(s), cleaning up any duplicate files that are outside of the design components folder.
+ * 3) Search and find all use cases for your component (likely linting will tell you where they are) and update the import paths
+ * 4) Check code for errors and delete this comment
+ * 5) Push code to branch and do a PR referencing the specific issue task you took for issue # 255.
+ * NOTE: If you want a css.d.ts file to be generated or updated to help with any type issues, you can run `npm run type-css`
+ * */
+export {};

src/components/design_system/searchBar/SearchBar.module.css

@@ -0,0 +1,2 @@
+/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
+see notes in component file */

src/components/design_system/searchBar/SearchBar.tsx

@@ -0,0 +1,9 @@
+/** DESIGN SYSTEM COMPONENT PLACEHOLDER
+ * 1) Make a local branch for organizing your component (e.g. "design-systems-button")
+ * 2) Replace this file and the corresponding css file(s) with your component file(s), cleaning up any duplicate files that are outside of the design components folder.
+ * 3) Search and find all use cases for your component (likely linting will tell you where they are) and update the import paths
+ * 4) Check code for errors and delete this comment
+ * 5) Push code to branch and do a PR referencing the specific issue task you took for issue # 255.
+ * NOTE: If you want a css.d.ts file to be generated or updated to help with any type issues, you can run `npm run type-css`
+ * */
+export {};

src/components/design_system/tabs/Tabs.module.css

@@ -0,0 +1,2 @@
+/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
+see notes in component file */

src/components/design_system/tabs/Tabs.tsx

@@ -0,0 +1,9 @@
+/** DESIGN SYSTEM COMPONENT PLACEHOLDER
+ * 1) Make a local branch for organizing your component (e.g. "design-systems-button")
+ * 2) Replace this file and the corresponding css file(s) with your component file(s), cleaning up any duplicate files that are outside of the design components folder.
+ * 3) Search and find all use cases for your component (likely linting will tell you where they are) and update the import paths
+ * 4) Check code for errors and delete this comment
+ * 5) Push code to branch and do a PR referencing the specific issue task you took for issue # 255.
+ * NOTE: If you want a css.d.ts file to be generated or updated to possibly help with any type issues, you can run `npm run type-css`
+ * */
+export {};

src/components/goal/Goal.module.css

@@ -77,7 +77,3 @@
   font-weight: 500;
   line-height: 150%; /* 21px */
 }
-
-.controlCarat :hover {
-  cursor: pointer;
-}