refactor(mui): simplify DOM for tabs

jeremyckahn · Dec 17, 2023 · 4695fc7 · 4695fc7
1 parent 8a2c2e0
commit 4695fc7
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 53 deletions.
diff --git a/src/components/Cellar/Cellar.js b/src/components/Cellar/Cellar.js
@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import Box from '@mui/material/Box'
 import Tab from '@mui/material/Tab'
 import Tabs from '@mui/material/Tabs'
 
@@ -14,16 +13,14 @@ export const Cellar = () => {
 
   return (
     <div className="Cellar">
-      <Box>
-        <Tabs
-          value={currentTab}
-          onChange={(_e, newTab) => setCurrentTab(newTab)}
-          aria-label="Cellar tabs"
-        >
-          <Tab {...{ label: 'Cellar Inventory', ...a11yProps(0) }} />
-          <Tab {...{ label: 'Fermentation', ...a11yProps(1) }} />
-        </Tabs>
-      </Box>
+      <Tabs
+        value={currentTab}
+        onChange={(_e, newTab) => setCurrentTab(newTab)}
+        aria-label="Cellar tabs"
+      >
+        <Tab {...{ label: 'Cellar Inventory', ...a11yProps(0) }} />
+        <Tab {...{ label: 'Fermentation', ...a11yProps(1) }} />
+      </Tabs>
       <CellarInventoryTabPanel index={0} currentTab={currentTab} />
       <FermentationTabPanel index={1} currentTab={currentTab} />
     </div>

diff --git a/src/components/ChatRoom/ChatRoom.js b/src/components/ChatRoom/ChatRoom.js
@@ -54,7 +54,7 @@ export const ChatRoom = () => {
         aria-describedby={dialogTitleId}
         aria-labelledby={dialogContentId}
       >
-        <DialogTitle>Chat room</DialogTitle>
+        <DialogTitle id={dialogTitleId}>Chat room</DialogTitle>
         <DialogContent {...{ id: dialogContentId }}>
           {chatRoomComponent}
         </DialogContent>

diff --git a/src/components/CowPenContextMenu/CowPenContextMenu.js b/src/components/CowPenContextMenu/CowPenContextMenu.js
@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import { array, func, number, object, string } from 'prop-types'
-import Box from '@mui/material/Box'
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
 import Fab from '@mui/material/Fab'
@@ -94,17 +93,16 @@ export const CowPenContextMenu = ({
           cow: cowForSale,
         }}
       />
-      <Box sx={{ mt: '1rem' }}>
-        <Tabs
-          value={currentTab}
-          onChange={(e, newTab) => setCurrentTab(newTab)}
-          aria-label="Cow tabs"
-        >
-          <Tab {...{ label: 'Cows', ...a11yProps(0) }} />
-          <Tab {...{ label: 'Breeding Pen', ...a11yProps(1) }} />
-          <Tab {...{ label: 'Supplies', ...a11yProps(2) }} />
-        </Tabs>
-      </Box>
+      <Tabs
+        value={currentTab}
+        onChange={(_e, newTab) => setCurrentTab(newTab)}
+        aria-label="Cow tabs"
+        sx={{ mt: '1rem' }}
+      >
+        <Tab {...{ label: 'Cows', ...a11yProps(0) }} />
+        <Tab {...{ label: 'Breeding Pen', ...a11yProps(1) }} />
+        <Tab {...{ label: 'Supplies', ...a11yProps(2) }} />
+      </Tabs>
       <TabPanel value={currentTab} index={0}>
         <h3>
           Capacity: {cowInventory.length} /{' '}

diff --git a/src/components/Shop/Shop.js b/src/components/Shop/Shop.js
@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import { array, func, number, object } from 'prop-types'
-import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import Card from '@mui/material/Card'
 import CardActions from '@mui/material/CardActions'
@@ -82,17 +81,15 @@ export const Shop = ({
 
   return (
     <div className="Shop">
-      <Box>
-        <Tabs
-          value={currentTab}
-          onChange={(_e, newTab) => setCurrentTab(newTab)}
-          aria-label="Shop tabs"
-        >
-          <Tab {...{ label: 'Seeds', ...a11yProps(0) }} />
-          <Tab {...{ label: 'Supplies', ...a11yProps(1) }} />
-          <Tab {...{ label: 'Upgrades', ...a11yProps(2) }} />
-        </Tabs>
-      </Box>
+      <Tabs
+        value={currentTab}
+        onChange={(_e, newTab) => setCurrentTab(newTab)}
+        aria-label="Shop tabs"
+      >
+        <Tab {...{ label: 'Seeds', ...a11yProps(0) }} />
+        <Tab {...{ label: 'Supplies', ...a11yProps(1) }} />
+        <Tab {...{ label: 'Upgrades', ...a11yProps(2) }} />
+      </Tabs>
       <TabPanel value={currentTab} index={0}>
         <Inventory
           {...{

diff --git a/src/components/Workshop/Workshop.js b/src/components/Workshop/Workshop.js
@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import { number, object } from 'prop-types'
-import Box from '@mui/material/Box'
 import Tab from '@mui/material/Tab'
 import Tabs from '@mui/material/Tabs'
 
@@ -44,19 +43,17 @@ const Workshop = ({
 
   return (
     <div className="Workshop">
-      <Box>
-        <Tabs
-          value={currentTab}
-          onChange={(_e, newTab) => setCurrentTab(newTab)}
-          aria-label="Workshop tabs"
-        >
-          <Tab {...{ label: 'Kitchen', ...a11yProps(0) }} />
-          {showForge ? <Tab {...{ label: 'Forge', ...a11yProps(1) }} /> : null}
-          {purchasedComposter ? (
-            <Tab {...{ label: 'Recycling', ...a11yProps(recyclingTabIndex) }} />
-          ) : null}
-        </Tabs>
-      </Box>
+      <Tabs
+        value={currentTab}
+        onChange={(_e, newTab) => setCurrentTab(newTab)}
+        aria-label="Workshop tabs"
+      >
+        <Tab {...{ label: 'Kitchen', ...a11yProps(0) }} />
+        {showForge ? <Tab {...{ label: 'Forge', ...a11yProps(1) }} /> : null}
+        {purchasedComposter ? (
+          <Tab {...{ label: 'Recycling', ...a11yProps(recyclingTabIndex) }} />
+        ) : null}
+      </Tabs>
       <KitchenTabPanel
         currentTab={currentTab}
         index={0}

diff --git a/src/mui-theme.js b/src/mui-theme.js
@@ -4,6 +4,7 @@ export default createTheme({
   palette: {
     mode: 'light',
   },
+  shape: {},
   components: {
     MuiTabs: {
       styleOverrides: {
@@ -12,7 +13,7 @@ export default createTheme({
           borderColor: '#9b6d00',
           borderWidth: 2,
           borderStyle: 'solid',
-          borderRadius: theme.shape.borderRadius,
+          borderRadius: `${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0 0`,
         }),
       },
     },

diff --git a/src/styles/utils.sass b/src/styles/utils.sass
@@ -27,8 +27,7 @@ img
   .MuiTabs-flexContainer
     justify-content: center
 
-  > .MuiBox-root
-    border-radius: .5em .5em 0 0
+  > .MuiTabs-root
     margin-top: 4em
 
   [role=tabpanel]