Merge pull request #54 from janash/theme

Theming
Descriptor-Libraries · Oct 5, 2023 · 6999679 · 6999679
2 parents 14cbe1e + 9c2c36a
commit 6999679
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 304 deletions.
diff --git a/frontend/src/Album.js b/frontend/src/Album.js
diff --git a/frontend/src/Album.tsx b/frontend/src/Album.tsx
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -8,6 +8,17 @@ import { Box } from '@mui/material'
 
 import Home from './pages/Home';
 
+
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: "#393536",
+    }
+  },
+});
+
 const Search = lazy(() => import('./pages/SearchHook'));
 const NeighborSearch = lazy(() => import('./pages/Neighbors'));
 const Library_Details = lazy(() => import('./pages/Library_Details'))
@@ -35,9 +46,11 @@ function App() {
   return (
     <>
     <Box sx={{ display: 'flex', flexDirection: 'column'}}>
+      <ThemeProvider theme={theme}>
         <Router>
             <Content />
         </Router>
+      </ThemeProvider>
     </Box>
     <Footer />
     </>

diff --git a/frontend/src/common/MoleculeUtils.jsx b/frontend/src/common/MoleculeUtils.jsx
@@ -70,7 +70,7 @@ function dynamicGrid( svgs ) {
             <Item sx={{border: 3, borderColor: '#ed1c24'}}>
             <img alt='' src={`data:image/svg+xml;utf8,${encodeURIComponent(result.svg)}`} />
             <Typography sx={{ wordBreak: "break-word" }}> <strong>Smiles: </strong> { result.smiles }</Typography>
-            <ThemeProvider theme={theme}><Button variant="contained" sx={{ m: 0.5 }} onClick={() => moleculePage(result.molecule_id)}>View</Button></ThemeProvider>
+            <Button variant="contained" sx={{ m: 0.5 }} onClick={() => moleculePage(result.molecule_id)}>View</Button>
             </Item>
             // False condition - render Item without border if distance is not 0.
             :
@@ -83,7 +83,7 @@ function dynamicGrid( svgs ) {
                   <strong>Distance: </strong> {result.distance.toFixed(2)}
                 </Typography>
               )}
-            <ThemeProvider theme={theme}><Button variant="contained" sx={{ m: 0.5 }} onClick={() => moleculePage(result.molecule_id)}>View</Button></ThemeProvider>
+            <Button variant="contained" sx={{ m: 0.5 }} onClick={() => moleculePage(result.molecule_id)}>View</Button>
             </Item>} 
         </Grid>
         ))
@@ -141,4 +141,4 @@ async function retrieveSVG(smiles, molecule_id, substructure = undefined, distan
 
 
 
-export { retrieveSVG, retrieveAllSVGs, dynamicGrid, substructureSearch, theme };
+export { retrieveSVG, retrieveAllSVGs, dynamicGrid, substructureSearch };
diff --git a/frontend/src/common/Navbar.jsx b/frontend/src/common/Navbar.jsx
@@ -28,7 +28,7 @@ const ResponsiveAppBar = ({pages}) => {
   };
 
   return (
-      <AppBar position="static" style={{backgroundColor: "#393536"}} sx={{mb: 2}} >
+      <AppBar position="static" sx={{mb: 2}} >
         <Container maxWidth="xl">
           <Toolbar disableGutters>
             <OriginalKraken sx={{ display: { xs: 'none', md: 'flex' }, mr: 1, fontSize: '60px' }} />

diff --git a/frontend/src/components/KetcherPopup.jsx b/frontend/src/components/KetcherPopup.jsx
@@ -13,8 +13,6 @@ import { StandaloneStructServiceProvider } from 'ketcher-standalone';
 import { Editor } from 'ketcher-react';
 import "ketcher-react/dist/index.css";
 
-import { theme } from '../common/MoleculeUtils';
-
 const structServiceProvider = new StandaloneStructServiceProvider();
 
 const Transition = React.forwardRef(function Transition(props, ref) {
@@ -40,11 +38,9 @@ export default function FullScreenDialog({ ketcherCallBack }) {
 
   return (
     <div>
-      <ThemeProvider theme={theme}>
         <Button variant="contained" sx={{ mb: 5 }} onClick={handleClickOpen}>
           Open Molecular Sketcher
         </Button>
-      </ThemeProvider>
       <Dialog
         fullWidth={true}
         maxWidth={"lg"}