refactor: make switch styling similar to checkbox

Zonos · May 23, 2024 · 2724c2a · 2724c2a
1 parent ef7f3c1
commit 2724c2a
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 28 deletions.
diff --git a/src/components/switch/Switch.module.scss b/src/components/switch/Switch.module.scss
@@ -44,7 +44,6 @@
 }
 
 .aminoSwitchWrapper {
-  margin-right: 16px;
   width: 32px;
   height: 16px;
   min-width: 32px;
@@ -60,10 +59,10 @@
   &.checked {
     background: theme.$amino-primary;
   }
+}
 
-  &.withoutLabel {
-    margin-right: 0;
-  }
+.infoWrapper {
+  margin-left: 16px;
 }
 
 .aminoSwitchWrapperWithIcons.aminoSwitchWrapperWithIcons {

diff --git a/src/components/switch/Switch.module.scss.d.ts b/src/components/switch/Switch.module.scss.d.ts
@@ -4,11 +4,11 @@ export declare const aminoSwitchWrapper: string;
 export declare const aminoSwitchWrapperWithIcons: string;
 export declare const checked: string;
 export declare const disabled: string;
+export declare const infoWrapper: string;
 export declare const labelWrapper: string;
 export declare const left: string;
 export declare const styledLabel: string;
 export declare const styledLabelDescription: string;
 export declare const styledSubtitle: string;
 export declare const switchContainer: string;
 export declare const switchIcon: string;
-export declare const withoutLabel: string;
diff --git a/src/components/switch/Switch.tsx b/src/components/switch/Switch.tsx
@@ -55,7 +55,6 @@ export const Switch = ({
             styles.aminoSwitchWrapper,
             styles.aminoSwitchWrapperWithIcons,
             checked && styles.checked,
-            !hasLabel && styles.withoutLabel,
           )}
         >
           <div
@@ -73,36 +72,34 @@ export const Switch = ({
         </div>
       ) : (
         <div
-          className={clsx(
-            styles.aminoSwitchWrapper,
-            checked && styles.checked,
-            !hasLabel && styles.withoutLabel,
-          )}
+          className={clsx(styles.aminoSwitchWrapper, checked && styles.checked)}
         >
           <div
             className={clsx(styles.aminoSwitch, checked && styles.checked)}
             id={labelAsHtmlAttribute}
           />
         </div>
       )}
-      <div>
-        <div className={styles.labelWrapper}>
-          {labelIcon}
-          <Text className={styles.styledLabel} type="input-label">
-            {label}
-            {labelDescription && (
-              <span className={styles.styledLabelDescription}>
-                {labelDescription}
-              </span>
-            )}
-          </Text>
+      {hasLabel && (
+        <div className={styles.infoWrapper}>
+          <div className={styles.labelWrapper}>
+            {labelIcon}
+            <Text className={styles.styledLabel} type="input-label">
+              {label}
+              {labelDescription && (
+                <span className={styles.styledLabelDescription}>
+                  {labelDescription}
+                </span>
+              )}
+            </Text>
+          </div>
+          {subtitle && (
+            <Text className={styles.styledSubtitle} type="subtitle">
+              {subtitle}
+            </Text>
+          )}
         </div>
-        {subtitle && (
-          <Text className={styles.styledSubtitle} type="subtitle">
-            {subtitle}
-          </Text>
-        )}
-      </div>
+      )}
     </label>
   );
 };