Merge pull request #724 from rishabhsharma1997/master

fix: styling issue learning-path content
layer5io · Aug 27, 2024 · 4ad6762 · 4ad6762
2 parents bdba671 + 20e8fd0
commit 4ad6762
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/src/custom/ChapterCard/style.tsx b/src/custom/ChapterCard/style.tsx
@@ -1,5 +1,5 @@
 import { styled } from '@mui/material';
-import { ALABASTER_WHITE, KEPPEL, MIDNIGHT_BLACK } from '../../theme';
+import { ALABASTER_WHITE, MIDNIGHT_BLACK } from '../../theme';
 
 // Styled component for ChapterCardWrapper
 export const ChapterCardWrapper = styled('div')(({ theme }) => ({
@@ -13,7 +13,7 @@ export const ChapterCardWrapper = styled('div')(({ theme }) => ({
   }`,
   justifyContent: 'space-between',
   '&:hover': {
-    border: `1px solid ${KEPPEL}`,
+    border: `1px solid ${theme.palette.background.brand?.default}`,
     transition:
       'background 150ms ease-out 0s, border 150ms ease-out 0s, transform 150ms ease-out 0s',
     transform: 'translate3d(0px, -3px, 0px)',

diff --git a/src/custom/LearningCard/style.tsx b/src/custom/LearningCard/style.tsx
@@ -12,7 +12,7 @@ const CardActive = styled('div')(({ theme }) => ({
   cursor: 'pointer',
   transition: 'all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s',
   '&:hover': {
-    boxShadow: 'rgba(0, 179, 158, 0.9) 0px 0px 19px 6px'
+    boxShadow: `${theme.palette.background.brand?.default} 0px 0px 19px 6px`
   },
   backgroundColor: theme.palette.mode === 'light' ? WHITE : BLACK
 }));
@@ -23,7 +23,7 @@ const CardLink = styled('a')({
 });
 
 const CardParent = styled('div')(({ theme }) => ({
-  borderTop: `5px solid ${theme.palette.primary.main}`,
+  borderTop: `5px solid ${theme.palette.background.brand?.default}`,
   borderRadius: '0.25rem',
   minHeight: '16rem',
   display: 'flex',

diff --git a/src/custom/SetupPrerequisite/style.tsx b/src/custom/SetupPrerequisite/style.tsx
@@ -30,7 +30,7 @@ const Card = styled('a')(({ theme }) => ({
   transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)',
   borderRadius: '10px',
   '&:hover': {
-    boxShadow: 'rgb(0, 211, 169) 0px 0px 7px'
+    boxShadow: `${theme.palette.background.brand?.default} 0px 0px 7px`
   },
   '& a': {
     margin: '0 !important',

diff --git a/src/custom/StyledChapter/StyledChapter.tsx b/src/custom/StyledChapter/StyledChapter.tsx
@@ -16,7 +16,10 @@ const StyledChapter = styled('div')(({ theme }) => ({
 
   '& a': {
     color: theme.palette.background.brand?.default,
-    textDecoration: 'none'
+    textDecoration: 'underline',
+    '&:hover': {
+      color: theme.palette.background.brand?.default
+    }
   },
   '& p > code': {
     color: 'inherit',
@@ -38,6 +41,22 @@ const StyledChapter = styled('div')(({ theme }) => ({
     width: '100%',
     margin: '1rem auto autocompleteClasses',
     fontFamily: 'Courier New, Courier, monospace'
+  },
+  '& li code': {
+    color: 'inherit',
+    padding: '.2em .4em',
+    margin: '0',
+    fontSize: '85%',
+    wordBreak: 'normal',
+    backgroundColor: theme.palette.background.code,
+    borderRadius: '.25rem'
+  },
+  '& li a': {
+    color: theme.palette.text.default,
+    textDecoration: 'underline',
+    '&:hover': {
+      color: theme.palette.background.brand?.default
+    }
   }
 }));
 export default StyledChapter;