Merge pull request #353 from MOV-AI/dev

Release 1.3.7
MOV-AI · Oct 14, 2024 · 216368a · 216368a
2 parents 76f6393 + db81174
commit 216368a
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 1.3.7
+
+- [FP-2959](https://movai.atlassian.net/browse/FP-2959): Toggle button is missaligned
+
 # 1.3.6
 
 - [QAP-4053](https://movai.atlassian.net/browse/QAP-4053): Forward test coverage for lib-react

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mov-ai/mov-fe-lib-react",
-  "version": "1.3.6-1",
+  "version": "1.3.7-0",
   "description": "The Mov.AI's frontend library for React.",
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/mov-ai"

diff --git a/src/Components/ProfileMenu/ProfileMenu.tsx b/src/Components/ProfileMenu/ProfileMenu.tsx
@@ -180,14 +180,15 @@ const ProfileMenu = (props: ProfileMenuProps) => {
           )}
           {customEl}
           {handleToggleTheme && (
-            <div className={classes.menuItemSpacing}>
-              {darkThemeLabel}
-              <Toggle
-                onToggle={handleToggleTheme}
-                toggle={(window.localStorage.getItem("movai.theme") ?? "dark") === "dark"}
-              ></Toggle>
-            </div>
+              <MenuItem className={classes.menuItemSpacing} onClick={(ev) => ev.preventDefault()}>
+                  {darkThemeLabel}
+                  <Toggle
+                    onToggle={handleToggleTheme}
+                    toggle={(window.localStorage.getItem("movai.theme") ?? "dark") === "dark"}
+                  ></Toggle>
+              </MenuItem>
           )}
+
           <MenuItem
             className={classes.menuItemSpacing}
             onClick={handleLogoutClick}

diff --git a/src/Components/Toggle.tsx b/src/Components/Toggle.tsx
@@ -2,10 +2,9 @@ import React from "react";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Switch from "@material-ui/core/Switch";
 import { makeStyles } from "@material-ui/styles";
-import { green, grey } from "@material-ui/core/colors";
 import { ToggleProps } from "./types";
 
-const useStyles = makeStyles(_theme => ({
+const useStyles = makeStyles(() => ({
   label: {
     fontFamily: "Roboto",
     fontStyle: "normal",
@@ -15,17 +14,6 @@ const useStyles = makeStyles(_theme => ({
     marginRight: 0,
     marginBottom: 0
   },
-  colorSwitchBase: {
-    color: grey[300],
-    "&$colorChecked": {
-      color: green[500],
-      "& + $colorBar": {
-        backgroundColor: green[500]
-      }
-    }
-  },
-  colorBar: {},
-  colorChecked: {}
 }));
 
 const Toggle = (props: ToggleProps) => {
@@ -42,11 +30,6 @@ const Toggle = (props: ToggleProps) => {
           disabled={props.disabled}
           hidden={props.hidden}
           size={props.size}
-          classes={{
-            switchBase: classes.colorSwitchBase,
-            checked: classes.colorChecked,
-            track: classes.colorBar
-          }}
         />
       }
       labelPlacement={props.labelPlacement}

diff --git a/src/styles/Themes.js b/src/styles/Themes.js
@@ -62,13 +62,16 @@ const themeFactory = particular => _merge(particular, {
       },
     },
     MuiSwitch: {
+      root: {
+        overflow: "visible",
+      },
       thumb: {
-          transform: "translateY(-2px)",
+          transform: "translateY(1px)",
       },
       switchBase: {
-        transform: "translateX(16px)",
+        transform: "translateX(3px)",
         "&.Mui-checked": {
-          transform: "translateX(24px)",
+          transform: "translateX(28px)",
         }
       },
       track: {