improve ui/ux for compute_in_progress feature

 - refactor progress bar to hold 2 colors (one for only complete courses and complete+in progress courses)
 - change `Chip`s to be 'in-progress` when needed

packages/sogrim-app/src/components/Banner/BannerCards/DegreeMainStatus.tsx

@@ -29,6 +29,7 @@ const DegreeMainStatusComp: React.FC = () => {
   const { mutate, isError, error } = useUpdateUserSettings(userAuthToken);
 
   const [totalCredit, setTotalCredit] = useState<number>(0);
+  const [onlyCompleteCredit, setOnlyCompleteCredit] = useState<number>(0);
   const [pointsDone, setPointsDone] = useState<number>(0);
   const [catalogName, setCatalogName] = useState<string>("");
   const [confetti, setConfetti] = useState(false);
@@ -44,9 +45,20 @@ const DegreeMainStatusComp: React.FC = () => {
     if (userDetails) {
       const studentTotal = userDetails?.degree_status?.total_credit || 0;
       const totalCredit = userDetails?.catalog?.total_credit || 0;
+      const onlyCompleteCredit =
+        userDetails?.degree_status?.course_statuses.reduce(
+          (partialSum, courseStatus) => {
+            let credit =
+              courseStatus.state === "הושלם" ? courseStatus.course.credit : 0;
+            return partialSum + credit;
+          },
+          0
+        ) || 0;
       const catalogName = userDetails?.catalog?.name || "";
+
       setPointsDone(studentTotal);
       setTotalCredit(totalCredit);
+      setOnlyCompleteCredit(onlyCompleteCredit);
       setCatalogName(catalogName);
       setShowMainStatus(catalogName !== "");
     }
@@ -73,9 +85,14 @@ const DegreeMainStatusComp: React.FC = () => {
     userSettings,
   ]);
 
-  const progress =
+  const coursesTotalProgress =
     pointsDone / totalCredit >= 1 ? 100 : (pointsDone / totalCredit) * 100;
 
+  const coursesCompleteProgress =
+    onlyCompleteCredit / totalCredit >= 1
+      ? 100
+      : (onlyCompleteCredit / totalCredit) * 100;
+
   const handleChange = (
     _: React.SyntheticEvent,
     computeInProgress: boolean
@@ -117,8 +134,13 @@ const DegreeMainStatusComp: React.FC = () => {
             </Box>
           </Tooltip>
         </Box>
-        {/* TODO: work on design */}
-        <DegreeStatusBar progress={progress} />
+        <DegreeStatusBar
+          {...{
+            coursesCompleteProgress,
+            coursesTotalProgress,
+            computeInProgress,
+          }}
+        />
         <Typography sx={{ fontSize: 22 }} color="text.primary">
           {`השלמת ${pointsDone} מתוך ${totalCredit} נקודות`}
         </Typography>

packages/sogrim-app/src/components/Banner/BannerCards/DegreeStatusBar.tsx

@@ -1,9 +1,12 @@
 import * as React from "react";
 import LinearProgress, {
+  linearProgressClasses,
   LinearProgressProps,
 } from "@mui/material/LinearProgress";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
+import { styled, useTheme } from "@mui/material/styles";
+import { Tooltip } from "@mui/material";
 
 const LinearProgressWithLabel = (
   props: LinearProgressProps & { value: number }
@@ -14,18 +17,87 @@ const LinearProgressWithLabel = (
         <LinearProgress variant="determinate" {...props} color="secondary" />
       </Box>
       <Box sx={{ minWidth: 35, mr: -1 }}>
-        <Typography variant="body2" color="text.secondary">{`${Math.round(
-          props.value
-        )}%`}</Typography>
+        <Typography variant="body2" color="text.secondary">
+          {`${Math.round(props.value)}%`}
+        </Typography>
       </Box>
     </Box>
   );
 };
 
-export const DegreeStatusBar = ({ progress = 0 }: { progress: number }) => {
+const MultiColorLinearProgress = styled(LinearProgress)(({ theme }) => ({
+  [`& .${linearProgressClasses.dashed}`]: {
+    backgroundImage: "none",
+    backgroundColor: "rgba(0, 0, 0, 0.178)",
+    animation: "none",
+  },
+
+  [`& .${linearProgressClasses.bar1Buffer}`]: {
+    backgroundColor: theme.palette.secondary.main,
+  },
+  [`& .${linearProgressClasses.bar2Buffer}`]: {
+    backgroundColor: theme.palette.secondary.light,
+  },
+}));
+
+const LinearProgressMultiColorWithLabel = (
+  props: LinearProgressProps & {
+    onlyCompleteProgress: number;
+    totalProgress: number;
+  }
+) => {
+  const theme = useTheme();
   return (
+    <Tooltip
+      title={`קורסים שהושלמו - ${Math.round(
+        props.onlyCompleteProgress
+      )}%, קורסים בתהליך - ${Math.round(
+        props.totalProgress - props.onlyCompleteProgress
+      )}%`}
+      arrow
+    >
+      <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+        <Box sx={{ width: "100%" }}>
+          <MultiColorLinearProgress
+            {...props}
+            variant="buffer"
+            valueBuffer={props.totalProgress}
+            value={props.onlyCompleteProgress}
+            theme={{ ...theme }}
+          />
+        </Box>
+        <Box
+          sx={{ display: "flex", flexDiretion: "row", minWidth: 35, mr: -1 }}
+        >
+          <Typography variant="body2">
+            {`${Math.round(props.totalProgress)}%`}
+            <span style={{ color: "red", fontWeight: "bold" }}>*</span>
+          </Typography>
+        </Box>
+      </Box>
+    </Tooltip>
+  );
+};
+
+export const DegreeStatusBar = ({
+  coursesCompleteProgress = 0,
+  coursesTotalProgress = 0,
+  computeInProgress = false,
+}: {
+  coursesCompleteProgress: number;
+  coursesTotalProgress: number;
+  computeInProgress: boolean;
+}) => {
+  return computeInProgress ? (
+    <Box sx={{ width: "100%" }}>
+      <LinearProgressMultiColorWithLabel
+        onlyCompleteProgress={coursesCompleteProgress}
+        totalProgress={coursesTotalProgress}
+      />
+    </Box>
+  ) : (
     <Box sx={{ width: "100%" }}>
-      <LinearProgressWithLabel value={progress} />
+      <LinearProgressWithLabel value={coursesCompleteProgress} />
     </Box>
   );
 };

packages/sogrim-app/src/components/Pages/RequirmentPage/BankRequirmentsTable/BankRequirmentCourseRow.tsx

@@ -95,9 +95,9 @@ const BankRequirmentCourseRowComp: React.FC<BankRequirmentCourseProps> = ({
         </Tooltip>
         {course.state !== "הושלם" && (
           <Chip
-            label="לא בוצע"
+            label={course.state}
             sx={{ minWidth: "55px" }}
-            color="secondary"
+            color={course.state === "בתהליך" ? "info" : "error"}
             variant="outlined"
             size="small"
           />

packages/sogrim-app/src/themes/theme.ts

@@ -10,12 +10,12 @@ export const getAppTheme = (
       mode,
       primary: {
         main: "#24333c",
-        light: "##24333c",
+        light: "#24333c",
       },
       secondary: {
         main: "#d66563",
-        light: "##efc1c1",
-        dark: "#ab514f",
+        light: "#f0aeae",
+        dark: "#853f3e",
       },
       info: {
         main: "#743ca5",