From bb843af35d05f09ac8ae7f35aa5c4a79ad9a8e80 Mon Sep 17 00:00:00 2001
From: Christopher Phelefu <cphelefu@gmail.com>
Date: Tue, 7 Nov 2023 16:09:45 -0500
Subject: [PATCH 1/3] replace table with grid

---
 .../core/components/layers/layers-style.ts    | 67 +++++++------------
 .../layers/right-panel/layer-details.tsx      | 57 +++++++---------
 2 files changed, 52 insertions(+), 72 deletions(-)

diff --git a/packages/geoview-core/src/core/components/layers/layers-style.ts b/packages/geoview-core/src/core/components/layers/layers-style.ts
index 78a7ae65ef1..a6e56e3c96b 100644
--- a/packages/geoview-core/src/core/components/layers/layers-style.ts
+++ b/packages/geoview-core/src/core/components/layers/layers-style.ts
@@ -111,50 +111,35 @@ export const getSxClasses = (theme: Theme) => ({
       padding: '8px 20px 7px 15px',
       backgroundColor: '#F6F6F6',
     },
+
+    itemsGrid: {
+      width: "100%",
+      '& .MuiGrid-container': {
+        '&:first-child': {
+          fontWeight: 'bold'
+        },
+        '& .MuiGrid-item': {
+          border: "1px solid #ccc",
+          padding: "3px 6px",
+          
+          '&:first-child' : {
+            width: '80px'
+          },
+          '&:nth-child(2)' : {
+            flexGrow: 1,
+            textAlign: 'left',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center'
+          }
+        }
+      }
+    },
     tableIconLabel: {
       color: 'text.primary',
       fontSize: 16,
       noWrap: true,
       marginLeft: 20,
-    },
-    table: {
-      border: '1px solid #C1C1C1',
-      borderRadius: '4px',
-      padding: '16px 17px 16px 23px',
-    },
-    tableHeader: {
-      '& th': {
-        borderBottom: '1px solid #C1C1C1',
-        height: 40,
-        backgroundColor: '#FFFFFF',
-        padding: '2px 4px 2px 4px',
-        borderRight: '1px solid #C1C1C1',
-        fontWeight: 'bold',
-      },
-      '& th:first-of-type': {
-        // The pseudo class ":x-child" is potentially unsafe when doing server-side rendering. Try changing it to ":x-of-type".
-        width: '80px',
-      },
-      '& th:nth-of-type(2)': {
-        padding: '2px 4px 2px 20px',
-      },
-    },
-    tableRow: {
-      '& td': {
-        borderBottom: '1px solid #C1C1C1',
-        height: 40,
-        margin: 0,
-        padding: '2px 4px 2px 4px',
-        alignItems: 'center',
-        borderRight: '1px solid #C1C1C1',
-      },
-      '& td:first-of-type': {
-        // The pseudo class ":x-child" is potentially unsafe when doing server-side rendering. Try changing it to ":x-of-type".
-        width: '80px',
-      },
-      '& td:nth-of-type(2)': {
-        padding: '2px 4px 2px 20px',
-      },
-    },
-  },
+    }
+  }
 });
diff --git a/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx
index 532e8d8d0fc..626ea995ebb 100644
--- a/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx
+++ b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx
@@ -1,9 +1,8 @@
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '@mui/material/styles';
-import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 import { TypeLegendLayer } from '../types';
 import { getSxClasses } from '../layers-style';
-import { Box, CheckBoxIcon, CheckBoxOutIcon, IconButton, Paper, SliderBase, Typography, ZoomInSearchIcon } from '@/ui';
+import { Box, CheckBoxIcon, CheckBoxOutIcon, IconButton, Paper, SliderBase, Typography, ZoomInSearchIcon, Grid } from '@/ui';
 import { useLayerStoreActions } from '@/core/stores/store-interface-and-intial-values/layer-state';
 
 interface LayerDetailsProps {
@@ -53,35 +52,31 @@ export function LayerDetails(props: LayerDetailsProps): JSX.Element {
 
   function renderItems() {
     return (
-      <TableContainer>
-        <Table sx={sxClasses.rightPanel.table}>
-          <TableHead>
-            <TableRow sx={sxClasses.rightPanel.tableHeader}>
-              <TableCell>
-                <IconButton color="primary" onClick={() => setAllItemsVisibility(layerDetails.layerPath, !layerDetails.allItemsChecked)}>
-                  {layerDetails.allItemsChecked ? <CheckBoxIcon /> : <CheckBoxOutIcon />}
-                </IconButton>
-              </TableCell>
-              <TableCell>{t('general.name')}</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {layerDetails.items.map((item) => (
-              <TableRow key={item.name} sx={sxClasses.rightPanel.tableRow}>
-                <TableCell>
-                  <IconButton color="primary" onClick={() => toggleItemVisibility(layerDetails.layerPath, item.name)}>
-                    {item.isChecked ? <CheckBoxIcon /> : <CheckBoxOutIcon />}
-                  </IconButton>
-                </TableCell>
-                <TableCell>
-                  <img alt={item.name} src={item.icon} />
-                  <span style={sxClasses.rightPanel.tableIconLabel}>{item.name}</span>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
+      <Grid container direction="column" spacing={0} sx={sxClasses.rightPanel.itemsGrid} justifyContent="left" justifyItems="stretch">
+        <Grid container direction="row" justifyContent="center" alignItems="stretch" justifyItems="stretch">
+          <Grid item xs="auto">
+            <IconButton color="primary" onClick={() => setAllItemsVisibility(layerDetails.layerPath, !layerDetails.allItemsChecked)}>
+              {layerDetails.allItemsChecked ? <CheckBoxIcon /> : <CheckBoxOutIcon />}
+            </IconButton>
+          </Grid>
+          <Grid item xs="auto">
+            <span>{t('general.name')}</span>
+          </Grid>
+        </Grid>
+        {layerDetails.items.map((item) => (
+          <Grid container direction="row" key={item.name} justifyContent="center" alignItems="stretch">
+            <Grid item xs="auto">
+              <IconButton color="primary" onClick={() => toggleItemVisibility(layerDetails.layerPath, item.name)}>
+                {item.isChecked ? <CheckBoxIcon /> : <CheckBoxOutIcon />}
+              </IconButton>
+            </Grid>
+            <Grid item xs="auto">
+              <img alt={item.name} src={item.icon} />
+              <span style={sxClasses.rightPanel.tableIconLabel}>{item.name}</span>
+            </Grid>
+          </Grid>
+        ))}
+      </Grid>
     );
   }
 

From 50ac0aeaa65c928d3d1712bfa8d7dd637f38c9be Mon Sep 17 00:00:00 2001
From: Christopher Phelefu <cphelefu@gmail.com>
Date: Tue, 7 Nov 2023 23:05:47 -0500
Subject: [PATCH 2/3] remove borders

---
 .../core/components/layers/layers-style.ts    | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/geoview-core/src/core/components/layers/layers-style.ts b/packages/geoview-core/src/core/components/layers/layers-style.ts
index a6e56e3c96b..fd791cebfad 100644
--- a/packages/geoview-core/src/core/components/layers/layers-style.ts
+++ b/packages/geoview-core/src/core/components/layers/layers-style.ts
@@ -113,27 +113,28 @@ export const getSxClasses = (theme: Theme) => ({
     },
 
     itemsGrid: {
-      width: "100%",
+      width: '100%',
       '& .MuiGrid-container': {
         '&:first-child': {
-          fontWeight: 'bold'
+          fontWeight: 'bold',
+          borderTop: '1px solid #ccc',
+          borderBottom: '2px solid #ccc',
         },
         '& .MuiGrid-item': {
-          border: "1px solid #ccc",
-          padding: "3px 6px",
-          
-          '&:first-child' : {
-            width: '80px'
+          padding: '3px 6px',
+
+          '&:first-child': {
+            width: '80px',
           },
-          '&:nth-child(2)' : {
+          '&:nth-child(2)': {
             flexGrow: 1,
             textAlign: 'left',
             display: 'flex',
             flexDirection: 'row',
-            alignItems: 'center'
-          }
-        }
-      }
+            alignItems: 'center',
+          },
+        },
+      },
     },
     tableIconLabel: {
       color: 'text.primary',

From 587d7cadd2b94bcbfde7cb0740cd7355460b4be0 Mon Sep 17 00:00:00 2001
From: Christopher Phelefu <cphelefu@gmail.com>
Date: Wed, 8 Nov 2023 10:29:06 -0500
Subject: [PATCH 3/3] some changes

---
 .../src/core/components/legend-2/legend.tsx            | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/geoview-core/src/core/components/legend-2/legend.tsx b/packages/geoview-core/src/core/components/legend-2/legend.tsx
index b7c2e03f1c0..a8d00c22f93 100644
--- a/packages/geoview-core/src/core/components/legend-2/legend.tsx
+++ b/packages/geoview-core/src/core/components/legend-2/legend.tsx
@@ -1,7 +1,7 @@
 import { useStore } from 'zustand';
 import { useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { Box, List, Typography } from '@/ui';
+import { Box, Typography, Grid } from '@/ui';
 import { getGeoViewStore } from '@/core/stores/stores-managers';
 import { getSxClasses } from './legend-styles';
 import { LegendLayer } from './legend-layer';
@@ -23,11 +23,13 @@ export function Legend(props: LegendOverviewProps): JSX.Element {
 
   function renderLegendLayersList() {
     return (
-      <List sx={{ width: '100%', padding: '20px' }}>
+      <Grid container spacing={4} sx={{ width: '100%', padding: '20px' }}>
         {legendLayers.map((item) => (
-          <LegendLayer layer={item} key={item.layerPath} />
+          <Grid item xs={12} md={6} lg={4} key={item.layerPath}>
+            <LegendLayer layer={item} key={item.layerPath} />
+          </Grid>
         ))}
-      </List>
+      </Grid>
     );
   }