Adjust container margins

TaylorBeck · Sep 13, 2024 · a97d08f · a97d08f
1 parent 016c2ee
commit a97d08f
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 48 deletions.
diff --git a/src/components/layout/MainLayout.jsx b/src/components/layout/MainLayout.jsx
@@ -290,6 +290,8 @@ export default function Dashboard({ children, title }) {
     }
   };
 
+  const showBreadcrumbs = location.pathname !== '/dashboard';
+
   return (
     <ThemeProvider theme={theme}>
       {/* Main layout structure */}
@@ -494,40 +496,53 @@ export default function Dashboard({ children, title }) {
             sx={{ mt: 0, ml: 0, mb: 4, pr: 0, mr: 0 }}
           >
             {/* Dynamic breadcrumb navigation */}
-            <Breadcrumbs
-              aria-label="breadcrumb"
-              sx={{ mb: 1 }}
-            >
-              <Link
-                component={RouterLink}
-                color="inherit"
-                to="/dashboard"
+            {showBreadcrumbs && (
+              <Breadcrumbs
+                aria-label="breadcrumb"
+                sx={{ mb: 1 }}
               >
-                Home
-              </Link>
-              {pathnames.map((value, index) => {
-                const last = index === pathnames.length - 1;
-                const to = `/${pathnames.slice(0, index + 1).join('/')}`;
-
-                return last ? (
-                  <Typography
-                    color="text.primary"
-                    key={to}
-                  >
-                    {breadcrumbNameMap[to] || value}
-                  </Typography>
+                {isGuest ? (
+                  <Typography color="text.primary">Home</Typography>
                 ) : (
                   <Link
                     component={RouterLink}
                     color="inherit"
-                    to={to}
-                    key={to}
+                    to="/dashboard"
                   >
-                    {breadcrumbNameMap[to] || value}
+                    Home
                   </Link>
-                );
-              })}
-            </Breadcrumbs>
+                )}
+                {pathnames.map((value, index) => {
+                  const last = index === pathnames.length - 1;
+                  const to = `/${pathnames.slice(0, index + 1).join('/')}`;
+
+                  return last ? (
+                    <Typography
+                      color="text.primary"
+                      key={to}
+                    >
+                      {breadcrumbNameMap[to] || value}
+                    </Typography>
+                  ) : isGuest ? (
+                    <Typography
+                      color="text.primary"
+                      key={to}
+                    >
+                      {breadcrumbNameMap[to] || value}
+                    </Typography>
+                  ) : (
+                    <Link
+                      component={RouterLink}
+                      color="inherit"
+                      to={to}
+                      key={to}
+                    >
+                      {breadcrumbNameMap[to] || value}
+                    </Link>
+                  );
+                })}
+              </Breadcrumbs>
+            )}
             {/* Render child components */}
             <Grid container>{children}</Grid>
           </Container>

diff --git a/src/pages/ChickensPage.jsx b/src/pages/ChickensPage.jsx
@@ -412,7 +412,9 @@ export default function Chickens() {
               <TableBody>
                 {paginatedChickens.map(chicken => (
                   <TableRow
-                    key={`${chicken.id}-${chicken.name}`}
+                    key={`${chicken.id}-${chicken.name}-${chicken.popularity}-${
+                      chicken.type
+                    }-${Math.random()}`}
                     onClick={() => handleChickenClick(chicken.farmId, chicken.id)}
                     sx={{
                       cursor: 'pointer',

diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import MainLayout from '../components/layout/MainLayout';
 import {
   Container,
@@ -89,13 +89,27 @@ const waterConsumptionData = [
 
 const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8'];
 
-// Add StatCard component
 const StatCard = ({ title, value, icon, color }) => (
   <Paper
     elevation={3}
-    sx={{ p: 2, display: 'flex', alignItems: 'center', height: '100%' }}
+    sx={{ p: 2, display: 'flex', alignItems: 'center' }}
   >
-    <Box sx={{ mr: 2, bgcolor: `${color}.light`, p: 1, borderRadius: 1 }}>{icon}</Box>
+    <Box
+      sx={{
+        mr: 2,
+        bgcolor: `${color}.light`,
+        borderRadius: 1,
+        width: 56,
+        height: 56,
+        minWidth: 56,
+        minHeight: 56,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }}
+    >
+      {React.cloneElement(icon, { sx: { fontSize: 32, color: `${color}.main` } })}
+    </Box>
     <Box>
       <Typography
         variant="h6"
@@ -210,9 +224,10 @@ export default function Dashboard() {
           {/* StatCards */}
           <Grid
             item
-            xs={12}
-            sm={6}
-            md={3}
+            sm={12}
+            md={6}
+            lg={3}
+            width={'100%'}
           >
             <StatCard
               title="Total Eggs"
@@ -223,9 +238,10 @@ export default function Dashboard() {
           </Grid>
           <Grid
             item
-            xs={12}
-            sm={6}
-            md={3}
+            sm={12}
+            md={6}
+            lg={3}
+            width={'100%'}
           >
             <StatCard
               title="Total Chickens"
@@ -236,9 +252,10 @@ export default function Dashboard() {
           </Grid>
           <Grid
             item
-            xs={12}
-            sm={6}
-            md={3}
+            sm={12}
+            md={6}
+            lg={3}
+            width={'100%'}
           >
             <StatCard
               title="Avg. Water (L)"
@@ -249,9 +266,10 @@ export default function Dashboard() {
           </Grid>
           <Grid
             item
-            xs={12}
-            sm={6}
-            md={3}
+            sm={12}
+            md={6}
+            lg={3}
+            width={'100%'}
           >
             <StatCard
               title="Avg. Temp (°C)"
@@ -267,6 +285,7 @@ export default function Dashboard() {
             xs={12}
             sm={6}
             md={4}
+            width={'100%'}
           >
             <Paper
               sx={{
@@ -307,6 +326,7 @@ export default function Dashboard() {
             xs={12}
             sm={6}
             md={4}
+            width={'100%'}
           >
             <Paper
               sx={{
@@ -346,6 +366,7 @@ export default function Dashboard() {
             xs={12}
             sm={6}
             md={4}
+            width={'100%'}
           >
             <Paper
               sx={{
@@ -385,6 +406,7 @@ export default function Dashboard() {
             xs={12}
             sm={6}
             md={4}
+            width={'100%'}
           >
             <Paper
               sx={{
@@ -424,6 +446,7 @@ export default function Dashboard() {
             xs={12}
             sm={6}
             md={4}
+            width={'100%'}
           >
             <Paper
               sx={{
@@ -464,6 +487,7 @@ export default function Dashboard() {
             xs={12}
             sm={6}
             md={4}
+            width={'100%'}
           >
             <Paper
               sx={{

diff --git a/src/pages/FinancesPage.jsx b/src/pages/FinancesPage.jsx
@@ -167,7 +167,7 @@ export default function FinancesPage() {
 
   return (
     <MainLayout>
-      <Box sx={{ flexGrow: 1, p: 3 }}>
+      <Box sx={{ flexGrow: 1, px: 0, py: 0, mt: 0 }}>
         <Typography
           variant="h4"
           gutterBottom

diff --git a/src/pages/OrdersPage.jsx b/src/pages/OrdersPage.jsx
@@ -256,7 +256,7 @@ export default function OrdersPage() {
 
   return (
     <MainLayout>
-      <Box sx={{ width: '100%', p: 3 }}>
+      <Box sx={{ width: '100%', p: 0 }}>
         <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
           <Typography
             variant="h4"

diff --git a/src/pages/SettingsPage.jsx b/src/pages/SettingsPage.jsx
@@ -8,8 +8,11 @@ import SecurityForm from '../components/settings/SecurityForm';
 export default function SettingsPage() {
   return (
     <MainLayout>
-      <Container maxWidth="md">
-        <Box sx={{ my: 4 }}>
+      <Container
+        maxWidth="md"
+        sx={{ pl: 0, mx: 0 }}
+      >
+        <Box sx={{ my: 3 }}>
           <Typography
             variant="h4"
             component="h1"