feat: Use toggle switch for layerable themes in quick settings menu (#712)

* feat: Add px-0 utlility class

app/assets/javascripts/components/QuickSettingsMenu.tsx

@@ -38,7 +38,8 @@ const ThemeButton: FunctionComponent<ThemeButtonProps> = ({
   theme,
   onBlur,
 }) => {
-  const toggleTheme = () => {
+  const toggleTheme = (e: any) => {
+    e.preventDefault();
     if (theme.isLayerable() || !theme.active) {
       application.toggleComponent(theme);
     }
@@ -46,22 +47,29 @@ const ThemeButton: FunctionComponent<ThemeButtonProps> = ({
 
   return (
     <button
-      className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
+      className={`sn-dropdown-item focus:bg-info-backdrop focus:shadow-none ${
+        theme.isLayerable() ? `justify-start` : `justify-between`
+      }`}
       onClick={toggleTheme}
       onBlur={onBlur}
     >
-      <div className="flex items-center">
       {theme.isLayerable() ? (
-          theme.active ? (
+        <>
-            <Icon type="check" className="color-info mr-2" />
+          <Switch
-          ) : null
+            className="px-0 mr-2"
+            checked={theme.active}
+            onChange={toggleTheme}
+          />
+          {theme.package_info.name}
+        </>
       ) : (
+        <>
+          <div className="flex items-center">
             <div
               className={`pseudo-radio-btn ${
                 theme.active ? 'pseudo-radio-btn--checked' : ''
               } mr-2`}
             ></div>
-        )}
             <span className={theme.active ? 'font-semibold' : undefined}>
               {theme.package_info.name}
             </span>
@@ -72,6 +80,8 @@ const ThemeButton: FunctionComponent<ThemeButtonProps> = ({
               backgroundColor: theme.package_info?.dock_icon?.background_color,
             }}
           ></div>
+        </>
+      )}
     </button>
   );
 };

app/assets/stylesheets/_sn.scss

@@ -422,6 +422,11 @@
   padding-bottom: 0.625rem;
 }
 
+.sn-component .px-0 {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .px-9 {
   padding-left: 2.25rem;
   padding-right: 2.25rem;