From b33d80b2c208a3abad8b8f2a6e57d8e574745504 Mon Sep 17 00:00:00 2001 From: rana22 Date: Thu, 5 Dec 2024 12:53:37 -0500 Subject: [PATCH 1/2] restore styles --- src/components/header/HeaderTheme.js | 89 ++++++++++++++++++++++++++++ src/components/header/HeaderView.js | 89 ++++------------------------ 2 files changed, 101 insertions(+), 77 deletions(-) create mode 100644 src/components/header/HeaderTheme.js diff --git a/src/components/header/HeaderTheme.js b/src/components/header/HeaderTheme.js new file mode 100644 index 00000000..bfbbdc72 --- /dev/null +++ b/src/components/header/HeaderTheme.js @@ -0,0 +1,89 @@ +import React from 'react'; +import { MuiThemeProvider, createTheme } from '@material-ui/core/styles'; +import vectorIcon from '../../assets/header/Vector.svg'; + +const HeaderThemeProvider = ({ children }) => { + const computedTheme = createTheme({ + overrides: { + 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', + }, + }, + MuiAutocomplete: { + 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 {children}; +}; + +export default HeaderThemeProvider; diff --git a/src/components/header/HeaderView.js b/src/components/header/HeaderView.js index a5ebc692..78042b23 100644 --- a/src/components/header/HeaderView.js +++ b/src/components/header/HeaderView.js @@ -7,8 +7,8 @@ import headerData from '../../bento/globalHeaderData'; import { Header } from '../../bento-core'; import { SEARCH_PUBLIC, searchKeys, searchFields } from '../../bento/search'; import serachIcon from '../../assets/header/global_search_input_find.svg'; -import vectorIcon from '../../assets/header/Vector.svg'; import client from '../../utils/graphqlClient'; +import HeaderThemeProvider from './HeaderTheme'; const customStyle = { nihLogoImg: { @@ -60,15 +60,17 @@ const ICDCHeader = ({ classes }) => { customStyle={customStyle} /> ) : ( -
+ +
+ )} ); @@ -77,53 +79,6 @@ const ICDCHeader = ({ classes }) => { const styles = () => ({ root: { zIndex: 1501, - '& .MuiPaper-root': { - borderRadius: '8px', - }, - '& .MuiAutocomplete-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', - }, - }, - }, - }, - '& :hover': { - color: '#FFF', - backgroundColor: '#1C75BC', - }, - }, }, backdrop: { zIndex: 99999, @@ -147,29 +102,9 @@ const styles = () => ({ width: '0%', opacity: '0', }, - inputRoot: { - borderRadius: '8px', - color: '#25557E', - fontFamily: 'Lato', - fontSize: '16px', - padding: '9.5px 4px 9.5px 6px !important', - }, inputAdornedEnd: { padding: '0 8px !important', }, - textFieldRoot: { - '& .MuiOutlinedInput-root': { - '& fieldset': { - border: '1px solid #4A8ECB', - }, - '&:hover fieldset': { - border: '1px solid #4A8ECB', - }, - '&.Mui-focused fieldset': { - border: '1px solid #4A8ECB', - }, - }, - }, searchIconSpan: { color: '#25557E', stroke: '#4A8ECB', From dedecac4ea048d01e7e6673ce0e5ec81fc1b92ba Mon Sep 17 00:00:00 2001 From: rana22 Date: Mon, 9 Dec 2024 16:17:30 -0500 Subject: [PATCH 2/2] Restore search styles --- src/components/NavBar/NavBarThemeConfig.jsx | 13 +- src/components/NavBar/NavBarView.jsx | 18 +- src/components/header/HeaderStyles.js | 88 --------- src/components/header/HeaderTheme.js | 46 +++++ src/components/header/HeaderView.js | 73 ++------ src/components/header/HeaderView.jsx | 187 -------------------- 6 files changed, 80 insertions(+), 345 deletions(-) delete mode 100644 src/components/header/HeaderStyles.js delete mode 100644 src/components/header/HeaderView.jsx diff --git a/src/components/NavBar/NavBarThemeConfig.jsx b/src/components/NavBar/NavBarThemeConfig.jsx index 8a47dbdb..61d4533b 100644 --- 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 index ff4c3082..4a6ba460 100644 --- 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 = [] }) => ( <> -
+ ( externalLinks={externalLinks} externalLinksFirst /> -
+ ); diff --git a/src/components/header/HeaderStyles.js b/src/components/header/HeaderStyles.js deleted file mode 100644 index dc42ba16..00000000 --- a/src/components/header/HeaderStyles.js +++ /dev/null @@ -1,88 +0,0 @@ -// import { withStyles } from '@mui/material'; - -/** - * Default styling classes for the SearchBar component - * - * @typedef {object} - */ -const styles = { - root: { - zIndex: 1501, - '& .MuiAutocomplete-listbox': { - borderRadius: '8px', - fontFamily: 'Lato', - fontSize: '12px', - color: '#142D64', - fontWeight: 500, - border: '2px solid #4A8ECB', - padding: '0px', - - '& li': { - // list item specific styling - borderBottom: '1px solid #3B68CB', - '&:nth-last-child(1)': { - borderBottom: 'none', - fontSize: '14px', - color: '#000000', - backgroundColor: '#ECECEC', - '& :hover': { - color: '#000000', - backgroundColor: '#ECECEC', - pointerEvents: 'none', - }, - }, - }, - '& :hover': { - color: 'white', - backgroundColor: '#0088FF', - }, - }, - }, - backdrop: { - zIndex: 99999, - background: 'rgba(0, 0, 0, 0.1)', - }, - autocomplete: { - margin: '0 auto', - paddingTop: '32px', - width: '260px', - height: '37px', - }, - enterIcon: { - height: '12px', - margin: '0px 18px 0px 6px', - }, - inputRoot: { - borderRadius: '8px', - color: '#25557E', - fontFamily: 'Lato', - fontSize: '16px', - padding: '9.5px 4px 9.5px 6px !important', - lineHeight: '26px', - }, - inputAdornedEnd: { - padding: '0 8px !important', - }, - textFieldRoot: { - '& .MuiOutlinedInput-root': { - '& fieldset': { - borderColor: '#4A8ECB', - }, - '&:hover fieldset': { - borderColor: '#4A8ECB', - }, - '&.Mui-focused fieldset': { - borderColor: '#4A8ECB', - }, - }, - }, - searchIconSpan: { - color: '#4A8ECB', - stroke: '#4A8ECB', - strokeWidth: '1.1px', - marginRight: '8px', - cursor: 'pointer', - }, -}; - -export default styles; diff --git a/src/components/header/HeaderTheme.js b/src/components/header/HeaderTheme.js index bfbbdc72..d4f02a2b 100644 --- a/src/components/header/HeaderTheme.js +++ b/src/components/header/HeaderTheme.js @@ -1,10 +1,47 @@ 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', @@ -25,11 +62,20 @@ const HeaderThemeProvider = ({ children }) => { border: '#4A8ECB solid 1px', borderRadius: '8px', }, + notchedOutline: { border: 'none', }, + inputAdornedEnd: { + padding: '0 8px !important', + }, }, MuiAutocomplete: { + inputRoot: { + '&[class*="MuiOutlinedInput-root"]': { + padding: '2px', + }, + }, paper: { borderRadius: '8px', }, diff --git a/src/components/header/HeaderView.js b/src/components/header/HeaderView.js index 78042b23..dd8adec5 100644 --- a/src/components/header/HeaderView.js +++ b/src/components/header/HeaderView.js @@ -1,12 +1,11 @@ /* Do not import mui v5 */ import React from 'react'; import { useLocation } from 'react-router'; -import { withStyles } from '@mui/styles'; +import { Grid } from '@material-ui/core'; import { SearchBarGenerator } from '@bento-core/global-search'; import headerData from '../../bento/globalHeaderData'; import { Header } from '../../bento-core'; import { SEARCH_PUBLIC, searchKeys, searchFields } from '../../bento/search'; -import serachIcon from '../../assets/header/global_search_input_find.svg'; import client from '../../utils/graphqlClient'; import HeaderThemeProvider from './HeaderTheme'; @@ -24,7 +23,7 @@ const customStyle = { }, }; -const ICDCHeader = ({ classes }) => { +const ICDCHeader = () => { const location = useLocation(); const queryAutocompleteAPI = async inputValue => { const result = await client @@ -45,7 +44,7 @@ const ICDCHeader = ({ classes }) => { searchKeys, searchFields, }, - classes, + classes: {}, }; const { SearchBar } = SearchBarGenerator(SearchBarConfig); @@ -61,63 +60,21 @@ const ICDCHeader = ({ classes }) => { /> ) : ( -
+ +
+ )} ); }; -const styles = () => ({ - root: { - zIndex: 1501, - }, - backdrop: { - zIndex: 99999, - background: 'rgba(0, 0, 0, 0.1)', - }, - autocomplete: { - margin: '0 auto', - paddingTop: '32px', - width: '260px', - height: '37px', - }, - enterIcon: { - height: '12px', - margin: '0px 18px 0px 6px', - }, - container: { - display: 'flex', - alignItems: 'center', - }, - inputLabel: { - width: '0%', - opacity: '0', - }, - inputAdornedEnd: { - padding: '0 8px !important', - }, - searchIconSpan: { - color: '#25557E', - stroke: '#4A8ECB', - strokeWidth: '1.1px', - marginRight: '8px', - cursor: 'pointer', - backgroundRepeat: 'no-repeat', - marginTop: '5px', - backgroundImage: `url(${serachIcon})`, - '& path': { - display: 'none', - }, - }, -}); - -export default withStyles(styles)(ICDCHeader); +export default ICDCHeader; diff --git a/src/components/header/HeaderView.jsx b/src/components/header/HeaderView.jsx deleted file mode 100644 index c04018a0..00000000 --- a/src/components/header/HeaderView.jsx +++ /dev/null @@ -1,187 +0,0 @@ -import React from "react"; -import { useLocation } from "react-router"; -import { withStyles } from "@material-ui/styles"; -import { SearchBarGenerator } from "@bento-core/global-search"; -import headerData from "../../bento/globalHeaderData"; -import { Header } from "../../bento-core"; -import { SEARCH_PUBLIC, searchKeys, searchFields } from "../../bento/search"; -import serachIcon from "../../assets/header/global_search_input_find.svg"; -import vectorIcon from "../../assets/header/Vector.svg"; -import client from "../../utils/graphqlClient"; - -const customStyle = { - nihLogoImg: { - height: "54px", - width: "463px", - marginLeft: "29px", - minHeight: "54px", - }, - headerBar: { - top: "0px", - zIndex: "999", - position: "relative", - }, -}; - -const ICDCHeader = ({ classes }) => { - const location = useLocation(); - const queryAutocompleteAPI = async (inputValue) => { - const result = await client - .query({ - query: SEARCH_PUBLIC, - variables: { - input: inputValue, - }, - }) - .then((response) => response.data.globalSearch); - return result; - }; - - const SearchBarConfig = { - config: { - query: async (search) => queryAutocompleteAPI(search), - placeholder: "SEARCH THE ICDC", - searchKeys, - searchFields, - }, - classes, - }; - - const { SearchBar } = SearchBarGenerator(SearchBarConfig); - - return ( - <> - {location.pathname.includes("/jBrowse") ? ( -
- ) : ( -
- )} - - ); -}; - -const styles = () => ({ - root: { - zIndex: 1501, - "& .MuiPaper-root": { - borderRadius: "8px", - }, - "& .MuiAutocomplete-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: "black", - backgroundColor: "#E9E9E9", - "& :hover": { - color: "black", - backgroundColor: "#E9E9E9", - pointerEvents: "none", - }, - "& span": { - backgroundImage: `url(${vectorIcon})`, - width: "165px", - marginTop: "5px", - float: "right", - height: "15px", - display: "block", - backgroundRepeat: "no-repeat", - "& img": { - display: "none", - }, - }, - }, - }, - "& :hover": { - color: "#FFF", - backgroundColor: "#1C75BC", - }, - }, - }, - backdrop: { - zIndex: 99999, - background: "rgba(0, 0, 0, 0.1)", - }, - autocomplete: { - margin: "0 auto", - paddingTop: "32px", - width: "260px", - height: "37px", - }, - enterIcon: { - height: "12px", - margin: "0px 18px 0px 6px", - }, - container: { - display: "flex", - alignItems: "center", - }, - inputLabel: { - width: "0%", - opacity: "0", - }, - inputRoot: { - borderRadius: "8px", - color: "#25557E", - fontFamily: "Lato", - fontSize: "16px", - padding: "9.5px 4px 9.5px 6px !important", - }, - inputAdornedEnd: { - padding: "0 8px !important", - }, - textFieldRoot: { - "& .MuiOutlinedInput-root": { - "& fieldset": { - border: "1px solid #4A8ECB", - }, - "&:hover fieldset": { - border: "1px solid #4A8ECB", - }, - "&.Mui-focused fieldset": { - border: "1px solid #4A8ECB", - }, - }, - }, - searchIconSpan: { - color: "#25557E", - stroke: "#4A8ECB", - strokeWidth: "1.1px", - marginRight: "8px", - cursor: "pointer", - backgroundRepeat: "no-repeat", - marginTop: "5px", - backgroundImage: `url(${serachIcon})`, - "& path": { - display: "none", - }, - }, -}); - -export default withStyles(styles)(ICDCHeader);