feat: update theme

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

@@ -2,7 +2,7 @@ import { Link } from 'react-router-dom';
 import Card from '@mui/material/Card';
 import Box from '@mui/material/Box';
 import CardActionArea from '@mui/material/CardActionArea';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 
 import useFormatMessage from 'hooks/useFormatMessage';
 import AppIcon from 'components/AppIcon';
@@ -14,7 +14,14 @@ type AppRowProps = {
   application: App;
 }
 
-const countTranslation = (value: React.ReactNode) => (<><strong>{value}</strong><br /></>);
+const countTranslation = (value: React.ReactNode) => (
+  <>
+    <Typography variant="body1">
+      {value}
+    </Typography>
+    <br />
+  </>
+);
 
 function AppRow(props: AppRowProps) {
   const formatMessage = useFormatMessage();
@@ -36,19 +43,19 @@ function AppRow(props: AppRowProps) {
             </Box>
 
             <Box sx={{ px: 2 }}>
-              <Typography variant="body2">
+              <Typography variant="caption" color="textSecondary">
                 {formatMessage('app.connectionCount', { count: countTranslation(connectionCount) })}
               </Typography>
             </Box>
 
             <Box sx={{ px: 2 }}>
-              <Typography variant="body2">
+              <Typography variant="caption" color="textSecondary">
                 {formatMessage('app.flowCount', { count: countTranslation(0) })}
               </Typography>
             </Box>
 
             <Box>
-              <ChevronRightIcon />
+              <ArrowForwardIosIcon sx={{ color: (theme) => theme.palette.primary.main }} />
             </Box>
           </CardContent>
         </CardActionArea>