streamlined SettingsItem.tsx

src/components/HeaderBar/Settings/SettingsItem.tsx

@@ -31,7 +31,7 @@ export const SettingsItem: FC<SettingsItemProps> = ({ defaultText, description,
             width: "60%",
           }}
         >
-          {description}
+          <Typography>{description}</Typography>
           {defaultText && (
             <Typography
               color="lightgrey"

src/components/HeaderBar/Settings/SettingsTabs/SettingsTabStyle.tsx

@@ -1,11 +1,11 @@
-import { Box, Chip, InputAdornment, MenuItem, Slider, Switch, TextField, Typography } from "@mui/material";
+import { Box, InputAdornment, MenuItem, Slider, Switch, TextField, Typography } from "@mui/material";
 import { useAtom } from "jotai";
 import { FC } from "react";
 import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings";
 import { BetaChip } from "../BetaChip";
 import { CategoryTitle } from "../CategoryTitle";
-import { SettingsItem } from "../SettingsItem";
 import { DevChip } from "../DevChip";
+import { SettingsItem } from "../SettingsItem";
 
 interface SettingsTabStyleProps {
   sx?: any;
@@ -18,7 +18,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
   const handleSettingsStyleValueChange = (settingKey: string, settingValue: boolean | number | string | number[]) => {
     const newSettings = {
       ...stagedSettings,
-      display: {
+      style: {
         ...stagedSettings.style,
         [settingKey]: settingValue,
       },
@@ -33,10 +33,8 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
         defaultText="On"
         description={
           <>
-            <Typography>
+            <BetaChip />
-              <BetaChip />
+            Dark mode
-              Dark mode
-            </Typography>
           </>
         }
         input={
@@ -51,11 +49,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
       />
       <SettingsItem
         defaultText="#8ab4f8"
-        description={
+        description="Accent color"
-          <>
-            <Typography>Accent color</Typography>
-          </>
-        }
         input={
           <TextField
             name="accent_color"
@@ -74,11 +68,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
       />
       <SettingsItem
         defaultText="Monospace"
-        description={
+        description="Font family"
-          <>
-            <Typography>Font family</Typography>
-          </>
-        }
         inputLong={
           <TextField
             fullWidth
@@ -103,11 +93,7 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
       />
       <SettingsItem
         defaultText="100%"
-        description={
+        description="Font scaling"
-          <>
-            <Typography>Font scaling</Typography>
-          </>
-        }
         inputBottom={
           <Slider
             marks={[
@@ -149,10 +135,8 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
         defaultText="200ms"
         description={
           <>
-            <Typography component="div">
+            <DevChip />
-              <DevChip />
+            Transition duration
-              Transition duration
-            </Typography>
           </>
         }
         input={
@@ -176,26 +160,11 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
         }
       />
       <SettingsItem
+        defaultText="8px"
         description={
           <>
-            <Typography component="div">
+            <DevChip />
-              <Chip
+            Radius
-                color="warning"
-                label="Dev"
-                size="small"
-                sx={{
-                  mr: 1,
-                }}
-                variant="outlined"
-              />
-              Radius
-            </Typography>
-            <Typography
-              color="lightgrey"
-              variant="caption"
-            >
-              Default: 8px
-            </Typography>
           </>
         }
         input={
@@ -219,26 +188,11 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
         }
       />
       <SettingsItem
+        defaultText="60%"
         description={
           <>
-            <Typography component="div">
+            <DevChip />
-              <Chip
+            Window height
-                color="warning"
-                label="Dev"
-                size="small"
-                sx={{
-                  mr: 1,
-                }}
-                variant="outlined"
-              />
-              Window height
-            </Typography>
-            <Typography
-              color="lightgrey"
-              variant="caption"
-            >
-              Default: 60%
-            </Typography>
           </>
         }
         input={
@@ -262,26 +216,11 @@ export const SettingsTabStyle: FC<SettingsTabStyleProps> = ({ sx }) => {
         }
       />
       <SettingsItem
+        defaultText="400px"
         description={
           <>
-            <Typography component="div">
+            <DevChip />
-              <Chip
+            Window width
-                color="warning"
-                label="Dev"
-                size="small"
-                sx={{
-                  mr: 1,
-                }}
-                variant="outlined"
-              />
-              Window width
-            </Typography>
-            <Typography
-              color="lightgrey"
-              variant="caption"
-            >
-              Default: 400px
-            </Typography>
           </>
         }
         input={

src/components/HeaderBar/Settings/SettingsTabs/SettingsTabWindow.tsx

@@ -28,17 +28,8 @@ export const SettingsTabWindow: FC<SettingsTabWindowProps> = ({ sx }) => {
     <Box sx={{ sx }}>
       <CategoryTitle title="Fullscreen" />
       <SettingsItem
-        description={
+        defaultText="On"
-          <>
+        description="Fullscreen on startup"
-            <Typography>Fullscreen on startup</Typography>
-            <Typography
-              color="lightgrey"
-              variant="caption"
-            >
-              Default: On
-            </Typography>
-          </>
-        }
         input={
           <Switch
             checked={stagedSettings.window.start_fullscreen}
@@ -51,17 +42,8 @@ export const SettingsTabWindow: FC<SettingsTabWindowProps> = ({ sx }) => {
       />
       <CategoryTitle title="Titlebar Buttons" />
       <SettingsItem
-        description={
+        defaultText="Off"
-          <>
+        description="Minimize button"
-            <Typography>Minimize button</Typography>
-            <Typography
-              color="lightgrey"
-              variant="caption"
-            >
-              Default: On
-            </Typography>
-          </>
-        }
         input={
           <Switch
             checked={stagedSettings.window.minimize_button}
@@ -73,11 +55,8 @@ export const SettingsTabWindow: FC<SettingsTabWindowProps> = ({ sx }) => {
         }
       />
       <SettingsItem
-        description={
+        defaultText="Off"
-          <>
+        description="Maximize button"
-            <Typography>Maximize button</Typography>
-          </>
-        }
         input={
           <Switch
             checked={stagedSettings.window.maximize_button}