#1297 : Adressed Comments#1

Author: martin0he

src/frontend/src/components/VerticalDetailDisplay.tsx

@@ -17,36 +17,32 @@ const VerticalDetailDisplay: React.FC<VerticalDetailDisplayProps> = ({ label, co
   const theme = useTheme();
   const backgroundColor = theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[200];
 
-  // Box Styles
-  const customSx = {
-    overflow: 'auto',
-    whiteSpace: 'nowrap',
-    backgroundColor: backgroundColor,
-    justifyContent: 'center',
-    boxShadow: 1,
-    borderRadius: '10px'
-  };
-
-  // Custom Scrollbar Styles
-  const hoverSx = {
-    '&::-webkit-scrollbar': {
-      height: '0.6rem' // Adjust the the thickness of the scrollbar
-    },
-    '&::-webkit-scrollbar-thumb': {
-      backgroundColor: '#EF4345', //FinishLine 'red' color
-      borderRadius: '0.5rem'
-    },
-    '&::-webkit-scrollbar-thumb:hover': {
-      backgroundColor: '#b0191a' // Change to a darker shade of red on hover
-    }
-  };
-
   return (
-    <Box overflow={'auto'} whiteSpace={'nowrap'} sx={{ ...customSx, ...hoverSx }}>
-      <Typography textOverflow={'ellipsis'} textAlign={'center'} fontSize={'2.5rem'} margin={'0px 10px'}>
+    <Box
+      overflow={'auto'}
+      whiteSpace={'nowrap'}
+      sx={{
+        backgroundColor: backgroundColor,
+        borderRadius: '10px',
+        justifyContent: 'center',
+        boxShadow: 1,
+        '&::-webkit-scrollbar': {
+          height: '0.55rem' // Adjust the the thickness of the scrollbar
+        },
+        '&::-webkit-scrollbar-thumb': {
+          backgroundColor: '#EF4345', //FinishLine 'red' color
+          borderRadius: '10px' //make the scrollbar rounded
+        },
+        '&::-webkit-scrollbar-thumb:hover': {
+          backgroundColor: '#b0191a' // Change to a darker shade of red on hover
+        },
+        ...boxStyle
+      }}
+    >
+      <Typography textOverflow={'ellipsis'} textAlign={'center'} fontSize={50}>
         {content}
       </Typography>
-      <Typography textAlign={'center'} fontWeight={'bold'}>
+      <Typography textAlign={'center'} fontWeight={'bold'} marginBottom={'5px'}>
         {label}
       </Typography>
     </Box>

src/frontend/src/pages/FinancePage/ReimbursementRequestDetailPage/ReimbursementRequestDetailsView.tsx

@@ -143,10 +143,10 @@ const ReimbursementRequestDetailsView: React.FC<ReimbursementRequestDetailsViewP
             sx={{ backgroundColor: totalCostBackgroundColor, borderRadius: '10px', boxShadow: 1 }}
           >
             <Grid item xs={6} textAlign={'center'} mt={-2}>
-              <Typography fontSize={'2.5rem'}>Total Cost</Typography>
+              <Typography fontSize={50}>Total Cost</Typography>
             </Grid>
             <Grid xs={6} mt={-2} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-              <Typography fontSize={'2.5rem'}>{`$${centsToDollar(reimbursementRequest.totalCost)}`}</Typography>
+              <Typography fontSize={50}>{`$${centsToDollar(reimbursementRequest.totalCost)}`}</Typography>
             </Grid>
           </Grid>
         </Grid>