From 3182bc05a4131fe9248a6074517159caa9c3a2af Mon Sep 17 00:00:00 2001
From: Matthias Feyll <matthias.feyll@stud.h-da.de>
Date: Fri, 10 Jan 2025 10:38:32 +0100
Subject: [PATCH] (ui): refactor navbar styles
---
.../login/viewmodel/login.viewmodel.ts | 6 +--
.../protected.layout/protected.layout.scss | 15 +++---
.../protected.layout/protected.layout.tsx | 50 +++++++++++--------
react-ui/src/shared/style/box.scss | 4 +-
react-ui/src/shared/style/colors.scss | 2 +
5 files changed, 42 insertions(+), 35 deletions(-)
diff --git a/react-ui/src/components/login/viewmodel/login.viewmodel.ts b/react-ui/src/components/login/viewmodel/login.viewmodel.ts
index 60c39b55a..fabb0a861 100755
--- a/react-ui/src/components/login/viewmodel/login.viewmodel.ts
+++ b/react-ui/src/components/login/viewmodel/login.viewmodel.ts
@@ -7,9 +7,9 @@ export interface PageLoginState {
}
export default function useLoginViewModel() {
- const {login, loginProperties} = useAuth();
- const {isLoading: loginLoading, error: loginError, reset: resetLogin} = loginProperties!;
-
+ const { login, loginProperties } = useAuth();
+ const { isLoading: loginLoading, error: loginError, reset: resetLogin } = loginProperties;
+
const [localFormState, updateLocalFormState] = useState({
submitted: false,
valid: false,
diff --git a/react-ui/src/shared/layouts/protected.layout/protected.layout.scss b/react-ui/src/shared/layouts/protected.layout/protected.layout.scss
index 713e63481..52429031b 100755
--- a/react-ui/src/shared/layouts/protected.layout/protected.layout.scss
+++ b/react-ui/src/shared/layouts/protected.layout/protected.layout.scss
@@ -8,7 +8,6 @@
&:hover {
color: map-get($theme-colors, primary);
- font-weight: 600;
}
&.active {
@@ -17,12 +16,14 @@
}
}
+#navbar {
+ padding: 1em !important;
+}
+
// Add these styles to your protected.layout.scss
nav {
- border-radius: 0 0 $border-radius $border-radius;
- box-shadow:
- 0px 4px 8px mix(map-get($theme-colors, "primary"), map-get($theme-colors, "dark"), 35%),
- 0px 2px 4px mix(map-get($theme-colors, "primary"), map-get($theme-colors, "dark"), 20%);
+ border-radius: $border-radius $border-radius;
+ padding: 0 !important;
.head-links {
text-decoration: none;
@@ -44,9 +45,7 @@ nav {
.dropdown-menu {
border-radius: $border-radius;
- box-shadow:
- 0px 4px 8px mix(map-get($theme-colors, "primary"), map-get($theme-colors, "dark"), 35%),
- 0px 2px 4px mix(map-get($theme-colors, "primary"), map-get($theme-colors, "dark"), 20%);
+ box-shadow: $box-shadow;
border: none;
padding: 8px;
diff --git a/react-ui/src/shared/layouts/protected.layout/protected.layout.tsx b/react-ui/src/shared/layouts/protected.layout/protected.layout.tsx
index b1d70b823..5dc565455 100755
--- a/react-ui/src/shared/layouts/protected.layout/protected.layout.tsx
+++ b/react-ui/src/shared/layouts/protected.layout/protected.layout.tsx
@@ -6,7 +6,7 @@ import { MenuProvider } from '@provider/menu/menu.provider';
import { DEVICE_URL, LOGIN_URL } from '@routes';
import { fetchPnds, fetchUser } from '@shared/routine/user.routine';
import React, { useEffect } from "react";
-import { Dropdown } from "react-bootstrap";
+import { Col, Container, Dropdown, Row } from "react-bootstrap";
import { useTranslation } from "react-i18next";
import { Link, Outlet, useNavigate } from "react-router-dom";
import "./protected.layout.scss";
@@ -71,29 +71,35 @@ export const ProtectedLayout = () => {
const HorizontalNavbar = () => {
return (
- <nav className="bg-white border-bottom border-dark py-2 d-flex align-items-center z-3 position-relative">
- <Link to="/"><img src={logo} className="mx-4 me-5" width={25} alt="logo" /></Link>
- <Link className={"head-links" + handleActiveLink(DEVICE_URL)} to="/">{t('protected.link.device_list')}</Link>
- <Link className={"head-links" + handleActiveLink('/map')} to="/">{t('protected.link.map')}</Link>
- <Link className={"head-links" + handleActiveLink('/configuration_management')} to="/">{t('protected.link.configuration_mgmt')}</Link>
+ <Container fluid>
+ <Row>
+ <Col>
+ <nav id="navbar" className="bg-white mx-4 mt-4 d-flex align-items-center c-box">
+ <Link to="/"><img src={logo} className="mx-4" width={45} alt="logo" /></Link>
+ <Link className={"head-links" + handleActiveLink(DEVICE_URL)} to="/">{t('protected.link.device_list')}</Link>
+ <Link className={"head-links" + handleActiveLink('/map')} to="/">{t('protected.link.map')}</Link>
+ <Link className={"head-links" + handleActiveLink('/configuration_management')} to="/">{t('protected.link.configuration_mgmt')}</Link>
- <Dropdown className="ms-auto px-3">
- <Dropdown.Toggle as={UserIconToggle}>
- <FontAwesomeIcon icon={faCircleUser} className="clickable" size="2x" />
- </Dropdown.Toggle>
+ <Dropdown className="ms-auto px-3">
+ <Dropdown.Toggle as={UserIconToggle}>
+ <FontAwesomeIcon icon={faCircleUser} className="clickable" size="2x" />
+ </Dropdown.Toggle>
- <Dropdown.Menu as={UserIconMenu}>
- <Dropdown.Item eventKey="1">{user?.name}</Dropdown.Item>
- <hr />
- <Dropdown.Item eventKey="2">
- <Link className="text-decoration-none text-reset" to="/">{t('protected.link.settings')}</Link>
- </Dropdown.Item>
- <Dropdown.Item eventKey="3" onClick={logout}>
- <Link className="text-decoration-none text-reset" to="/"><FontAwesomeIcon className="clickable" icon={faRightFromBracket} />{t('protected.link.settings')}</Link>
- </Dropdown.Item>
- </Dropdown.Menu>
- </Dropdown>
- </nav>
+ <Dropdown.Menu as={UserIconMenu}>
+ <Dropdown.Item eventKey="1">{user?.name}</Dropdown.Item>
+ <hr />
+ <Dropdown.Item eventKey="2">
+ <Link className="text-decoration-none text-reset" to="/">{t('protected.link.settings')}</Link>
+ </Dropdown.Item>
+ <Dropdown.Item eventKey="3" onClick={logout}>
+ <Link className="text-decoration-none text-reset" to="/"><FontAwesomeIcon className="clickable" icon={faRightFromBracket} /><span className="ms-1">{t('global.menu_item.logout')}</span></Link>
+ </Dropdown.Item>
+ </Dropdown.Menu>
+ </Dropdown>
+ </nav>
+ </Col>
+ </Row>
+ </Container>
)
}
diff --git a/react-ui/src/shared/style/box.scss b/react-ui/src/shared/style/box.scss
index 934861a2b..418fe4af0 100755
--- a/react-ui/src/shared/style/box.scss
+++ b/react-ui/src/shared/style/box.scss
@@ -20,11 +20,11 @@ $border-width: 2px;
border-box;
border: $border-width solid transparent;
- box-shadow: 0px 1px 2px rgba(map-get($theme-colors, "dark"), 0.12);
+ box-shadow: $box-shadow;
}
.abstract-box {
- padding: 16px $box-padding;
+ padding: $box-padding;
font-size: 0.9em;
border-radius: calc($border-radius / 2);
}
diff --git a/react-ui/src/shared/style/colors.scss b/react-ui/src/shared/style/colors.scss
index d91ffb44e..29c971f86 100755
--- a/react-ui/src/shared/style/colors.scss
+++ b/react-ui/src/shared/style/colors.scss
@@ -8,4 +8,6 @@ $theme-colors: (
"black": #000000
);
+$box-shadow: 0px 4px 8px rgba(map-get($theme-colors, "primary"), 0.2);
+
@import "/node_modules/bootstrap/scss/bootstrap";
--
GitLab