From 5252cb3935bbbdad6c16f53ab78ba5f325151b49 Mon Sep 17 00:00:00 2001 From: Marcelo Lotif Date: Mon, 29 Apr 2024 12:10:48 -0400 Subject: [PATCH] Figure out static checks for TypeScript/Next.js portion of the app (#23) Adding: * next lint for catching JS errors, and adding it to the pre-commit hook and static code checks github action. * prettier for UI code format, and adding it to the pre-commit hook and static code checks github action * jest for testing, and adding it to the unit test github action * Adding one sample unit test for page.tsx * Adding instructions on how to run front-end tests * Adding autofix commit bots as per * Enable pre-commit ci and add default config aieng-template#10 * Adding unit test runs in pre-commit hooks * Deleting package-lock.json, we don't need it since we use yarn and it has yarn-lock.json. --- .eslintignore | 4 + .github/workflows/integration_tests.yaml | 9 + .github/workflows/static_code_checks.yaml | 3 + .github/workflows/unit_tests.yaml | 9 +- .pre-commit-config.yaml | 45 + .prettierignore | 2 + .prettierrc | 3 + CONTRIBUTING.md | 9 +- README.md | 4 +- florist/app/assets/css/nucleo-icons.css | 404 +- florist/app/assets/css/nucleo-svg.css | 80 +- florist/app/client_imports.tsx | 2 +- florist/app/layout.tsx | 41 +- florist/app/page.tsx | 4 +- florist/app/sidebar.tsx | 37 +- florist/tests/unit/app/page.test.tsx | 13 + jest.config.ts | 205 + package-lock.json | 7467 --------------------- package.json | 14 +- yarn.lock | 2307 ++++++- 20 files changed, 2906 insertions(+), 7756 deletions(-) create mode 100644 .eslintignore create mode 100644 .prettierignore create mode 100644 .prettierrc create mode 100644 florist/tests/unit/app/page.test.tsx create mode 100644 jest.config.ts delete mode 100644 package-lock.json diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..37c4af5 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,4 @@ +**/node_modules/** +**/.next/** +tsconfig.json +*.min.js diff --git a/.github/workflows/integration_tests.yaml b/.github/workflows/integration_tests.yaml index 181274a..304a4d6 100644 --- a/.github/workflows/integration_tests.yaml +++ b/.github/workflows/integration_tests.yaml @@ -56,6 +56,15 @@ jobs: source $(poetry env info --path)/bin/activate poetry install --with docs,test coverage run -m pytest florist/tests/integration && coverage xml && coverage report -m + + # TODO enable this once we have intergation tests for the UI +# - name: Setup yarn +# uses: mskelton/setup-yarn@v1 +# - name: Install nextjs dependencies and check code +# run: | +# yarn +# yarn integration-test + # - name: Upload coverage to Codecov # uses: Wandalen/wretry.action@v1.4.4 # with: diff --git a/.github/workflows/static_code_checks.yaml b/.github/workflows/static_code_checks.yaml index a556550..76a6544 100644 --- a/.github/workflows/static_code_checks.yaml +++ b/.github/workflows/static_code_checks.yaml @@ -36,8 +36,11 @@ jobs: with: python-version: '3.9' cache: 'poetry' + - name: Setup yarn + uses: mskelton/setup-yarn@v1 - name: Install dependencies and check code run: | + yarn poetry env use '3.9' source .venv/bin/activate poetry install --with test --all-extras diff --git a/.github/workflows/unit_tests.yaml b/.github/workflows/unit_tests.yaml index cfe6b1d..b5b39dc 100644 --- a/.github/workflows/unit_tests.yaml +++ b/.github/workflows/unit_tests.yaml @@ -42,12 +42,19 @@ jobs: - uses: actions/setup-python@v5.0.0 with: python-version: '3.9' - - name: Install dependencies and check code + cache: 'poetry' + - name: Install python dependencies and check code run: | poetry env use '3.9' source $(poetry env info --path)/bin/activate poetry install --with docs,test coverage run -m pytest florist/tests/unit && coverage xml && coverage report -m + - name: Setup yarn + uses: mskelton/setup-yarn@v1 + - name: Install nextjs dependencies and check code + run: | + yarn + yarn unit-test # - name: Upload coverage to Codecov # uses: Wandalen/wretry.action@v1.4.4 # with: diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index c577a37..256575f 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -39,6 +39,22 @@ repos: - id: nbqa-ruff args: [--fix, --exit-non-zero-on-fix] + - repo: local + hooks: + - id: nextjs-lint + name: nextjs-lint + entry: yarn lint-gh-action florist + files: "florist/app" + language: system + + - repo: local + hooks: + - id: prettier-js-format + name: prettier-js-format + entry: yarn prettier + files: "florist/app" + language: system + - repo: local hooks: - id: doctest @@ -46,3 +62,32 @@ repos: entry: python3 -m doctest -o NORMALIZE_WHITESPACE files: "(^florist/api/|florist/tests/api/)" language: system + + - repo: local + hooks: + - id: pytest-unit + name: pytest-unit + entry: python -m pytest florist/tests/unit + language: system + pass_filenames: false + always_run: true + + - repo: local + hooks: + - id: nextjs-unit + name: nextjs-unit + entry: yarn unit-test + language: system + pass_filenames: false + always_run: true + +ci: + autofix_commit_msg: | + [pre-commit.ci] Add auto fixes from pre-commit.com hooks + for more information, see https://pre-commit.ci + autofix_prs: true + autoupdate_branch: '' + autoupdate_commit_msg: '[pre-commit.ci] pre-commit autoupdate' + autoupdate_schedule: weekly + skip: [pytest-unit,nextjs-unit,doctest,mypy,nextjs-lint] + submodules: false diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..170dfa0 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ +florist/app/assets/css/material-dashboard.css +*.min.js diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..0a02bce --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "tabWidth": 4 +} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 5e62982..bdc62ef 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -37,7 +37,7 @@ using [Homebrew](https://brew.sh/): brew install yarn ``` -Then install the project dependencies: +Then install the project dependencies in development mode: ```shell yarn ``` @@ -55,11 +55,16 @@ yarn dev ## Running the tests -To run the unit tests, simply execute: +To run the python unit tests, simply execute: ```shell pytest florist/tests/unit ``` +To run the nextjs unit tests, simply execute: +```shell +yarn unit-test +``` + To run the integration tests, first make sure you: - Have a Redis server running on your local machine on port 6379 by following [these instructions](README.md#start-servers-redis-instance). - Have a MongoDB server running on your local machine on port 27017 by following [these instructions](README.md#start-mongodbs-instance). diff --git a/README.md b/README.md index c2c6f40..eb08da5 100644 --- a/README.md +++ b/README.md @@ -30,9 +30,9 @@ using [Homebrew](https://brew.sh/): brew install yarn ``` -Then install the project dependencies: +Then install the project dependencies in production mode: ```shell -yarn +yarn --prod ``` ### Pulling Redis' Docker diff --git a/florist/app/assets/css/nucleo-icons.css b/florist/app/assets/css/nucleo-icons.css index b040a79..5fb7b5a 100644 --- a/florist/app/assets/css/nucleo-icons.css +++ b/florist/app/assets/css/nucleo-icons.css @@ -5,48 +5,53 @@ License - nucleoapp.com/license/ -------------------------------- */ @font-face { - font-family: 'NucleoIcons'; - src: url('../fonts/nucleo-icons.eot'); - src: url('../fonts/nucleo-icons.eot') format('embedded-opentype'), url('../fonts/nucleo-icons.woff2') format('woff2'), url('../fonts/nucleo-icons.woff') format('woff'), url('../fonts/nucleo-icons.ttf') format('truetype'), url('../fonts/nucleo-icons.svg') format('svg'); - font-weight: normal; - font-style: normal; + font-family: "NucleoIcons"; + src: url("../fonts/nucleo-icons.eot"); + src: + url("../fonts/nucleo-icons.eot") format("embedded-opentype"), + url("../fonts/nucleo-icons.woff2") format("woff2"), + url("../fonts/nucleo-icons.woff") format("woff"), + url("../fonts/nucleo-icons.ttf") format("truetype"), + url("../fonts/nucleo-icons.svg") format("svg"); + font-weight: normal; + font-style: normal; } /*------------------------ base class definition -------------------------*/ .ni { - display: inline-block; - font: normal normal normal 14px/1 NucleoIcons; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + display: inline-block; + font: normal normal normal 14px/1 NucleoIcons; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } /*------------------------ change icon size -------------------------*/ .ni-lg { - font-size: 1.33333333em; - line-height: 0.75em; - vertical-align: -15%; + font-size: 1.33333333em; + line-height: 0.75em; + vertical-align: -15%; } .ni-2x { - font-size: 2em; + font-size: 2em; } .ni-3x { - font-size: 3em; + font-size: 3em; } .ni-4x { - font-size: 4em; + font-size: 4em; } .ni-5x { - font-size: 5em; + font-size: 5em; } /*---------------------------------- @@ -54,139 +59,139 @@ License - nucleoapp.com/license/ -----------------------------------*/ .ni.square, .ni.circle { - padding: 0.33333333em; - vertical-align: -16%; - background-color: #eee; + padding: 0.33333333em; + vertical-align: -16%; + background-color: #eee; } .ni.circle { - border-radius: 50%; + border-radius: 50%; } /*------------------------ list icons -------------------------*/ .ni-ul { - padding-left: 0; - margin-left: 2.14285714em; - list-style-type: none; + padding-left: 0; + margin-left: 2.14285714em; + list-style-type: none; } -.ni-ul>li { - position: relative; +.ni-ul > li { + position: relative; } -.ni-ul>li>.ni { - position: absolute; - left: -1.57142857em; - top: 0.14285714em; - text-align: center; +.ni-ul > li > .ni { + position: absolute; + left: -1.57142857em; + top: 0.14285714em; + text-align: center; } -.ni-ul>li>.ni.lg { - top: 0; - left: -1.35714286em; +.ni-ul > li > .ni.lg { + top: 0; + left: -1.35714286em; } -.ni-ul>li>.ni.circle, -.ni-ul>li>.ni.square { - top: -0.19047619em; - left: -1.9047619em; +.ni-ul > li > .ni.circle, +.ni-ul > li > .ni.square { + top: -0.19047619em; + left: -1.9047619em; } /*------------------------ spinning icons -------------------------*/ .ni.spin { - -webkit-animation: nc-spin 2s infinite linear; - -moz-animation: nc-spin 2s infinite linear; - animation: nc-spin 2s infinite linear; + -webkit-animation: nc-spin 2s infinite linear; + -moz-animation: nc-spin 2s infinite linear; + animation: nc-spin 2s infinite linear; } @-webkit-keyframes nc-spin { - 0% { - -webkit-transform: rotate(0deg); - } + 0% { + -webkit-transform: rotate(0deg); + } - 100% { - -webkit-transform: rotate(360deg); - } + 100% { + -webkit-transform: rotate(360deg); + } } @-moz-keyframes nc-spin { - 0% { - -moz-transform: rotate(0deg); - } + 0% { + -moz-transform: rotate(0deg); + } - 100% { - -moz-transform: rotate(360deg); - } + 100% { + -moz-transform: rotate(360deg); + } } @keyframes nc-spin { - 0% { - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - -o-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(360deg); - -moz-transform: rotate(360deg); - -ms-transform: rotate(360deg); - -o-transform: rotate(360deg); - transform: rotate(360deg); - } + 0% { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -ms-transform: rotate(360deg); + -o-transform: rotate(360deg); + transform: rotate(360deg); + } } /*------------------------ rotated/flipped icons -------------------------*/ .ni.rotate-90 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); - -webkit-transform: rotate(90deg); - -moz-transform: rotate(90deg); - -ms-transform: rotate(90deg); - -o-transform: rotate(90deg); - transform: rotate(90deg); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -ms-transform: rotate(90deg); + -o-transform: rotate(90deg); + transform: rotate(90deg); } .ni.rotate-180 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - -ms-transform: rotate(180deg); - -o-transform: rotate(180deg); - transform: rotate(180deg); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -ms-transform: rotate(180deg); + -o-transform: rotate(180deg); + transform: rotate(180deg); } .ni.rotate-270 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); - -webkit-transform: rotate(270deg); - -moz-transform: rotate(270deg); - -ms-transform: rotate(270deg); - -o-transform: rotate(270deg); - transform: rotate(270deg); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); + -webkit-transform: rotate(270deg); + -moz-transform: rotate(270deg); + -ms-transform: rotate(270deg); + -o-transform: rotate(270deg); + transform: rotate(270deg); } .ni.flip-y { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); - -webkit-transform: scale(-1, 1); - -moz-transform: scale(-1, 1); - -ms-transform: scale(-1, 1); - -o-transform: scale(-1, 1); - transform: scale(-1, 1); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); + -webkit-transform: scale(-1, 1); + -moz-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + -o-transform: scale(-1, 1); + transform: scale(-1, 1); } .ni.flip-x { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); - -webkit-transform: scale(1, -1); - -moz-transform: scale(1, -1); - -ms-transform: scale(1, -1); - -o-transform: scale(1, -1); - transform: scale(1, -1); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); + -webkit-transform: scale(1, -1); + -moz-transform: scale(1, -1); + -ms-transform: scale(1, -1); + -o-transform: scale(1, -1); + transform: scale(1, -1); } /*------------------------ @@ -194,404 +199,403 @@ License - nucleoapp.com/license/ -------------------------*/ .ni-active-40::before { - content: "\ea02"; + content: "\ea02"; } .ni-air-baloon::before { - content: "\ea03"; + content: "\ea03"; } .ni-album-2::before { - content: "\ea04"; + content: "\ea04"; } .ni-align-center::before { - content: "\ea05"; + content: "\ea05"; } .ni-align-left-2::before { - content: "\ea06"; + content: "\ea06"; } .ni-ambulance::before { - content: "\ea07"; + content: "\ea07"; } .ni-app::before { - content: "\ea08"; + content: "\ea08"; } .ni-archive-2::before { - content: "\ea09"; + content: "\ea09"; } .ni-atom::before { - content: "\ea0a"; + content: "\ea0a"; } .ni-badge::before { - content: "\ea0b"; + content: "\ea0b"; } .ni-bag-17::before { - content: "\ea0c"; + content: "\ea0c"; } .ni-basket::before { - content: "\ea0d"; + content: "\ea0d"; } .ni-bell-55::before { - content: "\ea0e"; + content: "\ea0e"; } .ni-bold-down::before { - content: "\ea0f"; + content: "\ea0f"; } .ni-bold-left::before { - content: "\ea10"; + content: "\ea10"; } .ni-bold-right::before { - content: "\ea11"; + content: "\ea11"; } .ni-bold-up::before { - content: "\ea12"; + content: "\ea12"; } .ni-bold::before { - content: "\ea13"; + content: "\ea13"; } .ni-book-bookmark::before { - content: "\ea14"; + content: "\ea14"; } .ni-books::before { - content: "\ea15"; + content: "\ea15"; } .ni-box-2::before { - content: "\ea16"; + content: "\ea16"; } .ni-briefcase-24::before { - content: "\ea17"; + content: "\ea17"; } .ni-building::before { - content: "\ea18"; + content: "\ea18"; } .ni-bulb-61::before { - content: "\ea19"; + content: "\ea19"; } .ni-bullet-list-67::before { - content: "\ea1a"; + content: "\ea1a"; } .ni-bus-front-12::before { - content: "\ea1b"; + content: "\ea1b"; } .ni-button-pause::before { - content: "\ea1c"; + content: "\ea1c"; } .ni-button-play::before { - content: "\ea1d"; + content: "\ea1d"; } .ni-button-power::before { - content: "\ea1e"; + content: "\ea1e"; } .ni-calendar-grid-58::before { - content: "\ea1f"; + content: "\ea1f"; } .ni-camera-compact::before { - content: "\ea20"; + content: "\ea20"; } .ni-caps-small::before { - content: "\ea21"; + content: "\ea21"; } .ni-cart::before { - content: "\ea22"; + content: "\ea22"; } .ni-chart-bar-32::before { - content: "\ea23"; + content: "\ea23"; } .ni-chart-pie-35::before { - content: "\ea24"; + content: "\ea24"; } .ni-chat-round::before { - content: "\ea25"; + content: "\ea25"; } .ni-check-bold::before { - content: "\ea26"; + content: "\ea26"; } .ni-circle-08::before { - content: "\ea27"; + content: "\ea27"; } .ni-cloud-download-95::before { - content: "\ea28"; + content: "\ea28"; } .ni-cloud-upload-96::before { - content: "\ea29"; + content: "\ea29"; } .ni-compass-04::before { - content: "\ea2a"; + content: "\ea2a"; } .ni-controller::before { - content: "\ea2b"; + content: "\ea2b"; } .ni-credit-card::before { - content: "\ea2c"; + content: "\ea2c"; } .ni-curved-next::before { - content: "\ea2d"; + content: "\ea2d"; } .ni-delivery-fast::before { - content: "\ea2e"; + content: "\ea2e"; } .ni-diamond::before { - content: "\ea2f"; + content: "\ea2f"; } .ni-email-83::before { - content: "\ea30"; + content: "\ea30"; } .ni-fat-add::before { - content: "\ea31"; + content: "\ea31"; } .ni-fat-delete::before { - content: "\ea32"; + content: "\ea32"; } .ni-fat-remove::before { - content: "\ea33"; + content: "\ea33"; } .ni-favourite-28::before { - content: "\ea34"; + content: "\ea34"; } .ni-folder-17::before { - content: "\ea35"; + content: "\ea35"; } .ni-glasses-2::before { - content: "\ea36"; + content: "\ea36"; } .ni-hat-3::before { - content: "\ea37"; + content: "\ea37"; } .ni-headphones::before { - content: "\ea38"; + content: "\ea38"; } .ni-html5::before { - content: "\ea39"; + content: "\ea39"; } .ni-istanbul::before { - content: "\ea3a"; + content: "\ea3a"; } .ni-key-25::before { - content: "\ea3b"; + content: "\ea3b"; } .ni-laptop::before { - content: "\ea3c"; + content: "\ea3c"; } .ni-like-2::before { - content: "\ea3d"; + content: "\ea3d"; } .ni-lock-circle-open::before { - content: "\ea3e"; + content: "\ea3e"; } .ni-map-big::before { - content: "\ea3f"; + content: "\ea3f"; } .ni-mobile-button::before { - content: "\ea40"; + content: "\ea40"; } .ni-money-coins::before { - content: "\ea41"; + content: "\ea41"; } .ni-note-03::before { - content: "\ea42"; + content: "\ea42"; } .ni-notification-70::before { - content: "\ea43"; + content: "\ea43"; } .ni-palette::before { - content: "\ea44"; + content: "\ea44"; } .ni-paper-diploma::before { - content: "\ea45"; + content: "\ea45"; } .ni-pin-3::before { - content: "\ea46"; + content: "\ea46"; } .ni-planet::before { - content: "\ea47"; + content: "\ea47"; } .ni-ruler-pencil::before { - content: "\ea48"; + content: "\ea48"; } .ni-satisfied::before { - content: "\ea49"; + content: "\ea49"; } .ni-scissors::before { - content: "\ea4a"; + content: "\ea4a"; } .ni-send::before { - content: "\ea4b"; + content: "\ea4b"; } .ni-settings-gear-65::before { - content: "\ea4c"; + content: "\ea4c"; } .ni-settings::before { - content: "\ea4d"; + content: "\ea4d"; } .ni-single-02::before { - content: "\ea4e"; + content: "\ea4e"; } .ni-single-copy-04::before { - content: "\ea4f"; + content: "\ea4f"; } .ni-sound-wave::before { - content: "\ea50"; + content: "\ea50"; } .ni-spaceship::before { - content: "\ea51"; + content: "\ea51"; } .ni-square-pin::before { - content: "\ea52"; + content: "\ea52"; } .ni-support-16::before { - content: "\ea53"; + content: "\ea53"; } .ni-tablet-button::before { - content: "\ea54"; + content: "\ea54"; } .ni-tag::before { - content: "\ea55"; + content: "\ea55"; } .ni-tie-bow::before { - content: "\ea56"; + content: "\ea56"; } .ni-time-alarm::before { - content: "\ea57"; + content: "\ea57"; } .ni-trophy::before { - content: "\ea58"; + content: "\ea58"; } .ni-tv-2::before { - content: "\ea59"; + content: "\ea59"; } .ni-umbrella-13::before { - content: "\ea5a"; + content: "\ea5a"; } .ni-user-run::before { - content: "\ea5b"; + content: "\ea5b"; } .ni-vector::before { - content: "\ea5c"; + content: "\ea5c"; } .ni-watch-time::before { - content: "\ea5d"; + content: "\ea5d"; } .ni-world::before { - content: "\ea5e"; + content: "\ea5e"; } .ni-zoom-split-in::before { - content: "\ea5f"; + content: "\ea5f"; } .ni-collection::before { - content: "\ea60"; + content: "\ea60"; } .ni-image::before { - content: "\ea61"; + content: "\ea61"; } .ni-shop::before { - content: "\ea62"; + content: "\ea62"; } .ni-ungroup::before { - content: "\ea63"; + content: "\ea63"; } .ni-world-2::before { - content: "\ea64"; + content: "\ea64"; } .ni-ui-04::before { - content: "\ea65"; + content: "\ea65"; } - /* all icon font classes list here */ diff --git a/florist/app/assets/css/nucleo-svg.css b/florist/app/assets/css/nucleo-svg.css index 4b397a7..17f9189 100644 --- a/florist/app/assets/css/nucleo-svg.css +++ b/florist/app/assets/css/nucleo-svg.css @@ -6,21 +6,21 @@ Icon colors -------------------------------- */ .icon { - display: inline-block; - /* icon primary color */ - color: #111111; - height: 1em; - width: 1em; + display: inline-block; + /* icon primary color */ + color: #111111; + height: 1em; + width: 1em; } .icon use { - /* icon secondary color - fill */ - fill: #7ea6f6; + /* icon secondary color - fill */ + fill: #7ea6f6; } .icon.icon-outline use { - /* icon secondary color - stroke */ - stroke: #7ea6f6; + /* icon secondary color - stroke */ + stroke: #7ea6f6; } /* -------------------------------- @@ -30,23 +30,23 @@ Change icon size -------------------------------- */ .icon-xs { - height: 0.5em; - width: 0.5em; + height: 0.5em; + width: 0.5em; } .icon-sm { - height: 0.8em; - width: 0.8em; + height: 0.8em; + width: 0.8em; } .icon-lg { - height: 1.6em; - width: 1.6em; + height: 1.6em; + width: 1.6em; } .icon-xl { - height: 2em; - width: 2em; + height: 2em; + width: 2em; } /* -------------------------------- @@ -56,23 +56,23 @@ Align icon and text -------------------------------- */ .icon-text-aligner { - /* add this class to parent element that contains icon + text */ - display: flex; - align-items: center; + /* add this class to parent element that contains icon + text */ + display: flex; + align-items: center; } .icon-text-aligner .icon { - color: inherit; - margin-right: 0.4em; + color: inherit; + margin-right: 0.4em; } .icon-text-aligner .icon use { - color: inherit; - fill: currentColor; + color: inherit; + fill: currentColor; } .icon-text-aligner .icon.icon-outline use { - stroke: currentColor; + stroke: currentColor; } /* -------------------------------- @@ -82,21 +82,21 @@ Icon reset values - used to enable color customizations -------------------------------- */ .icon { - fill: currentColor; - stroke: none; + fill: currentColor; + stroke: none; } .icon.icon-outline { - fill: none; - stroke: currentColor; + fill: none; + stroke: currentColor; } .icon use { - stroke: none; + stroke: none; } .icon.icon-outline use { - fill: none; + fill: none; } /* -------------------------------- @@ -110,26 +110,26 @@ Stroke effects - Nucleo outline icons -------------------------------- */ .icon-outline.icon-stroke-1 { - stroke-width: 1px; + stroke-width: 1px; } .icon-outline.icon-stroke-2 { - stroke-width: 2px; + stroke-width: 2px; } .icon-outline.icon-stroke-3 { - stroke-width: 3px; + stroke-width: 3px; } .icon-outline.icon-stroke-4 { - stroke-width: 4px; + stroke-width: 4px; } .icon-outline.icon-stroke-1 use, .icon-outline.icon-stroke-3 use { - -webkit-transform: translateX(0.5px) translateY(0.5px); - -moz-transform: translateX(0.5px) translateY(0.5px); - -ms-transform: translateX(0.5px) translateY(0.5px); - -o-transform: translateX(0.5px) translateY(0.5px); - transform: translateX(0.5px) translateY(0.5px); + -webkit-transform: translateX(0.5px) translateY(0.5px); + -moz-transform: translateX(0.5px) translateY(0.5px); + -ms-transform: translateX(0.5px) translateY(0.5px); + -o-transform: translateX(0.5px) translateY(0.5px); + transform: translateX(0.5px) translateY(0.5px); } diff --git a/florist/app/client_imports.tsx b/florist/app/client_imports.tsx index 18d2f93..f592349 100644 --- a/florist/app/client_imports.tsx +++ b/florist/app/client_imports.tsx @@ -1,4 +1,4 @@ -"use client" +"use client"; import { useEffect } from "react"; diff --git a/florist/app/layout.tsx b/florist/app/layout.tsx index 5bbbd84..8efaede 100644 --- a/florist/app/layout.tsx +++ b/florist/app/layout.tsx @@ -8,28 +8,37 @@ import Script from "next/script"; import { useEffect } from "react"; import Sidebar from "./sidebar"; -import ClientImports from './client_imports'; +import ClientImports from "./client_imports"; export const metadata: Metadata = { - title: "Florist", + title: "Florist", }; export default function RootLayout({ children, }: { - children: React.ReactNode + children: React.ReactNode; }): ReactElement { return ( {/* Fonts and icons */} - + {/* Font Awesome Icons */}