Merge pull request #105 from do-kevin/chore-custom-theme

FEATURE : Initial Bootstrap Theme Customization

client2/package.json

@@ -29,7 +29,9 @@
     "test": "jest --watchAll",
     "build": "tsc && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "compile:sass": "sass -w src/assets/sass/custom.scss src/assets/css/custom.css",
+    "compile:sass:utils": "sass -w src/assets/sass/my-utilities.scss src/assets/css/my-utilities.css"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.5",
@@ -69,6 +71,7 @@
     "jsdom": "^22.1.0",
     "msw": "^1.3.1",
     "rollup-plugin-visualizer": "^5.9.2",
+    "sass": "^1.69.5",
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.0.2",

client2/src/app/App.css

@@ -1,48 +0,0 @@
-#root {
-  height: 100%;
-  width: 100%;
-}
-
-#discoverInput:focus {
-  box-shadow: none;
-}
-
-.custom-search {
-  transform: translateY(-1rem);
-}
-
-.custom-search::before {
-  visibility: hidden;
-  content: "";
-  opacity: 0;
-  margin-right: auto;
-  height: 1.5rem;
-  transition: opacity 0.15s ease-in-out;
-}
-
-.custom-search:focus-within::before {
-  content: "Search flashcard decks";
-  opacity: 100;
-  visibility: visible;
-}
-
-.custom-search:focus-within {
-  .input-group {
-    border-radius: 2rem;
-    box-shadow: 0 0 0 0.25rem rgb(253 216 13 / 25%);
-  }
-
-  #discoverInput {
-    transition: border 0.15s ease-in-out;
-    border-top-color: #fa963a !important;
-    border-right-color: #fa963a !important;
-    border-bottom-color: #fa963a !important;
-  }
-
-  #search-btn-container {
-    transition: border 0.15s ease-in-out;
-    border-top-color: #fa963a !important;
-    border-left-color: #fa963a !important;
-    border-bottom-color: #fa963a !important;
-  }
-}

client2/src/app/App.tsx

@@ -1,5 +1,4 @@
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import "./App.css";
 import { DiscoverFlashcardPage } from "src/flashcard/DiscoverFlashcardPage";
 import { Provider } from "react-redux";
 import { HttpGateway } from "src/core/http-gateway";