[ApplicationGrid] Adjust background color, spacing and matching crite…

…ria height.
BIDMCDigitalPsychiatry · Dec 18, 2024 · 199a2b3 · 199a2b3
1 parent 1e18976
commit 199a2b3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/components/application/GenericTable/ApplicationsGrid/ApplicationsGridItem.tsx b/src/components/application/GenericTable/ApplicationsGrid/ApplicationsGridItem.tsx
@@ -10,15 +10,14 @@ import DialogButton from '../../GenericDialog/DialogButton';
 import { useLastRatingDateTime } from './useLastRatingDateTime';
 import { useDialogState } from '../../GenericDialog/useDialogState';
 import { title } from '../../GenericDialog/ViewApp';
-import { green, red } from '@mui/material/colors';
+import { green } from '@mui/material/colors';
 import { withReplacement } from '../../../../database/models/Application';
 import { categories } from '../../../../constants';
 import { useAreFiltersActive } from '../../../pages/useAppTableData';
-import { useFilters } from '../../../../database/useFilters';
 import { useFilterCount } from '../../../layout/useFilterCount';
 
 const height = 520;
-const extraPwaHeight = 96;
+const extraPwaHeight = 48;
 const useStyles = makeStyles((theme: any) =>
   createStyles({
     root: ({ isPwa }: any) => ({

diff --git a/src/components/application/GenericTable/ExploreGrid.tsx b/src/components/application/GenericTable/ExploreGrid.tsx
@@ -1,9 +1,13 @@
 import ExploreGridItem from './ApplicationsGrid/ApplicationsGridItem';
 import { VirtuosoGrid } from 'react-virtuoso';
 import styled from '@emotion/styled';
+import { grey } from '@mui/material/colors';
 
 const ItemContainer = styled.div`
-  padding: 0.5rem;
+  padding-top: 16px;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-bottom: 16px;
   width: 25%;
   display: flex;
   flex: none;
@@ -23,8 +27,10 @@ const ItemContainer = styled.div`
 `;
 
 const ListContainer = styled.div`
+  padding: 8px;
   display: flex;
   flex-wrap: wrap;
+  background: ${grey[100]};
 `;
 
 export default function ExploreGrid({ data, height, GridItem = undefined, scrollElement = undefined }) {