[Chore] Update mui to v6 (#48)

* Update `@mui` packages for transition to v6 * Update App.tsx - `Grid` was deprecated in v6. Switch to new `Grid2` component - Switched `main portion` container to use a `Box` instead of plain div, reduced margin on container, and removed extra padding overrides * Update main.tsx - Remove unused theme * Update WorkTimeListing.tsx - Change `WorkTimeListing` to use `Paper` component to respond to the theme changes - Added small amount of margin along x-axis and rounded the border * Update ActiveSession.tsx - Swapped plain div for `Box` component, to keep more inline with mui's styling - Added minWidth of 180 and rounded borders to match our worktime listings * Update wails.json
theBGuy · Sep 2, 2024 · 59833f5 · 59833f5
1 parent e2f5e09
commit 59833f5
Show file tree

Hide file tree

Showing 8 changed files with 622 additions and 458 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -9,12 +9,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.7",
-    "@mui/material": "^5.15.7",
-    "@mui/x-charts": "^7.11.0",
-    "@mui/x-data-grid": "^7.12.1",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.0.1",
+    "@mui/material": "^6.0.1",
+    "@mui/x-charts": "^7.15.0",
+    "@mui/x-data-grid": "^7.15.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.50.1",

diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
@@ -1 +1 @@
-343253670ea3b48c97eadde615ab476c
+3ec2cee0853e26e0f744b9c2ef98c367
diff --git a/frontend/src/components/ActiveSession.tsx b/frontend/src/components/ActiveSession.tsx
@@ -47,8 +47,8 @@ const ActiveSession: React.FC<activeSessionProps> = ({ stopTimer, mode = "normal
     <>
       {appMode === "normal" &&
         (mode === "normal" ? (
-          <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
-            <Card sx={{ display: "inline-block", transform: "scale(0.9)" }}>
+          <Box sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+            <Card sx={{ display: "inline-block", transform: "scale(0.9)", minWidth: 180, borderRadius: 2 }}>
               <Tooltip title="Open in widget mode" placement="right">
                 <IconButton sx={{ position: "absolute", top: -5, right: -5 }} onClick={minimize}>
                   <OpenInNew />
@@ -70,7 +70,7 @@ const ActiveSession: React.FC<activeSessionProps> = ({ stopTimer, mode = "normal
                 )}
               </CardActions>
             </Card>
-          </div>
+          </Box>
         ) : (
           // sorta hate how this looks
           <Box

diff --git a/frontend/src/components/WorkTimeListing.tsx b/frontend/src/components/WorkTimeListing.tsx
@@ -1,16 +1,15 @@
 import { formatTime } from "@/utils/utils";
-import { List, ListItem, ListItemText, Typography } from "@mui/material";
+import { List, ListItem, ListItemText, Paper, Typography } from "@mui/material";
 
 interface WorkTimeListingProps {
   title: string;
   orgTotal: number;
-  projName: string;
   projTotal: number;
 }
 
-const WorkTimeListing: React.FC<WorkTimeListingProps> = ({ title, orgTotal, projName, projTotal }) => {
+const WorkTimeListing: React.FC<WorkTimeListingProps> = ({ title, orgTotal, projTotal }) => {
   return (
-    <>
+    <Paper sx={{ borderRadius: 2, marginX: 1 }}>
       <Typography variant="h6" component="h2" sx={{ textAlign: "left", marginLeft: (theme) => theme.spacing(2) }}>
         {title}
       </Typography>
@@ -22,7 +21,7 @@ const WorkTimeListing: React.FC<WorkTimeListingProps> = ({ title, orgTotal, proj
           <ListItemText primary={`Project: ${formatTime(projTotal)}`} />
         </ListItem>
       </List>
-    </>
+    </Paper>
   );
 };
 

diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -16,12 +16,6 @@ import { useAppStore } from "./stores/main";
 import { useTimerStore } from "./stores/timer";
 import "./style.css";
 
-const darkTheme = createTheme({
-  palette: {
-    mode: "dark",
-  },
-});
-
 const router = createHashRouter([
   {
     path: "/",

diff --git a/frontend/src/routes/App.tsx b/frontend/src/routes/App.tsx
@@ -43,7 +43,7 @@ import {
   Box,
   CircularProgress,
   Divider,
-  Grid,
+  Grid2,
   IconButton,
   ListItemIcon,
   Menu,
@@ -551,51 +551,36 @@ function App() {
       </AppBar>
 
       {/* The main portion, our timer */}
-      <div style={{ marginTop: 15, minHeight: 375, minWidth: 500 }}>
+      <Box marginTop={1} alignItems="center" sx={{ minHeight: 375, minWidth: 500 }}>
         {!isScreenHeightLessThan510px && (
-          <Grid
+          <Grid2
             container
-            spacing={{ xs: 2, md: 4 }}
-            columns={{ xs: 4, sm: 8, md: 12 }}
+            justifyContent="center"
             sx={{
               marginBottom: 4,
-              justifyContent: "space-evenly",
-              paddingLeft: (theme) => theme.spacing(6),
-              paddingRight: (theme) => theme.spacing(3),
             }}
           >
-            <Grid item xs={12} sm={4} md={4}>
-              <WorkTimeListing
-                title="Today's Work Total"
-                orgTotal={orgDayTotal}
-                projName={activeProj?.name || ""}
-                projTotal={projDayTotal}
-              />
-            </Grid>
+            <Grid2 size={{ xs: 12, sm: 4 }}>
+              <WorkTimeListing title="Today's Work Total" orgTotal={orgDayTotal} projTotal={projDayTotal} />
+            </Grid2>
 
-            <Grid item xs={12} sm={4} md={4}>
-              <WorkTimeListing
-                title="Weekly Work Total"
-                orgTotal={orgWeekTotal}
-                projName={activeProj?.name || ""}
-                projTotal={projWeekTotal}
-              />
-            </Grid>
+            <Grid2 size={{ xs: 12, sm: 4 }}>
+              <WorkTimeListing title="Weekly Work Total" orgTotal={orgWeekTotal} projTotal={projWeekTotal} />
+            </Grid2>
 
-            <Grid item xs={12} sm={4} md={4}>
+            <Grid2 size={{ xs: 12, sm: 4 }}>
               <WorkTimeListing
                 title={`${months[currentMonth]}'s Work Total`}
                 orgTotal={orgMonthTotal}
-                projName={activeProj?.name || ""}
                 projTotal={projMonthTotal}
               />
-            </Grid>
-          </Grid>
+            </Grid2>
+          </Grid2>
         )}
 
         {/* Current session */}
         <ActiveSession stopTimer={stopTimer} />
-      </div>
+      </Box>
 
       {/* Handle settings dialog */}
       <SettingsDialog showSettings={showSettings} setShowSettings={setShowSettings} handleMenuClose={handleMenuClose} />

diff --git a/wails.json b/wails.json
@@ -14,7 +14,7 @@
     "productName": "go-work-tracker",
     "description": "A simple work tracker written in Go and Wails",
     "license": "MIT",
-    "productVersion": "0.11.6",
+    "productVersion": "0.12.0",
     "environment": "development"
   }
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		343253670ea3b48c97eadde615ab476c
		3ec2cee0853e26e0f744b9c2ef98c367