Enhancing component styles

shawkyebrahim2514 · Nov 29, 2024 · 970abce · 970abce
1 parent 02ed27b
commit 970abce
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 30 deletions.
diff --git a/react-frontend/src/Types/contexts.ts b/react-frontend/src/Types/contexts.ts
@@ -1,4 +1,5 @@
 type ColorLevels = {
+    0: string,
     50: string,
     100: string,
     200: string,

diff --git a/react-frontend/src/components/CenteredSection/Header.tsx b/react-frontend/src/components/CenteredSection/Header.tsx
@@ -36,7 +36,7 @@ function HeaderTitle({ title, icon }: Readonly<Pick<HeaderProps, "title" | "icon
             alignItems: "center",
             justifyContent: "center",
             gap: "0.5rem",
-            color: theme.colors.base[600],
+            color: theme.colors.base[700],
         }
     }, [theme.colors]);
 

diff --git a/react-frontend/src/components/HTMLMarkdown/BlockquoteMarkdown.tsx b/react-frontend/src/components/HTMLMarkdown/BlockquoteMarkdown.tsx
@@ -69,7 +69,7 @@ const BlockquoteMarkdown = ({ node, className, ...props }: BlockquoteMarkdownPro
         className='blockquote'
         style={{
             ...props.style,
-            padding: "1rem",
+            padding: "0 1rem",
             position: "relative",
             margin: "1rem 0",
             backgroundColor: `${colors.containerBackgroundColor}`,

diff --git a/react-frontend/src/components/HTMLMarkdown/HeadingMarkdown.tsx b/react-frontend/src/components/HTMLMarkdown/HeadingMarkdown.tsx
@@ -10,23 +10,31 @@ const HeadingMarkdown = ({ headingNumber, children, ...props }: HeadingMarkdownP
         one: {
             fontSize: "3.8rem",
             fontWeight: 700,
-            color: theme.colors.base[800]
+            // color: theme.colors.base[800]
         },
         two: {
             fontSize: "2.2rem",
-            color: theme.colors.base[800]
+            fontWeight: 700,
+            // color: theme.colors.base[800]
         },
         three: {
-            fontSize: "1.8rem"
+            fontSize: "1.8rem",
+            fontWeight: 700,
+            // color: theme.colors.base[800]
         },
         four: {
-            fontSize: "1.4rem"
+            fontSize: "1.4rem",
+            fontWeight: 700,
+            // color: theme.colors.base[800]
         },
         five: {
-            fontSize: "1.2rem"
+            fontSize: "1.2rem",
+            fontWeight: 700,
+            // color: theme.colors.base[800]
         },
         six: {
-            fontSize: "1.1rem"
+            fontSize: "1.1rem",
+            color: theme.colors.base[800]
         }
     }
     const HTMLHeadings: Record<HeadingMarkdownProps["headingNumber"], JSX.Element> = {

diff --git a/react-frontend/src/components/HTMLMarkdown/SpanMarkdown.tsx b/react-frontend/src/components/HTMLMarkdown/SpanMarkdown.tsx
@@ -53,10 +53,11 @@ const SpanMarkdown = ({ node, className, ...props }: SpanMarkdownProps) => {
                     ...oldStyle,
                     ...textStyle,
                     fontWeight: 600,
+                    color: theme.colors.base[800],
                 }
                 const barStyle = {
                     ...lightEffectStyle,
-                    backgroundColor: theme.colors.base[300],
+                    backgroundColor: theme.colors.base[200],
                 }
                 return {
                     style: spanStyle,
@@ -71,6 +72,7 @@ const SpanMarkdown = ({ node, className, ...props }: SpanMarkdownProps) => {
                     ...oldStyle,
                     ...textStyle,
                     fontWeight: 600,
+                    color: theme.colors.base[800],
                 }
                 const barStyle = {
                     ...lightEffectStyle,
@@ -90,7 +92,7 @@ const SpanMarkdown = ({ node, className, ...props }: SpanMarkdownProps) => {
                 const spanStyle = {
                     ...oldStyle,
                     ...textStyle,
-                    fontWeight: 700,
+                    fontWeight: 600,
                 }
                 return {
                     style: spanStyle,
@@ -102,7 +104,7 @@ const SpanMarkdown = ({ node, className, ...props }: SpanMarkdownProps) => {
                     ...oldStyle,
                     ...textStyle,
                     color: theme.colors.secondary[500],
-                    fontWeight: 700,
+                    fontWeight: 600,
                 }
                 return {
                     style: spanStyle,

diff --git a/react-frontend/src/components/Navbar/Links/LinkButton.tsx b/react-frontend/src/components/Navbar/Links/LinkButton.tsx
@@ -19,11 +19,12 @@ function LinkButton({ path, pageName, onClick }: LinkButtonProps) {
         return {
             boxShadow: "none",
             border: "none",
-            backgroundColor: linkActive ? theme.colors.base[600] : "",
-            color: linkActive ? theme.colors.base[200] : theme.colors.base[400],
-            opacity: linkActive ? "1" : "0.7",
+            backgroundColor: linkActive ? theme.colors.base[200] : "",
+            color: linkActive ? theme.colors.base[800] : theme.colors.base[400],
+            opacity: linkActive ? "1" : "0.9",
+            fontWeight: "500",
         }
-    }, [theme.colors.base, theme.border, active]);
+    }, [theme.colors.base, active]);
 
     return (
         <Button

diff --git a/react-frontend/src/components/SectionTitle/TitleHighlightedText/index.tsx b/react-frontend/src/components/SectionTitle/TitleHighlightedText/index.tsx
@@ -8,10 +8,10 @@ function TitleHighlightedText({ children }: { readonly children: string }) {
     const { theme } = useThemeContext();
     const titleWidth = useMemo(() => {
         return children.length * 16 + 30;
-    }, []);
+    }, [children]);
     const outerStyle = useMemo((): CSSProperties => {
         return {
-            color: theme.colors.base[800],
+            color: theme.colors.base[900],
             boxShadow: theme.boxShadow,
             width: titleWidth,
             height: "60px",

diff --git a/react-frontend/src/containers/About/Content/index.tsx b/react-frontend/src/containers/About/Content/index.tsx
@@ -15,7 +15,7 @@ function Content({
     const { theme } = useThemeContext();
     const containerStyle = useMemo((): CSSProperties => ({
         fontSize: "1.2rem",
-        color: theme.colors.base[700],
+        color: theme.colors.base[800],
         textAlign: isMediumScreen ? "center" : "left",
     }), [isMediumScreen, theme.colors.base]);
 

diff --git a/react-frontend/src/contexts/ThemeContext.tsx b/react-frontend/src/contexts/ThemeContext.tsx
@@ -21,22 +21,22 @@ const colors = {
         400: "#A5A59F",
         500: "#898984",
         600: "#6F706C",
-        700: "#5F5F5C",
+        700: "#545451",
         800: "#393937",
         900: "#282827",
     },
     secondary: {
         0: "#FFFFFF",
-        50: "#FDF9F7",
-        100: "#F8EBE4",
-        200: "#EDCFBC",
-        300: "#E2B395",
-        400: "#D7966D",
-        500: "#B97A52",
-        600: "#976443",
-        700: "#815539",
-        800: "#4E3322",
-        900: "#362418",
+        50: "#FEF9F5",
+        100: "#FBEBDD",
+        200: "#F8D7BC",
+        300: "#F6C29A",
+        400: "#D4986C",
+        500: "#B4805B",
+        600: "#93684B",
+        700: "#7C573F",
+        800: "#644633",
+        900: "#4A3326",
     },
     opacity: (percentage: number) => `rgba(255,255,255,${percentage})`,
 }
@@ -90,7 +90,7 @@ themeProperties.button = {
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: themeProperties.colors.base[50],
-    color: themeProperties.colors.base[600],
+    color: themeProperties.colors.base[700],
     ...themeProperties.buttonEffects,
 }