feat(admin-ui): table header background color based on selected theme

GluuFederation · Jul 11, 2022 · a3ffc7f · a3ffc7f
1 parent ad29bcd
commit a3ffc7f
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 19 deletions.
diff --git a/admin-ui/app/routes/Apps/Gluu/styles/applicationstyle.js b/admin-ui/app/routes/Apps/Gluu/styles/applicationstyle.js
@@ -1,6 +1,6 @@
 export default {
   tableHeaderStyle: {
-    backgroundColor: '#03a96d',
+    backgroundColor: 'rgb(48, 54, 65)',
     color: '#FFF',
     padding: '12px',
     textTransform: 'uppercase',

diff --git a/admin-ui/app/styles/main.scss b/admin-ui/app/styles/main.scss
@@ -300,6 +300,10 @@ body {
   border-top-right-radius: 16px;
 }
 
+.MuiTableCell-head .MuiTableSortLabel-root:hover {
+  color: #ddd;
+}
+
 .nav-item > a.nav-link {
   background: transparent!important;
 }

diff --git a/admin-ui/plugins/admin/components/CustomScripts/ScriptListPage.js b/admin-ui/plugins/admin/components/CustomScripts/ScriptListPage.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import MaterialTable from '@material-table/core'
 import { DeleteOutlined } from '@material-ui/icons'
 import { useHistory } from 'react-router-dom'
@@ -36,6 +36,8 @@ import {
 } from '../../common/Constants'
 import { useTranslation } from 'react-i18next'
 import SetTitle from 'Utils/SetTitle'
+import { ThemeContext } from 'Context/theme/themeContext'
+import getThemeColor from 'Context/theme/config'
 
 function ScriptListTable({ scripts, loading, dispatch, permissions }) {
   const { t } = useTranslation()
@@ -51,6 +53,10 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
   const [selectedScripts, setSelectedScripts] = useState(scripts)
   const [type, setType] = useState('PERSON_AUTHENTICATION')
   const toggle = () => setModal(!modal)
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
+  const themeColors = getThemeColor(selectedTheme)
+  const bgThemeColor = { background: themeColors.background }
   SetTitle(t('titles.scripts'))
 
   function makeOptions() {
@@ -196,7 +202,7 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
               rowStyle: (rowData) => ({
                 backgroundColor: rowData.enabled ? '#33AE9A' : '#FFF',
               }),
-              headerStyle: applicationStyle.tableHeaderStyle,
+              headerStyle: { ...applicationStyle.tableHeaderStyle, ...bgThemeColor },
               actionsColumnIndex: -1,
             }}
             detailPanel={(rowData) => {

diff --git a/admin-ui/plugins/admin/components/Permissions/UiPermListPage.js b/admin-ui/plugins/admin/components/Permissions/UiPermListPage.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useContext } from 'react'
 import MaterialTable from '@material-table/core'
 import { Paper } from '@material-ui/core'
 import UiPermDetailPage from './UiPermDetailPage'
@@ -22,6 +22,8 @@ import {
   PERMISSION_WRITE,
 } from 'Utils/PermChecker'
 import SetTitle from 'Utils/SetTitle'
+import { ThemeContext } from 'Context/theme/themeContext'
+import getThemeColor from 'Context/theme/config'
 
 function UiPermListPage({ apiPerms, permissions, loading, dispatch }) {
   const { t } = useTranslation()
@@ -31,9 +33,15 @@ function UiPermListPage({ apiPerms, permissions, loading, dispatch }) {
   const options = []
   const userAction = {}
   const pageSize = localStorage.getItem('paggingSize') || 10
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
+  const themeColors = getThemeColor(selectedTheme)
+  const bgThemeColor = { background: themeColors.background }
+
   useEffect(() => {
     doFetchList()
   }, [])
+
   SetTitle(t('titles.permissions'))
 
   if (hasPermission(permissions, PERMISSION_WRITE)) {
@@ -91,7 +99,7 @@ function UiPermListPage({ apiPerms, permissions, loading, dispatch }) {
               rowStyle: (rowData) => ({
                 backgroundColor: rowData.enabled ? '#33AE9A' : '#FFF',
               }),
-              headerStyle: applicationStyle.tableHeaderStyle,
+              headerStyle: { ...applicationStyle.tableHeaderStyle, ...bgThemeColor },
               actionsColumnIndex: -1,
             }}
             detailPanel={(rowD) => {

diff --git a/admin-ui/plugins/admin/components/Roles/UiRoleListPage.js b/admin-ui/plugins/admin/components/Roles/UiRoleListPage.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useContext } from 'react'
 import MaterialTable from '@material-table/core'
 import { Paper } from '@material-ui/core'
 import UiRoleDetailPage from './UiRoleDetailPage'
@@ -23,6 +23,8 @@ import {
   ROLE_WRITE,
 } from 'Utils/PermChecker'
 import SetTitle from 'Utils/SetTitle'
+import { ThemeContext } from 'Context/theme/themeContext'
+import getThemeColor from 'Context/theme/config'
 
 function UiRoleListPage({ apiRoles, permissions, loading, dispatch }) {
   const { t } = useTranslation()
@@ -32,9 +34,15 @@ function UiRoleListPage({ apiRoles, permissions, loading, dispatch }) {
   const options = []
   const userAction = {}
   const pageSize = localStorage.getItem('paggingSize') || 10
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
+  const themeColors = getThemeColor(selectedTheme)
+  const bgThemeColor = { background: themeColors.background }
+
   useEffect(() => {
     doFetchList()
   }, [])
+
   SetTitle(t('titles.roles'))
 
   if (hasPermission(permissions, ROLE_WRITE)) {
@@ -127,7 +135,7 @@ function UiRoleListPage({ apiRoles, permissions, loading, dispatch }) {
               rowStyle: (rowData) => ({
                 backgroundColor: rowData.enabled ? '#33AE9A' : '#FFF',
               }),
-              headerStyle: applicationStyle.tableHeaderStyle,
+              headerStyle: { ...applicationStyle.tableHeaderStyle, ...bgThemeColor },
               actionsColumnIndex: -1,
             }}
             detailPanel={(rowData) => {

diff --git a/admin-ui/plugins/auth-server/components/Clients/ClientListPage.js b/admin-ui/plugins/auth-server/components/Clients/ClientListPage.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import MaterialTable from '@material-table/core'
 import { DeleteOutlined } from '@material-ui/icons'
 import { useHistory } from 'react-router-dom'
@@ -36,6 +36,8 @@ import {
 } from 'Utils/PermChecker'
 import ClientShowScopes from './ClientShowScopes'
 import SetTitle from 'Utils/SetTitle'
+import { ThemeContext } from 'Context/theme/themeContext'
+import getThemeColor from 'Context/theme/config'
 
 function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
   const { t } = useTranslation()
@@ -44,6 +46,11 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
   const myActions = []
   const history = useHistory()
   const pageSize = localStorage.getItem('paggingSize') || 10
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
+  const themeColors = getThemeColor(selectedTheme)
+  const bgThemeColor = { background: themeColors.background }
+
   SetTitle(t('titles.oidc_clients'))
 
   const [scopesModal, setScopesModal] = useState({
@@ -288,7 +295,7 @@ function ClientListPage({ clients, permissions, scopes, loading, dispatch }) {
               searchFieldAlignment: 'left',
               selection: false,
               pageSize: pageSize,
-              headerStyle: applicationStyle.tableHeaderStyle,
+              headerStyle: { ...applicationStyle.tableHeaderStyle, ...bgThemeColor },
               actionsColumnIndex: -1,
             }}
             detailPanel={(rowData) => {

diff --git a/admin-ui/plugins/auth-server/components/Scopes/ScopeListPage.js b/admin-ui/plugins/auth-server/components/Scopes/ScopeListPage.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import MaterialTable from '@material-table/core'
 import { DeleteOutlined } from '@material-ui/icons'
 import { Paper } from '@material-ui/core'
@@ -34,6 +34,8 @@ import {
   FETCHING_SCOPES,
 } from 'Plugins/auth-server/common/Constants'
 import SetTitle from 'Utils/SetTitle'
+import { ThemeContext } from 'Context/theme/themeContext'
+import getThemeColor from 'Context/theme/config'
 
 function ScopeListPage({ scopes, permissions, loading, dispatch }) {
   const { t } = useTranslation()
@@ -47,6 +49,11 @@ function ScopeListPage({ scopes, permissions, loading, dispatch }) {
   const [limit, setLimit] = useState(500)
   const [pattern, setPattern] = useState(null)
   const toggle = () => setModal(!modal)
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
+  const themeColors = getThemeColor(selectedTheme)
+  const bgThemeColor = { background: themeColors.background }
+
   SetTitle(t('titles.scopes'))
 
   let memoLimit = limit
@@ -195,7 +202,7 @@ function ScopeListPage({ scopes, permissions, loading, dispatch }) {
               searchFieldAlignment: 'left',
               selection: false,
               pageSize: pageSize,
-              headerStyle: applicationStyle.tableHeaderStyle,
+              headerStyle: { ...applicationStyle.tableHeaderStyle, ...bgThemeColor },
               actionsColumnIndex: -1,
             }}
             detailPanel={(rowData) => {

diff --git a/admin-ui/plugins/schema/components/Person/AttributeListPage.js b/admin-ui/plugins/schema/components/Person/AttributeListPage.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import MaterialTable from '@material-table/core'
 import { DeleteOutlined } from '@material-ui/icons'
 import { useHistory } from 'react-router-dom'
@@ -25,13 +25,20 @@ import {
 } from 'Plugins/schema/redux/actions/AttributeActions'
 import { useTranslation } from 'react-i18next'
 import SetTitle from 'Utils/SetTitle'
+import { ThemeContext } from 'Context/theme/themeContext'
+import getThemeColor from 'Context/theme/config'
 
 function AttributeListPage({ attributes, permissions, loading, dispatch }) {
   const { t } = useTranslation()
   const options = {}
   const pageSize = localStorage.getItem('paggingSize') || 10
   const [limit, setLimit] = useState(pageSize)
   const [pattern, setPattern] = useState(null)
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
+  const themeColors = getThemeColor(selectedTheme)
+  const bgThemeColor = { background: themeColors.background }
+
   useEffect(() => {
     makeOptions()
     dispatch(getAttributes(options))
@@ -197,7 +204,7 @@ function AttributeListPage({ attributes, permissions, loading, dispatch }) {
               selection: false,
               searchFieldAlignment: 'left',
               pageSize: pageSize,
-              headerStyle: applicationStyle.tableHeaderStyle,
+              headerStyle: { ...applicationStyle.tableHeaderStyle, ...bgThemeColor },
               actionsColumnIndex: -1,
             }}
             detailPanel={(rowData) => {

diff --git a/admin-ui/plugins/services/Components/Configuration/LdapListPage.js b/admin-ui/plugins/services/Components/Configuration/LdapListPage.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import MaterialTable from '@material-table/core'
 import { DeleteOutlined } from '@material-ui/icons'
 import { useHistory } from 'react-router-dom'
@@ -28,6 +28,8 @@ import {
 import { getPersistenceType } from 'Plugins/services/redux/actions/PersistenceActions'
 import { useTranslation } from 'react-i18next'
 import SetTitle from 'Utils/SetTitle'
+import { ThemeContext } from 'Context/theme/themeContext'
+import getThemeColor from 'Context/theme/config'
 
 function LdapListPage({
   ldapConfigurations,
@@ -54,6 +56,10 @@ function LdapListPage({
     message: '',
     show: false,
   })
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
+  const themeColors = getThemeColor(selectedTheme)
+  const bgThemeColor = { background: themeColors.background }
   SetTitle(t('titles.ldap_authentication'))
   const toggle = () => setModal(!modal)
 
@@ -189,7 +195,7 @@ function LdapListPage({
                 search: true,
                 selection: false,
                 pageSize: pageSize,
-                headerStyle: applicationStyle.tableHeaderStyle,
+                headerStyle: { ...applicationStyle.tableHeaderStyle, ...bgThemeColor },
                 actionsColumnIndex: -1,
               }}
               detailPanel={(rowData) => {

diff --git a/admin-ui/plugins/services/Components/Configuration/SqlListPage.js b/admin-ui/plugins/services/Components/Configuration/SqlListPage.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import MaterialTable from '@material-table/core'
 import { DeleteOutlined } from '@material-ui/icons'
 import { useHistory } from 'react-router-dom'
@@ -27,6 +27,8 @@ import {
 } from 'Plugins/services/redux/actions/SqlActions'
 import { useTranslation } from 'react-i18next'
 import SetTitle from 'Utils/SetTitle'
+import { ThemeContext } from 'Context/theme/themeContext'
+import getThemeColor from 'Context/theme/config'
 
 function SqlListPage({
   sqlConfigurations,
@@ -53,6 +55,10 @@ function SqlListPage({
     message: '',
     show: false,
   })
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
+  const themeColors = getThemeColor(selectedTheme)
+  const bgThemeColor = { background: themeColors.background }
   const toggle = () => setModal(!modal)
   SetTitle(t('titles.sql_authentication'))
 
@@ -173,7 +179,7 @@ function SqlListPage({
                 search: true,
                 selection: false,
                 pageSize: pageSize,
-                headerStyle: applicationStyle.tableHeaderStyle,
+                headerStyle: { ...applicationStyle.tableHeaderStyle, ...bgThemeColor },
                 actionsColumnIndex: -1,
               }}
               detailPanel={(rowData) => {

diff --git a/admin-ui/plugins/user-management/components/UserManagement/UserList.js b/admin-ui/plugins/user-management/components/UserManagement/UserList.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useContext } from 'react'
 import MaterialTable from '@material-table/core'
 import { DeleteOutlined } from '@material-ui/icons'
 import { Paper } from '@material-ui/core'
@@ -24,6 +24,8 @@ import {
 import GluuCommitDialog from '../../../../app/routes/Apps/Gluu/GluuCommitDialog'
 import SetTitle from 'Utils/SetTitle'
 import { getRoles } from '../../../admin/redux/actions/ApiRoleActions'
+import { ThemeContext } from 'Context/theme/themeContext'
+import getThemeColor from 'Context/theme/config'
 
 function UserList(props) {
   const dispatch = useDispatch()
@@ -49,6 +51,10 @@ function UserList(props) {
     toggle()
     handleUserDelete(deleteData)
   }
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
+  const themeColors = getThemeColor(selectedTheme)
+  const bgThemeColor = { background: themeColors.background }
   SetTitle(t('titles.user_management'))
 
   const myActions = []
@@ -132,7 +138,7 @@ function UserList(props) {
               rowStyle: (rowData) => ({
                 backgroundColor: rowData.enabled ? '#33AE9A' : '#FFF',
               }),
-              headerStyle: applicationStyle.tableHeaderStyle,
+              headerStyle: { ...applicationStyle.tableHeaderStyle, ...bgThemeColor },
               actionsColumnIndex: -1,
             }}
             detailPanel={(rowData) => {