feat(admin-ui): update badge dynamically to theme color

GluuFederation · Jul 18, 2022 · f19cdde · f19cdde
1 parent c2b8073
commit f19cdde
Show file tree

Hide file tree

Showing 25 changed files with 213 additions and 67 deletions.
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuFormDetailRow.js b/admin-ui/app/routes/Apps/Gluu/GluuFormDetailRow.js
@@ -1,7 +1,9 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FormGroup, Label, Badge } from 'Components'
 import GluuTooltip from './GluuTooltip'
+import { ThemeContext } from 'Context/theme/themeContext'
+
 function GluuFormDetailRow({
   label,
   value,
@@ -14,6 +16,9 @@ function GluuFormDetailRow({
   isDirect = false,
 }) {
   const { t } = useTranslation()
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
+
   return (
     <GluuTooltip
       doc_category={doc_category}
@@ -28,7 +33,7 @@ function GluuFormDetailRow({
           {!isBadge ? (
             value
           ) : (
-            <Badge color={badgeColor ? badgeColor : 'primary'}>{value}</Badge>
+            <Badge color={badgeColor ? badgeColor : `primary-${selectedTheme}`}>{value}</Badge>
           )}
         </Label>
       </FormGroup>

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuTooltip.js b/admin-ui/app/routes/Apps/Gluu/GluuTooltip.js
@@ -1,16 +1,21 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import ReactTooltip from 'react-tooltip'
 import { useTranslation } from 'react-i18next'
+import { ThemeContext } from 'Context/theme/themeContext'
 
 function GluuTooltip(props) {
   const { t } = useTranslation()
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
+
   return (
     <div data-tip data-for={props.doc_entry}>
       {props.children}
       <ReactTooltip
         html
         type="success"
         id={props.doc_entry}
+        className={`type-${selectedTheme}`}
         data-testid={props.doc_entry}
         place="bottom"
       >

diff --git a/admin-ui/app/routes/Dashboards/DashboardPage.js b/admin-ui/app/routes/Dashboards/DashboardPage.js
@@ -25,7 +25,6 @@ import DateRange from './DateRange'
 import CheckIcon from '../../images/svg/check.svg'
 import CrossIcon from '../../images/svg/cross.svg'
 import Logo from '../../images/gluu-white-logo.png'
-import DetailReport from '../../images/detail-report.png'
 import { ThemeContext } from 'Context/theme/themeContext'
 import getThemeColor from 'Context/theme/config'
 import { getUsers } from '../../redux/actions'

diff --git a/admin-ui/app/styles/custom/layout.scss b/admin-ui/app/styles/custom/layout.scss
@@ -6,4 +6,89 @@
 
 .txt-white {
   color: #FFFFFF;
+}
+
+.badge {
+  padding: 5px 8px;
+}
+
+.badge-primary-darkBlack {
+  background-color: #303641;
+  color: #FFFFFF;
+}
+
+.badge-primary-darkBlue {
+  background-color: #284461;
+  color: #FFFFFF;
+}
+
+.badge-primary-lightBlue {
+  background-color: #9DBDE2;
+  color: #FFFFFF;
+}
+
+.badge-primary-lightGreen {
+  background-color: #3BC391;
+  color: #FFFFFF;
+}
+
+// Button
+
+.btn-primary-darkBlack {
+  background-color: #303641;
+  color: #FFFFFF;
+}
+
+.btn-primary-darkBlue {
+  background-color: #284461;
+  color: #FFFFFF;
+}
+
+.btn-primary-lightBlue {
+  background-color: #9DBDE2;
+  color: #FFFFFF;
+}
+
+.btn-primary-lightGreen {
+  background-color: #3BC391;
+  color: #FFFFFF;
+}
+
+// Tooltip
+
+.type-darkBlack {
+  background-color: #303641!important;
+  color: #FFFFFF!important;
+  &::after {
+    border-bottom-color: #303641!important;
+  }
+}
+
+.type-darkBlue {
+  background-color: #284461!important;
+  color: #FFFFFF!important;
+  &::after {
+    border-bottom-color: #284461!important;
+  }
+}
+
+.type-lightBlue {
+  background-color: #9DBDE2!important;
+  color: #FFFFFF!important;
+  &::after {
+    border-bottom-color: #9DBDE2!important;
+  }
+}
+
+.type-lightGreen {
+  background-color: #3BC391!important;
+  color: #FFFFFF!important;
+  &::after {
+    border-bottom-color: #3BC391!important;
+  }
+}
+
+.badge-dimmed {
+  background-color: #777;
+  color: #FFFFFF;
 }
diff --git a/admin-ui/plugins/admin/components/CustomScripts/CustomScriptDetailPage.js b/admin-ui/plugins/admin/components/CustomScripts/CustomScriptDetailPage.js
@@ -1,16 +1,20 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { Container, Row, Col } from 'Components'
 import GluuFormDetailRow from 'Routes/Apps/Gluu/GluuFormDetailRow'
 import { SCRIPT } from 'Utils/ApiResources'
 import { useTranslation } from 'react-i18next'
+import { ThemeContext } from 'Context/theme/themeContext'
 
 const CustomScriptDetailPage = ({ row }) => {
   const { t } = useTranslation()
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
+
   function getBadgeTheme(status) {
     if (status) {
-      return 'primary'
+      return `primary-${selectedTheme}`
     } else {
-      return 'info'
+      return 'dimmed'
     }
   }
 

diff --git a/admin-ui/plugins/admin/components/CustomScripts/ScriptListPage.js b/admin-ui/plugins/admin/components/CustomScripts/ScriptListPage.js
@@ -184,7 +184,7 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
                 field: 'enabled',
                 type: 'boolean',
                 render: (rowData) => (
-                  <Badge color={rowData.enabled == 'true' ? 'primary' : 'info'}>
+                  <Badge color={rowData.enabled == true ? `primary-${selectedTheme}` : 'dimmed'}>
                     {rowData.enabled ? 'true' : 'false'}
                   </Badge>
                 ),
@@ -200,7 +200,7 @@ function ScriptListTable({ scripts, loading, dispatch, permissions }) {
               selection: false,
               pageSize: pageSize,
               rowStyle: (rowData) => ({
-                backgroundColor: rowData.enabled ? '#33AE9A' : '#FFF',
+                backgroundColor: rowData.enabled ? themeColors.background : '#FFF',
               }),
               headerStyle: { ...applicationStyle.tableHeaderStyle, ...bgThemeColor },
               actionsColumnIndex: -1,

diff --git a/admin-ui/plugins/admin/components/Mapping/MappingItem.js b/admin-ui/plugins/admin/components/Mapping/MappingItem.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useState, useRef, useContext } from 'react'
 import {
   Row,
   Badge,
@@ -19,8 +19,8 @@ import {
 } from 'Plugins/admin/redux/actions/MappingActions'
 import GluuTypeAhead from 'Routes/Apps/Gluu/GluuTypeAhead'
 import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
-
 import { Formik } from 'formik'
+import { ThemeContext } from 'Context/theme/themeContext'
 
 function MappingItem({ candidate, roles }) {
   const dispatch = useDispatch()
@@ -29,10 +29,12 @@ function MappingItem({ candidate, roles }) {
   const [searchablePermissions, setSearchAblePermissions] = useState([])
   const [serverPermissions, setServerPermissions] = useState(null)
   const [isDeleteable, setIsDeleteable] = useState(false)
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
 
   useEffect(() => {
     if (roles) {
-      for (let i in roles) {
+      for (const i in roles) {
         if (roles[i].role == candidate.role) {
           if (roles[i].deletable) {
             setIsDeleteable(true)
@@ -46,8 +48,8 @@ function MappingItem({ candidate, roles }) {
 
   const getPermissionsForSearch = () => {
     const selectedPermissions = candidate.permissions
-    let filteredArr = []
-    for (let i in permissions) {
+    const filteredArr = []
+    for (const i in permissions) {
       if (!selectedPermissions.includes(permissions[i].permission)) {
         filteredArr.push(permissions[i].permission)
       }
@@ -123,7 +125,7 @@ function MappingItem({ candidate, roles }) {
                 />
               )}
               <Badge
-                color="info"
+                color={`primary-${selectedTheme}`}
                 style={{
                   float: 'right',
                 }}

diff --git a/admin-ui/plugins/admin/components/Permissions/UiPermListPage.js b/admin-ui/plugins/admin/components/Permissions/UiPermListPage.js
@@ -82,7 +82,7 @@ function UiPermListPage({ apiPerms, permissions, loading, dispatch }) {
                 editable: false,
                 width: '50%',
                 render: (rowData) => (
-                  <Badge color="info">{rowData.permission}</Badge>
+                  <Badge color={`primary-${selectedTheme}`}>{rowData.permission}</Badge>
                 ),
               },
               { title: `${t('fields.description')}`, field: 'description' },

diff --git a/admin-ui/plugins/admin/components/Roles/UiRoleListPage.js b/admin-ui/plugins/admin/components/Roles/UiRoleListPage.js
@@ -5,10 +5,9 @@ import UiRoleDetailPage from './UiRoleDetailPage'
 import RoleAddDialogForm from './RoleAddDialogForm'
 import { Badge } from 'reactstrap'
 import { connect } from 'react-redux'
-import { Card, CardBody, FormGroup } from 'Components'
+import { Card, CardBody } from 'Components'
 import { useTranslation } from 'react-i18next'
 import GluuViewWrapper from 'Routes/Apps/Gluu/GluuViewWrapper'
-import GluuRibbon from 'Routes/Apps/Gluu/GluuRibbon'
 import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
 import {
   getRoles,
@@ -82,7 +81,7 @@ function UiRoleListPage({ apiRoles, permissions, loading, dispatch }) {
                 field: 'role',
                 width: '40%',
                 editable: false,
-                render: (rowData) => <Badge color="info">{rowData.role}</Badge>,
+                render: (rowData) => <Badge color={`primary-${selectedTheme}`}>{rowData.role}</Badge>,
               },
               { title: `${t('fields.description')}`, field: 'description' },
               {

diff --git a/admin-ui/plugins/admin/components/Settings/SettingsPage.js b/admin-ui/plugins/admin/components/Settings/SettingsPage.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import GluuLabel from 'Routes/Apps/Gluu/GluuLabel'
 import GluuTooltip from 'Routes/Apps/Gluu/GluuTooltip'
@@ -16,9 +16,12 @@ import {
 import GluuDarkModeToggle from 'Routes/Apps/Gluu/GluuDarkModeToggle'
 import SetTitle from 'Utils/SetTitle'
 import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
+import { ThemeContext } from 'Context/theme/themeContext'
 
 function SettingsPage() {
   const { t } = useTranslation()
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
   const [paggingSize, setPaggingSize] = useState(
     localStorage.getItem('paggingSize') || 10,
   )
@@ -90,7 +93,7 @@ function SettingsPage() {
                 }}
               >
                 <h3>
-                  <Badge color={'primary'}>
+                  <Badge color={`primary-${selectedTheme}`}>
                     {process.env.CONFIG_API_BASE_URL}
                   </Badge>
                 </h3>

diff --git a/admin-ui/plugins/auth-server/components/Clients/ClientDetailPage.js b/admin-ui/plugins/auth-server/components/Clients/ClientDetailPage.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import {
   Container,
   Badge,
@@ -10,10 +10,15 @@ import {
 import GluuFormDetailRow from 'Routes/Apps/Gluu/GluuFormDetailRow'
 import GluuSecretDetail from 'Routes/Apps/Gluu/GluuSecretDetail'
 import { useTranslation } from 'react-i18next'
+import { ThemeContext } from 'Context/theme/themeContext'
+
 const DOC_CATEGORY = 'openid_client'
 
 function ClientDetailPage({ row, scopes }) {
   const { t } = useTranslation()
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
+
   const scopesDns = row.scopes || []
   const clientScopes = scopes
     .filter((item) => scopesDns.includes(item.dn, 0))
@@ -89,7 +94,7 @@ function ClientDetailPage({ row, scopes }) {
               <Label sm={6}>{t('fields.is_trusted_client')}:</Label>
               <Label sm={6}>
                 {row.trustedClient ? (
-                  <Badge color="primary">{t('options.yes')}</Badge>
+                  <Badge color={`primary-${selectedTheme}`}>{t('options.yes')}</Badge>
                 ) : (
                   <Badge color="danger">{t('options.no')}</Badge>
                 )}
@@ -101,7 +106,7 @@ function ClientDetailPage({ row, scopes }) {
               <Label sm={6}>{t('fields.status')}:</Label>
               <Label sm={6}>
                 {!row.disabled ? (
-                  <Badge color="primary">{t('options.enabled')}</Badge>
+                  <Badge color={`primary-${selectedTheme}`}>{t('options.enabled')}</Badge>
                 ) : (
                   <Badge color="danger">{t('options.disabled')}</Badge>
                 )}
@@ -117,7 +122,7 @@ function ClientDetailPage({ row, scopes }) {
               <Label sm={8}>
                 {clientScopes &&
                   clientScopes.map((item, key) => (
-                    <Badge key={key} color="primary">
+                    <Badge key={key} color={`primary-${selectedTheme}`}>
                       {item}
                     </Badge>
                   ))}
@@ -130,7 +135,7 @@ function ClientDetailPage({ row, scopes }) {
               <Label sm={8}>
                 {row.grantTypes &&
                   row.grantTypes.map((item, key) => (
-                    <Badge key={key} color="primary">
+                    <Badge key={key} color={`primary-${selectedTheme}`}>
                       {item}
                     </Badge>
                   ))}
@@ -145,7 +150,7 @@ function ClientDetailPage({ row, scopes }) {
               <Label sm={8}>
                 {row.responseTypes &&
                   row.responseTypes.map((item, key) => (
-                    <Badge key={key} color="primary">
+                    <Badge key={key} color={`primary-${selectedTheme}`}>
                       {item}
                     </Badge>
                   ))}
@@ -158,7 +163,7 @@ function ClientDetailPage({ row, scopes }) {
               <Label sm={8}>
                 {row.redirectUris &&
                   row.redirectUris.map((item, key) => (
-                    <Badge key={key} color="primary">
+                    <Badge key={key} color={`primary-${selectedTheme}`}>
                       {item}
                     </Badge>
                   ))}
@@ -173,7 +178,7 @@ function ClientDetailPage({ row, scopes }) {
               <Label sm={8}>
                 {row.postLogoutRedirectUris &&
                   row.postLogoutRedirectUris.map((item, key) => (
-                    <Badge key={key} color="primary">
+                    <Badge key={key} color={`primary-${selectedTheme}`}>
                       {item}
                     </Badge>
                   ))}
@@ -185,7 +190,7 @@ function ClientDetailPage({ row, scopes }) {
               <Label sm={6}>{t('fields.authentication_method')}:</Label>
               <Label sm={6}>
                 {row.authenticationMethod && (
-                  <Badge color="primary">{row.authenticationMethod}</Badge>
+                  <Badge color={`primary-${selectedTheme}`}>{row.authenticationMethod}</Badge>
                 )}
               </Label>
             </FormGroup>