Merge pull request #1232 from CBIIT/bugfix/ICDC-3788

Restore Search Input styles
CBIIT · Dec 10, 2024 · 7369bbe · 7369bbe
2 parents 0b26d90 + dedecac
commit 7369bbe
Show file tree

Hide file tree

Showing 6 changed files with 172 additions and 413 deletions.
diff --git a/src/components/NavBar/NavBarThemeConfig.jsx b/src/components/NavBar/NavBarThemeConfig.jsx
@@ -1,21 +1,22 @@
-import React from "react";
-import { MuiThemeProvider, createTheme } from "@material-ui/core/styles";
-import themes, { overrides } from "../../themes";
+import React from 'react';
+import { MuiThemeProvider, createTheme } from '@material-ui/core/styles';
+import themes, { overrides } from '../../themes';
 
 const NavBarThemeProvider = ({ children }) => {
   const style = [];
   const overridesObj = themes.light.overrides;
   const MuiButton = {
     root: {
-      "&#button_navbar_mycases": {
-        marginRight: "-16px",
+      '&#button_navbar_mycases': {
+        marginRight: '-16px',
       },
     },
   };
 
   const MuiAppBar = {
     positionFixed: {
-      position: "relative",
+      position: 'relative',
+      zIndex: 10,
     },
   };
 

diff --git a/src/components/NavBar/NavBarView.jsx b/src/components/NavBar/NavBarView.jsx
@@ -1,18 +1,24 @@
-import React from "react";
-import { NavBar } from "@bento-core/nav-bar";
+import React from 'react';
+import { NavBar } from '@bento-core/nav-bar';
 import {
   navBarData,
   navBarCartData,
   navBarstyling,
   externalLinks,
-} from "../../bento/navigationBarData";
+} from '../../bento/navigationBarData';
 
-import NavBarThemeProvider from "./NavBarThemeConfig";
+import NavBarThemeProvider from './NavBarThemeConfig';
+import styled from '@emotion/styled';
+
+const NavContrainer = styled('div')({
+  position: 'relative',
+  zIndex: 0,
+});
 
 const BentoNavBar = ({ cartFieldIds = [] }) => (
   <>
     <NavBarThemeProvider>
-      <div style={{ position: "relative" }}>
+      <NavContrainer>
         <NavBar
           navBarData={navBarData}
           navBarCartData={navBarCartData}
@@ -22,7 +28,7 @@ const BentoNavBar = ({ cartFieldIds = [] }) => (
           externalLinks={externalLinks}
           externalLinksFirst
         />
-      </div>
+      </NavContrainer>
     </NavBarThemeProvider>
   </>
 );

diff --git a/src/components/header/HeaderStyles.js b/src/components/header/HeaderStyles.js
diff --git a/src/components/header/HeaderTheme.js b/src/components/header/HeaderTheme.js
@@ -0,0 +1,135 @@
+import React from 'react';
+import { MuiThemeProvider, createTheme } from '@material-ui/core/styles';
+import vectorIcon from '../../assets/header/Vector.svg';
+import searchIcon from '../../assets/header/global_search_input_find.svg';
+
+const HeaderThemeProvider = ({ children }) => {
+  const computedTheme = createTheme({
+    overrides: {
+      MuiGrid: {
+        container: {
+          '& div#header': {
+            zIndex: 0,
+          },
+        },
+      },
+      MuiTextField: {
+        root: {
+          margin: '0 auto',
+          paddingTop: '25px',
+          width: '260px',
+          height: '37px',
+        },
+      },
+      MuiInputLabel: {
+        root: {
+          width: '0%',
+          opacity: '0',
+        },
+      },
+      MuiSvgIcon: {
+        root: {
+          color: '#25557E',
+          stroke: '#4A8ECB',
+          strokeWidth: '1.1px',
+          marginRight: '8px',
+          cursor: 'pointer',
+          backgroundRepeat: 'no-repeat',
+          marginTop: '5px',
+          backgroundImage: `url(${searchIcon})`,
+          '& path': {
+            display: 'none',
+          },
+        },
+      },
+      MuiInputBase: {
+        root: {
+          fontFamily: 'Open Sans',
+          fontSize: '13.5px',
+          color: '#25557E',
+          fontWeight: 400,
+          padding: '0px',
+          fontStyle: '1rem',
+          lineHeight: '16px',
+          texttransform: 'uppercase',
+        },
+        input: {
+          fontSize: '1rem',
+        },
+      },
+      MuiOutlinedInput: {
+        root: {
+          border: '#4A8ECB solid 1px',
+          borderRadius: '8px',
+        },
+
+        notchedOutline: {
+          border: 'none',
+        },
+        inputAdornedEnd: {
+          padding: '0 8px !important',
+        },
+      },
+      MuiAutocomplete: {
+        inputRoot: {
+          '&[class*="MuiOutlinedInput-root"]': {
+            padding: '2px',
+          },
+        },
+        paper: {
+          borderRadius: '8px',
+        },
+        option: {
+          '&:hover': {
+            color: '#FFF',
+            backgroundColor: '#1C75BC',
+          },
+        },
+        listbox: {
+          borderRadius: '8px',
+          fontFamily: 'Open Sans',
+          fontSize: '13.5px',
+          color: '#0B3556',
+          fontWeight: 400,
+          border: '1px solid #4A8ECB',
+          padding: '0px',
+          fontStyle: 'normal',
+          lineHeight: '26px',
+          texttransform: 'uppercase',
+          '& li': {
+            // list item specific styling
+            padding: '3px, 14px, 4px, 14px',
+            borderBottom: '1px solid #4A8ECB',
+            '&:nth-last-child(1)': {
+              borderBottom: 'none',
+              fontSize: '16px',
+              color: '#000000',
+              backgroundColor: '#E9E9E9',
+              '& :hover': {
+                color: '#000000',
+                backgroundColor: '#E9E9E9',
+                pointerEvents: 'none',
+              },
+              '& span': {
+                backgroundImage: `url(${vectorIcon})`,
+                width: '165px',
+                marginTop: '5px',
+                float: 'right',
+                height: '15px',
+                display: 'block',
+                backgroundRepeat: 'no-repeat',
+                '& img': {
+                  display: 'none',
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  });
+
+  return <MuiThemeProvider theme={computedTheme}>{children}</MuiThemeProvider>;
+};
+
+export default HeaderThemeProvider;