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>
2021-10-29 14:17:15 -07:00
parent c9352f1a6a
commit 2191a1561a
9 changed files with 93 additions and 102 deletions
--- 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 && (
--- 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>
--- 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 && (
--- 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>
            )}
--- 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>
  );
 };
--- 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);
--- 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 ? (
--- 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 ? (
--- 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 && (