Merge pull request #4 from CMP26Projects/setup-frontend-projct

Setup frontend projct
CMP26Projects · Dec 16, 2023 · 788d548 · 788d548
2 parents b418d26 + 49ec897
commit 788d548
Show file tree

Hide file tree

Showing 9 changed files with 262 additions and 59 deletions.
diff --git a/client/index.html b/client/index.html
@@ -1,13 +1,15 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Scouts Management System</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -11,10 +11,11 @@
   },
   "dependencies": {
     "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.20.1",
+    "react-router-dom": "^6.21.0",
     "sass": "^1.69.5"
   },
   "devDependencies": {

diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -1,17 +1,15 @@
-import React from "react";
-import Alert from "./components/common/Alerts";
+// Theme file
+import "./theme.scss";
+// Global Style (includes normalize.css)
+import "./assets/styles/global/global.scss";
+
+// Import Routes
+import Routes from "./routes";
 
 function App() {
   return (
     <>
-      <Alert
-        title="عنوان"
-        info="نص الرسالة"
-        buttontext="تمت المعاينة"
-        showRightBox={false}
-        Onclick={() => console.log("clicked")}
-        color="yellow"
-      />
+      <Routes />
     </>
   );
 }

diff --git a/client/src/assets/styles/global/_typography.scss b/client/src/assets/styles/global/_typography.scss
@@ -0,0 +1,48 @@
+// File: _typography.scss
+// This file will contain all the typography styles that we will use in our app.
+// Sizes and weights will be defined here.
+
+h1 {
+  font-size: 2.98625rem;
+  font-weight: 800;
+}
+
+h2 {
+  font-size: 2.48813rem;
+  font-weight: 700;
+}
+
+h3 {
+  font-size: 2.07344rem;
+  font-weight: 700;
+}
+
+h4 {
+  font-size: 1.7287rem;
+  font-weight: 600;
+}
+
+h5 {
+  font-size: 1.44058rem;
+  font-weight: 600;
+}
+
+h6 {
+  font-size: 1.20048rem;
+  font-weight: 500;
+}
+
+p {
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+a {
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.small {
+  font-size: 0.8rem;
+  font-weight: 400;
+}
diff --git a/client/src/assets/styles/global/global.scss b/client/src/assets/styles/global/global.scss
@@ -0,0 +1,19 @@
+@import "normalize.css";
+@import "typography";
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-primary);
+  background-color: var(--bg);
+  color: var(--grey-50);
+}
+
+a {
+  color: var(--grey-50);
+  text-decoration: none;
+}
diff --git a/client/src/components/testing/testTypo.jsx b/client/src/components/testing/testTypo.jsx
@@ -0,0 +1,15 @@
+export default function TestTypo() {
+  return (
+    <>
+      <h1>ما لا يدرك كله لا يترك جله</h1>
+      <h2>ما لا يدرك كله لا يترك جله</h2>
+      <h3>ما لا يدرك كله لا يترك جله</h3>
+      <h4>ما لا يدرك كله لا يترك جله</h4>
+      <h5>ما لا يدرك كله لا يترك جله</h5>
+      <h6>ما لا يدرك كله لا يترك جله</h6>
+      <p>ما لا يدرك كله لا يترك جله</p>
+      <a href="#1">ما لا يدرك كله لا يترك جله</a>
+      <p className="small">ما لا يدرك كله لا يترك جله</p>
+    </>
+  );
+}
diff --git a/client/src/routes.jsx b/client/src/routes.jsx
@@ -0,0 +1,31 @@
+// routes.jsx is the main router for the application
+// Will have the routes in it
+import {
+  BrowserRouter as Router,
+  Routes as Switch,
+  Route,
+} from "react-router-dom";
+
+// Import modules/pages under this line
+
+// Import Testing Routes here
+import TestTypo from "./components/testing/testTypo";
+
+function Routes() {
+  return (
+    <Router>
+      <Switch>
+        <Route exact path="/" element={<h1>Landing</h1>} />
+
+        {/* Testing Routes */}
+        {/* FIXME: Delete test routes Later */}
+        <Route path="/testTypo" element={<TestTypo />} />
+
+        {/* Not Found */}
+        <Route path="*" element={<h1>Not Found</h1>} />
+      </Switch>
+    </Router>
+  );
+}
+
+export default Routes;
diff --git a/client/src/theme.scss b/client/src/theme.scss
@@ -1,27 +1,110 @@
+// theme.scss
+// This file will contain all the theme variables that we will use in our app.
+// We will use the SCSS syntax to define the variables.
+
+// Import the fonts
+@import url("https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100;200;300;400;500;600;700;800;900&display=swap");
+
 :root {
-  text-align: center;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-}
-// TODO: Delete later this is just a sanity check
-h1 {
-  animation: wiggle 1s infinite;
-  margin-top: 45vh;
-}
+  //----------------------------//
+  // Colors
+  //----------------------------//
+  --green-50: #f3faf7;
+  --green-100: #def7ec;
+  --green-200: #bcf0da;
+  --green-300: #84e1bc;
+  --green-400: #31c48d;
+  --green-500: #0e9f6e;
+  --green-600: #057a55;
+  --green-700: #046c4e;
+  --green-800: #03543f;
+  --green-900: #014737;
+
+  --pink-50: #fdf2f8;
+  --pink-100: #fce8f3;
+  --pink-200: #fad1e8;
+  --pink-300: #f8b4d9;
+  --pink-400: #f17eb8;
+  --pink-500: #e74694;
+  --pink-600: #d61f69;
+  --pink-700: #bf125d;
+  --pink-800: #99154b;
+  --pink-900: #751a3d;
+
+  --primary-50: #f4e7fd;
+  --primary-100: #deb8fa;
+  --primary-200: #c888f6;
+  --primary-300: #b259f2;
+  --primary-400: #9c2aef;
+  --primary-500: #8210d5;
+  --primary-600: #650da6;
+  --primary-700: #480977;
+  --primary-800: #2b0547;
+  --primary-900: #0e0218;
+
+  --red-50: #fdf2f2;
+  --red-100: #fde8e8;
+  --red-200: #fbd5d5;
+  --red-300: #f8b4b4;
+  --red-400: #f98080;
+  --red-500: #f05252;
+  --red-600: #e02424;
+  --red-700: #c81e1e;
+  --red-800: #9b1c1c;
+  --red-900: #771d1d;
+
+  --teal-50: #edfafa;
+  --teal-100: #d5f5f6;
+  --teal-200: #afecef;
+  --teal-300: #7edce2;
+  --teal-400: #16bdca;
+  --teal-500: #0694a2;
+  --teal-600: #047481;
+  --teal-700: #036672;
+  --teal-800: #05505c;
+  --teal-900: #014451;
+
+  --yellow-50: #fdfdea;
+  --yellow-100: #fdf6b2;
+  --yellow-200: #fce96a;
+  --yellow-300: #faca15;
+  --yellow-400: #e3a008;
+  --yellow-500: #c27803;
+  --yellow-700: #8e4b10;
+  --yellow-800: #723b13;
+  --yellow-900: #633112;
+
+  --grey-50: #f9fafb;
+  --grey-100: #f3f4f6;
+  --grey-200: #e5e7eb;
+  --grey-300: #d1d5db;
+  --grey-400: #9ca3af;
+  --grey-500: #6b7280;
+  --grey-600: #4b5563;
+  --grey-700: #374151;
+  --grey-800: #1f2a37;
+  --grey-900: #111928;
+
+  --bg: #040807;
+
+  //----------------------------//
+  // Gradient
+  //----------------------------//
+  --primary-gradient: linear-gradient(
+    96deg,
+    #650da6 -11.62%,
+    #650da6 -11.61%,
+    #df1846 119.72%
+  );
+  --secondary-gradient: linear-gradient(
+    113deg,
+    #1f2a37 0%,
+    rgba(31, 42, 55, 0) 100%
+  );
 
-@keyframes wiggle {
-  0% {
-    transform: rotate(0deg);
-  }
-  25% {
-    transform: rotate(5deg);
-  }
-  50% {
-    transform: rotate(0deg);
-  }
-  75% {
-    transform: rotate(-5deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
+  //----------------------------//
+  // Font
+  //----------------------------//
+  --font-primary: "Noto Kufi Arabic", sans-serif;
+  --font-base-size: 16px;
 }