Feat/skills matrix page

frontend/src/api_data/copData.ts

@@ -9,6 +9,7 @@ import {
 interface copDatum {
   id: number;
   title: string;
+  subtitle: string;
   icon: React.ElementType;
   description: string;
   roles: string[];
@@ -18,6 +19,7 @@ const copData: copDatum[] = [
   {
     id: 0, // will be replaced by useID when upgrade to React18+; see #200
     title: "UI/UX",
+    subtitle: "UX Design and Writing",
     icon: CopIconUiux,
     description:
       "The User Interface/User Experience (UI/UX) Community of Practice (CoP) is a space for UI and UX designers and research professionals to share effective practices, and give and receive mentorship, set design and research standards, and to create guides for new projects. Recent meeting topics include how to create a professional online portfolio, a meet and greet with a Hack for LA alum who landed a job at Google, how to effectively network, and training in Figma.",
@@ -31,6 +33,7 @@ const copData: copDatum[] = [
   {
     id: 1,
     title: "Engineering",
+    subtitle: "Frontend and Backend",
     icon: CopIconEngineering,
     description:
       "The Engineering Community of Practice (CoP) is a space for developers to share effective practices and set development standards and give and receive mentorship. Recent meeting topics include career advancement strategy workshops and “tech talks” with discussions on architecture paradigms, testing, and new technology.",
@@ -44,6 +47,7 @@ const copData: copDatum[] = [
   {
     id: 2,
     title: "Data Science",
+    subtitle: "",
     icon: CopIconData,
     description:
       "The Data Science Community of Practice (CoP) is a space for data science professionals to discuss the current state of the field, share effective practices, give and receive mentorship, and to workshop projects. Recent meeting topics include reviewing popular tools for data analysis, using data science to improve Hack for LA workflows, and presenting research results to peers and leadership for feedback and mentoring.",
@@ -57,6 +61,7 @@ const copData: copDatum[] = [
   {
     id: 3,
     title: "Project/Product Management",
+    subtitle: "Planning and Organization",
     icon: CopIconProduct,
     description:
       "The Product Managers (PM) Community of Practice (CoP) is a space for product management professionals to share effective practices, and give and receive mentorship, set product management standards, and to create guides and templates for new projects. Recent meeting topics include a project management focused book club, discussing how to best manage knowledge and issues, and brainstorming solutions to various PM issues.",
@@ -72,6 +77,7 @@ const copData: copDatum[] = [
   {
     id: 4,
     title: "DevOps",
+    subtitle: "Dev and IT Operations",
     icon: CopIconOps,
     description:
       "The Operations (Ops) Community of Practice (CoP) is a space for operations professionals to discuss all areas of dev-ops, coordinate infrastructure improvement, and share effective practices, and give and receive mentorship. Recent meeting topics include improving AWS hosting, password vaults, and multi-tenant product architecture.",

frontend/src/components/components.tsx

@@ -6,16 +6,13 @@ import { Checkbox } from "./Inputs/Checkbox";
 import { Chip } from "./Inputs/Chip";
 import { Dropdown, DropdownOption } from "./Inputs/Dropdown";
 import { TextField } from "./Inputs/Textfield";
-import { ProgressBar } from "./Navigation/ProgressBar";
 import { Notification } from "./Notification/Notification";
 import { TransitionWrapper } from "./Transition/Wrapper";
 import { ChevronScroll } from "./Scroll/ChevronScroll";
 
 export {
-  // Buttons
   Button,
   IconButton,
-  // Carousel
   ScrollCarousel,
   ChevronScroll,
   // Dialog
@@ -26,10 +23,6 @@ export {
   Dropdown,
   DropdownOption,
   TextField,
-  // Navigation
-  ProgressBar,
-  // Notification
   Notification,
-  // Transition
   TransitionWrapper,
 };

frontend/src/index.scss

@@ -8,7 +8,6 @@
 @use "@/components/Buttons" as *;
 @use "@/components/Carousel/ScrollCarousel";
 @use "@/components/Inputs" as *;
-@use "@/components/Navigation" as *;
 @use "@/components/Notification/Notification";
 @use "@/components/Transition/Wrapper";
 @use "@/components/Scroll/ChevronScroll";
@@ -17,7 +16,6 @@
 @use "@/pages/Demo/Demo";
 @use "@/pages/NotFoundPage/NotFoundPage";
 @use "@/pages/LandingPage" as *;
-@use "@/pages/QualifierPage" as *;
 
 body {
   font-family: Roboto, Tahoma, Verdana, sans-serif;

frontend/src/pages/QualifierPage/QualifierPageCalendar.tsx

@@ -1,16 +1,17 @@
 // External Imports
-import React, { Fragment, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 // Internal Imports
+import Typography from "tw-components/Typography";
 import {
   Dropdown,
   DropdownOption,
   Calendar,
   IconButton,
   Button,
 } from "components/components";
-import { QualifierNav, QualifierTitle } from "./QualifierComponents";
+import { QualifierNav } from "./components/QualifierNav";
 import { timezones } from "../../api_data/timezoneData";
 import { iconArrowLeft } from "assets/images/images";
 // import { useQualifiersContext } from "context/QualifiersContext";
@@ -21,30 +22,33 @@ function QualifierPageCalendar() {
   const navigate = useNavigate();
 
   return (
-    <Fragment>
-      <QualifierTitle title="What is your weekly availability?">
+    <div className="flex w-full flex-col items-center px-5">
+      <Typography.Title2 className="mt-8 text-charcoal">
+        What is your weekly availability?
+      </Typography.Title2>
+      <Typography.Paragraph3 className="my-5 text-grey-dark">
         Drag to select.&nbsp;&nbsp;
-        <span className="qcalendar-green-square"></span>
+        <span className="inline-block size-6 rounded-sm bg-green leading-8"></span>
         &nbsp;=&nbsp;available
-      </QualifierTitle>
+      </Typography.Paragraph3>
       <TimeZoneDropDown />
       <Calendar
         addClass="mt-5"
         onChange={(e) => {
           console.log(e);
         }}
       />
-      <QualifierNav addClass="justify-between">
+      <QualifierNav className="justify-between">
         <IconButton
           label="previous page"
           iconUrl={iconArrowLeft}
-          onClick={() => navigate("../1", { relative: "path" })}
+          onClick={() => navigate("../2", { relative: "path" })}
         />
         <Button size="lg" length="long" color="primary" href="/">
           View available roles
         </Button>
       </QualifierNav>
-    </Fragment>
+    </div>
   );
 }
 
@@ -61,7 +65,7 @@ function TimeZoneDropDown() {
     }
   }, []);
   return (
-    <div className="qcalendar-dropdown flex-container justify-right">
+    <div className="flex w-full flex-wrap justify-end">
       <Dropdown
         addClass="col-3 ovflow-hidden"
         ariaLabel="timezone-dropdown"

frontend/src/pages/QualifierPage/QualifierPageRoles.tsx

@@ -4,8 +4,9 @@ import React, { Fragment, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 // Internal Imports
+import Typography from "tw-components/Typography";
 import { Button, Chip } from "components/components";
-import { QualifierNav, QualifierTitle } from "./QualifierComponents";
+import { QualifierNav } from "./components/QualifierNav";
 import { useQualifiersContext } from "context/QualifiersContext";
 import { onKey } from "components/Utility/utils";
 
@@ -88,15 +89,19 @@ const QualifierPageRoles: React.FC = () => {
     // console.log("Old Qualifiers:", qualifiers);
     const newQualifiers = { ...qualifiers, COPs: updatedCopQualifiers };
 
-    console.log("New Qualifiers:", newQualifiers);
+    // console.log("New Qualifiers:", newQualifiers);
     updateQualifiers(newQualifiers); // Update qualifiers
   };
 
   return (
-    <Fragment>
-      <QualifierTitle title="What type of role are you looking for?">
+    <>
+      <Typography.Title3 className="mt-8 text-charcoal">
+        What type of Practice Area are you looking for?
+      </Typography.Title3>
+      <Typography.Paragraph3 className="my-5 text-grey-dark">
         Select as many roles as you'd like to find opportunities in.
-      </QualifierTitle>
+      </Typography.Paragraph3>
+
       <div className="flex-center-x">
         {copData.map((cop, index) => {
           const cleanCopName = cop.title.replace(/\s+/g, "_");
@@ -167,13 +172,13 @@ const QualifierPageRoles: React.FC = () => {
                 </div>
               </div>
               {index < copData.length - 1 && (
-                <hr className="row col-8 qroles-border"></hr>
+                <hr className="row col-8 text-grey"></hr>
               )}
             </Fragment>
           );
         })}
       </div>
-      <QualifierNav addClass="justify-right">
+      <QualifierNav className="justify-end">
         <Button
           size="lg"
           length="long"
@@ -186,7 +191,7 @@ const QualifierPageRoles: React.FC = () => {
           Next
         </Button>
       </QualifierNav>
-    </Fragment>
+    </>
   );
 };