From 34ebe9bd57523395eeae9fe62915d9a3c7faa71c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 17 Dec 2022 21:25:20 -0600
Subject: [PATCH] ThemeEditor: improve layout, improve color of slider

---
 app/soapbox/components/ui/slider/slider.tsx | 2 +-
 app/soapbox/features/theme-editor/index.tsx | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/components/ui/slider/slider.tsx b/app/soapbox/components/ui/slider/slider.tsx
index 65cf94a9f..009e7db5e 100644
--- a/app/soapbox/components/ui/slider/slider.tsx
+++ b/app/soapbox/components/ui/slider/slider.tsx
@@ -57,7 +57,7 @@ const Slider: React.FC<ISlider> = ({ value, onChange }) => {
       onMouseDown={handleMouseDown}
       ref={node}
     >
-      <div className='w-full h-1 bg-white/30 absolute top-1/2 -translate-y-1/2 rounded-full' />
+      <div className='w-full h-1 bg-primary-200 dark:bg-primary-700 absolute top-1/2 -translate-y-1/2 rounded-full' />
       <div className='h-1 bg-accent-500 absolute top-1/2 -translate-y-1/2 rounded-full' style={{ width: `${value * 100}%` }} />
       <span
         className='bg-accent-500 absolute rounded-full w-3 h-3 -ml-1.5 top-1/2 -translate-y-1/2 z-10 shadow'
diff --git a/app/soapbox/features/theme-editor/index.tsx b/app/soapbox/features/theme-editor/index.tsx
index 0bd4741ff..35e94882e 100644
--- a/app/soapbox/features/theme-editor/index.tsx
+++ b/app/soapbox/features/theme-editor/index.tsx
@@ -165,7 +165,9 @@ const ThemeEditor: React.FC<IThemeEditor> = () => {
             onChange={updateColors('danger')}
             resetKey={resetKey}
           />
+        </List>
 
+        <List>
           <ColorListItem
             label='Greentext'
             value={colors.greentext}