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

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

Hide file tree

Showing 26 changed files with 202 additions and 129 deletions.
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuAutoCompleteWithAdd.js b/admin-ui/app/routes/Apps/Gluu/GluuAutoCompleteWithAdd.js
@@ -1,10 +1,11 @@
-import React, { useState } from 'react'
+import React, { useState, useContext } from 'react'
 import { FormGroup, Col, Row, Button, Input } from 'Components'
 import { Typeahead } from 'react-bootstrap-typeahead'
 import GluuLabel from '../Gluu/GluuLabel'
 import GluuTooltip from './GluuTooltip'
 import applicationStyle from './styles/applicationstyle'
 import { useTranslation } from 'react-i18next'
+import { ThemeContext } from 'Context/theme/themeContext'
 
 function GluuAutoCompleteWithAdd({
   label,
@@ -20,6 +21,8 @@ function GluuAutoCompleteWithAdd({
   const [items, setItems] = useState(value)
   const [opts, setOpts] = useState(options)
   const { t } = useTranslation()
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
 
   const addItem = () => {
     const newItem = document.getElementById(inputId).value
@@ -55,8 +58,7 @@ function GluuAutoCompleteWithAdd({
               <Input placeholder={placeholder} id={inputId} />
             </Col>
             <Button
-              color="primary"
-              style={applicationStyle.buttonStyle}
+              color={`primary-${selectedTheme}`}
               type="button"
               onClick={addItem}
             >

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuCommitDialog.js b/admin-ui/app/routes/Apps/Gluu/GluuCommitDialog.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import {
   FormGroup,
   Col,
@@ -12,7 +12,7 @@ import {
 } from 'reactstrap'
 import { useTranslation } from 'react-i18next'
 import applicationStyle from './styles/applicationstyle'
-import ClipLoader from 'react-spinners/ClipLoader'
+import { ThemeContext } from 'Context/theme/themeContext'
 
 const GluuCommitDialog = ({
   handler,
@@ -26,6 +26,8 @@ const GluuCommitDialog = ({
   isLoading,
 }) => {
   const { t } = useTranslation()
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
   const [active, setActive] = useState(false)
   const [loading, setLoading] = useState(isLoading)
   const [userMessage, setUserMessage] = useState('')
@@ -66,11 +68,11 @@ const GluuCommitDialog = ({
             <FormGroup row key={key}>
               <Col sm={1}>Set</Col>
               <Col sm={7}>
-                <Badge color="primary">{item.path}</Badge>
+                <Badge color={`primary-${selectedTheme}`}>{item.path}</Badge>
               </Col>
               <Col sm={1}>to</Col>
               <Col sm={3}>
-                <Badge color="primary">{String(item.value)}</Badge>
+                <Badge color={`primary-${selectedTheme}`}>{String(item.value)}</Badge>
               </Col>
             </FormGroup>
           ))}
@@ -101,8 +103,7 @@ const GluuCommitDialog = ({
         {/* <ClipLoader loading={loading} size={35} /> */}
         {active && (
           <Button
-            color="primary"
-            style={applicationStyle.buttonStyle}
+            color={`primary-${selectedTheme}`}
             onClick={handleAccept}
           >
             <i className="fa fa-check-circle mr-2"></i>

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuCommitFooter.js b/admin-ui/app/routes/Apps/Gluu/GluuCommitFooter.js
@@ -1,7 +1,8 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { Col, Button, FormGroup, Divider } from 'Components'
 import { useTranslation } from 'react-i18next'
 import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
+import { ThemeContext } from 'Context/theme/themeContext'
 
 function GluuCommitFooter({
   extraOnClick,
@@ -10,6 +11,9 @@ function GluuCommitFooter({
   hideButtons,
 }) {
   const { t } = useTranslation()
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
+
   function goBack() {
     window.history.back()
   }
@@ -22,7 +26,7 @@ function GluuCommitFooter({
         {!hideButtons || !hideButtons['back'] ? (
           <Col sm={2} md={1}>
             <Button
-              color="secondary"
+              color={`primary-${selectedTheme}`}
               style={applicationStyle.buttonStyle}
               type="button"
               onClick={goBack}
@@ -37,7 +41,7 @@ function GluuCommitFooter({
         <Col sm={0} md={7}>
           {extraLabel && extraOnClick && (
             <Button
-              color="primary"
+              color={`primary-${selectedTheme}`}
               type="button"
               style={applicationStyle.buttonStyle}
               onClick={extraOnClick}
@@ -47,7 +51,7 @@ function GluuCommitFooter({
           )}
           <Button
             type="submit"
-            color="primary"
+            color={`primary-${selectedTheme}`}
             className="UserActionSubmitButton"
             style={{ visibility: 'hidden' }}
           >
@@ -57,7 +61,7 @@ function GluuCommitFooter({
         {!hideButtons || !hideButtons['save'] ? (
           <Button
             type="button"
-            color="primary"
+            color={`primary-${selectedTheme}`}
             style={applicationStyle.buttonStyle}
             className="ml-auto px-4"
             onClick={saveHandler}

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuDialog.js b/admin-ui/app/routes/Apps/Gluu/GluuDialog.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import {
   FormGroup,
   Col,
@@ -11,11 +11,14 @@ import {
 } from 'reactstrap'
 import { useTranslation } from 'react-i18next'
 import applicationStyle from '../../Apps/Gluu/styles/applicationstyle'
+import { ThemeContext } from 'Context/theme/themeContext'
 
 const GluuDialog = ({ row, handler, modal, onAccept, subject, name }) => {
   const [active, setActive] = useState(false)
   const { t } = useTranslation()
   const [userMessage, setUserMessage] = useState('')
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
 
   useEffect(() => {
     if (userMessage.length >= 10) {
@@ -71,15 +74,15 @@ const GluuDialog = ({ row, handler, modal, onAccept, subject, name }) => {
         <ModalFooter>
           {active && (
             <Button
-              color="primary"
+              color={`primary-${selectedTheme}`}
               style={applicationStyle.buttonStyle}
               onClick={handleAccept}
             >
               {t('actions.yes')}
             </Button>
           )}{' '}
           <Button
-            color="secondary"
+            color={`primary-${selectedTheme}`}
             style={applicationStyle.buttonStyle}
             onClick={closeModal}
           >

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuFooter.js b/admin-ui/app/routes/Apps/Gluu/GluuFooter.js
@@ -1,10 +1,12 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { Col, Button, FormGroup, Divider } from 'Components'
 import { useTranslation } from 'react-i18next'
-import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
+import { ThemeContext } from 'Context/theme/themeContext'
 
 function GluuFooter({ extraOnClick, extraLabel, hideButtons }) {
   const { t } = useTranslation()
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
 
   function goBack() {
     window.history.back()
@@ -17,9 +19,8 @@ function GluuFooter({ extraOnClick, extraLabel, hideButtons }) {
         <Col sm={4} md={2}>
           {extraLabel && extraOnClick && (
             <Button
-              color="primary"
+              color={`primary-${selectedTheme}`}
               onClick={extraOnClick}
-              style={applicationStyle.buttonStyle}
             >
               {t(extraLabel)}
             </Button>
@@ -28,9 +29,8 @@ function GluuFooter({ extraOnClick, extraLabel, hideButtons }) {
         {!hideButtons || !hideButtons['back'] ? (
           <Col sm={4} md={2}>
             <Button
-              color="secondary"
+              color={`primary-${selectedTheme}`}
               onClick={goBack}
-              style={applicationStyle.buttonStyle}
             >
               <i className="fa fa-arrow-circle-left mr-2"></i>
               {t('actions.cancel')}
@@ -43,9 +43,8 @@ function GluuFooter({ extraOnClick, extraLabel, hideButtons }) {
         {!hideButtons || !hideButtons['save'] ? (
           <Col sm={4} md={2}>
             <Button
-              color="primary"
+              color={`primary-${selectedTheme}`}
               type="submit"
-              style={applicationStyle.buttonStyle}
             >
               <i className="fa fa-check-circle mr-2"></i>
               {t('actions.save')}

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuInlineInput.js b/admin-ui/app/routes/Apps/Gluu/GluuInlineInput.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useContext } from 'react'
 import GluuLabel from './GluuLabel'
 import GluuTooltip from './GluuTooltip'
 import { useTranslation } from 'react-i18next'
@@ -12,6 +12,7 @@ import {
   Input,
   Button,
 } from 'Components'
+import { ThemeContext } from 'Context/theme/themeContext'
 
 function GluuInlineInput({
   label,
@@ -28,6 +29,8 @@ function GluuInlineInput({
   path,
 }) {
   const { t } = useTranslation()
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
   const VALUE = 'value'
   const PATH = 'path'
   const [show, setShow] = useState(false)
@@ -116,7 +119,7 @@ function GluuInlineInput({
         {show && (
           <>
             <Button
-              color="primary"
+              color={`primary-${selectedTheme}`}
               style={applicationStyle.buttonStyle}
               size="sm"
               onClick={onAccept}

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuModal.js b/admin-ui/app/routes/Apps/Gluu/GluuModal.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import {
   Button,
   Modal,
@@ -9,9 +9,13 @@ import {
 } from 'reactstrap'
 import { useTranslation } from 'react-i18next'
 import applicationStyle from './styles/applicationstyle'
+import { ThemeContext } from 'Context/theme/themeContext'
 
 function GluuModal({ title, modal, handler, onAccept }) {
   const { t } = useTranslation()
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
+
   return (
     <Modal isOpen={modal} toggle={handler} className="modal-outline-primary">
       <ModalHeader toggle={handler}>
@@ -26,15 +30,15 @@ function GluuModal({ title, modal, handler, onAccept }) {
       </ModalBody>
       <ModalFooter>
         <Button
-          color="primary"
+          color={`primary-${selectedTheme}`}
           style={applicationStyle.buttonStyle}
           onClick={onAccept}
         >
           {t('actions.add')}
         </Button>
         &nbsp;
         <Button
-          color="primary"
+          color={`primary-${selectedTheme}`}
           style={applicationStyle.buttonStyle}
           onClick={handler}
         >

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuNameValueProperty.js b/admin-ui/app/routes/Apps/Gluu/GluuNameValueProperty.js
@@ -1,7 +1,8 @@
-import React, { useState } from 'react'
+import React, { useState, useContext } from 'react'
 import { FormGroup, Col, Input, Button } from 'Components'
 import { Accordion } from 'Components'
 import { useTranslation } from 'react-i18next'
+import { ThemeContext } from 'Context/theme/themeContext'
 
 function GluuNameValueProperty({
   nameValueLabel,
@@ -17,6 +18,8 @@ function GluuNameValueProperty({
 }) {
   const [dataArray, setDataArray] = useState(dataArr)
   const { t } = useTranslation()
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
   const addClick = () => {
     setDataArray((prevDataArray) => [...prevDataArray, { key: '', value: '' }])
   }
@@ -43,7 +46,7 @@ function GluuNameValueProperty({
         <Button
           style={{ float: 'right', marginTop: -30 }}
           type="button"
-          color="primary"
+          color={`primary-${selectedTheme}`}
           onClick={addClick}
         >
           <i className="fa fa-fw fa-plus mr-2"></i>

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuProperties.js b/admin-ui/app/routes/Apps/Gluu/GluuProperties.js
@@ -1,8 +1,9 @@
-import React, { useState } from 'react'
+import React, { useState, useContext } from 'react'
 import { FormGroup, Col, Button } from 'Components'
 import { Accordion } from 'Components'
 import GluuPropertyItem from './GluuPropertyItem'
 import { useTranslation } from 'react-i18next'
+import { ThemeContext } from 'Context/theme/themeContext'
 
 function GluuProperties({
   compName,
@@ -14,6 +15,8 @@ function GluuProperties({
 }) {
   const [properties, setProperties] = useState(options)
   const { t } = useTranslation()
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
 
   const addProperty = () => {
     const item = { key: '', value: '' }
@@ -43,12 +46,11 @@ function GluuProperties({
       <Accordion.Body>
         <Button
           style={{
-            background: 'linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%)',
             float: 'right',
             marginTop: -40,
           }}
           type="button"
-          color="primary"
+          color={`primary-${selectedTheme}`}
           onClick={addProperty}
         >
           <i className="fa fa-fw fa-plus mr-2"></i>

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuSessionTimeoutDialog.js b/admin-ui/app/routes/Apps/Gluu/GluuSessionTimeoutDialog.js
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useContext } from "react"
 import {
   Dialog,
   DialogTitle,
@@ -10,13 +10,16 @@ import {
 } from "@material-ui/core"
 import clsx from "clsx"
 import styles from "./styles/GluuSessionTimeoutDialog.style"
+import { ThemeContext } from 'Context/theme/themeContext'
 
 const Transition = React.forwardRef(function Transition(props, ref) {
   return <Slide direction="up" ref={ref} {...props} />
 })
 
 const SessionTimeoutDialog = ({ open, countdown, onLogout, onContinue }) => {
   const classes = styles()
+  const theme = useContext(ThemeContext)
+  const selectedTheme = theme.state.theme
 
   return (
     <Dialog
@@ -44,7 +47,7 @@ const SessionTimeoutDialog = ({ open, countdown, onLogout, onContinue }) => {
         </Button>
         <Button
           onClick={onContinue}
-          color="primary"
+          color={`primary-${selectedTheme}`}
           variant="contained"
           className={classes.button}
         >