feat: downsize flow app icons

packages/web/src/components/FlowAppIcons/index.tsx

@@ -21,7 +21,7 @@ export default function FlowAppIcons(props: FlowAppIconsProps) {
         name=" "
         variant="rounded"
         url={firstStep.iconUrl}
-        imgProps={{ width: 30, height: 30}}
+        sx={{ width: 30, height: 30 }}
       />
 
       {intermeaditeStepCount > 0 && <IntermediateStepCount count={intermeaditeStepCount} />}
@@ -30,6 +30,7 @@ export default function FlowAppIcons(props: FlowAppIconsProps) {
         name=" "
         variant="rounded"
         url={lastStep.iconUrl}
+        sx={{ width: 30, height: 30 }}
       />}
     </>
   )

packages/web/src/components/FlowRow/style.ts

@@ -7,7 +7,7 @@ import MuiTypography from '@mui/material/Typography';
 export const CardContent = styled(MuiCardContent)(({ theme }) => ({
   display: 'grid',
   gridTemplateRows: 'auto',
-  gridTemplateColumns: 'calc(50px * 3 + 8px * 2) minmax(0, auto) min-content',
+  gridTemplateColumns: 'calc(30px * 3 + 8px * 2) minmax(0, auto) min-content',
   gridGap: theme.spacing(2),
   gridTemplateAreas: `
     "apps title menu"

packages/web/src/components/IntermediateStepCount/style.ts

@@ -5,8 +5,8 @@ export const Container = styled('div')(({ theme }) => ({
   flexDirection: 'column',
   justifyContent: 'center',
   alignItems: 'center',
-  minWidth: 50,
+  minWidth: 30,
-  height: 50,
+  height: 30,
   border: `1px solid ${theme.palette.text.disabled}`,
   borderRadius: theme.shape.borderRadius,
 }));