Create new ProgressBar component (#336)

* feat(#333): Create new ProgressBar component in components/design_system/progressBar according to specifications in the official design system. Delete old ProgressBar component. Add color palette to MUI theme, with the basic colors from the design system.

* feat(333): add global css color variable names in comments after the palette colors in theme.

src/components/design_system/progressBar/ProgressBar.tsx

@@ -1,9 +1,18 @@
-/** 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 {};
+import LinearProgress from "@mui/material/LinearProgress";
+
+export default function ProgressBar({ value }: { value: number }) {
+  return (
+    <div>
+      <LinearProgress
+        variant="determinate"
+        color="primary"
+        value={value}
+        sx={{
+          backgroundColor: "primary.light",
+          height: "4px",
+          width: "280px",
+        }}
+      />
+    </div>
+  );
+}

src/pages/settings.tsx

@@ -1,11 +1,17 @@
 import React from "react";
+import ProgressBar from "@/components/design_system/progressBar/ProgressBar";
 
 const Settings = () => {
   // TODO? make sure settings displayed reflect the specific logged-in user
 
   return (
     <div>
       <p>🚧 Under Construction! 🚧</p>
+      <br />
+      <p>Demonstration of Progress Bar at 50%</p>
+      <p>{`(I will delete this from settings page when PR approved)`}</p>
+      <br />
+      <ProgressBar value={50} />
     </div>
   );
 };

src/theme.ts

@@ -3,6 +3,26 @@ import { createTheme } from "@mui/material";
 const { breakpoints } = createTheme();
 
 export const theme = createTheme({
+  palette: {
+    primary: {
+      main: "#3023b8", // --primary-50
+      light: "#9b93f1", // --primary-80
+      dark: "#080155", // --primary-20
+    },
+    error: {
+      main: "#b3261e", // --error
+    },
+    warning: {
+      main: "#ffaa44", // --warning-container
+      light: "#fbf6d9", // --warning-state
+      dark: "#1c1b1f", // --on-warning
+    },
+    success: {
+      main: "#24804d", // --success
+      light: "#f0fff6", // --success-container
+      dark: "#001e0d", // --on-success-container
+    },
+  },
   breakpoints,
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   shadows: [