From 039cab33edd5032fd0d653427fe18ee20bee4f74 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 2 May 2022 13:01:50 -0700
Subject: [PATCH] Use embedded SVG so we can set colours

---
 .../components/elements/images/FontStepperDown.tsx  | 13 +++++++++++++
 .../components/elements/images/FontStepperUp.tsx    | 13 +++++++++++++
 .../templates/article/ReaderSettingsControl.tsx     |  6 ++++--
 .../web/public/static/icons/font-stepper-down.svg   |  5 -----
 .../web/public/static/icons/font-stepper-up.svg     |  5 -----
 5 files changed, 30 insertions(+), 12 deletions(-)
 create mode 100644 packages/web/components/elements/images/FontStepperDown.tsx
 create mode 100644 packages/web/components/elements/images/FontStepperUp.tsx
 delete mode 100644 packages/web/public/static/icons/font-stepper-down.svg
 delete mode 100644 packages/web/public/static/icons/font-stepper-up.svg

diff --git a/packages/web/components/elements/images/FontStepperDown.tsx b/packages/web/components/elements/images/FontStepperDown.tsx
new file mode 100644
index 000000000..c23e398e2
--- /dev/null
+++ b/packages/web/components/elements/images/FontStepperDown.tsx
@@ -0,0 +1,13 @@
+type FontStepperDownProps = {
+  color: string
+}
+
+export function FontStepperDown(props: FontStepperDownProps): JSX.Element {
+  return (
+    <svg width="56" height="29" viewBox="0 0 56 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M19.6079 19.5436L13.5525 8.10555L7.49707 19.5436" stroke={props.color} stroke-width="1.75072" stroke-linecap="round" stroke-linejoin="round"/>
+     <path d="M17.8261 16.1798H9.28125" stroke={props.color} stroke-width="1.75072" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M32.2515 13.9959H50.9237" stroke={props.color} stroke-width="1.69748" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  )
+}
\ No newline at end of file
diff --git a/packages/web/components/elements/images/FontStepperUp.tsx b/packages/web/components/elements/images/FontStepperUp.tsx
new file mode 100644
index 000000000..7b6efaf7e
--- /dev/null
+++ b/packages/web/components/elements/images/FontStepperUp.tsx
@@ -0,0 +1,13 @@
+type FontStepperUpProps = {
+  color: string
+}
+
+export function FontStepperUp(props: FontStepperUpProps): JSX.Element {
+  return (
+    <svg width="72" height="46" viewBox="0 0 72 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M34.2935 34.2954L21.7811 10.6606L9.26855 34.2954" stroke={props.color} stroke-width="2.78055" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M30.6116 27.3442H12.9551" stroke={props.color} stroke-width="2.78055" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M48.3784 22.1471C47.9097 22.1471 47.5297 22.5271 47.5297 22.9958C47.5297 23.4646 47.9097 23.8446 48.3784 23.8446V22.1471ZM67.0507 23.8446C67.5194 23.8446 67.8994 23.4646 67.8994 22.9958C67.8994 22.5271 67.5194 22.1471 67.0507 22.1471V23.8446ZM58.5633 13.6597C58.5633 13.191 58.1833 12.811 57.7146 12.811C57.2458 12.811 56.8658 13.191 56.8658 13.6597H58.5633ZM56.8658 32.332C56.8658 32.8007 57.2458 33.1807 57.7146 33.1807C58.1833 33.1807 58.5633 32.8007 58.5633 32.332H56.8658ZM48.3784 23.8446H67.0507V22.1471H48.3784V23.8446ZM56.8658 13.6597V32.332H58.5633V13.6597H56.8658Z" fill={props.color} />
+    </svg>
+  )
+}
\ No newline at end of file
diff --git a/packages/web/components/templates/article/ReaderSettingsControl.tsx b/packages/web/components/templates/article/ReaderSettingsControl.tsx
index cde4bb9f4..8133d2004 100644
--- a/packages/web/components/templates/article/ReaderSettingsControl.tsx
+++ b/packages/web/components/templates/article/ReaderSettingsControl.tsx
@@ -8,6 +8,8 @@ import { AIcon } from '../../elements/images/AIcon'
 import { TickedRangeSlider } from '../../elements/TickedRangeSlider'
 import { showSuccessToast } from '../../../lib/toastHelpers'
 import Image from 'next/image'
+import { FontStepperDown } from '../../elements/images/FontStepperDown'
+import { FontStepperUp } from '../../elements/images/FontStepperUp'
 
 type ReaderSettingsProps = {
   marginWidth: number
@@ -43,11 +45,11 @@ export function ReaderSettingsControl(props: ReaderSettingsProps): JSX.Element {
         }}
       >
         <Button style='plainIcon' css={{ width: '50%' }} onClick={() => props.articleActionHandler('decrementFontSize')}>
-          <Image src='/static/icons/font-stepper-down.svg' width={56} height={32} />
+          <FontStepperDown color={theme.colors.readerFont.toString()} />
         </Button>
         <VerticalDivider />
         <Button style='plainIcon' css={{ width: '50%', height: '100%' }} onClick={() => props.articleActionHandler('incrementFontSize')}>
-          <Image src='/static/icons/font-stepper-up.svg' width={71} height={45} />
+          <FontStepperUp color={theme.colors.readerFont.toString()} />
         </Button>
       </HStack>
       <VStack
diff --git a/packages/web/public/static/icons/font-stepper-down.svg b/packages/web/public/static/icons/font-stepper-down.svg
deleted file mode 100644
index e11c396ec..000000000
--- a/packages/web/public/static/icons/font-stepper-down.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="56" height="29" viewBox="0 0 56 29" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19.6079 19.5436L13.5525 8.10555L7.49707 19.5436" stroke="#0A0806" stroke-width="1.75072" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M17.8261 16.1798H9.28125" stroke="#0A0806" stroke-width="1.75072" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M32.2515 13.9959H50.9237" stroke="black" stroke-width="1.69748" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/packages/web/public/static/icons/font-stepper-up.svg b/packages/web/public/static/icons/font-stepper-up.svg
deleted file mode 100644
index 20edd0870..000000000
--- a/packages/web/public/static/icons/font-stepper-up.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="72" height="46" viewBox="0 0 72 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M34.2935 34.2954L21.7811 10.6606L9.26855 34.2954" stroke="#0A0806" stroke-width="2.78055" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M30.6116 27.3442H12.9551" stroke="#0A0806" stroke-width="2.78055" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M48.3784 22.1471C47.9097 22.1471 47.5297 22.5271 47.5297 22.9958C47.5297 23.4646 47.9097 23.8446 48.3784 23.8446V22.1471ZM67.0507 23.8446C67.5194 23.8446 67.8994 23.4646 67.8994 22.9958C67.8994 22.5271 67.5194 22.1471 67.0507 22.1471V23.8446ZM58.5633 13.6597C58.5633 13.191 58.1833 12.811 57.7146 12.811C57.2458 12.811 56.8658 13.191 56.8658 13.6597H58.5633ZM56.8658 32.332C56.8658 32.8007 57.2458 33.1807 57.7146 33.1807C58.1833 33.1807 58.5633 32.8007 58.5633 32.332H56.8658ZM48.3784 23.8446H67.0507V22.1471H48.3784V23.8446ZM56.8658 13.6597V32.332H58.5633V13.6597H56.8658Z" fill="black"/>
-</svg>