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,32 +47,41 @@ 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.isLayerable() ? (
+        <>
-          theme.active ? (
+          <Switch
-            <Icon type="check" className="color-info mr-2" />
+            className="px-0 mr-2"
-          ) : null
+            checked={theme.active}
-        ) : (
+            onChange={toggleTheme}
-          <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>
+        </>
-      </div>
+      ) : (
-      <div
+        <>
-        className="w-5 h-5 rounded-full"
+          <div className="flex items-center">
-        style={{
+            <div
-          backgroundColor: theme.package_info?.dock_icon?.background_color,
+              className={`pseudo-radio-btn ${
-        }}
+                theme.active ? 'pseudo-radio-btn--checked' : ''
-      ></div>
+              } mr-2`}
+            ></div>
+            <span className={theme.active ? 'font-semibold' : undefined}>
+              {theme.package_info.name}
+            </span>
+          </div>
+          <div
+            className="w-5 h-5 rounded-full"
+            style={{
+              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;