Merge branch 'main' into Notifications_Backend

client/.gitignore

@@ -14,6 +14,7 @@ dist-ssr
 .env
 
 *.css.map
+*.css
 
 # Editor directories and files
 .vscode/*

client/package.json

@@ -4,21 +4,21 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^2.0.1",
     "@heroicons/react": "^2.0.18",
+    "@reduxjs/toolkit": "^2.0.1",
     "axios": "^1.6.2",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-
     "react-redux": "^9.0.2",
     "react-router-dom": "^6.21.0",
+    "react-toastify": "^9.1.3",
     "sass": "^1.69.5"
   },
   "devDependencies": {

client/src/App.jsx

@@ -4,11 +4,21 @@ import "./theme.scss";
 import "./assets/styles/global/global.scss";
 // Import Routes
 import Routes from "./routes";
+// Import Store
+import store from "./redux/store";
+// Import Provider
+import { Provider } from "react-redux";
+// Import Toastify
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 function App() {
   return (
     <>
-      <Routes />
+      <ToastContainer />
+      <Provider store={store}>
+        <Routes />
+      </Provider>
     </>
   );
 }

client/src/assets/styles/_vars.scss

@@ -1,5 +1,11 @@
 $--grey-800: #1F2A37;
+$--grey-700: #374151;
+$--grey-600: #4b5563;
 $--grey-300: #D1D5DB;
+$--Teal-900: #014451;
 $--Teal-500: #0694A2;
 $--Red-700: #C81E1E;
-$--Yellow-500: #C27803;
+$--green-700: #046C4E;
+$--Yellow-500: #C27803;
+$--Primary-900: #0e0218;
+$--text-color: #e2efee;

client/src/assets/styles/components/Alert.scss

@@ -12,7 +12,7 @@
 
     padding: 15px 15px;
     justify-content: center;
-    align-items: end;
+    align-items: end;   
 
     gap: 10px;
 }

client/src/assets/styles/components/Button.scss

@@ -3,6 +3,11 @@
   border: none;
   padding: 12px 20px;
   border-radius: 6px;
+  cursor: pointer;
+  color: inherit;
+  font-size: 19px;
+  font-weight: 500;
+  text-align: center;
 
   a {
     color: inherit;
@@ -20,5 +25,16 @@
     color: var(--grey-50);
   }
 
+  &--medium {
+    a {
+      font-size: 1rem;
+    }
+  }
+
+  &--success {
+    background-color: var(--green-400);
+    color: var(--grey-900);
+  }
+
   // TODO: Add more button styles and maybe sizes
 }

client/src/assets/styles/components/FancyBlobs.scss

@@ -6,6 +6,8 @@
   top: 20vh;
   left: 0;
   z-index: -1;
+  --animation-duration: 8s;
+  --max-distance: 300px;
 
   > * {
     position: absolute;
@@ -18,15 +20,15 @@
     fill: linear-gradient(82deg, #8900c9 38.7%, #fcf 76.51%);
     filter: blur(150px);
     top: -167px;
-    animation: BlobMove1 10s ease-in-out infinite forwards;
+    animation: BlobMove1 var(--animation-duration) ease-in-out infinite forwards;
   }
 
   .Blob-2 {
     fill: #ff29a8;
     filter: blur(125px);
     top: 66px;
     left: -71px;
-    animation: BlobMove2 10s ease-in-out infinite forwards;
+    animation: BlobMove2 var(--animation-duration) ease-in-out infinite forwards;
   }
 
   .Blob-3 {
@@ -37,7 +39,7 @@
     filter: blur(150px);
     top: 460px;
     left: 0;
-    animation: BlobMove3 10s ease-in-out infinite forwards;
+    animation: BlobMove3 var(--animation-duration) ease-in-out infinite forwards;
   }
 
   .Blob-4 {
@@ -48,7 +50,7 @@
     filter: blur(150px);
     top: 503px;
     left: 150px;
-    animation: BlobMove4 10s ease-in-out infinite forwards;
+    animation: BlobMove4 var(--animation-duration) ease-in-out infinite forwards;
   }
 }
 
@@ -105,7 +107,7 @@
     transform: translate(0, 50px);
   }
   75% {
-    transform: translate(-100px, 0);
+    transform: translate(-var(--max-distance), 0);
   }
   100% {
     transform: translate(0, 0);

client/src/assets/styles/components/Footer.scss

@@ -1,8 +1,14 @@
 .Footer {
   padding: 2rem 20px;
+  margin-bottom: 0;
   text-align: center;
   position: relative;
   box-sizing: content-box;
+  margin-bottom: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
 
   &::before {
     content: "";
@@ -23,6 +29,7 @@
   }
 
   a {
+    border-radius: 5px;
     padding: 5px;
     background-color: var(--primary-50);
     color: var(--grey-900);

client/src/assets/styles/components/Inputs.scss

@@ -0,0 +1,34 @@
+.input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  color: var(--grey-100);
+  font-size: 1rem;
+  direction: rtl;
+  width: 100%;
+
+  .radio-buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+    width: 100%;
+    margin: 0.5rem 0;
+  }
+
+  input[type="text"],
+  input[type="password"],
+  input[type="email"],
+  input[type="number"],
+  input[type="tel"],
+  input[type="date"],
+  input[type="time"] {
+    width: 100%;
+    outline: none;
+    border-radius: 4px;
+    border: 1px solid var(--grey-600, #4b5563);
+    background: var(--grey-700, #374151);
+    padding: 0 4px;
+    line-height: 1rem;
+    color: var(--grey-100);
+  }
+}

client/src/assets/styles/components/infoBox.scss

@@ -0,0 +1,35 @@
+.info-box {
+    height: 97px;
+    flex-shrink: 0;
+    border-radius: 12px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: end;
+
+    padding-right: 2rem;    
+
+    &.narrow {
+        width: 40%;
+    }
+
+    &.wide {
+        width: 90%;
+    }   
+
+    &.dark {
+
+        background: var(--simnle-grid, linear-gradient(113deg, #1F2A37 6.36%, rgba(31, 42, 55, 0.00) 108.22%));
+    }
+
+    &.purple {
+        background: var(--pur-grid, linear-gradient(115deg, #B773E9 2.95%, #5B1092 95.69%));
+
+    }
+
+    &.colorfull {
+        background: linear-gradient(96deg, #650DA6 -11.62%, #650DA6 -11.61%, #DF1846 119.72%);
+        box-shadow: 4px 5px 103.7px 0px var(--Primary-800, #2B0547);
+    }
+}