design fixes

hack4impact-upenn · Apr 29, 2024 · 6faca3e · 6faca3e
1 parent 92423a2
commit 6faca3e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 19 deletions.
diff --git a/client/src/HomeDashboard/HomeDashboard.tsx b/client/src/HomeDashboard/HomeDashboard.tsx
@@ -158,21 +158,24 @@ function HomeDashboard() {
       display="flex"
       flexDirection="column"
       alignItems="flex-start"
+      marginLeft={4}
+      marginTop={2}
       marginBottom={2}
     >
       <Box
         display="flex"
         flexDirection="row"
         alignItems="center"
+        justifyContent="space-between" // Align items at start and end of the box
+        width="100%" // Set box width to 100% of its container
         marginBottom={2}
-        marginLeft={2} // Added marginLeft to align with the left edge
+        paddingRight={3}
       >
         <ToggleButtonGroup
           color="primary"
           value={alignment}
           exclusive
           onChange={handleChange}
-          style={{ marginTop: '16px', marginRight: '8px' }}
         >
           <ToggleButton value="donation">Donation</ToggleButton>
           <ToggleButton value="sponsorship">Sponsorship</ToggleButton>
@@ -188,37 +191,40 @@ function HomeDashboard() {
             color: 'white',
             marginRight: '16px',
             marginTop: '16px',
+            padding: '15px',
           }}
         >
           View Report
         </Button>
       </Box>
 
-      <Box marginLeft={2}>
+      <Box width="100%" marginBottom={4}>
         {/* Add a Typography for the title "Summary" */}
         <Typography variant="h4" gutterBottom>
           Summary
         </Typography>
+        <BasicTable alignment={alignment} />
+        <Button
+          onClick={() => {
+            handleClick();
+          }}
+          style={{
+            background: '#0693e3',
+            color: 'white',
+            marginLeft: '15px',
+            paddingLeft: '15px',
+            paddingRight: '15px',
+          }}
+        >
+          Send them a message now
+        </Button>
       </Box>
-
-      {/* Render the BasicTable component with the alignment prop */}
-      <BasicTable alignment={alignment} />
-
-      <Button
-        onClick={() => {
-          handleClick();
-        }}
-        style={{ marginLeft: '16px', background: 'blue', color: 'white' }}
-      >
-        Send them a message now
-      </Button>
-
-      <Box marginBottom={2} marginLeft={2} marginTop={2}>
+      <Box width="100%" paddingRight={3}>
         <Typography variant="h4" gutterBottom>
           {alignment.charAt(0).toUpperCase() + alignment.slice(1)}s
         </Typography>
+        <DonationsTable alignment={alignment} />
       </Box>
-      <DonationsTable alignment={alignment} />
     </Box>
   );
 }

diff --git a/client/src/components/tables/FilteringTable.tsx b/client/src/components/tables/FilteringTable.tsx
@@ -127,7 +127,7 @@ function FilteringTable({
           borderRadius: '16px',
           overflow: 'hidden',
           boxShadow: '0px 0px 10px rgba(0,0,0,0.1)',
-          maxWidth: '95%',
+          maxWidth: '100%',
           margin: 'auto',
           padding: '20px',
         }}