diff --git a/client/index.html b/client/index.html index 0c589ecc..4310e077 100644 --- a/client/index.html +++ b/client/index.html @@ -1,13 +1,15 @@ - - - - - Vite + React - - -
- - - + + + + + Scouts Management System + + + +
+ + + + \ No newline at end of file diff --git a/client/package-lock.json b/client/package-lock.json index 7d0ba6ec..4a701afb 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -9,10 +9,11 @@ "version": "0.0.0", "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": { @@ -512,9 +513,9 @@ } }, "node_modules/@remix-run/router": { - "version": "1.13.1", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.1.tgz", - "integrity": "sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q==", + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.0.tgz", + "integrity": "sha512-WOHih+ClN7N8oHk9N4JUiMxQJmRVaOxcg8w7F/oHUXzJt920ekASLI/7cYX8XkntDWRhLZtsk6LbGrkgOAvi5A==", "engines": { "node": ">=14.0.0" } @@ -2712,6 +2713,11 @@ "node": ">=0.10.0" } }, + "node_modules/normalize.css": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", + "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -3082,11 +3088,11 @@ } }, "node_modules/react-router": { - "version": "6.20.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.1.tgz", - "integrity": "sha512-ccvLrB4QeT5DlaxSFFYi/KR8UMQ4fcD8zBcR71Zp1kaYTC5oJKYAp1cbavzGrogwxca+ubjkd7XjFZKBW8CxPA==", + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.0.tgz", + "integrity": "sha512-hGZ0HXbwz3zw52pLZV3j3+ec+m/PQ9cTpBvqjFQmy2XVUWGn5MD+31oXHb6dVTxYzmAeaiUBYjkoNz66n3RGCg==", "dependencies": { - "@remix-run/router": "1.13.1" + "@remix-run/router": "1.14.0" }, "engines": { "node": ">=14.0.0" @@ -3096,12 +3102,12 @@ } }, "node_modules/react-router-dom": { - "version": "6.20.1", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.20.1.tgz", - "integrity": "sha512-npzfPWcxfQN35psS7rJgi/EW0Gx6EsNjfdJSAk73U/HqMEJZ2k/8puxfwHFgDQhBGmS3+sjnGbMdMSV45axPQw==", + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.0.tgz", + "integrity": "sha512-1dUdVj3cwc1npzJaf23gulB562ESNvxf7E4x8upNJycqyUm5BRRZ6dd3LrlzhtLaMrwOCO8R0zoiYxdaJx4LlQ==", "dependencies": { - "@remix-run/router": "1.13.1", - "react-router": "6.20.1" + "@remix-run/router": "1.14.0", + "react-router": "6.21.0" }, "engines": { "node": ">=14.0.0" diff --git a/client/package.json b/client/package.json index 1896e7da..027042e4 100644 --- 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 index bc19c01b..21c5571b 100644 --- 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 ( <> - console.log("clicked")} - color="yellow" - /> + ); } diff --git a/client/src/assets/styles/global/_typography.scss b/client/src/assets/styles/global/_typography.scss new file mode 100644 index 00000000..b5d70457 --- /dev/null +++ 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 new file mode 100644 index 00000000..849c13ad --- /dev/null +++ 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 new file mode 100644 index 00000000..0a11f439 --- /dev/null +++ b/client/src/components/testing/testTypo.jsx @@ -0,0 +1,15 @@ +export default function TestTypo() { + return ( + <> +

ما لا يدرك كله لا يترك جله

+

ما لا يدرك كله لا يترك جله

+

ما لا يدرك كله لا يترك جله

+

ما لا يدرك كله لا يترك جله

+
ما لا يدرك كله لا يترك جله
+
ما لا يدرك كله لا يترك جله
+

ما لا يدرك كله لا يترك جله

+ ما لا يدرك كله لا يترك جله +

ما لا يدرك كله لا يترك جله

+ + ); +} diff --git a/client/src/routes.jsx b/client/src/routes.jsx index e69de29b..454f74c1 100644 --- 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 ( + + + Landing} /> + + {/* Testing Routes */} + {/* FIXME: Delete test routes Later */} + } /> + + {/* Not Found */} + Not Found} /> + + + ); +} + +export default Routes; diff --git a/client/src/theme.scss b/client/src/theme.scss index 0199cb61..cefa4880 100644 --- 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; }