From 17bbdf66cc75b83786cacbdbc1bf45677c7d7eb3 Mon Sep 17 00:00:00 2001 From: amir-kedis Date: Sat, 16 Dec 2023 14:20:04 +0200 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=A6=B4=20Add=20some=20style=20classes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/assets/styles/components/DELETEME.txt | 0 client/src/assets/styles/global/DELETEME.txt | 0 client/src/assets/styles/global/_layout.scss | 35 ++++++++++++++++ client/src/assets/styles/global/global.scss | 1 + client/src/components/common/DELETME.txt | 0 client/src/components/testing/testLayout.jsx | 41 +++++++++++++++++++ client/src/routes.jsx | 4 +- client/src/theme.scss | 6 +++ 8 files changed, 86 insertions(+), 1 deletion(-) delete mode 100644 client/src/assets/styles/components/DELETEME.txt delete mode 100644 client/src/assets/styles/global/DELETEME.txt create mode 100644 client/src/assets/styles/global/_layout.scss delete mode 100644 client/src/components/common/DELETME.txt create mode 100644 client/src/components/testing/testLayout.jsx diff --git a/client/src/assets/styles/components/DELETEME.txt b/client/src/assets/styles/components/DELETEME.txt deleted file mode 100644 index e69de29b..00000000 diff --git a/client/src/assets/styles/global/DELETEME.txt b/client/src/assets/styles/global/DELETEME.txt deleted file mode 100644 index e69de29b..00000000 diff --git a/client/src/assets/styles/global/_layout.scss b/client/src/assets/styles/global/_layout.scss new file mode 100644 index 00000000..7f3dbb57 --- /dev/null +++ b/client/src/assets/styles/global/_layout.scss @@ -0,0 +1,35 @@ +// _layout.scss +// Classes or the layout of the app + +section, +.section { + padding: var(--section-spacing) 0; +} + +.container { + max-width: 100%; + padding: 0 var(--side-spacing); +} + +.row { + display: flex; + flex-wrap: wrap; + margin: 0 -var(--side-spacing); + gap: var(--side-spacing); + + .col-1 { + flex: 0 1 calc(25% - var(--side-spacing) * 2); + } + + .col-2 { + flex: 0 1 calc(50% - var(--side-spacing) * 2); + } + + .col-3 { + flex: 0 1 calc(75% - var(--side-spacing) * 2); + } + + .col-4 { + flex: 0 1 calc(100% - var(--side-spacing) * 2); + } +} diff --git a/client/src/assets/styles/global/global.scss b/client/src/assets/styles/global/global.scss index 849c13ad..7fee132f 100644 --- a/client/src/assets/styles/global/global.scss +++ b/client/src/assets/styles/global/global.scss @@ -1,5 +1,6 @@ @import "normalize.css"; @import "typography"; +@import "layout"; *, *::before, diff --git a/client/src/components/common/DELETME.txt b/client/src/components/common/DELETME.txt deleted file mode 100644 index e69de29b..00000000 diff --git a/client/src/components/testing/testLayout.jsx b/client/src/components/testing/testLayout.jsx new file mode 100644 index 00000000..100ccad3 --- /dev/null +++ b/client/src/components/testing/testLayout.jsx @@ -0,0 +1,41 @@ +export default function TestLayout() { + return ( + <> +
Test Layout
+
+
+
+
+ Test Layout +
+
+ Test Layout +
+
+
+
+ Test Layout +
+
+ Test Layout +
+
+ Test Layout +
+
+ +
+
Test Layout
+
Test Layout
+
Test Layout
+
+
+
Test Layout
+
Test Layout
+
Test Layout
+
+
+
+ + ); +} diff --git a/client/src/routes.jsx b/client/src/routes.jsx index 454f74c1..3e282c76 100644 --- a/client/src/routes.jsx +++ b/client/src/routes.jsx @@ -10,6 +10,7 @@ import { // Import Testing Routes here import TestTypo from "./components/testing/testTypo"; +import TestLayout from "./components/testing/testLayout"; function Routes() { return ( @@ -19,7 +20,8 @@ function Routes() { {/* Testing Routes */} {/* FIXME: Delete test routes Later */} - } /> + } /> + } /> {/* Not Found */} Not Found} /> diff --git a/client/src/theme.scss b/client/src/theme.scss index cefa4880..493db32c 100644 --- a/client/src/theme.scss +++ b/client/src/theme.scss @@ -107,4 +107,10 @@ //----------------------------// --font-primary: "Noto Kufi Arabic", sans-serif; --font-base-size: 16px; + + //----------------------------// + // Spacing + //----------------------------// + --side-spacing: 1.25rem; + --section-spacing: 2.5rem; } From cd6fdd4a74fd0dee5c129e4fc58715b99b71c1d9 Mon Sep 17 00:00:00 2001 From: amir-kedis Date: Sat, 16 Dec 2023 14:24:04 +0200 Subject: [PATCH 2/3] =?UTF-8?q?=E2=9A=9B=EF=B8=8F=20Bootstrap=20Landing=20?= =?UTF-8?q?Page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/landingpage/LandingPage.jsx | 8 ++++++++ client/src/routes.jsx | 3 ++- 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 client/src/components/landingpage/LandingPage.jsx diff --git a/client/src/components/landingpage/LandingPage.jsx b/client/src/components/landingpage/LandingPage.jsx new file mode 100644 index 00000000..2eae1b7b --- /dev/null +++ b/client/src/components/landingpage/LandingPage.jsx @@ -0,0 +1,8 @@ +export default function LandingPage() +{ + return ( + <> +
Landing Page
+ + ); +} \ No newline at end of file diff --git a/client/src/routes.jsx b/client/src/routes.jsx index 3e282c76..c8fa8a8a 100644 --- a/client/src/routes.jsx +++ b/client/src/routes.jsx @@ -7,6 +7,7 @@ import { } from "react-router-dom"; // Import modules/pages under this line +import LandingPage from "./components/landingpage/LandingPage"; // Import Testing Routes here import TestTypo from "./components/testing/testTypo"; @@ -16,7 +17,7 @@ function Routes() { return ( - Landing} /> + } /> {/* Testing Routes */} {/* FIXME: Delete test routes Later */} From b12be729f8830f373e6855fbce2c5c05d5a24f03 Mon Sep 17 00:00:00 2001 From: amir-kedis Date: Sat, 16 Dec 2023 15:06:03 +0200 Subject: [PATCH 3/3] =?UTF-8?q?=E2=9A=9B=EF=B8=8F=20Install=20heroicons=20?= =?UTF-8?q?and=20Make=20nav=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/package-lock.json | 9 ++++ client/package.json | 1 + client/src/assets/images/ DELETEME.svg | 1 - client/src/assets/images/logo.svg | 6 +++ client/src/assets/styles/components/Nav.scss | 34 +++++++++++++++ client/src/assets/styles/global/_layout.scss | 3 +- client/src/components/common/nav.jsx | 43 +++++++++++++++++++ .../components/landingpage/LandingPage.jsx | 9 ++-- 8 files changed, 100 insertions(+), 6 deletions(-) delete mode 100644 client/src/assets/images/ DELETEME.svg create mode 100644 client/src/assets/images/logo.svg create mode 100644 client/src/assets/styles/components/Nav.scss create mode 100644 client/src/components/common/nav.jsx diff --git a/client/package-lock.json b/client/package-lock.json index 4a701afb..fbb2ff6c 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -8,6 +8,7 @@ "name": "client", "version": "0.0.0", "dependencies": { + "@heroicons/react": "^2.0.18", "axios": "^1.6.2", "normalize.css": "^8.0.1", "react": "^18.2.0", @@ -444,6 +445,14 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@heroicons/react": { + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz", + "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==", + "peerDependencies": { + "react": ">= 16" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.13", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz", diff --git a/client/package.json b/client/package.json index 027042e4..a3aa8a16 100644 --- a/client/package.json +++ b/client/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@heroicons/react": "^2.0.18", "axios": "^1.6.2", "normalize.css": "^8.0.1", "react": "^18.2.0", diff --git a/client/src/assets/images/ DELETEME.svg b/client/src/assets/images/ DELETEME.svg deleted file mode 100644 index e7b8dfb1..00000000 --- a/client/src/assets/images/ DELETEME.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/client/src/assets/images/logo.svg b/client/src/assets/images/logo.svg new file mode 100644 index 00000000..e47d98e1 --- /dev/null +++ b/client/src/assets/images/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/client/src/assets/styles/components/Nav.scss b/client/src/assets/styles/components/Nav.scss new file mode 100644 index 00000000..b8b7140a --- /dev/null +++ b/client/src/assets/styles/components/Nav.scss @@ -0,0 +1,34 @@ +.Nav { + padding: var(--side-spacing); + + .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: row-reverse; + } + + &__logo a { + display: flex; + flex-direction: row-reverse; + gap: 5px; + align-items: center; + + h2 { + font-size: 1.875rem; + font-style: normal; + font-weight: 800; + margin: 0; + } + } + + &__icons { + display: flex; + gap: 1rem; + align-items: center; + } + + &__icon { + width: 24px; + } +} diff --git a/client/src/assets/styles/global/_layout.scss b/client/src/assets/styles/global/_layout.scss index 7f3dbb57..8a7e7a7e 100644 --- a/client/src/assets/styles/global/_layout.scss +++ b/client/src/assets/styles/global/_layout.scss @@ -7,7 +7,8 @@ section, } .container { - max-width: 100%; + max-width: 700px; + margin: 0 auto; padding: 0 var(--side-spacing); } diff --git a/client/src/components/common/nav.jsx b/client/src/components/common/nav.jsx new file mode 100644 index 00000000..901b78ad --- /dev/null +++ b/client/src/components/common/nav.jsx @@ -0,0 +1,43 @@ +import { Link } from "react-router-dom"; +import PropTypes from "prop-types"; + +// icons +import { UserCircleIcon } from "@heroicons/react/24/outline"; +import { BellIcon } from "@heroicons/react/24/outline"; +// logo +import logo from "../../assets/images/logo.svg"; +// styles +import "../../assets/styles/components/Nav.scss"; + +export default function Nav(props) { + const { showIcons } = props; + + return ( + + ); +} + +Nav.propTypes = { + showIcons: PropTypes.bool.isRequired, +}; diff --git a/client/src/components/landingpage/LandingPage.jsx b/client/src/components/landingpage/LandingPage.jsx index 2eae1b7b..f0c006e6 100644 --- a/client/src/components/landingpage/LandingPage.jsx +++ b/client/src/components/landingpage/LandingPage.jsx @@ -1,8 +1,9 @@ -export default function LandingPage() -{ +import Nav from "../common/nav"; + +export default function LandingPage() { return ( <> -
Landing Page
+