feat(admin-ui): separate some component styling code

GluuFederation · Jul 13, 2022 · 47af2e1 · 47af2e1
1 parent 348cf90
commit 47af2e1
Show file tree

Hide file tree

Showing 20 changed files with 502 additions and 492 deletions.
diff --git a/admin-ui/app/components/NavSearch/search.js b/admin-ui/app/components/NavSearch/search.js
@@ -1,37 +1,12 @@
 import React from 'react'
-import { makeStyles } from '@material-ui/core/styles'
 import Paper from '@material-ui/core/Paper'
 import InputBase from '@material-ui/core/InputBase'
 import IconButton from '@material-ui/core/IconButton'
 import SearchIcon from '@material-ui/icons/Search'
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    padding: '1px 10px 1px 10px',
-    display: 'flex',
-    alignItems: 'center',
-    width: 300,
-    borderRadius: 30,
-    marginRight: 20,
-    height: 40,
-    marginTop: 10,
-  },
-  input: {
-    marginLeft: theme.spacing(1),
-    flex: 1,
-  },
-  iconButton: {
-    padding: 10,
-  },
-  mobile: {
-    width: '90%',
-    marginTop: 20,
-    padding: '0 10px 0 10px',
-  }
-}))
+import styles from './styles'
 
 export default function Search({ isTabletOrMobile }) {
-  const classes = useStyles()
+  const classes = styles()
 
   return (
     <Paper component="form" className={`${classes.root} ${isTabletOrMobile ? classes.mobile : ''}`}>

diff --git a/admin-ui/app/components/NavSearch/styles.js b/admin-ui/app/components/NavSearch/styles.js
@@ -0,0 +1,28 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+const styles = makeStyles((theme) => ({
+  root: {
+    padding: '1px 10px 1px 10px',
+    display: 'flex',
+    alignItems: 'center',
+    width: 300,
+    borderRadius: 30,
+    marginRight: 20,
+    height: 40,
+    marginTop: 10,
+  },
+  input: {
+    marginLeft: theme.spacing(1),
+    flex: 1,
+  },
+  iconButton: {
+    padding: 10,
+  },
+  mobile: {
+    width: '90%',
+    marginTop: 20,
+    padding: '0 10px 0 10px',
+  }
+}))
+
+export default styles
diff --git a/admin-ui/app/components/Notifications/index.js b/admin-ui/app/components/Notifications/index.js
@@ -7,32 +7,11 @@ import Popper from '@material-ui/core/Popper'
 import List from '@material-ui/core/List'
 import ListItem from '@material-ui/core/ListItem'
 import ListItemText from '@material-ui/core/ListItemText'
-import { makeStyles } from '@material-ui/core/styles'
 import NotificationsIcon from '@material-ui/icons/Notifications'
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-  },
-  whiteColor: {
-    color: '#FFFFFF',
-  },
-  paper: {
-    marginRight: theme.spacing(2),
-  },
-  btnContainer: {
-    position: 'relative',
-    top: 8,
-    textTransform: 'none',
-    color: '#FFFFFF',
-  },
-  topElm: {
-    zIndex: 9999
-  }
-}))
+import styles from './styles'
 
 export default function Lang() {
-  const classes = useStyles()
+  const classes = styles()
   const [open, setOpen] = React.useState(false)
   const anchorRef = React.useRef(null)
 

diff --git a/admin-ui/app/components/Notifications/styles.js b/admin-ui/app/components/Notifications/styles.js
@@ -0,0 +1,24 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+const styles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+  },
+  whiteColor: {
+    color: '#FFFFFF',
+  },
+  paper: {
+    marginRight: theme.spacing(2),
+  },
+  btnContainer: {
+    position: 'relative',
+    top: 8,
+    textTransform: 'none',
+    color: '#FFFFFF',
+  },
+  topElm: {
+    zIndex: 9999
+  }
+}))
+
+export default styles
diff --git a/admin-ui/app/components/ThemeSetting/ThemeSettings.js b/admin-ui/app/components/ThemeSetting/ThemeSettings.js
@@ -1,6 +1,5 @@
 import React, { useContext } from 'react'
 import clsx from 'clsx'
-import { makeStyles } from '@material-ui/core/styles'
 import Drawer from '@material-ui/core/Drawer'
 import Button from '@material-ui/core/Button'
 import Box from '@material-ui/core/Box'
@@ -10,48 +9,10 @@ import darkBlackThumbnail from 'Images/theme-thumbnail/darkBlack.jpg'
 import darkBlueThumbnail from 'Images/theme-thumbnail/darkBlue.jpg'
 import lightBlueThumbnail from 'Images/theme-thumbnail/lightBlue.jpg'
 import lightGreenThumbnail from 'Images/theme-thumbnail/lightGreen.jpg'
-
-const useStyles = makeStyles({
-  list: {
-    width: 250,
-  },
-  fullList: {
-    width: 'auto',
-  },
-  whiteColor: {
-    color: '#FFFFFF',
-    position: 'relative',
-  },
-  selectInfo: {
-    textAlign: 'left',
-    marginLeft: 30,
-    fontSize: 16,
-    fontWeight: '500',
-    marginBottom: 10,
-  },
-  selectContainer: {
-    textAlign: 'center',
-    marginTop: '25%'
-  },
-  selectItem: {
-    marginBottom: 20,
-    cursor: 'pointer',
-    paddingTop: 16,
-  },
-  selectedItem: {
-    background: '#eaeaea',
-  },
-  selectImage: {
-    width: '75%',
-  },
-  selectTitle: {
-    fontSize: 16,
-    fontWeight: '600'
-  }
-})
+import styles from './styles'
 
 export function ThemeSettings() {
-  const classes = useStyles()
+  const classes = styles()
   const [open, setOpen] = React.useState(false)
   const theme = useContext(ThemeContext)
 

diff --git a/admin-ui/app/components/ThemeSetting/styles.js b/admin-ui/app/components/ThemeSetting/styles.js
@@ -0,0 +1,42 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+const styles = makeStyles({
+  list: {
+    width: 250,
+  },
+  fullList: {
+    width: 'auto',
+  },
+  whiteColor: {
+    color: '#FFFFFF',
+    position: 'relative',
+  },
+  selectInfo: {
+    textAlign: 'left',
+    marginLeft: 30,
+    fontSize: 16,
+    fontWeight: '500',
+    marginBottom: 10,
+  },
+  selectContainer: {
+    textAlign: 'center',
+    marginTop: '25%'
+  },
+  selectItem: {
+    marginBottom: 20,
+    cursor: 'pointer',
+    paddingTop: 16,
+  },
+  selectedItem: {
+    background: '#eaeaea',
+  },
+  selectImage: {
+    width: '75%',
+  },
+  selectTitle: {
+    fontSize: 16,
+    fontWeight: '600'
+  }
+})
+
+export default styles
diff --git a/admin-ui/app/components/index.js b/admin-ui/app/components/index.js
@@ -28,7 +28,6 @@ import SidebarTrigger from './SidebarTrigger'
 import {
   ThemeClass,
   ThemeProvider,
-  ThemeSelector,
   ThemeConsumer,
 } from './Theme'
 import ThemeSetting from './ThemeSetting'
@@ -139,7 +138,6 @@ export {
   ThemeClass,
   ThemeConsumer,
   ThemeProvider,
-  ThemeSelector,
   ThemeSetting,
   UncontrolledTabs,
   Wizard

diff --git a/admin-ui/app/layout/components/DefaultSidebar.js b/admin-ui/app/layout/components/DefaultSidebar.js
@@ -28,11 +28,6 @@ export const DefaultSidebar = () => (
     <Sidebar.MobileFluid>
       {/* <SidebarTopA /> */}
       <Sidebar.Section fluid cover>
-        <SidebarTrigger
-          id="navToggleBtn"
-          color={'#8492a5'}
-          showCollapseonly={true}
-        />
         {/* SIDEBAR: Menu */}
         <GluuAppSidebar />
       </Sidebar.Section>

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuAlert.js b/admin-ui/app/routes/Apps/Gluu/GluuAlert.js
@@ -1,23 +1,14 @@
 import React, { useState, useEffect } from 'react'
 import Snackbar from '@material-ui/core/Snackbar'
 import MuiAlert from '@material-ui/lab/Alert'
-import { makeStyles } from '@material-ui/core/styles'
+import styles from './styles/GluuAlert.style'
 
 function Alert(props) {
   return <MuiAlert elevation={6} variant="filled" {...props} />
 }
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    '& > * + *': {
-      marginTop: theme.spacing(2),
-    },
-  },
-}))
-
 export default function GluuAlert({ severity, message, show }) {
-  const classes = useStyles()
+  const classes = styles()
   const [open, setOpen] = useState(false)
   useEffect(() => {
     setOpen(!!show)

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuAppSidebar.js b/admin-ui/app/routes/Apps/Gluu/GluuAppSidebar.js
@@ -13,42 +13,17 @@ import SchemaIcon from "Components/SVG/menu/Schema"
 import ServicesIcon from "Components/SVG/menu/Services"
 import UsersIcon from "Components/SVG/menu/Users"
 import { ThemeContext } from 'Context/theme/themeContext'
-import { makeStyles } from '@material-ui/core/styles'
 import Wave from 'Components/SVG/SidebarWave'
 import getThemeColor from 'Context/theme/config'
-
-const useStyles = makeStyles(() => ({
-  waveContainer: {
-    position: 'relative',
-    bottom: 93,
-    left: 0,
-    top: 140,
-    height: 70,
-    width: 250,
-    borderBottomLeftRadius: 20,
-    borderBottomRightRadius: 20,
-  },
-  wave: {
-    width: 250,
-    position: 'relative',
-    top: -75
-  },
-  powered: {
-    color: '#fff',
-    textAlign: 'center',
-    position: 'relative',
-    top: -130,
-    fontWeight: 500,
-  }
-}))
+import styles from './styles/GluuAppSidebar.style'
 
 function GluuAppSidebar({ scopes }) {
   const [pluginMenus, setPluginMenus] = useState([])
   const { t } = useTranslation()
   const theme = useContext(ThemeContext)
   const selectedTheme = theme.state.theme
   const sidebarMenuActiveClass = `sidebar-menu-active-${selectedTheme}`
-  const classes = useStyles()
+  const classes = styles()
   const themeColors = getThemeColor(selectedTheme)
 
   useEffect(() => {