fix(trackerCard): make tracker card more compact by reducing paddings

Clm-Roig · Jun 23, 2022 · ea5ed33 · ea5ed33
1 parent e627fbc
commit ea5ed33
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/src/components/TrackerCard/TrackerCard.tsx b/src/components/TrackerCard/TrackerCard.tsx
@@ -13,7 +13,7 @@ interface Props extends CardProps {
 const TrackerCard: FC<Props> = ({ tracker, ...cardProps }) => {
   const { requiredCompletions } = tracker;
   const [selectedCompletions, setSelectedCompletions] = useState<Completion[]>([]);
-  const sxProps = { py: 1 };
+  const sxProps = { px: 1, py: 1 };
 
   const addToSelectedCompletions = (completion: Completion) => {
     setSelectedCompletions([...selectedCompletions, completion]);

diff --git a/src/components/TrackerCard/TrackerCardActions.tsx b/src/components/TrackerCard/TrackerCardActions.tsx
@@ -4,6 +4,7 @@ import TaskAltIcon from '@mui/icons-material/TaskAlt';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { Box, Button, CardActions, CardActionsProps, IconButton } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import { isToday } from 'date-fns';
 import { SnackbarKey, useSnackbar } from 'notistack';
 import { FC, useState } from 'react';
@@ -24,6 +25,10 @@ import CustomValidationDialog from '../TrackerValidationDialog/CustomValidationD
 import MakeHiddenDialog from '../TrackerValidationDialog/MakeHiddenDialog';
 import MakeVisibleValidationDialog from '../TrackerValidationDialog/MakeVisibleDialog';
 
+const StyledIconButton = styled(IconButton)(({}) => ({
+  padding: 0
+}));
+
 interface Props extends CardActionsProps {
   onChipClick?: (completion: Completion) => void;
   selectedCompletions?: Completion[];
@@ -99,31 +104,31 @@ const TrackerCardActions: FC<Props> = ({
         }}>
         {!isHidden && (
           <>
-            <IconButton
+            <StyledIconButton
               color="primary"
               size="large"
               onClick={() => setIsCompleteValidationOpen(true)}>
               <TaskAltIcon fontSize="large" />
-            </IconButton>
+            </StyledIconButton>
 
             {requiredCompletions.length > 0 && (
-              <IconButton
+              <StyledIconButton
                 color="primary"
                 size="large"
                 onClick={() => setIsCustomValidationOpen(true)}>
                 <AddTaskIcon fontSize="large" />
-              </IconButton>
+              </StyledIconButton>
             )}
           </>
         )}
         {isHidden ? (
-          <IconButton color="primary" size="large" onClick={() => setIsMakeVisibleOpen(true)}>
+          <StyledIconButton color="primary" size="large" onClick={() => setIsMakeVisibleOpen(true)}>
             <VisibilityIcon fontSize="large" />
-          </IconButton>
+          </StyledIconButton>
         ) : (
-          <IconButton color="primary" size="large" onClick={() => setIsMakeHiddenOpen(true)}>
+          <StyledIconButton color="primary" size="large" onClick={() => setIsMakeHiddenOpen(true)}>
             <VisibilityOffIcon fontSize="large" />
-          </IconButton>
+          </StyledIconButton>
         )}
       </Box>