(ui): refactor navbar styles

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,

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;
 

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>
     )
   }
 

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);
 }

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";