feat(admin-ui): update edit and page card design

GluuFederation · Jul 11, 2022 · c488d52 · c488d52
1 parent 17254c0
commit c488d52
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 37 deletions.
diff --git a/admin-ui/plugins/admin/components/CustomScripts/CustomScriptAddPage.js b/admin-ui/plugins/admin/components/CustomScripts/CustomScriptAddPage.js
@@ -1,12 +1,13 @@
 import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
 import { useHistory } from 'react-router-dom'
-import { Container, CardBody, Card } from 'Components'
+import { CardBody, Card } from 'Components'
 import CustomScriptForm from './CustomScriptForm'
 import { addCustomScript } from 'Plugins/admin/redux/actions/CustomScriptActions'
 import { buildPayload } from 'Utils/PermChecker'
 import GluuAlert from 'Routes/Apps/Gluu/GluuAlert'
 import { useTranslation } from 'react-i18next'
+import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
 
 function CustomScriptAddPage({ scripts, dispatch, saveOperationFlag, errorInSaveOperationFlag }) {
   const userAction = {}
@@ -33,17 +34,15 @@ function CustomScriptAddPage({ scripts, dispatch, saveOperationFlag, errorInSave
         message={t('messages.error_in_saving')}
         show={errorInSaveOperationFlag}
       />
-      <Container>
-        <Card className="mb-3">
-          <CardBody>
-            <CustomScriptForm
-              item={new Object()}
-              scripts={scripts}
-              handleSubmit={handleSubmit}
-            />
-          </CardBody>
-        </Card>
-      </Container>
+      <Card className="mb-3" style={applicationStyle.mainCard}>
+        <CardBody>
+          <CustomScriptForm
+            item={new Object()}
+            scripts={scripts}
+            handleSubmit={handleSubmit}
+          />
+        </CardBody>
+      </Card>
     </React.Fragment>
   )
 }

diff --git a/admin-ui/plugins/admin/components/CustomScripts/CustomScriptEditPage.js b/admin-ui/plugins/admin/components/CustomScripts/CustomScriptEditPage.js
@@ -8,6 +8,7 @@ import { editCustomScript } from 'Plugins/admin/redux/actions/CustomScriptAction
 import { buildPayload } from 'Utils/PermChecker'
 import GluuAlert from 'Routes/Apps/Gluu/GluuAlert'
 import { useTranslation } from 'react-i18next'
+import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
 
 function CustomScriptEditPage({ item, scripts, loading, dispatch, saveOperationFlag, errorInSaveOperationFlag }) {
   const userAction = {}
@@ -21,20 +22,21 @@ function CustomScriptEditPage({ item, scripts, loading, dispatch, saveOperationF
 
   function handleSubmit(data) {
     if (data) {
-      let message = data.customScript.action_message
+      const message = data.customScript.action_message
       delete data.customScript.action_message
       buildPayload(userAction, message, data)
       dispatch(editCustomScript(userAction))
     }
   }
+
   return (
     <GluuLoader blocking={loading}>
       <GluuAlert
         severity={t('titles.error')}
         message={t('messages.error_in_saving')}
         show={errorInSaveOperationFlag}
       />
-      <Card className="mb-3">
+      <Card className="mb-3" style={applicationStyle.mainCard}>
         <CardBody>
           <CustomScriptForm
             item={item}

diff --git a/admin-ui/plugins/auth-server/components/Scopes/ScopeAddPage.js b/admin-ui/plugins/auth-server/components/Scopes/ScopeAddPage.js
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
 import { useHistory } from 'react-router-dom'
-import { Container, CardBody, Card } from 'Components'
+import { CardBody, Card } from 'Components'
 import ScopeForm from './ScopeForm'
 import { addScope } from 'Plugins/auth-server/redux/actions/ScopeActions'
 import { buildPayload } from 'Utils/PermChecker'
@@ -12,6 +12,7 @@ import {
 } from 'Redux/actions/InitActions'
 import GluuAlert from 'Routes/Apps/Gluu/GluuAlert'
 import { useTranslation } from 'react-i18next'
+import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
 
 function ScopeAddPage({ scripts, dispatch, attributes, loading, saveOperationFlag, errorInSaveOperationFlag }) {
   const userAction = {}
@@ -63,18 +64,16 @@ function ScopeAddPage({ scripts, dispatch, attributes, loading, saveOperationFla
         message={t('messages.error_in_saving')}
         show={errorInSaveOperationFlag}
       />
-      <Container>
-        <Card className="mb-3">
-          <CardBody>
-            <ScopeForm
-              scope={scope}
-              scripts={scripts}
-              attributes={attributes}
-              handleSubmit={handleSubmit}
-            />
-          </CardBody>
-        </Card>
-      </Container>
+      <Card className="mb-3" style={applicationStyle.mainCard}>
+        <CardBody>
+          <ScopeForm
+            scope={scope}
+            scripts={scripts}
+            attributes={attributes}
+            handleSubmit={handleSubmit}
+          />
+        </CardBody>
+      </Card>
     </GluuLoader>
   )
 }

diff --git a/admin-ui/plugins/auth-server/components/Scopes/ScopeEditPage.js b/admin-ui/plugins/auth-server/components/Scopes/ScopeEditPage.js
@@ -12,6 +12,7 @@ import {
 } from 'Redux/actions/InitActions'
 import GluuAlert from 'Routes/Apps/Gluu/GluuAlert'
 import { useTranslation } from 'react-i18next'
+import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
 
 function ScopeEditPage({ scope, loading, dispatch, scripts, attributes, saveOperationFlag, errorInSaveOperationFlag }) {
   const userAction = {}
@@ -58,7 +59,7 @@ function ScopeEditPage({ scope, loading, dispatch, scripts, attributes, saveOper
         message={t('messages.error_in_saving')}
         show={errorInSaveOperationFlag}
       />
-      <Card className="mb-3">
+      <Card className="mb-3" style={applicationStyle.mainCard}>
         <CardBody>
           <ScopeForm
             scope={scope}

diff --git a/admin-ui/plugins/schema/components/Person/AttributeAddPage.js b/admin-ui/plugins/schema/components/Person/AttributeAddPage.js
@@ -4,6 +4,8 @@ import { useHistory } from 'react-router-dom'
 import { Container, CardBody, Card } from 'Components'
 import AttributeForm from './AttributeForm'
 import { addAttribute } from 'Plugins/schema/redux/actions/AttributeActions'
+import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
+
 function AttributeAddPage({ dispatch }) {
   const history = useHistory()
   function onSubmit(data) {
@@ -23,13 +25,11 @@ function AttributeAddPage({ dispatch }) {
   }
   return (
     <React.Fragment>
-      <Container>
-        <Card className="mb-3">
-          <CardBody>
-            <AttributeForm item={defautAttribute} customOnSubmit={onSubmit} />
-          </CardBody>
-        </Card>
-      </Container>
+      <Card className="mb-3" style={applicationStyle.mainCard}>
+        <CardBody>
+          <AttributeForm item={defautAttribute} customOnSubmit={onSubmit} />
+        </CardBody>
+      </Card>
     </React.Fragment>
   )
 }

diff --git a/admin-ui/plugins/schema/components/Person/AttributeEditPage.js b/admin-ui/plugins/schema/components/Person/AttributeEditPage.js
@@ -5,6 +5,7 @@ import { CardBody, Card } from 'Components'
 import AttributeForm from './AttributeForm'
 import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
 import { editAttribute } from 'Plugins/schema/redux/actions/AttributeActions'
+import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
 
 function AttributeEditPage({ item, loading, dispatch }) {
   if (!item.attributeValidation) {
@@ -23,7 +24,7 @@ function AttributeEditPage({ item, loading, dispatch }) {
   }
   return (
     <GluuLoader blocking={loading}>
-      <Card className="mb-3">
+      <Card className="mb-3" style={applicationStyle.mainCard}>
         <CardBody>
           <AttributeForm item={item} customOnSubmit={customHandleSubmit} />
         </CardBody>

diff --git a/admin-ui/plugins/schema/components/Person/AttributeViewPage.js b/admin-ui/plugins/schema/components/Person/AttributeViewPage.js
@@ -5,6 +5,7 @@ import { CardBody, Card } from 'Components'
 import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
 import AttributeForm from './AttributeForm'
 import { editAttribute } from 'Plugins/schema/redux/actions/AttributeActions'
+import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
 
 function AttributeEditPage({ item, loading, dispatch }) {
   if (!item.attributeValidation) {
@@ -23,7 +24,7 @@ function AttributeEditPage({ item, loading, dispatch }) {
   }
   return (
     <GluuLoader blocking={loading}>
-      <Card className="mb-3">
+      <Card className="mb-3" style={applicationStyle.mainCard}>
         <CardBody>
           <AttributeForm
             item={item}