From 0beba2c59cd061250ae6cee21b040117fda7c5d7 Mon Sep 17 00:00:00 2001
From: Victor Frunze <silverberserk@gmail.com>
Date: Thu, 16 Jan 2025 15:57:22 +0200
Subject: [PATCH] MWB-952: fix theme colors

---
 .../state/result-summary-coverage-shacl.js    |  5 +-
 .../state/result-summary-coverage-sparql.js   |  5 +-
 .../state/result-summary-coverage-xpath.js    |  4 +-
 .../mapping-package/state/state-details.js    | 70 +++++++------------
 4 files changed, 36 insertions(+), 48 deletions(-)

diff --git a/mapping_workbench/frontend/src/sections/app/mapping-package/state/result-summary-coverage-shacl.js b/mapping_workbench/frontend/src/sections/app/mapping-package/state/result-summary-coverage-shacl.js
index 358aec5d..4e9e018b 100644
--- a/mapping_workbench/frontend/src/sections/app/mapping-package/state/result-summary-coverage-shacl.js
+++ b/mapping_workbench/frontend/src/sections/app/mapping-package/state/result-summary-coverage-shacl.js
@@ -3,13 +3,14 @@ import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import Stack from '@mui/material/Stack';
 import Paper from '@mui/material/Paper';
 import Button from '@mui/material/Button';
+import {useTheme} from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 
 import {StatePieChart} from './state-pie-chart';
 import getValidationColor from './validation-color';
 
 const ResultSummaryCoverageShacl = ({validationReport, handleChangeTab}) => {
-
+    const theme = useTheme()
     if (!validationReport) return null
 
     const {itemsTotal, ...itemsReduce} =
@@ -35,7 +36,7 @@ const ResultSummaryCoverageShacl = ({validationReport, handleChangeTab}) => {
     return <Paper sx={{p: 3, height: '100%'}}>
         <Stack direction='row'
                justifyContent='space-between'
-               sx={{borderBottom: '2px solid #F2F4F7', pb: 3}}>
+               sx={{borderBottom: `2px solid ${theme.palette.divider}`, pb: 3}}>
             <Stack>
                 <Typography color='#667085'>Result summary</Typography>
                 <Typography fontSize='18'
diff --git a/mapping_workbench/frontend/src/sections/app/mapping-package/state/result-summary-coverage-sparql.js b/mapping_workbench/frontend/src/sections/app/mapping-package/state/result-summary-coverage-sparql.js
index b5b21a1e..878a0725 100644
--- a/mapping_workbench/frontend/src/sections/app/mapping-package/state/result-summary-coverage-sparql.js
+++ b/mapping_workbench/frontend/src/sections/app/mapping-package/state/result-summary-coverage-sparql.js
@@ -3,12 +3,13 @@ import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import Stack from '@mui/material/Stack';
 import Paper from '@mui/material/Paper';
 import Button from '@mui/material/Button';
+import {useTheme} from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import {StatePieChart} from './state-pie-chart';
 import getValidationColor from './validation-color';
 
 const ResultSummaryCoverageSparql = ({validationReport, handleChangeTab}) => {
-
+    const theme = useTheme()
     if (!validationReport) return null
 
     const {itemsTotal, ...itemsReduce} =
@@ -34,7 +35,7 @@ const ResultSummaryCoverageSparql = ({validationReport, handleChangeTab}) => {
     return <Paper sx={{p: 3, height: '100%'}}>
         <Stack direction='row'
                justifyContent='space-between'
-               sx={{borderBottom: '2px solid #F2F4F7', pb: 3}}>
+               sx={{borderBottom: `2px solid ${theme.palette.divider}`, pb: 3}}>
             <Stack>
                 <Typography color='#667085'>Result summary</Typography>
                 <Typography fontSize='18'
diff --git a/mapping_workbench/frontend/src/sections/app/mapping-package/state/result-summary-coverage-xpath.js b/mapping_workbench/frontend/src/sections/app/mapping-package/state/result-summary-coverage-xpath.js
index 8aaefd38..f478129d 100644
--- a/mapping_workbench/frontend/src/sections/app/mapping-package/state/result-summary-coverage-xpath.js
+++ b/mapping_workbench/frontend/src/sections/app/mapping-package/state/result-summary-coverage-xpath.js
@@ -3,10 +3,12 @@ import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import Stack from '@mui/material/Stack';
 import Paper from '@mui/material/Paper';
 import Button from '@mui/material/Button';
+import {useTheme} from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import {LineProgress} from './state-line-progress';
 
 const ResultSummaryCoverageXpath = ({item, validationReport, handleChangeTab}) => {
+    const theme= useTheme()
     if (!validationReport) return null
 
     const {coveredReports, notCoveredReports} = validationReport?.reduce((acc, report) => {
@@ -20,7 +22,7 @@ const ResultSummaryCoverageXpath = ({item, validationReport, handleChangeTab}) =
     return <Paper sx={{p: 3, height: '100%'}}>
         <Stack direction='row'
                justifyContent='space-between'
-               sx={{borderBottom: '2px solid #F2F4F7', pb: 3}}>
+               sx={{borderBottom: `2px solid ${theme.palette.divider}`, pb: 3}}>
             <Stack>
                 <Typography color='#667085'>Result summary</Typography>
                 <Typography fontSize='18'
diff --git a/mapping_workbench/frontend/src/sections/app/mapping-package/state/state-details.js b/mapping_workbench/frontend/src/sections/app/mapping-package/state/state-details.js
index 0b3e3187..94eb2dd5 100644
--- a/mapping_workbench/frontend/src/sections/app/mapping-package/state/state-details.js
+++ b/mapping_workbench/frontend/src/sections/app/mapping-package/state/state-details.js
@@ -1,5 +1,6 @@
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
+import {useTheme} from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import Grid from "@mui/material/Unstable_Grid2";
 
@@ -7,6 +8,24 @@ import ResultSummaryCoverageShacl from './result-summary-coverage-shacl';
 import ResultSummaryCoverageSparql from './result-summary-coverage-sparql';
 import ResultSummaryCoverageXpath from './result-summary-coverage-xpath';
 
+const StateDetail = ({title, value}) => {
+    const theme = useTheme()
+    console.log(theme)
+    return (
+        <Stack sx={{
+            border: '1px solid #E4E7EC',
+            backgroundColor: theme.palette.divider,
+            //                 backgroundColor:'#FCFCFD',
+            borderRadius: '5px',
+            py: '12px',
+            px: '16px'
+        }}>
+            <Typography sx={{color: '#667085', mb: '10px'}}>{title}</Typography>
+            <Typography>{value}</Typography>
+        </Stack>
+    )
+}
+
 const StateDetails = ({item, sid, handleChangeTab, validationReport}) => {
 
     return (
@@ -18,49 +37,14 @@ const StateDetails = ({item, sid, handleChangeTab, validationReport}) => {
                         <Typography fontWeight='bold'>Conceptual mapping for {item.title}</Typography>
                         <Stack direction={{xs: 'column', md: 'row'}}
                                gap={3}>
-                            <Stack sx={{
-                                border: '1px solid #E4E7EC',
-                                backgroundColor: '#FCFCFD',
-                                borderRadius: '5px',
-                                py: '12px',
-                                px: '16px'
-                            }}>
-                                <Typography sx={{color: '#667085', mb: '10px'}}>{item._id}</Typography>
-                                <Typography>{item.title}</Typography>
-                            </Stack>
-                            <Stack sx={{
-                                border: '1px solid #E4E7EC',
-                                backgroundColor: '#FCFCFD',
-                                borderRadius: '5px',
-                                py: '12px',
-                                px: '16px'
-                            }}>
-                                <Typography
-                                    sx={{color: '#667085', mb: '10px'}}>{'Mapping / EPO Version'}</Typography>
-                                <Typography>{`${item.mapping_version} / ${item.epo_version}`}</Typography>
-                            </Stack>
-                            <Stack sx={{
-                                border: '1px solid #E4E7EC',
-                                backgroundColor: '#FCFCFD',
-                                borderRadius: '5px',
-                                py: '12px',
-                                px: '16px'
-                            }}>
-                                <Typography
-                                    sx={{color: '#667085', mb: '10px'}}>{'eForms XSD'}</Typography>
-                                <Typography>{item.eforms_sdk_versions?.join(', ')}</Typography>
-                            </Stack>
-                            <Stack sx={{
-                                border: '1px solid #E4E7EC',
-                                backgroundColor: '#FCFCFD',
-                                borderRadius: '5px',
-                                py: '12px',
-                                px: '16px'
-                            }}>
-                                <Typography
-                                    sx={{color: '#667085', mb: '10px'}}>{'eForms Subtype'}</Typography>
-                                <Typography>{item.eform_subtypes?.join(', ')}</Typography>
-                            </Stack>
+                            <StateDetail title={item._id}
+                                         value={item.title}/>
+                            <StateDetail title={'Mapping / EPO Version'}
+                                         value={`${item.mapping_version} / ${item.epo_version}`}/>
+                            <StateDetail title={'eForms XSD'}
+                                         value={item.eforms_sdk_versions?.join(', ')}/>
+                            <StateDetail title={'eForms Subtype'}
+                                         value={item.eform_subtypes?.join(', ')}/>
                         </Stack>
                     </Stack>
                 </Paper>