Skip to content

Commit

Permalink
Updated CSS to latest design & fixed design token issue
Browse files Browse the repository at this point in the history
  • Loading branch information
@midhun-aot
midhun-aot committed Jan 15, 2025
1 parent 0e20c16 commit c4ee42d
Show file tree
Hide file tree
Showing 6 changed files with 107 additions and 122 deletions.
18 changes: 8 additions & 10 deletions cats-frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import './App.css';
import Header from './app/components/navigation/Header';
import {
Outlet,
} from 'react-router-dom';
import '@bcgov/bc-sans/css/BCSans.css';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import SideBar from './app/components/navigation/SideBar';
import '@bcgov/bc-sans/css/BCSans.css';
import "./App.css";
import Header from "./app/components/navigation/Header";
import { Outlet } from "react-router-dom";
import "@bcgov/bc-sans/css/BCSans.css";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import SideBar from "./app/components/navigation/SideBar";
import "@bcgov/bc-sans/css/BCSans.css";

function App() {
// const routes:RouteObject[] = [
Expand Down
50 changes: 37 additions & 13 deletions cats-frontend/src/app/components/navigation/Header.css
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,29 @@
header {
background-color: #053662;
border-bottom: 2px solid #f8ba47;
/* background-color: #053662; */
border-bottom: 1px solid var(--surface-color-border-light, #d8d8d8);
/* padding: 0 65px 0 65px; */
padding: 10px var(--layout-padding-xlarge) 11px var(--layout-padding-xlarge) !important;
color: #fff;
padding: 0px var(--layout-padding-xlarge) 0px var(--layout-padding-xlarge) !important;
color: var(--typography-color-link);
display: flex;
height: 65px;
top: 0px;
width: 100%;
z-index: 99999 !important;
background-color: #ffffff;
}

.logo {
height: 41px;
height: 54px;
}

header h1 {
font-family: 'BCSans';
font-family: "BCSans";
font-weight: normal; /* 400 */
margin: 5px 5px 0 18px;
visibility: hidden;
font-size: 24px;
border-left: 1px solid var(--surface-color-border-light);
padding-left: 24px;
}

header .banner {
Expand All @@ -30,12 +34,12 @@ header .banner {
/* border-style: dotted;
border-width: 1px;
border-color: lightgrey; */
padding-left: 24px;
/* padding-left: 24px; */
}

header .siteName {
/* header .siteName {
margin-left: 24px;
}
} */

header .other {
display: flex;
Expand All @@ -62,7 +66,7 @@ header .other {
}

.bars-button {
color: var(--typography-color-primary-invert);
color: var(#2d2d2d);
font-size: 21px;
font-weight: 900;
line-height: 21px;
Expand All @@ -85,21 +89,29 @@ header .other {

@media screen and (max-width: 599px) {
header h1 {
display: none;
font-size: 24px;
visibility: visible;
display: flex;
padding-left: 12px;
margin: 0px;
}

.logo {
height: 44px;
}
}

@media screen and (min-width: 600px) and (max-width: 899px) {
header h1 {
font-size: calc(5px + 2vw);
font-size: 24px;
visibility: visible;
display: flex;
}
}

@media screen and (min-width: 900px) {
header h1 {
font-size: 2em;
font-size: 24px;
visibility: visible;
display: flex;
}
Expand Down Expand Up @@ -147,9 +159,21 @@ header .other {
.navbar-for-small-device {
display: flex;
flex-direction: column;
align-items: flex-start;
}

.header-right-corner-section {
gap: var(--layout-padding-small);
align-self: flex-end;
}
}

.custom-toggler {
border: 1px solid var(--surface-border-dark);
border-radius: 0px;
}

.no-link-style {
text-decoration: none !important;
color: var(--typography-color-link) !important;
}
48 changes: 25 additions & 23 deletions cats-frontend/src/app/components/navigation/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import logo from '../../../app/images/logos/logo-banner.png';
import "@bcgov/design-tokens/css/variables.css";
import logo from "../../../app/images/logos/logo-banner.png";

import './Header.css';
import moon from '../../images/moon.png';
import { BarsIcon } from '../common/icon';
import { useState } from 'react';
import MobileNavMenu from './MobileNavMenu';
import LanguageSwitcher from '../language/LanguageSwitcher';
import UserAccount from '../account/UserAccount';
import { LoginDropdown } from '../login/LoginDropdown';
import { getUser } from '../../helpers/utility';
import "./Header.css";
import moon from "../../images/moon.png";
import { BarsIcon } from "../common/icon";
import { useState } from "react";
import MobileNavMenu from "./MobileNavMenu";
import LanguageSwitcher from "../language/LanguageSwitcher";
import UserAccount from "../account/UserAccount";
import { LoginDropdown } from "../login/LoginDropdown";
import { getUser } from "../../helpers/utility";

const Header = () => {
const [isOpen, setIsOpen] = useState(false);
Expand All @@ -19,41 +20,42 @@ const Header = () => {
setIsOpen(!isOpen);
};



return (
<header className="navbar position-sticky navbar-for-small-device">
<div className="banner" tabIndex={1} role="navigation">
<a href="https://gov.bc.ca">
<img src={logo} className="logo" alt="BC Government Logo" />
</a>
<h1 className="siteName">CATS</h1>
<a href="/" className="no-link-style">
<h1 className="siteName">CATS </h1>
</a>
</div>
<div className="header-right-corner-section d-flex align-items-center">
<LanguageSwitcher />
{/* <LanguageSwitcher /> */}

<button
className="navbar-toggler display-upto-medium no-bg-br-outline"
className="navbar-toggler display-upto-medium no-bg-br-outline custom-toggler"
type="button"
onClick={toggleNavbar}
aria-label="menu for mobile/smaller devices"
aria-expanded={isOpen ? 'true' : 'false'}
aria-expanded={isOpen ? "true" : "false"}
aria-controls="navbarMenu"
aria-haspopup="true"
>
<BarsIcon className="bars-button" />
</button>
<div className="d-sm-none d-md-flex d-none">
{/* Profile image */}
<img src={moon} alt="Moon image for theme." />
</div>
{user == null && LoginDropdown('Login')}

{/* <div className="d-sm-none d-md-flex d-none">
<img src={moon} alt="Moon image for theme." />
</div> */}
{user == null && LoginDropdown("Sign in")}
{!isOpen && user !== null && <UserAccount mobileView={isOpen} />}
</div>
<div
role="menu"
className={`small-screen-menu mobile-menu ${isOpen ? 'show' : 'd-none'
}`}
className={`small-screen-menu mobile-menu ${
isOpen ? "show" : "d-none"
}`}
onClick={() => toggleNavbar()}
>
<MobileNavMenu toggleOpen={toggleNavbar} mobileView={isOpen} />
Expand Down
42 changes: 35 additions & 7 deletions cats-frontend/src/app/components/navigation/SideBar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
--side-bar-padding-medium: var(--layout-padding-medium);
--side-bar-background-color: #ffffff;
--side-bar-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13);
--current-path-background-color: #053662;
--current-path-background-color: var(--surface-primary-default);
--side-bar-text-color: var(--surface-primary-default);
--side-bar-text-hover-color: #ffffff;
}
Expand All @@ -14,17 +14,20 @@
background: var(--side-bar-background-color);
box-shadow: var(--side-bar-shadow);
top: 65px;
padding: var(--layout-padding-large) var(--layout-padding-medium)
var(--layout-padding-large) var(--layout-padding-medium);
padding: var(--layout-padding-large) var(--layout-padding-large)
var(--layout-padding-large) var(--layout-padding-large);
justify-content: space-between;
min-height: calc(100vh - 65px) !important;
border-right: 1px solid var(--surface-border-light, #d8d8d8);
min-width: 84px;
z-index: 9999;
max-width: 128px;
}

.side-bar:hover {
width: 160px;
z-index: 1000;
width: 240px;
position: sticky;
max-width: 240px;
}

.side-bar:hover .sideBar-Nav {
Expand Down Expand Up @@ -64,8 +67,7 @@
.sideBar-NavItem {
height: 40px;
padding: var(--layout-padding-small);
border-radius: var(--layout-padding-small);
cursor: pointer;
cursor: default;
display: flex;
align-items: center;
gap: 5px;
Expand Down Expand Up @@ -143,3 +145,29 @@
display: block;
text-decoration: none;
}

.sidebar-menu-group {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}

.side-bar:hover .sidebar-menu-group {
align-items: flex-start;
width: 100%;
}

.side-bar:hover .currentPath {
justify-content: flex-start;
}

.side-bar:hover .sideBar-menu-item-hover:hover {
background: var(--surface-primary-hover);
width: 100%;
}

.side-bar:hover .sideBar-menu-item-hover:hover .sideBar-Icon,
.side-bar:hover .sideBar-menu-item-hover:hover .sideBarDisplayText {
color: white !important;
}
71 changes: 2 additions & 69 deletions cats-frontend/src/app/components/navigation/navigationpills/NavigationPills.css
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,3 @@
.custom-nav-pill {
padding: var(--layout-padding-xsmall) var(--layout-padding-small)
var(--layout-padding-xsmall) var(--layout-padding-small);
border-radius: var(--surface-border-radius-medium);
font-size: 12px;
font-weight: 400;
line-height: 16px;
text-align: center;
text-decoration: none;
}

.custom-nav-pill.default:first-child {
background: var(--surface-primary-default, #053662);
color: var(--typography-color-primary-invert, #ffffff);
}

.custom-nav-pill.active {
background: var(--surface-primary-default, #053662);
color: var(--typography-color-primary-invert, #ffffff);
}

.custom-nav-pill.disabled {
color: var(--typography-color-disabled);
}

.custom-nav-pill.enabled {
color: var(--typography-color-primary, #2d2d2d) !important;
}

.custom-nav-btn {
display: flex !important;
justify-content: center;
align-items: center;
border: 1px solid var(--surface-border-dark, #353433) !important;
padding: var(--layout-padding-xsmall) var(--layout-padding-small)
var(--layout-padding-xsmall) var(--layout-padding-small) !important;
border-radius: var(--surface-border-radius-medium) !important;
gap: var(--layout-margin-xsmall);
background: var(--surface-background-white, #ffffff);
color: var(--typography-color-primary, #2d2d2d) !important;
text-align: center !important;
font-size: 12px !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 16px !important;
}

.custom-nav-carousel-left-icon {
background-image: url(../../../images/carousel-left-button.svg) !important;
padding: var(--layout-padding-xsmall) var(--layout-padding-small)
Expand All @@ -68,33 +21,13 @@

@media screen and (max-width: 786px) {
.custom-nav-btn {
display: flex !important;
justify-content: space-between;
align-items: center;
border: 1px solid var(--surface-border-dark, #353433) !important;
padding: var(--layout-padding-small) var(--layout-padding-medium)
var(--layout-padding-small) var(--layout-padding-medium) !important;
border-radius: var(--surface-border-radius-medium) !important;
gap: var(--layout-margin-small);
background: var(--surface-background-white, #ffffff);
color: var(--typography-color-primary, #2d2d2d) !important;
text-align: center !important;
font-size: 16px !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 24px !important;
width: 100%;
margin-bottom: 16px;
}
.custom-nav-pill {
padding: var(--layout-padding-small) var(--layout-padding-medium)
var(--layout-padding-small) var(--layout-padding-medium) !important;
border-radius: var(--surface-border-radius-medium);
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: center;
text-decoration: none;
width: 100%;
justify-content: center;
}

.custom-nav-carousel-left-icon {
Expand Down
Binary file modified cats-frontend/src/app/images/logos/logo-banner.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c4ee42d

Please sign in to comment.