From 422abaec15a9efb48da033c7709dfea06237e8dc Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Thu, 5 Jan 2023 23:14:08 +0900
Subject: [PATCH] Slider option styling

---
 .../Tiles/Widgets/WidgetsEditModal.tsx        | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
index 9ea5fad5a..d28d5cf44 100644
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
@@ -115,6 +115,7 @@ export const WidgetsEditModal = ({
   );
 };
 
+// Widget switch
 // Widget options are computed based on their type.
 // here you can define new types for options (along with editing the widgets.d.ts file)
 function WidgetOptionTypeSwitch(
@@ -170,16 +171,19 @@ function WidgetOptionTypeSwitch(
       );
     case 'slider':
       return (
-        <Slider
-          color={primaryColor}
-          key={`${option.type}-${index}`}
-          label={t(`descriptor.settings.${key}.label`)}
-          value={value as number}
-          min={option.min}
-          max={option.max}
-          step={option.step}
-          onChange={(v) => handleChange(key, v)}
-        />
+        <Stack spacing="xs">
+          <Text>{t(`descriptor.settings.${key}.label`)}</Text>
+          <Slider
+            color={primaryColor}
+            key={`${option.type}-${index}`}
+            label={t(`descriptor.settings.${key}.label`)}
+            value={value as number}
+            min={option.min}
+            max={option.max}
+            step={option.step}
+            onChange={(v) => handleChange(key, v)}
+          />
+        </Stack>
       );
     default:
       return null;