chore(admin-ui): changes required in Admin UI

admin-ui/plugins/admin/components/Audit/AuditListPage.tsx

@@ -417,21 +417,26 @@ const AuditListPage: React.FC = () => {
                   <Typography
                     variant="caption"
                     sx={{
-                      color: customColors.darkGray,
-                      opacity: 0.6,
+                      color: '#000000 !important',
                       fontFamily: 'monospace',
                       minWidth: 90,
                     }}
                   >
                     {timeOnly}
                   </Typography>
                 )}
-                <Typography sx={STYLES.logContent}>{content}</Typography>
+                <Typography sx={{ ...STYLES.logContent, color: '#000000 !important' }}>
+                  {content}
+                </Typography>
               </Box>
             )
           }
 
-          return <Typography sx={STYLES.logContent}>{content}</Typography>
+          return (
+            <Typography sx={{ ...STYLES.logContent, color: '#000000 !important' }}>
+              {content}
+            </Typography>
+          )
         },
       },
     ],

admin-ui/plugins/admin/components/CustomScripts/CustomScriptListPage.tsx

@@ -337,7 +337,7 @@ const CustomScriptListPage: React.FC = () => {
       actionList.push({
         icon: () => (
           <Tooltip title={t('messages.delete_script')}>
-            <DeleteOutlined sx={{ fontSize: 20, color: customColors.accentRed }} />
+            <DeleteOutlined sx={{ fontSize: 20, color: customColors.darkGray }} />
           </Tooltip>
         ),
         tooltip: t('messages.delete_script'),

admin-ui/plugins/admin/components/Health/HealthPage.tsx

@@ -7,7 +7,6 @@ import getThemeColor from '@/context/theme/config'
 import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
 import { useHealthStatus } from './hooks'
 import ServiceStatusCard from './components/ServiceStatusCard'
-import HealthStatusBadge from './components/HealthStatusBadge'
 
 const HealthPage: React.FC = () => {
   const { t } = useTranslation()
@@ -16,16 +15,8 @@ const HealthPage: React.FC = () => {
   const { state } = useTheme()
   const themeColors = getThemeColor(state.theme)
 
-  const {
-    services,
-    overallStatus,
-    healthyCount,
-    totalCount,
-    isLoading,
-    isFetching,
-    isError,
-    refetch,
-  } = useHealthStatus()
+  const { services, healthyCount, totalCount, isLoading, isFetching, isError, refetch } =
+    useHealthStatus()
 
   const handleRefresh = useCallback(() => {
     refetch()
@@ -40,10 +31,7 @@ const HealthPage: React.FC = () => {
           <CardBody>
             <Row className="mb-4 align-items-center">
               <Col>
-                <h4 className="mb-0 d-flex align-items-center gap-3">
-                  {t('titles.services_health')}
-                  {!isLoading && !isError && <HealthStatusBadge status={overallStatus} />}
-                </h4>
+                <h4 className="mb-0">{t('titles.services_health')}</h4>
                 {!isLoading && !isError && totalCount > 0 && (
                   <small className="text-muted">
                     {t('messages.services_healthy_count', { healthyCount, totalCount })}

admin-ui/plugins/admin/components/Health/hooks/useHealthStatus.ts

@@ -27,11 +27,16 @@ function transformServiceStatus(data: JsonNode | undefined): ServiceHealth[] {
 
   const response = data as ServiceStatusResponse
 
-  const services = Object.entries(response).map(([name, status]) => ({
-    name,
-    status: normalizeStatus(String(status)),
-    lastChecked: new Date(),
-  }))
+  const services = Object.entries(response)
+    .filter(([, status]) => {
+      const statusStr = String(status).toLowerCase()
+      return statusStr !== 'not present'
+    })
+    .map(([name, status]) => ({
+      name,
+      status: normalizeStatus(String(status)),
+      lastChecked: new Date(),
+    }))
 
   return sortServicesByStatus(services)
 }

admin-ui/plugins/admin/components/Webhook/WebhookListPage.tsx

@@ -77,7 +77,7 @@ const getHttpMethodColor = (
 
 const EditIcon: React.FC<React.ComponentProps<typeof Edit>> = (props) => <Edit {...props} />
 const DeleteIcon: React.FC<React.ComponentProps<typeof DeleteOutlined>> = (props) => (
-  <DeleteOutlined {...props} style={{ color: 'red', ...props.style }} />
+  <DeleteOutlined {...props} style={{ color: customColors.darkGray, ...props.style }} />
 )
 const PaperContainer = (props: React.ComponentProps<typeof Paper>) => (
   <Paper {...props} elevation={0} />

admin-ui/plugins/auth-server/components/Configuration/Keys/Jwks/JwkItem.tsx

@@ -11,8 +11,8 @@ const AccordionTyped = Accordion as unknown as AccordionComponent
 
 const JwkItem = React.memo(function JwkItem({ item, index }: JwkItemProps): React.ReactElement {
   return (
-    <div>
-      <AccordionTyped className="mb-12">
+    <div style={{ marginBottom: '5px' }}>
+      <AccordionTyped>
         <AccordionTyped.Header className="text-info">
           <AccordionTyped.Indicator className="me-2" />
           {item.name ?? 'Unnamed Key'}

admin-ui/plugins/auth-server/components/Scopes/ScopeListPage.tsx

@@ -56,7 +56,6 @@ const FILTER_BOX_STYLES = {
   p: 1,
   backgroundColor: customColors.white,
   borderRadius: 1,
-  border: `1px solid ${customColors.lightGray}`,
 } as const
 
 const FILTER_CONTAINER_STYLES = {

admin-ui/plugins/auth-server/components/Sessions/SessionListPage.tsx

@@ -206,7 +206,7 @@ const SessionListPage: React.FC<SessionListPageProps> = () => {
             {
               icon: () => (
                 <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                  <DeleteOutlined style={{ color: customColors.accentRed }} />
+                  <DeleteOutlined style={{ color: customColors.darkGray }} />
                 </div>
               ),
               tooltip: `${t('actions.delete')}`,