diff --git a/react-ui/src/components/login/viewmodel/login.viewmodel.ts b/react-ui/src/components/login/viewmodel/login.viewmodel.ts index 60c39b55ab7efe77b90fe5c449504f1d1193e2e6..fabb0a8613cfee92f864beef15a998dda159238f 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 713e634814717755dc2f0fdca1343bc1e3c2844f..52429031b69b6ef664707c5397f67153c04b08f8 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 b1d70b823b2cf6dce87eefedebb9e5902cbf34e9..5dc56545596d9eb52b2099343049e217dd5339b7 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 934861a2bc12db2aee1490f0cfa40b342919d59d..418fe4af09f4297e6f88308c577b6493bc6c126c 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 d91ffb44e5fac78ba0bcd1acf5a9f49f3baf7b33..29c971f863a63613015ad8165fe0ba24278c3a16 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";