From 2191a1561a53baa8520119013696fc78e9ec3b8b Mon Sep 17 00:00:00 2001
From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
Date: Fri, 29 Oct 2021 14:17:15 -0700
Subject: [PATCH] Match switch design (#1166)

* Match Design for Switches

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

* Margins

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
---
 .../Console/Account/AddServiceAccount.tsx     |   2 -
 .../BucketDetails/AddLifecycleModal.tsx       |   1 -
 .../Buckets/BucketDetails/EnableQuota.tsx     |   1 -
 .../Console/Buckets/ListBuckets/AddBucket.tsx |   4 -
 .../FormSwitchWrapper/FormSwitchWrapper.tsx   | 182 +++++++++---------
 .../ConfTargetGeneric.tsx                     |   1 -
 .../CustomForms/ConfMySql.tsx                 |   1 -
 .../CustomForms/ConfPostgres.tsx              |   1 -
 .../Console/Users/AddUserServiceAccount.tsx   |   2 -
 9 files changed, 93 insertions(+), 102 deletions(-)

diff --git a/portal-ui/src/screens/Console/Account/AddServiceAccount.tsx b/portal-ui/src/screens/Console/Account/AddServiceAccount.tsx
index b72ae6d4a..bd5a9360f 100644
--- a/portal-ui/src/screens/Console/Account/AddServiceAccount.tsx
+++ b/portal-ui/src/screens/Console/Account/AddServiceAccount.tsx
@@ -166,7 +166,6 @@ const AddServiceAccount = ({
                 setIsRestrictedByPolicy(event.target.checked);
               }}
               label={"Restrict with policy"}
-              indicatorLabels={["On", "Off"]}
             />
             <FormSwitchWrapper
               value="locking"
@@ -177,7 +176,6 @@ const AddServiceAccount = ({
                 setAddCredentials(event.target.checked);
               }}
               label={"Customize Credentials"}
-              indicatorLabels={["On", "Off"]}
             />
           </Grid>
           {isRestrictedByPolicy && (
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx
index be5e054e2..dbb5a1718 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx
@@ -439,7 +439,6 @@ const AddLifecycleModal = ({
                     setExpiredObjectDM(event.target.checked);
                   }}
                   label={"Expired Object Delete Marker"}
-                  indicatorLabels={["On", "Off"]}
                 />
               </Grid>
             </Grid>
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx
index 3d7972876..d5fc8fac9 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx
@@ -154,7 +154,6 @@ const EnableQuota = ({
                   setQuotaEnabled(event.target.checked);
                 }}
                 label={"Quota"}
-                indicatorLabels={["On", "Off"]}
               />
             </Grid>
             {quotaEnabled && (
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
index 3f85d8706..b8df60ffd 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
@@ -321,7 +321,6 @@ const AddBucket = ({
                   "Allows to keep multiple versions of the same object under the same key."
                 }
                 label={"Versioning"}
-                indicatorLabels={["On", "Off"]}
                 disabled={!distributedSetup}
               />
             </Grid>
@@ -339,7 +338,6 @@ const AddBucket = ({
                 description={
                   "Required to support retention and legal hold. Can only be enabled at bucket creation."
                 }
-                indicatorLabels={["On", "Off"]}
               />
             </Grid>
 
@@ -354,7 +352,6 @@ const AddBucket = ({
                 }}
                 label={"Quota"}
                 description={"Limit the amount of data in the bucket."}
-                indicatorLabels={["On", "Off"]}
                 disabled={!distributedSetup}
               />
             </Grid>
@@ -421,7 +418,6 @@ const AddBucket = ({
                   description={
                     "Impose rules to prevent object deletion for a period of time."
                   }
-                  indicatorLabels={["On", "Off"]}
                 />
               </Grid>
             )}
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx
index 60d1b5bf8..a2dd74ac3 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx
@@ -22,6 +22,7 @@ import { InputLabel, Switch, Tooltip, Typography } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import { actionsTray, fieldBasic } from "../common/styleLibrary";
 import HelpIcon from "../../../../../icons/HelpIcon";
+import clsx from "clsx";
 
 interface IFormSwitch {
   label?: string;
@@ -34,10 +35,8 @@ interface IFormSwitch {
   tooltip?: string;
   description?: string;
   index?: number;
-  indicatorLabels?: string[];
   checked: boolean;
   switchOnly?: boolean;
-  containerClass?: string;
 }
 
 const styles = (theme: Theme) =>
@@ -103,18 +102,16 @@ const styles = (theme: Theme) =>
       },
     },
     divContainer: {
-      paddingBottom: 14,
       marginBottom: 20,
       maxWidth: 840,
     },
-    wrapperContainer: {
-      display: "flex",
-      alignItems: "center",
+    indicatorLabelOn: {
+      fontWeight: "bold",
+      color: "#081C42 !important",
     },
     indicatorLabel: {
       fontSize: 12,
-      fontWeight: 600,
-      color: "#081C42",
+      color: "#E2E2E2",
       margin: "0 8px 0 10px",
     },
     fieldDescription: {
@@ -128,53 +125,47 @@ const styles = (theme: Theme) =>
     ...fieldBasic,
   });
 
-const StyledSwitch = withStyles({
+const StyledSwitch = withStyles((theme) => ({
   root: {
-    alignItems: "flex-start",
-    height: 18,
-    padding: "0 12px",
-    display: "flex",
-    position: "relative",
+    width: 50,
+    height: 24,
+    padding: 0,
+    margin: 0,
   },
   switchBase: {
-    color: "#fff",
-    padding: 0,
-    top: "initial",
+    padding: 1,
     "&$checked": {
-      color: "#fff",
+      transform: "translateX(24px)",
+      color: theme.palette.common.white,
+      "& + $track": {
+        backgroundColor: "#4CCB92",
+        boxShadow: "inset 0px 1px 4px rgba(0,0,0,0.1)",
+        opacity: 1,
+        border: "none",
+      },
     },
-    "&$checked + $track": {
-      backgroundColor: "#4CCB92",
-      border: "#4CCB92 1px solid",
-      opacity: 1,
-    },
-    "&:hover": {
-      backgroundColor: "#fff",
-    },
-  },
-  checked: {},
-  track: {
-    height: 15,
-    backgroundColor: "#E2E2E2",
-    border: "#E2E2E2 1px solid",
-    opacity: 1,
-    padding: 0,
-    marginTop: 1.5,
-    "&$checked": {
-      backgroundColor: "#4CCB92",
-      border: "#4CCB92 1px solid",
+    "&$focusVisible $thumb": {
+      color: "#4CCB92",
+      border: "6px solid #fff",
     },
   },
   thumb: {
+    width: 22,
+    height: 22,
     backgroundColor: "#FAFAFA",
-    border: "#E2E2E2 1px solid",
-    boxShadow: "none",
-    width: 18,
-    height: 18,
-    padding: 0,
-    marginLeft: 10,
+    border: "2px solid #FFFFFF",
+    marginLeft: 1,
   },
-})(Switch);
+  track: {
+    borderRadius: 24 / 2,
+    backgroundColor: "#E2E2E2",
+    boxShadow: "inset 0px 1px 4px rgba(0,0,0,0.1)",
+    opacity: 1,
+    transition: theme.transitions.create(["background-color", "border"]),
+  },
+  checked: {},
+  focusVisible: {},
+}))(Switch);
 
 const FormSwitchWrapper = ({
   label = "",
@@ -187,31 +178,40 @@ const FormSwitchWrapper = ({
   switchOnly = false,
   tooltip = "",
   description = "",
-  indicatorLabels = [],
-  containerClass = "",
   classes,
 }: IFormSwitch) => {
   const switchComponent = (
     <React.Fragment>
-      <div className={`${classes.switchContainer} ${containerClass}`}>
-        <StyledSwitch
-          checked={checked}
-          onChange={onChange}
-          color="primary"
-          name={name}
-          inputProps={{ "aria-label": "primary checkbox" }}
-          disabled={disabled}
-          disableRipple
-          disableFocusRipple
-          disableTouchRipple
-          value={value}
-        />
-        {indicatorLabels.length === 2 && (
-          <span className={classes.indicatorLabel}>
-            {checked ? indicatorLabels[0] : indicatorLabels[1]}
-          </span>
-        )}
-      </div>
+      {!switchOnly && (
+        <span
+          className={clsx(classes.indicatorLabel, {
+            [classes.indicatorLabelOn]: !checked,
+          })}
+        >
+          OFF
+        </span>
+      )}
+      <StyledSwitch
+        checked={checked}
+        onChange={onChange}
+        color="primary"
+        name={name}
+        inputProps={{ "aria-label": "primary checkbox" }}
+        disabled={disabled}
+        disableRipple
+        disableFocusRipple
+        disableTouchRipple
+        value={value}
+      />
+      {!switchOnly && (
+        <span
+          className={clsx(classes.indicatorLabel, {
+            [classes.indicatorLabelOn]: checked,
+          })}
+        >
+          ON
+        </span>
+      )}
     </React.Fragment>
   );
 
@@ -221,30 +221,34 @@ const FormSwitchWrapper = ({
 
   return (
     <div className={classes.divContainer}>
-      <Grid item xs={12} className={classes.wrapperContainer}>
-        {label !== "" && (
-          <InputLabel htmlFor={id} className={classes.inputLabel}>
-            <span>{label}</span>
-            {tooltip !== "" && (
-              <div className={classes.tooltipContainer}>
-                <Tooltip title={tooltip} placement="top-start">
-                  <div>
-                    <HelpIcon className={classes.tooltip} />
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-          </InputLabel>
-        )}
-        {switchComponent}
-      </Grid>
-      {description !== "" && (
-        <Grid item xs={10}>
-          <Typography component="p" className={classes.fieldDescription}>
-            {description}
-          </Typography>
+      <Grid container alignItems={"center"}>
+        <Grid item xs>
+          {label !== "" && (
+            <InputLabel htmlFor={id} className={classes.inputLabel}>
+              <span>{label}</span>
+              {tooltip !== "" && (
+                <div className={classes.tooltipContainer}>
+                  <Tooltip title={tooltip} placement="top-start">
+                    <div>
+                      <HelpIcon className={classes.tooltip} />
+                    </div>
+                  </Tooltip>
+                </div>
+              )}
+            </InputLabel>
+          )}
         </Grid>
-      )}
+        <Grid item xs textAlign={"right"}>
+          {switchComponent}
+        </Grid>
+        {description !== "" && (
+          <Grid item xs={12}>
+            <Typography component="p" className={classes.fieldDescription}>
+              {description}
+            </Typography>
+          </Grid>
+        )}
+      </Grid>
     </div>
   );
 };
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/ConfTargetGeneric.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/ConfTargetGeneric.tsx
index 06845c4d6..dbcdb43d3 100644
--- a/portal-ui/src/screens/Console/NotificationEndpoints/ConfTargetGeneric.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/ConfTargetGeneric.tsx
@@ -102,7 +102,6 @@ const ConfTargetGeneric = ({
 
         return (
           <FormSwitchWrapper
-            indicatorLabels={["On", "Off"]}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               const value = e.target.checked ? "true" : "false";
               setValueElement(field.name, value, item);
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ConfMySql.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ConfMySql.tsx
index c2181ba1f..d6aa3c4f6 100644
--- a/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ConfMySql.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ConfMySql.tsx
@@ -142,7 +142,6 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
           name="checkedB"
           onChange={switcherChangeEvt}
           value={"dnsString"}
-          indicatorLabels={["On", "Off"]}
         />
       </Grid>
       {useDsnString ? (
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ConfPostgres.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ConfPostgres.tsx
index a8aed7a73..9e1735fd1 100644
--- a/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ConfPostgres.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/ConfPostgres.tsx
@@ -214,7 +214,6 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
             setUseConnectionString(e.target.checked);
           }}
           value={"manualString"}
-          indicatorLabels={["On", "Off"]}
         />
       </Grid>
       {useConnectionString ? (
diff --git a/portal-ui/src/screens/Console/Users/AddUserServiceAccount.tsx b/portal-ui/src/screens/Console/Users/AddUserServiceAccount.tsx
index 743ec114e..a339ec78b 100644
--- a/portal-ui/src/screens/Console/Users/AddUserServiceAccount.tsx
+++ b/portal-ui/src/screens/Console/Users/AddUserServiceAccount.tsx
@@ -166,7 +166,6 @@ const AddUserServiceAccount = ({
                 setIsRestrictedByPolicy(event.target.checked);
               }}
               label={"Restrict with policy"}
-              indicatorLabels={["On", "Off"]}
             />
             <FormSwitchWrapper
               value="locking"
@@ -177,7 +176,6 @@ const AddUserServiceAccount = ({
                 setAddCredentials(event.target.checked);
               }}
               label={"Customize Credentials"}
-              indicatorLabels={["On", "Off"]}
             />
           </Grid>
           {isRestrictedByPolicy && (