fix: SRS-686 & SRS-687 (#254)

* Fixing CSS Issues For SRS-688 * Setting Default Cart Value To Zero * Updated CSS style to refect in Figma * Fixing issues mentiond on tickets 686, 687 * Updated Table Headers Vertical Align To Baseline * CSS style changes * Sr Updates Filter * Updated border color * Updating header padding and background color * Updating border color
bcgov · Jan 13, 2025 · 3045922 · 3045922
1 parent 5f37d98
commit 3045922
Show file tree

Hide file tree

Showing 16 changed files with 139 additions and 44 deletions.
diff --git a/frontend/src/app/components/login/LoginDropdown.css b/frontend/src/app/components/login/LoginDropdown.css
@@ -8,6 +8,11 @@
   font-size: 16px;
   line-height: 22px;
 }
+
+#login-selector-dropdown-toggle:hover {
+  background-color: var(--surface-primary-hover);
+}
+
 #login-selector-dropdown-menu {
   /* width: 250px; */
 }

diff --git a/frontend/src/app/components/navigation/Header.css b/frontend/src/app/components/navigation/Header.css
@@ -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);
   /* 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-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 {
@@ -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;
@@ -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;
@@ -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;
   }
@@ -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);
+}
diff --git a/frontend/src/app/components/navigation/Header.tsx b/frontend/src/app/components/navigation/Header.tsx
@@ -47,13 +47,15 @@ const Header = () => {
         <a href="https://gov.bc.ca">
           <img src={logo} className="logo" alt="BC Government Logo" />
         </a>
-        <h1 className="siteName">SITE</h1>
+        <a href="/" className="no-link-style">
+          <h1 className="siteName">Site Remediation</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"
@@ -63,11 +65,11 @@ const Header = () => {
         >
           <BarsIcon className="bars-button" />
         </button>
-        <div className="d-sm-none d-md-flex d-none">
-          {/* Profile image */}
+
+        {/* <div className="d-sm-none d-md-flex d-none">       
           <img src={moon} alt="Moon image for theme." />
-        </div>
-        {user == null && LoginDropdown('Login')}
+        </div> */}
+        {user == null && LoginDropdown('Sign in')}
         {!isOpen && user !== null && <UserAccount mobileView={isOpen} />}
       </div>
       <div

diff --git a/frontend/src/app/components/navigation/SideBar.css b/frontend/src/app/components/navigation/SideBar.css
@@ -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;
 }
@@ -14,8 +14,8 @@
   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);
@@ -65,8 +65,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;
@@ -144,3 +143,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;
+}
diff --git a/frontend/src/app/components/navigation/SideBar.tsx b/frontend/src/app/components/navigation/SideBar.tsx
@@ -52,7 +52,7 @@ function SideBar() {
     const isCurrentPath = location.pathname === item.linkTo;
     const hasIcon = item.icon;
     const isCartLink = item.linkTo.includes('cart');
-    const displayCount = userCartItems.length > 0 ? userCartItems.length : '';
+    const displayCount = userCartItems.length > 0 ? userCartItems.length : '0';
 
     const linkContent = isCartLink ? displayCount : item.displayText;
     const isParentGroup: boolean = item.displayText && !item.icon;
@@ -62,7 +62,7 @@ function SideBar() {
         aria-label={item.displayText}
         aria-roledescription="menu"
         role={isParentGroup ? 'group' : 'menuitem'}
-        className={`sideBar-NavItem ${isCurrentPath && hasIcon ? 'currentPath' : ''}`}
+        className={`sideBar-NavItem ${isCurrentPath && hasIcon ? 'currentPath' : ''} ${isParentGroup === false ? 'sideBar-menu-item-hover' : ''}`}
         key={item.id} // Use a unique key based on the item id
       >
         <div className="d-flex align-items-center">
@@ -105,7 +105,7 @@ function SideBar() {
         {navList
           .filter((item: any) => !item.lowerSection)
           .map((item: any, index: number) => (
-            <React.Fragment key={item.id}>
+            <div className="sidebar-menu-group" key={item.id}>
               {' '}
               {/* Use item.id for a unique key */}
               {renderMenuOption(item, index + 1)}
@@ -117,15 +117,15 @@ function SideBar() {
                     {renderMenuOption(child, index + 1)}
                   </React.Fragment>
                 ))}
-            </React.Fragment>
+            </div>
           ))}
       </div>
 
       <div className="sideBar-Nav" role="menu">
         {navList
           .filter((item: any) => item.lowerSection)
           .map((item: any, index: number) => (
-            <React.Fragment key={item.id}>
+            <div className="sidebar-menu-group" key={item.id}>
               {' '}
               {/* Use item.id for a unique key */}
               {renderMenuOption(item, index + 1)}
@@ -137,7 +137,7 @@ function SideBar() {
                     {renderMenuOption(child, index + 1)}
                   </React.Fragment>
                 ))}
-            </React.Fragment>
+            </div>
           ))}
       </div>
     </div>

diff --git a/frontend/src/app/components/table/header/TableHeader.css b/frontend/src/app/components/table/header/TableHeader.css
@@ -15,8 +15,8 @@
   color: var(--typography-color-secondary);
   border-right: 1px solid #d8d8d8;
   border-left: 1px solid #d8d8d8;
-
   background: var(--surface-brand-gray-20) !important;
+  vertical-align: baseline;
 }
 
 .checkbox-column {

diff --git a/frontend/src/app/constants/Constant.ts b/frontend/src/app/constants/Constant.ts
@@ -1,9 +1,9 @@
 export const FOOTER_TEXT_1 =
-  'The B.C. Public Service acknowledges the territories of First Nations around B.C. and is grateful to carry out our work on these lands. We acknowledge the rights, interests, priorities, and concerns of all Indigenous Peoples - First Nations, Métis, and Inuit - respecting and acknowledging their distinct cultures, histories, rights, laws, and governments.';
+  'Have a question or need more help? Our support team is here to assist you. Send us an email or fill out our contact form, and we’ll get back to you as soon as possible.';
 export const FOOTER_TEXT_2 =
-  'We can help in over 120 languages and through Telephone Device For The Deaf (TDD). Call, email or text us, or find a service centre';
+  'Visit our Help Centre for step-by-step guides, FAQs and troubleshooting tips to help you use the app, find answers to your questions, or resolve issues.';
 export const INFO_TEXT_1 =
-  'Ea similique eum id illo et commodi. Itaque ducimus accusantium qui consequatur. Vitae nulla impedit laborum suscipit dolor ex at numquam. Optio rerum et enim impedit. Labore deserunt cupiditate deleniti.';
+  'Use the search bar at the top of the screen to find site information/information about a site. Results appear instantly when you enter a Site ID, address, or city. You can also use filters to narrow your search results.';
 
 // The positions of the map controls (zoom in/out etc)
 export const MAP_CONTROLS_RIGHT_XL = 64;

diff --git a/frontend/src/app/features/details/srUpdates/srUpdatesTableFilter.css b/frontend/src/app/features/details/srUpdates/srUpdatesTableFilter.css
@@ -0,0 +1,4 @@
+.filter-action-buttons {
+  display: flex;
+  gap: 16px;
+}
diff --git a/frontend/src/app/features/details/srUpdates/srUpdatesTableFilter.tsx b/frontend/src/app/features/details/srUpdates/srUpdatesTableFilter.tsx
@@ -11,6 +11,7 @@ import { useDispatch } from 'react-redux';
 import { fetchInternalUserNameForDropdown } from '../dropdowns/DropdownSlice';
 import SRUpdatesTableConfiguration from './srUpdatesTableConfiguration';
 import { Button } from '../../../components/button/Button';
+import './srUpdatesTableFilter.css';
 
 interface ISRUpdatesTableFilter {
   closeSection: () => void;
@@ -96,7 +97,7 @@ const SRUpdatesTableFilter: React.FC<ISRUpdatesTableFilter> = ({
             Reset Filters
           </Button>
         </div>
-        <div>
+        <div className="filter-action-buttons">
           <Button type="submit">Submit</Button>
           <Button
             variant="tertiary"

diff --git a/frontend/src/app/features/details/srUpdates/srUpdatesTables.css b/frontend/src/app/features/details/srUpdates/srUpdatesTables.css
@@ -0,0 +1,21 @@
+.not-public-btn {
+  background-color: var(--support-surface-color-danger, #f4e1e2) !important;
+  border: 1px solid var(--support-border-color-danger, #ce3e39) !important;
+}
+
+.approve-btn {
+  background-color: var(--support-surface-color-success, #f6fff8) !important;
+  border: 1px solid var(--support-border-color-success, #42814a) !important;
+}
+
+.approve-reject-btn {
+  padding: var(--layout-padding-small) var(--layout-padding-medium)
+    var(--layout-padding-small) var(--layout-padding-medium);
+  gap: var(--layout-margin-small);
+  border-radius: var(--layout-border-radius-medium);
+  border: 1px 0px 0px 0px;
+  display: flex;
+  background-color: var(--surface-secondary-disabled);
+  border: 1px solid var(--surface-secondary-disabled);
+  align-items: center;
+}
diff --git a/frontend/src/app/features/details/srUpdates/srUpdatesTables.tsx b/frontend/src/app/features/details/srUpdates/srUpdatesTables.tsx
@@ -26,6 +26,7 @@ import {
   fetchInternalUserNameForDropdown,
   getInternalUserNameForDropdown,
 } from '../dropdowns/DropdownSlice';
+import './srUpdatesTables.css';
 
 const SRUpdatesTables = () => {
   const [displayFilters, SetDisplayFilters] = useState(false);
@@ -225,7 +226,7 @@ const SRUpdatesTables = () => {
       )}
       <div className="search-result-actions">
         <div
-          className="search-result-actions-btn"
+          className={`approve-reject-btn ${selectedRows.length > 0 ? 'approve-btn ' : ''}`}
           onClick={() => {
             handleApprove();
           }}
@@ -235,7 +236,7 @@ const SRUpdatesTables = () => {
           <span>Approve</span>
         </div>
         <div
-          className="search-result-actions-btn"
+          className={`approve-reject-btn ${selectedRows.length > 0 ? 'not-public-btn' : ''}`}
           onClick={() => {
             rejectHandler();
           }}

diff --git a/frontend/src/app/features/site/Intro.css b/frontend/src/app/features/site/Intro.css
@@ -3,8 +3,6 @@
   gap: var(--layout-margin-xxlarge);
   border-radius: var(--surface-border-radius-medium);
   border: 1px;
-  background-color: var(--surface-color-border-light);
-  border: 1px solid var(--surface-color-border-light);
   box-shadow: 0px 3.2px 7.2px 0px #00000021;
   display: flex;
   flex-direction: column;

diff --git a/frontend/src/app/features/site/Intro.tsx b/frontend/src/app/features/site/Intro.tsx
@@ -7,7 +7,7 @@ const Intro = () => {
     <div data-testid="intro" className="intro">
       <div className="intro-heading">
         <span className="gold-bar">&nbsp;</span>
-        <span className="text">Introducing the New Site Registry</span>
+        <span className="text">Introducing the new Site Registry</span>
       </div>
       <div className="row">
         <div className="col-12 col-sm-12 col-md-4 mt-3">