Change switches to checkboxes

src/attributes/components/AttributeDetails/AttributeDetails.tsx

@@ -6,7 +6,7 @@ import { useIntl } from "react-intl";
 import slugify from "slugify";
 
 import CardTitle from "@saleor/components/CardTitle";
-import ControlledSwitch from "@saleor/components/ControlledSwitch";
+import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
 import FormSpacer from "@saleor/components/FormSpacer";
 import SingleSelectField from "@saleor/components/SingleSelectField";
 import { commonMessages } from "@saleor/intl";
@@ -103,14 +103,15 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({
           value={data.inputType}
         />
         <FormSpacer />
-        <ControlledSwitch
-          checked={data.valueRequired}
+        <ControlledCheckbox
+          name={"valueRequired" as keyof FormData}
           label={intl.formatMessage({
             defaultMessage: "Value Required",
             description: "check to require attribute to have value"
           })}
-          name={"valueRequired" as keyof AttributePageFormData}
+          checked={data.valueRequired}
           onChange={onChange}
+          disabled={disabled}
         />
       </CardContent>
     </Card>

src/attributes/components/AttributeProperties/AttributeProperties.tsx

@@ -7,7 +7,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardSpacer from "@saleor/components/CardSpacer";
 import CardTitle from "@saleor/components/CardTitle";
-import ControlledSwitch from "@saleor/components/ControlledSwitch";
+import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
 import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
 import { commonMessages } from "@saleor/intl";
@@ -71,16 +71,17 @@ const AttributeProperties: React.FC<AttributePropertiesProps> = ({
           />
         </Typography>
         <Hr />
-        <ControlledSwitch
-          name={"filterableInStorefront" as keyof AttributePageFormData}
-          checked={data.filterableInStorefront}
-          disabled={disabled}
+        <ControlledCheckbox
+          name={"filterableInStorefront" as keyof FormData}
           label={intl.formatMessage({
             defaultMessage: "Use in faceted navigation",
             description: "attribute is filterable in storefront"
           })}
+          checked={data.filterableInStorefront}
           onChange={onChange}
+          disabled={disabled}
         />
+        <FormSpacer />
         {data.filterableInStorefront && (
           <TextField
             disabled={disabled}
@@ -97,15 +98,15 @@ const AttributeProperties: React.FC<AttributePropertiesProps> = ({
           />
         )}
         <FormSpacer />
-        <ControlledSwitch
-          name={"visibleInStorefront" as keyof AttributePageFormData}
-          checked={data.visibleInStorefront}
-          disabled={disabled}
+        <ControlledCheckbox
+          name={"visibleInStorefront" as keyof FormData}
           label={intl.formatMessage({
             defaultMessage: "Visible on Product Page in Storefront",
             description: "attribute"
           })}
+          checked={data.visibleInStorefront}
           onChange={onChange}
+          disabled={disabled}
         />
         <CardSpacer />
         <Typography variant="subtitle1">
@@ -116,36 +117,40 @@ const AttributeProperties: React.FC<AttributePropertiesProps> = ({
         </Typography>
         <Hr />
         <CardSpacer />
-        <ControlledSwitch
-          name={"filterableInDashboard" as keyof AttributePageFormData}
-          checked={data.filterableInDashboard}
-          disabled={disabled}
-          label={intl.formatMessage({
-            defaultMessage: "Use in Filtering",
-            description: "use attribute in filtering"
-          })}
-          secondLabel={
-            <Typography variant="caption">
-              <FormattedMessage defaultMessage="If enabled, you’ll be able to use this attribute to filter products in product list." />
-            </Typography>
+        <ControlledCheckbox
+          name={"filterableInDashboard" as keyof FormData}
+          label={
+            <>
+              <FormattedMessage
+                defaultMessage="Use in Filtering"
+                description="use attribute in filtering"
+              />
+              <Typography variant="caption">
+                <FormattedMessage defaultMessage="If enabled, you’ll be able to use this attribute to filter products in product list." />
+              </Typography>
+            </>
           }
+          checked={data.filterableInDashboard}
           onChange={onChange}
+          disabled={disabled}
         />
         <FormSpacer />
-        <ControlledSwitch
-          name={"availableInGrid" as keyof AttributePageFormData}
-          checked={data.availableInGrid}
-          disabled={disabled}
-          label={intl.formatMessage({
-            defaultMessage: "Add to Column Options",
-            description: "add attribute as column in product list table"
-          })}
-          secondLabel={
-            <Typography variant="caption">
-              <FormattedMessage defaultMessage="If enable this attribute can be used as a column in product table." />
-            </Typography>
+        <ControlledCheckbox
+          name={"availableInGrid" as keyof FormData}
+          label={
+            <>
+              <FormattedMessage
+                defaultMessage="Add to Column Options"
+                description="add attribute as column in product list table"
+              />
+              <Typography variant="caption">
+                <FormattedMessage defaultMessage="If enable this attribute can be used as a column in product table." />
+              </Typography>
+            </>
           }
+          checked={data.availableInGrid}
           onChange={onChange}
+          disabled={disabled}
         />
       </CardContent>
     </Card>

src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx

@@ -6,7 +6,7 @@ import AppHeader from "@saleor/components/AppHeader";
 import { CardSpacer } from "@saleor/components/CardSpacer";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import { Container } from "@saleor/components/Container";
-import { ControlledSwitch } from "@saleor/components/ControlledSwitch";
+import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
@@ -126,15 +126,15 @@ const CollectionDetailsPage: React.StatelessComponent<
                   disabled={disabled}
                   onChange={change}
                 >
-                  <ControlledSwitch
-                    checked={data.isFeatured}
-                    disabled={disabled}
-                    name="isFeatured"
-                    onChange={change}
+                  <ControlledCheckbox
+                    name={"isFeatured" as keyof FormData}
                     label={intl.formatMessage({
                       defaultMessage: "Feature on Homepage",
                       description: "switch button"
                     })}
+                    checked={data.isFeatured}
+                    onChange={change}
+                    disabled={disabled}
                   />
                 </VisibilityCard>
               </div>

src/discounts/components/VoucherValue/VoucherValue.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
-import ControlledSwitch from "@saleor/components/ControlledSwitch";
+import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
 import { FormSpacer } from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
 import RadioGroupField from "@saleor/components/RadioGroupField";
@@ -98,8 +98,8 @@ const VoucherValue = ({
         )}
         <Hr />
         <FormSpacer />
-        <ControlledSwitch
-          checked={data.applyOncePerOrder}
+        <ControlledCheckbox
+          name={"applyOncePerOrder" as keyof FormData}
           label={
             <>
               <FormattedMessage
@@ -111,8 +111,8 @@ const VoucherValue = ({
               </Typography>
             </>
           }
+          checked={data.applyOncePerOrder}
           onChange={onChange}
-          name={"applyOncePerOrder" as keyof FormData}
           disabled={disabled}
         />
       </CardContent>

src/plugins/components/PluginInfo/PluginInfo.tsx

@@ -6,7 +6,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
-import ControlledSwitch from "@saleor/components/ControlledSwitch";
+import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
 import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
 import { commonMessages } from "@saleor/intl";
@@ -69,12 +69,12 @@ const PluginInfo: React.StatelessComponent<PluginInfoProps> = ({
             description: "plugin status"
           })}
         </Typography>
-        <ControlledSwitch
-          checked={data.active}
+        <ControlledCheckbox
+          name={"active" as keyof FormData}
           label={intl.formatMessage({
             defaultMessage: "Set plugin as Active"
           })}
-          name={"active" as keyof FormData}
+          checked={data.active}
           onChange={onChange}
         />
       </CardContent>

src/plugins/components/PluginSettings/PluginSettings.tsx

@@ -3,7 +3,7 @@ import CardContent from "@material-ui/core/CardContent";
 import TextField from "@material-ui/core/TextField";
 import makeStyles from "@material-ui/styles/makeStyles";
 import CardTitle from "@saleor/components/CardTitle";
-import ControlledSwitch from "@saleor/components/ControlledSwitch";
+import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
 import { FormErrors } from "@saleor/types";
 import { ConfigurationTypeFieldEnum } from "@saleor/types/globalTypes";
 import React from "react";
@@ -65,16 +65,16 @@ const PluginSettings: React.StatelessComponent<PluginSettingsProps> = ({
               />
             )}
             {fields[index].type === ConfigurationTypeFieldEnum.BOOLEAN && (
-              <ControlledSwitch
+              <ControlledCheckbox
+                name={configuration.name}
+                label={fields[index].label}
                 checked={
                   typeof configuration.value !== "boolean"
                     ? configuration.value === "true"
                     : configuration.value
                 }
-                disabled={disabled}
-                label={fields[index].label}
-                name={configuration.name}
                 onChange={onChange}
+                disabled={disabled}
               />
             )}
           </div>

src/shipping/components/ShippingZoneRateDialog/ShippingZoneRateDialog.tsx

@@ -17,7 +17,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import ConfirmButton, {
   ConfirmButtonTransitionState
 } from "@saleor/components/ConfirmButton";
-import ControlledSwitch from "@saleor/components/ControlledSwitch";
+import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
 import Form from "@saleor/components/Form";
 import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
@@ -184,10 +184,8 @@ const ShippingZoneRateDialog = withStyles(styles, {
                               description: "order weight range"
                             })}
                       </Typography>
-                      <ControlledSwitch
-                        checked={data.noLimits}
+                      <ControlledCheckbox
                         name={"noLimits" as keyof FormData}
-                        onChange={change}
                         label={
                           <>
                             <FormattedMessage
@@ -207,6 +205,9 @@ const ShippingZoneRateDialog = withStyles(styles, {
                             </Typography>
                           </>
                         }
+                        checked={data.noLimits}
+                        onChange={change}
+                        disabled={disabled}
                       />
                       {!data.noLimits && (
                         <>
@@ -289,15 +290,15 @@ const ShippingZoneRateDialog = withStyles(styles, {
                       description="shipping method"
                     />
                   </Typography>
-                  <ControlledSwitch
-                    checked={data.isFree}
-                    disabled={disabled}
+                  <ControlledCheckbox
+                    name={"isFree" as keyof FormData}
                     label={intl.formatMessage({
                       defaultMessage: "This is free shipping",
                       description: "shipping method, switch button"
                     })}
-                    name={"isFree" as keyof FormData}
+                    checked={data.isFree}
                     onChange={change}
+                    disabled={disabled}
                   />
                   {!data.isFree && (
                     <>

src/taxes/components/TaxConfiguration/TaxConfiguration.tsx

@@ -7,7 +7,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
-import ControlledSwitch from "@saleor/components/ControlledSwitch";
+import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
 import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
 import { sectionNames } from "@saleor/intl";
@@ -42,33 +42,35 @@ export const TaxConfiguration = withStyles(styles, {
       <Card>
         <CardTitle title={intl.formatMessage(sectionNames.configuration)} />
         <CardContent className={classes.content}>
-          <ControlledSwitch
-            disabled={disabled}
+          <ControlledCheckbox
             name={"includeTax" as keyof FormData}
             label={intl.formatMessage({
               defaultMessage:
                 "All products prices are entered with tax included"
             })}
-            onChange={onChange}
             checked={data.includeTax}
-          />
-          <ControlledSwitch
+            onChange={onChange}
             disabled={disabled}
+          />
+          <FormSpacer />
+          <ControlledCheckbox
             name={"showGross" as keyof FormData}
             label={intl.formatMessage({
               defaultMessage: "Show gross prices to customers in the storefront"
             })}
-            onChange={onChange}
             checked={data.showGross}
-          />
-          <ControlledSwitch
+            onChange={onChange}
             disabled={disabled}
+          />
+          <FormSpacer />
+          <ControlledCheckbox
             name={"chargeTaxesOnShipping" as keyof FormData}
             label={intl.formatMessage({
               defaultMessage: "Charge taxes on shipping rates"
             })}
-            onChange={onChange}
             checked={data.chargeTaxesOnShipping}
+            onChange={onChange}
+            disabled={disabled}
           />
           <FormSpacer />
         </CardContent>

src/theme.ts

@@ -90,6 +90,12 @@ export default (colors: IThemeColors): Theme =>
           padding: "5px 24px 24px"
         }
       },
+      MuiFormControlLabel: {
+        root: {
+          display: "grid",
+          gridTemplateColumns: "50px 6fr"
+        }
+      },
       MuiFormLabel: {
         filled: {
           color: [[colors.primary], "!important"] as any