fix some tag semantics in the admin course page

rage · Aug 30, 2023 · f1d6c8a · f1d6c8a
1 parent ad66e7a
commit f1d6c8a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 12 deletions.
diff --git a/frontend/components/CourseImage.tsx b/frontend/components/CourseImage.tsx
@@ -41,7 +41,7 @@ const CourseImage = React.memo((props: CourseImageProps) => {
         />
       ) : (
         <PlaceholderComponent>
-          <Typography variant="h3">no image</Typography>
+          <Typography variant="caption">no image</Typography>
         </PlaceholderComponent>
       )}
     </>

diff --git a/frontend/components/Dashboard/CourseCard.tsx b/frontend/components/Dashboard/CourseCard.tsx
@@ -135,10 +135,10 @@ const CourseTitleBadgeContainer = styled("div")`
   align-items: center;
 `
 
-const CourseInfoValue = styled("div")`
+const CourseInfoValue = styled(Typography)`
   display: flex;
   justify-content: flex-end;
-`
+` as typeof Typography
 
 const CreateCourseIconContainer = styled("div")`
   display: flex;
@@ -160,12 +160,8 @@ const CourseInfo = ({
 }: React.HTMLAttributes<HTMLLIElement> &
   PropsWithChildren<CourseInfoProps>) => (
   <CourseInfoLine {...props}>
-    {field && (
-      <CourseInfoField variant="h4" component="h3">
-        {field}
-      </CourseInfoField>
-    )}
-    {value && <CourseInfoValue>{value}</CourseInfoValue>}
+    {field && <CourseInfoField variant="subtitle2">{field}</CourseInfoField>}
+    {value && <CourseInfoValue variant="body2">{value}</CourseInfoValue>}
     {children}
   </CourseInfoLine>
 )

diff --git a/frontend/src/newTheme/components.tsx b/frontend/src/newTheme/components.tsx
@@ -192,7 +192,7 @@ export const withComponents = (theme: Theme) =>
           },
           textPrimary: {
             backgroundColor: theme.palette.common.brand.main,
-            color: theme.palette.common.grayscale.white,
+            color: `${theme.palette.common.grayscale.white} !important`,
             ".MuiButton-startIcon": {
               padding: "8px 13px",
               fill: theme.palette.common.grayscale.white,
@@ -231,7 +231,7 @@ export const withComponents = (theme: Theme) =>
           textSecondary: {
             backgroundColor: "transparent",
             border: `solid 2px ${theme.palette.common.brand.main}`,
-            color: theme.palette.common.brand.main,
+            color: `${theme.palette.common.brand.main} !important`,
             boxShadow: "none",
             ".MuiButton-startIcon": {
               fill: theme.palette.common.brand.main,
@@ -244,7 +244,7 @@ export const withComponents = (theme: Theme) =>
             },
             "&:hover": {
               border: `solid 2px ${theme.palette.common.brand.active}`,
-              color: theme.palette.common.brand.active,
+              color: `${theme.palette.common.brand.active} !important`,
               svg: {
                 fill: theme.palette.common.brand.active,
               },