From 5da51048bffab3044c09fb3972cd8552f53d1f62 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Sat, 30 Oct 2021 21:22:46 +0530
Subject: [PATCH] feat: Use toggle switch for layerable themes in quick
 settings menu (#712)

* feat: Add px-0 utlility class
---
 .../components/QuickSettingsMenu.tsx          | 56 +++++++++++--------
 app/assets/stylesheets/_sn.scss               |  5 ++
 2 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/components/QuickSettingsMenu.tsx b/app/assets/javascripts/components/QuickSettingsMenu.tsx
index cf2ba591a..7279b7c37 100644
--- a/app/assets/javascripts/components/QuickSettingsMenu.tsx
+++ b/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.active ? (
-            <Icon type="check" className="color-info mr-2" />
-          ) : null
-        ) : (
-          <div
-            className={`pseudo-radio-btn ${
-              theme.active ? 'pseudo-radio-btn--checked' : ''
-            } mr-2`}
-          ></div>
-        )}
-        <span className={theme.active ? 'font-semibold' : undefined}>
+      {theme.isLayerable() ? (
+        <>
+          <Switch
+            className="px-0 mr-2"
+            checked={theme.active}
+            onChange={toggleTheme}
+          />
           {theme.package_info.name}
-        </span>
-      </div>
-      <div
-        className="w-5 h-5 rounded-full"
-        style={{
-          backgroundColor: theme.package_info?.dock_icon?.background_color,
-        }}
-      ></div>
+        </>
+      ) : (
+        <>
+          <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>
+          </div>
+          <div
+            className="w-5 h-5 rounded-full"
+            style={{
+              backgroundColor: theme.package_info?.dock_icon?.background_color,
+            }}
+          ></div>
+        </>
+      )}
     </button>
   );
 };
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 8ac9088df..9deeee95e 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/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;