From e4d8ace37e566f567bd3ff6a1e9baf5572ae74ce Mon Sep 17 00:00:00 2001
From: Lucas <me@lhvy.dev>
Date: Thu, 4 Apr 2024 16:05:59 +1100
Subject: [PATCH] Change Unilective rating dials to Circles colors

---
 .../CourseAttributes/CourseAttributes.tsx       | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/CourseDescriptionPanel/CourseAttributes/CourseAttributes.tsx b/frontend/src/components/CourseDescriptionPanel/CourseAttributes/CourseAttributes.tsx
index c4bebaa30..3c3ce7440 100644
--- a/frontend/src/components/CourseDescriptionPanel/CourseAttributes/CourseAttributes.tsx
+++ b/frontend/src/components/CourseDescriptionPanel/CourseAttributes/CourseAttributes.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useQuery } from 'react-query';
 import { useLocation } from 'react-router-dom';
 import { Progress, Rate, Typography } from 'antd';
+import { useTheme } from 'styled-components';
 import { Course } from 'types/api';
 import { EnrolmentCapacityData } from 'types/courseCapacity';
 import { getCourseRating } from 'utils/api/unilectivesApi';
@@ -20,6 +21,7 @@ type CourseAttributesProps = {
 const CourseAttributes = ({ course, courseCapacity }: CourseAttributesProps) => {
   const { pathname } = useLocation();
   const sidebar = pathname === '/course-selector';
+  const theme = useTheme();
 
   const ratingQuery = useQuery(['courseRating', course.code], () => getCourseRating(course.code));
   const rating = ratingQuery.data;
@@ -127,7 +129,8 @@ const CourseAttributes = ({ course, courseCapacity }: CourseAttributesProps) =>
                     format={() =>
                       `${rating.enjoyability ? rating.enjoyability.toFixed(1) : '?'} / 5`
                     }
-                    width={65}
+                    strokeColor={theme.purplePrimary}
+                    size={65}
                   />
                   <p style={{ fontSize: 'small' }}>Enjoyability</p>
                 </div>
@@ -136,7 +139,8 @@ const CourseAttributes = ({ course, courseCapacity }: CourseAttributesProps) =>
                     type="dashboard"
                     percent={rating.usefulness ? (rating.usefulness / 5) * 100 : 0}
                     format={() => `${rating.usefulness ? rating.usefulness.toFixed(1) : '?'} / 5`}
-                    width={65}
+                    strokeColor={theme.purplePrimary}
+                    size={65}
                   />
                   <p style={{ fontSize: 'small' }}>Usefulness</p>
                 </div>
@@ -147,17 +151,14 @@ const CourseAttributes = ({ course, courseCapacity }: CourseAttributesProps) =>
                     format={() =>
                       `${rating.manageability ? rating.manageability.toFixed(1) : '?'} / 5`
                     }
-                    width={65}
+                    strokeColor={theme.purplePrimary}
+                    size={65}
                   />
                   <p style={{ fontSize: 'small' }}>Manageability</p>
                 </div>
               </S.RatingWrapper>
               <div style={{ textAlign: 'center' }}>
-                <Rate
-                  disabled
-                  defaultValue={rating.overallRating ? rating.overallRating : 0}
-                  allowHalf
-                />
+                <Rate disabled value={rating.overallRating ? rating.overallRating : 0} allowHalf />
                 <p>Overall</p>
               </div>
               <S.Link