From 20e8fd0d5c3a82ddf0563348465452beb101cdf2 Mon Sep 17 00:00:00 2001
From: rishabhsharma1997 <rishabhsharma19997@gmail.com>
Date: Tue, 27 Aug 2024 18:55:41 +0530
Subject: [PATCH] fix: styling issue learning-path content

Signed-off-by: rishabhsharma1997 <rishabhsharma19997@gmail.com>
---
 src/custom/ChapterCard/style.tsx           |  4 ++--
 src/custom/LearningCard/style.tsx          |  4 ++--
 src/custom/SetupPrerequisite/style.tsx     |  2 +-
 src/custom/StyledChapter/StyledChapter.tsx | 21 ++++++++++++++++++++-
 4 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/custom/ChapterCard/style.tsx b/src/custom/ChapterCard/style.tsx
index 6f8b5153..eb36738d 100644
--- 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
index c9b8e28b..9ec05f7b 100644
--- 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
index 2499c81a..d0a5a779 100644
--- 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
index 83464462..887b8960 100644
--- 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;