Develop into Main

dev/dev.env.example

@@ -1,7 +1,7 @@
 # environment file to configure docker containers
 
 # postgres
-POSTGRES_NAME=<same as SQL_DATABASE>
+POSTGRES_DB=<same as SQL_DATABASE>
 POSTGRES_USER=postgres
 POSTGRES_PASSWORD=<same as SQL_PASSWORD>
 

docker-compose.yml

@@ -11,7 +11,7 @@ services:
     volumes:
       - postgres_data:/lib/postgresql/data
     ports:
-      - "5434:5434"
+      - "5432:5432"
     healthcheck:
       test: [ "CMD-SHELL", "pg_isready" ]
       interval: 10s
@@ -58,6 +58,9 @@ services:
         - action: sync
           path: ./frontend
           target: /usr/src/app
+    volumes:
+      - ./frontend:/usr/src/app 
+      - /usr/src/app/node_modules
 
 volumes:
   postgres_data: {}

frontend/package.json

@@ -73,6 +73,7 @@
     "clsx": "^2.1.1",
     "react-hook-form": "^7.46.1",
     "react-popper": "^2.3.0",
+    "tailwind-merge": "^3.2.0",
     "vite-tsconfig-paths": "^4.3.1"
   }
 }

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/Buttons/_Button.scss

@@ -102,18 +102,18 @@ $theme-values: (
     ),
   ),
   "primary-dark": (
-    "background-color": $color-blue,
-    "color": $color-white,
+    "background-color": $color-white,
+    "color": $color-blue-dark,
     "focus": (
-      "background-color": $color-blue-focused,
+      "background-color": $color-blue-dark-focused,
     ),
     "hover": (
-      "background-color": $color-white,
+      "background-color": $color-blue-dark-hover,
       "box-shadow": 0 4px 4px rgb(0 0 0 / 20%),
-      "color": $color-charcoal,
+      "color": $color-white,
     ),
     "active": (
-      "background-color": $color-blue-focused,
+      "background-color": $color-blue-dark-focused,
     ),
   ),
 );

frontend/src/components/components.tsx

@@ -1,37 +1,28 @@
 import { Button } from "./Buttons/Button";
 import { IconButton } from "./Buttons/IconButton";
 import { ScrollCarousel } from "./Carousel/ScrollCarousel";
-import { Dialog } from "./Dialog/Dialog";
 import { Calendar } from "./Inputs/Calendar";
 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
-  Dialog,
   // Inputs
   Calendar,
   Checkbox,
   Chip,
   Dropdown,
   DropdownOption,
   TextField,
-  // Navigation
-  ProgressBar,
-  // Notification
   Notification,
-  // Transition
   TransitionWrapper,
 };

frontend/src/context/QualifiersContext.tsx

@@ -6,6 +6,8 @@ type QualifiersType = {
   COPs: {
     [copName: string]: string[];
   };
+  selectedCOP?: string;
+  skills_matrix?: { [skill: string]: string };
   // availabilityTimeSlots: string[];
 };
 
@@ -53,6 +55,7 @@ export const QualifiersProvider: React.FC<{ children: ReactNode }> = ({
   const [qualifiers, setQualifiers] = useState<QualifiersType>(initialState);
 
   const updateQualifiers = (newQualifiers: QualifiersType) => {
+    console.log("Updated Qualifiers:", newQualifiers); // Log the updated qualifiers TO DELETE
     setQualifiers(newQualifiers);
   };
 

frontend/src/index.scss

@@ -7,9 +7,7 @@
 // Import component styles
 @use "@/components/Buttons" as *;
 @use "@/components/Carousel/ScrollCarousel";
-@use "@/components/Dialog/Dialog";
 @use "@/components/Inputs" as *;
-@use "@/components/Navigation" as *;
 @use "@/components/Notification/Notification";
 @use "@/components/Transition/Wrapper";
 @use "@/components/Scroll/ChevronScroll";
@@ -18,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/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

frontend/src/pages/Authentication/page.tsx

@@ -45,7 +45,7 @@ export default function AuthenticationPage() {
         <div className="w-full bg-tan lg:basis-1/2">
           <div className="flex h-full flex-col items-center justify-center lg:bg-white">
             <div className="w-10/12 lg:w-[439px]">
-              <div className="lg:bg-transparent rounded-2xl bg-white max-lg:p-7">
+              <div className="rounded-2xl bg-white max-lg:p-7 lg:bg-transparent">
                 {pathname === "/login" && <LoginForm />}
                 {pathname === "/signup" && <SignupForm />}
               </div>

frontend/src/pages/LandingPage/LandingPageCop.tsx

@@ -2,15 +2,14 @@
 import React, { useState, useEffect } from "react";
 
 // Internal Imports
-import { Button, Dialog } from "components/components";
+import { Button } from "components/components";
+import { Dialog, CircleCard, Typography } from "tw-components/index";
 import { CopCard, InnerCopCard, InnerCopNavCard } from "./LandingPageCopCards";
 import {
   copDatum,
   fetchAllCopData,
   fetchCopDataById,
 } from "../../api_data/copData";
-import { CircleCard } from "tw-components/CircleCard";
-import Typography from "tw-components/Typography";
 
 function LandingPageCop() {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -69,7 +68,7 @@ function LandingPageCop() {
         onClose={() => {
           setIsDialogOpen(false);
         }}
-        addClass="flex-container justify-center align-center"
+        className="flex flex-col items-center justify-center"
         ariaLabel="Communities of Practice (COP)"
       >
         <CopCard