Color improvements

Author: PeterTYLiu

src/components/EditorPanel/EditorPanel.tsx

@@ -26,7 +26,19 @@ export const EditorPanel = () => {
           }}
         >
           {BUTTON_DATA.map(({ name, icon }) => (
-            <Button key={name} variant={section === name ? "contained" : "outlined"} onClick={() => setSection(name)} sx={{ py: 1 }}>
+            <Button
+              key={name}
+              variant={section === name ? "contained" : "outlined"}
+              onClick={() => setSection(name)}
+              sx={{
+                py: 1,
+                ...(section === name && {
+                  "&:hover": {
+                    bgcolor: section === name ? "primary.main" : undefined,
+                  },
+                }),
+              }}
+            >
               <Stack sx={{ gap: 1, alignItems: "center" }}>
                 {icon}
                 <Stack sx={{ placeContent: "center", height: 24 }}>

src/components/FieldContainer/FieldContainer.tsx

@@ -45,7 +45,7 @@ export const FieldContainer = ({ title, children, isDefault, onReset, titleSx }:
         }}
       >
         {isDefault ? (
-          <Typography variant="subtitle2" color="textDisabled" sx={{ fontSize: 11 }}>
+          <Typography variant="subtitle2" sx={{ fontSize: 11, color: "text.disabled" }}>
             auto
           </Typography>
         ) : (

src/components/InfoPanel/InfoPanel.tsx

@@ -19,7 +19,7 @@ export const InfoPanel = () => {
     >
       <Stack>
         <Typography variant="h5">MUI&nbsp;Theme&nbsp;Builder</Typography>
-        <Typography variant="subtitle2" color="text.secondary">
+        <Typography variant="subtitle2" sx={{ color: "text.secondary" }}>
           Compatible with MUI 5 to 9
         </Typography>
       </Stack>
@@ -76,10 +76,10 @@ export const InfoPanel = () => {
       {hasEditedTheme && (
         <Stack
           direction="row"
-          sx={{ gap: 0.5, borderRadius: "99px", bgcolor: "background.default", p: 0.5, paddingInlineEnd: 1, alignContent: "center" }}
+          sx={{ gap: 0.5, borderRadius: "99px", bgcolor: "common.black", p: 0.5, paddingInlineEnd: 1, alignContent: "center" }}
         >
           <Check color="success" fontSize="small" />
-          <Typography variant="subtitle2" color="text.secondary">
+          <Typography variant="subtitle2" sx={{ color: "text.secondary" }}>
             Changes&nbsp;saved&nbsp;locally
           </Typography>
         </Stack>
@@ -88,13 +88,13 @@ export const InfoPanel = () => {
       <Typography variant="h6">Components</Typography>
       <ComponentList />
       <Divider />
-      <Typography variant="subtitle2" color="text.secondary">
+      <Typography variant="subtitle2" sx={{ color: "text.secondary" }}>
         Inspired by{" "}
         <Link href="https://bareynol.github.io/mui-theme-creator" target="_blank">
           @bareynol
         </Link>
       </Typography>
-      <Typography variant="subtitle2" color="text.secondary">
+      <Typography variant="subtitle2" sx={{ color: "text.secondary" }}>
         Made with ❤️ by{" "}
         <Link href="https://www.linkedin.com/in/peter-ty-liu/" target="_blank">
           Peter Liu

src/components/MockApp/MockApp.tsx

@@ -267,7 +267,7 @@ export const MockApp = () => {
                       <StyledTableBodyCell>
                         <Box>
                           <Typography>{data.customer}</Typography>
-                          <Typography variant="subtitle2" color="textSecondary">
+                          <Typography variant="subtitle2" sx={{ color: "text.secondary" }}>
                             {data.orderer}
                           </Typography>
                         </Box>

src/components/Sparkline/Sparkline.tsx

@@ -40,7 +40,7 @@ export const Sparkline = ({ title, data, icon }: { title: string; data: Array<Da
         </Stack>
 
         <Stack direction="row" sx={{ containerType: "inline-size", alignItems: "flex-end", justifyContent: "space-between" }}>
-          <Typography variant="h6" color="textSecondary">
+          <Typography variant="h6" sx={{ color: "text.secondary" }}>
             {downloads[weekIndex ?? downloads.length - 1].toLocaleString()}
           </Typography>
           <Box

src/components/TextEditor.tsx/TextEditor.tsx

@@ -98,10 +98,15 @@ export const TextEditor = () => {
             }
           }}
           fullWidth
+          slotProps={{ listbox: { sx: { border: 1, borderColor: "#444" } } }}
           renderInput={(params) => <TextField {...params} />}
           renderGroup={(params) => (
             <li key={params.key}>
-              <Box sx={{ bgcolor: "primary.dark", p: 0.5 }}>{params.group}</Box>
+              <Box sx={{ p: 0.5 }}>
+                <Typography variant="caption" sx={{ textTransform: "uppercase", color: "text.secondary" }}>
+                  {params.group}
+                </Typography>
+              </Box>
               <div>{params.children}</div>
             </li>
           )}

src/components/ToolsPanel/ToolsPanel.tsx

@@ -1,9 +1,17 @@
 import { Code, Edit } from "@mui/icons-material";
-import { Paper, Tab, Tabs } from "@mui/material";
+import { Paper, Tab, Tabs, type SxProps } from "@mui/material";
 import { Activity, useState } from "react";
 import { CodePanel } from "../CodePanel/CodePanel";
 import { EditorPanel } from "../EditorPanel/EditorPanel";
 
+const TABS_SX: SxProps = {
+  minHeight: "48px",
+  transition: "0.2s color",
+  "&:hover": {
+    color: "primary.main",
+  },
+};
+
 export const ToolsPanel = () => {
   const [tab, setTab] = useState<"editor" | "code">("editor");
   return (
@@ -16,8 +24,8 @@ export const ToolsPanel = () => {
       }}
     >
       <Tabs variant="fullWidth" onChange={(_, value) => setTab(value)} value={tab} sx={{ borderBottom: 1, borderColor: "divider" }}>
-        <Tab icon={<Edit />} iconPosition="start" sx={{ minHeight: "48px" }} label="Editor" value="editor" />
-        <Tab icon={<Code />} iconPosition="start" sx={{ minHeight: "48px" }} label="Code" value="code" />
+        <Tab icon={<Edit />} iconPosition="start" sx={TABS_SX} label="Editor" value="editor" />
+        <Tab icon={<Code />} iconPosition="start" sx={TABS_SX} label="Code" value="code" />
       </Tabs>
       <Activity mode={tab === "editor" ? "visible" : "hidden"}>
         <EditorPanel />