From 98db742c97cc084cfe7fb8e18f432cc8ff334dd8 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 3 Mar 2023 20:10:05 +0800
Subject: [PATCH] Fix to the tracks on the reader settings

---
 .../components/elements/TickedRangeSlider.tsx |  9 +-
 .../article/ReaderSettingsControl.tsx         | 88 ++++++++++++-------
 2 files changed, 65 insertions(+), 32 deletions(-)

diff --git a/packages/web/components/elements/TickedRangeSlider.tsx b/packages/web/components/elements/TickedRangeSlider.tsx
index 62947d290..0b1bafe7a 100644
--- a/packages/web/components/elements/TickedRangeSlider.tsx
+++ b/packages/web/components/elements/TickedRangeSlider.tsx
@@ -1,6 +1,7 @@
 import { Box, HStack, SpanBox } from './LayoutPrimitives'
 import { styled } from '../tokens/stitches.config'
-import { Root as Slider, Thumb, Track, Range } from '@radix-ui/react-slider'
+import { Root as Slider, Thumb, Track } from '@radix-ui/react-slider'
+import { DropdownSeparator } from './DropdownElements'
 
 type TickedRangeSliderProps = {
   ticks?: number
@@ -16,6 +17,8 @@ const StyledSlider = styled(Slider, {
   alignItems: 'center',
 
   '.SliderTrack': {
+    display: 'flex',
+    justifyContent: 'center',
     margin: '0px',
     height: '8px',
     width: '225px',
@@ -60,7 +63,9 @@ export function TickedRangeSlider({
           }
         }}
       >
-        <Track className="SliderTrack" />
+        <Track className="SliderTrack">
+          <Box css={{ bg: '#CECECE', width: '2.5px', height: '100%' }} />
+        </Track>
         <Thumb className="SliderThumb" />
       </StyledSlider>
     </HStack>
diff --git a/packages/web/components/templates/article/ReaderSettingsControl.tsx b/packages/web/components/templates/article/ReaderSettingsControl.tsx
index 02aa57b03..9d2d55486 100644
--- a/packages/web/components/templates/article/ReaderSettingsControl.tsx
+++ b/packages/web/components/templates/article/ReaderSettingsControl.tsx
@@ -93,7 +93,7 @@ function FontControls(props: FontControlsProps): JSX.Element {
     display: 'flex',
     alignItems: 'center',
     fontSize: '12px',
-    background: '#FFFFFF',
+    background: '$thBackground',
     border: '1px sold $thBorderColor',
     fontFamily: props.readerSettings.fontFamily,
     textTransform: 'capitalize',
@@ -138,22 +138,36 @@ function FontControls(props: FontControlsProps): JSX.Element {
         distribution="start"
         alignment="center"
       >
-        <SpanBox
-          css={{
-            fontFamily: '$display',
-            fontStyle: 'normal',
-            fontWeight: '400',
-            fontSize: '20px',
-            lineHeight: '20px',
-            textAlign: 'center',
-            color: '#969696',
-            width: '50px',
-            pr: '5px',
-            pb: '5px',
+        <Button
+          style="plainIcon"
+          css={{ py: '0px', width: '60px' }}
+          onClick={() => {
+            // props.readerSettings.actionHandler('de')
+            // props.readerSettings
+            // const newMarginWith = Math.max(
+            //   props.readerSettings.marginWidth - 45,
+            //   200
+            // )
+            // props.readerSettings.setMarginWidth(newMarginWith)
           }}
         >
-          a
-        </SpanBox>
+          <SpanBox
+            css={{
+              fontFamily: '$display',
+              fontStyle: 'normal',
+              fontWeight: '400',
+              fontSize: '20px',
+              lineHeight: '20px',
+              textAlign: 'center',
+              color: '#969696',
+              width: '50px',
+              pr: '5px',
+              pb: '5px',
+            }}
+          >
+            a
+          </SpanBox>
+        </Button>
         <TickedRangeSlider
           min={10}
           max={34}
@@ -161,23 +175,37 @@ function FontControls(props: FontControlsProps): JSX.Element {
           value={props.readerSettings.fontSize}
           onChange={handleFontSizeChange}
         />
-        <SpanBox
-          css={{
-            fontFamily: '$display',
-            fontStyle: 'normal',
-            fontWeight: '400',
-            fontSize: '20px',
-            lineHeight: '20px',
-
-            textAlign: 'center',
-
-            color: '#969696',
-            width: '60px',
-            pl: '16px',
+        <Button
+          style="plainIcon"
+          css={{ py: '0px', width: '60px' }}
+          onClick={() => {
+            // props.readerSettings.actionHandler('de')
+            // props.readerSettings
+            // const newMarginWith = Math.max(
+            //   props.readerSettings.marginWidth - 45,
+            //   200
+            // )
+            // props.readerSettings.setMarginWidth(newMarginWith)
           }}
         >
-          A
-        </SpanBox>
+          <SpanBox
+            css={{
+              fontFamily: '$display',
+              fontStyle: 'normal',
+              fontWeight: '400',
+              fontSize: '20px',
+              lineHeight: '20px',
+
+              textAlign: 'center',
+
+              color: '#969696',
+              width: '60px',
+              pl: '16px',
+            }}
+          >
+            A
+          </SpanBox>
+        </Button>
       </HStack>
     </VStack>
   )