update switch to match material 3 design

2025-12-29 00:16:39 +01:00 · 2022-05-16 14:08:58 +10:00
parent a94bb2652f
commit 449467a7b6
5 changed files with 1108 additions and 34 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,7 +13,7 @@ import { globalScope, currentUserAtom } from "@src/atoms/globalScope";
 import { ROUTES } from "@src/constants/routes";

 import TableGroupRedirectPage from "./pages/TableGroupRedirect";
-import JotaiTestPage from "@src/pages/JotaiTest";
+import JotaiTestPage from "@src/pages/Test/JotaiTest";
 import SignOutPage from "@src/pages/Auth/SignOut";

 // prettier-ignore
@@ -44,6 +44,9 @@ const UserSettingsPage = lazy(() => import("@src/pages/Settings/UserSettings" /*
 const ProjectSettingsPage = lazy(() => import("@src/pages/Settings/ProjectSettings" /* webpackChunkName: "ProjectSettingsPage" */));
 // prettier-ignore
 const UserManagementPage = lazy(() => import("@src/pages/Settings/UserManagement" /* webpackChunkName: "UserManagementPage" */));
+
+// prettier-ignore
+const ThemeTestPage = lazy(() => import("@src/pages/Test/ThemeTest" /* webpackChunkName: "ThemeTestPage" */));
 // const RowyRunTestPage = lazy(() => import("@src/pages/RowyRunTest" /* webpackChunkName: "RowyRunTestPage" */));

 export default function App() {
@@ -119,7 +122,7 @@ export default function App() {
            <Route path="/jotaiTest" element={<JotaiTestPage />} />
          </Route>

-          {/* <Route path="/jotaiTest" element={<JotaiTestPage />} /> */}
+          <Route path={ROUTES.themeTest} element={<ThemeTestPage />} />
        </Routes>
      )}
    </Suspense>
--- a/src/constants/routes.tsx
+++ b/src/constants/routes.tsx
@@ -26,7 +26,10 @@ export enum ROUTES {
  userSettings = "/settings/user",
  projectSettings = "/settings/project",
  userManagement = "/settings/userManagement",
-  rowyRunTest = "/rrTest",
+
+  test = "/test",
+  themeTest = "/test/theme",
+  rowyRunTest = "/test/rowyRunTest",
 }

 export const ROUTE_TITLES = {
@@ -49,6 +52,9 @@ export const ROUTE_TITLES = {
  [ROUTES.userSettings]: "Settings",
  [ROUTES.projectSettings]: "Project Settings",
  [ROUTES.userManagement]: "User Management",
+
+  [ROUTES.test]: "Test",
+  [ROUTES.themeTest]: "Theme Test",
  [ROUTES.rowyRunTest]: "Rowy Run Test",
 } as Record<
  ROUTES,
--- a/src/pages/Test/JotaiTest.tsx
+++ b/src/pages/Test/JotaiTest.tsx
--- a/src/pages/Test/ThemeTest.tsx
+++ b/src/pages/Test/ThemeTest.tsx
--- a/src/theme/components.tsx
+++ b/src/theme/components.tsx
@@ -861,20 +861,32 @@ export const components = (theme: Theme): ThemeOptions => {
        },
        styleOverrides: {
          sizeMedium: {
-            width: 56 + (38 - 32),
+            width: 52 + (38 - 32),
            height: 32 + (38 - 32),
            padding: (38 - 32) / 2,

-            "& .MuiSwitch-thumb": { width: 22, height: 22 },
-            "& .MuiSwitch-switchBase": { padding: 8 },
+            "& .MuiSwitch-thumb": { width: 18, height: 18 },
+            "& .MuiSwitch-switchBase": { padding: 10 },
+
+            "& .Mui-checked .MuiSwitch-thumb": { width: 24, height: 24 },
+            "& .MuiSwitch-switchBase.Mui-checked": {
+              padding: 7,
+              transform: "translateX(20px)",
+            },
          },
          sizeSmall: {
-            width: 36 + (28 - 20),
+            width: 32 + (28 - 20),
            height: 20 + (28 - 20),
            padding: (28 - 20) / 2,

-            "& .MuiSwitch-thumb": { width: 12, height: 12 },
-            "& .MuiSwitch-switchBase": { padding: 8 },
+            "& .MuiSwitch-thumb": { width: 10, height: 10 },
+            "& .MuiSwitch-switchBase": { padding: 9 },
+
+            "& .Mui-checked .MuiSwitch-thumb": { width: 14, height: 14 },
+            "& .MuiSwitch-switchBase.Mui-checked": {
+              padding: 7,
+              transform: "translateX(12px)",
+            },
          },

          track: {
@@ -893,54 +905,60 @@ export const components = (theme: Theme): ThemeOptions => {
              boxShadow: "none",
            },
          },
-          switchBase: {
-            color: theme.palette.text.primary,
-            "&.Mui-checked": { transform: "translateX(24px)" },
-          },
+          switchBase: { color: theme.palette.text.primary },
          thumb: {
-            borderRadius: 22 / 2,
+            borderRadius: 100,
            boxShadow: theme.shadows[1],

            background: theme.palette.text.secondary,
-            ".MuiSwitch-switchBase.Mui-checked &": {
+            ".Mui-checked &": {
              backgroundColor: theme.palette.secondary.contrastText,
            },

+            position: "relative",
+            ".Mui-checked &::before": {
+              content: "''",
+              position: "absolute",
+              width: "100%",
+              height: "100%",
+              left: 0,
+              top: 0,
+
+              backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.5 18 18"><polyline stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" points="2.705 8.29 7 12.585 15.295 4.29" fill="none" stroke="${encodeURIComponent(
+                theme.palette.secondary.main
+              )}" /></svg>')`,
+              backgroundPosition: "center",
+              backgroundSize: `${(16 / 24) * 100}%`,
+              backgroundRepeat: "no-repeat",
+            },
+            ".MuiSwitch-sizeSmall .Mui-checked &::before": {
+              backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.5 18 18"><polyline stroke-width="3" stroke-linecap="round" stroke-linejoin="round" points="2.705 8.29 7 12.585 15.295 4.29" fill="none" stroke="${encodeURIComponent(
+                theme.palette.secondary.main
+              )}" /></svg>')`,
+            },
+
            transition: theme.transitions.create(
-              ["width", "transform", "background-color"],
+              ["transform", "background-color"],
              { duration: theme.transitions.duration.shortest }
            ),

-            ".MuiSwitch-root:hover .MuiSwitch-switchBase:not(.Mui-disabled) &":
-              {
-                transform: `scale(${1 + 2 / 22})`,
-              },
-            ".MuiSwitch-root.MuiSwitch-sizeSmall:hover .MuiSwitch-switchBase:not(.Mui-disabled) &":
-              {
-                transform: `scale(${1 + 2 / 12})`,
-              },
-
            ".MuiSwitch-root:active .MuiSwitch-switchBase:not(.Mui-disabled) &":
              {
-                width: 22 * 1.333,
+                transform: `scale(${28 / 18})`,
              },
            ".MuiSwitch-root.MuiSwitch-sizeSmall:active .MuiSwitch-switchBase:not(.Mui-disabled) &":
              {
-                width: 12 * 1.333,
+                transform: `scale(${16 / 10})`,
              },
-            "& + .MuiTouchRipple-root": {
-              borderRadius: 22 / 2,
-              zIndex: -1,
-            },
+            "& + .MuiTouchRipple-root": { zIndex: -1 },

            ".MuiSwitch-root:active .MuiSwitch-switchBase.Mui-checked:not(.Mui-disabled) &":
              {
-                transform: `translateX(-${0.333 * 22}px) scale(${1 + 2 / 22})`,
-                "& + .MuiTouchRipple-root": { left: -4 },
+                transform: `scale(${28 / 24})`,
              },
            ".MuiSwitch-root.MuiSwitch-sizeSmall:active .MuiSwitch-switchBase.Mui-checked:not(.Mui-disabled) &":
              {
-                transform: `translateX(-${0.333 * 12}px) scale(${1 + 2 / 12})`,
+                transform: `scale(${16 / 14})`,
              },

            ".MuiSwitch-switchBase.Mui-disabled &": {
@@ -948,6 +966,22 @@ export const components = (theme: Theme): ThemeOptions => {
            },
            ".MuiSwitch-switchBase.Mui-disabled.Mui-checked &": {
              opacity: 1,
+              "&::before": { opacity: theme.palette.action.disabledOpacity },
+            },
+          },
+
+          colorPrimary: {
+            "&.Mui-checked ": {
+              "& .MuiSwitch-thumb::before": {
+                backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.5 18 18"><polyline stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" points="2.705 8.29 7 12.585 15.295 4.29" fill="none" stroke="${encodeURIComponent(
+                  theme.palette.primary.main
+                )}" /></svg>')`,
+              },
+              ".MuiSwitch-sizeSmall & .MuiSwitch-thumb::before": {
+                backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.5 18 18"><polyline stroke-width="3" stroke-linecap="round" stroke-linejoin="round" points="2.705 8.29 7 12.585 15.295 4.29" fill="none" stroke="${encodeURIComponent(
+                  theme.palette.primary.main
+                )}" /></svg>')`,
+              },
            },
          },

@@ -957,6 +991,17 @@ export const components = (theme: Theme): ThemeOptions => {
              "& + .MuiSwitch-track": {
                backgroundColor: theme.palette.success.light,
              },
+
+              "& .MuiSwitch-thumb::before": {
+                backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.5 18 18"><polyline stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" points="2.705 8.29 7 12.585 15.295 4.29" fill="none" stroke="${encodeURIComponent(
+                  theme.palette.success.main
+                )}" /></svg>')`,
+              },
+              ".MuiSwitch-sizeSmall & .MuiSwitch-thumb::before": {
+                backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.5 18 18"><polyline stroke-width="3" stroke-linecap="round" stroke-linejoin="round" points="2.705 8.29 7 12.585 15.295 4.29" fill="none" stroke="${encodeURIComponent(
+                  theme.palette.success.main
+                )}" /></svg>')`,
+              },
            },
          },
        } as any,