theme colors for circular progress

client/src/components/graphs/CircularProgress/circular-progress.scss

-@use 'styles/settings.scss' as s;
+@use 'styles/settings.scss'as s;
+@use 'styles/functions.scss'as fn;
 
 .circular-progress {
     position: relative;
     display: flex;
 
+    @each $key,
+    $color in s.$themeLightMap {
+        &.color-#{$key} {
+            svg {
+                path {
+                    stroke: url('#gradient-#{$key}');
+                }
+
+                linearGradient#gradient-#{$key} {
+                    stop {
+                        &:last-child {
+                            stop-color: $color !important;
+                        }
+
+                        &:first-child {
+                            stop-color: fn.getFrom(s.$themeDarkMap, $key) !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+
     svg {
         width: 70px;
         height: 70px;

client/src/components/graphs/CircularProgress/index.tsx

@@ -2,19 +2,20 @@
 import './circular-progress.scss';
 
 const CIRCLE_RADUIS = 30;
-const CIRCLE_CENTER = [ 35, 35 ];
+const CIRCLE_CENTER = [35, 35];
 
 interface Props {
-    percent: number
+    percent: number;
+    color?: string;
 }
 
-export default function CircularProgress({ percent }: Props) {
+export default function CircularProgress({ percent, color }: Props) {
     const angle = Math.min(Math.max(percent / 100, 0), 0.99) * 2 * Math.PI;
     const largeFlag = angle > Math.PI ? 1 : 0;
     const xEndPosition = CIRCLE_CENTER[0] + CIRCLE_RADUIS * Math.cos(angle - Math.PI / 2);
     const yEndPosition = CIRCLE_CENTER[1] + CIRCLE_RADUIS * Math.sin(angle - Math.PI / 2);
     return (
-        <div className="circular-progress">
+        <div className={'circular-progress' + (color ? ' color-' + color : '')}>
             <span className="percent">{percent}%</span>
             <svg viewBox={`0 0 ${CIRCLE_RADUIS * 2 + 9} ${CIRCLE_RADUIS * 2 + 9}`}>
                 <circle cx={CIRCLE_CENTER[0]} cy={CIRCLE_CENTER[1]} r={CIRCLE_RADUIS} />
@@ -23,7 +24,7 @@ export default function CircularProgress({ percent }: Props) {
                     + `A ${CIRCLE_RADUIS} ${CIRCLE_RADUIS} 0 ${largeFlag} 1 ${xEndPosition} ${yEndPosition}`
                 }></path>
                 <defs>
-                    <linearGradient xmlns="http://www.w3.org/2000/svg" id="gradient"
+                    <linearGradient xmlns="http://www.w3.org/2000/svg" id={'gradient' + (color ? '-' + color : '')}
                         x1="37.0361" y1="73.1719" x2="36.5" y2="0.500001"
                         gradientUnits="userSpaceOnUse">
                         <stop stopColor="#AC42FF" />

client/src/components/ui/Project/index.tsx

@@ -15,10 +15,11 @@ export default function Project({ project }: ProjectProps) {
     useEffect(() => {
         getProjectAssignees(project.id).then((assignee) => setAssignees(assignee))
     }, []);
+    
     return (
         <Link to={'/projects/' + project.id} className="project">
             <div className="content">
-                <CircularProgress percent={75} />
+                <CircularProgress percent={75} color={project.color} />
                 <div className="title">{project.name}</div>
                 <div className="details">
                     {project.deadline && (