fix css for real (#147)

kscalelabs · Jun 18, 2024 · dfe06f1 · dfe06f1
1 parent 92bd77c
commit dfe06f1
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 5 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -11,7 +11,6 @@ div.content {
 
 html,
 body {
-  transition: color 0.1s ease;
   word-wrap: break-word;
 }
 
@@ -47,6 +46,11 @@ p.card-text {
   border-color: #0d6efd;
 }
 
+.btn-primary:hover {
+  background-color: #0d6efd;
+  color: white;
+}
+
 body.dark-mode .btn-primary {
   background-color: black;
   color: #8ab9fe;
@@ -64,6 +68,11 @@ body.dark-mode .btn-primary:hover {
   border-color: #dc3545;
 }
 
+.btn-danger:hover {
+  background-color: #dc3545;
+  color: white;
+}
+
 body.dark-mode .btn-danger {
   background-color: black;
   color: #f0cbce;

diff --git a/frontend/src/hooks/theme.tsx b/frontend/src/hooks/theme.tsx
@@ -1,9 +1,40 @@
-import { createContext, ReactNode, useContext, useState } from "react";
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 
 export type Theme = "light" | "dark";
 
 const THEME_KEY = "__THEME";
 
+interface ThemeColors {
+  backgroundColor: string;
+  color: string;
+  buttonBorder: string;
+  buttonHover: string;
+  text_color: string;
+}
+
+const COLORS: { [key in Theme]: ThemeColors } = {
+  light: {
+    backgroundColor: "#ffffff",
+    color: "#201a42",
+    buttonBorder: "#0D6EFD",
+    buttonHover: "#0D6EFD",
+    text_color: "#f5f2ef",
+  },
+  dark: {
+    backgroundColor: "#000000",
+    color: "#f5f2ef",
+    buttonBorder: "#8AB9FE",
+    buttonHover: "#0D6EFD",
+    text_color: "#201a42",
+  },
+};
+
 const getThemeFromLocalStorage = (): Theme => {
   const theme = localStorage.getItem(THEME_KEY);
   if (theme === null) {
@@ -19,6 +50,7 @@ const setThemeWithLocalStorage = (theme: Theme) => {
 interface ThemeContextProps {
   theme: Theme;
   setTheme: (theme: Theme) => void;
+  colors: ThemeColors;
 }
 
 const ThemeContext = createContext<ThemeContextProps | undefined>(undefined);
@@ -36,8 +68,19 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
     setTheme(theme);
     setThemeWithLocalStorage(theme);
   };
+
+  useEffect(() => {
+    document.body.setAttribute("data-bs-theme", theme);
+    document.body.classList.toggle("dark-mode", theme === "dark");
+    document.body.classList.toggle("light-mode", theme === "light");
+    document.body.style.backgroundColor = COLORS[theme].backgroundColor;
+    document.body.style.color = COLORS[theme].color;
+  }, [theme, COLORS]);
+
   return (
-    <ThemeContext.Provider value={{ theme, setTheme: setThemeWrapper }}>
+    <ThemeContext.Provider
+      value={{ theme, setTheme: setThemeWrapper, colors: COLORS[theme] }}
+    >
       {children}
     </ThemeContext.Provider>
   );

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -68,7 +68,7 @@ const Home: React.FC = () => {
           <Row className="row-two">
             <Col md={6} sm={12}>
               <Button
-                variant="outline-primary"
+                variant="primary"
                 size="lg"
                 style={{
                   width: "100%",
@@ -82,7 +82,7 @@ const Home: React.FC = () => {
             </Col>
             <Col md={6} sm={12}>
               <Button
-                variant="outline-primary"
+                variant="primary"
                 size="lg"
                 style={{
                   width: "100%",