From 6b707ae2ca03582f0def6821df17c87892bf63ae Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 8 Feb 2024 02:15:28 +0800
Subject: [PATCH] Fixes for hover colours

---
 .../web/components/elements/icons/HeaderCheckboxIcon.tsx    | 3 ++-
 .../web/components/elements/icons/HeaderToggleGridIcon.tsx  | 3 ++-
 .../web/components/elements/icons/HeaderToggleListIcon.tsx  | 6 ++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx b/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx
index eff153839..6470053df 100644
--- a/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx
+++ b/packages/web/components/elements/icons/HeaderCheckboxIcon.tsx
@@ -11,9 +11,10 @@ export class HeaderCheckboxIcon extends React.Component<IconProps> {
       <SpanBox
         css={{
           display: 'flex',
-          '--inner-color': 'white',
+          '--inner-color': 'var(--colors-thHeaderIconInner)',
           '--ring-color': 'var(--colors-thHeaderIconRing)',
           '&:hover': {
+            '--inner-color': 'white',
             '--ring-fill': '#007AFF',
             '--ring-color': '#007AFF',
           },
diff --git a/packages/web/components/elements/icons/HeaderToggleGridIcon.tsx b/packages/web/components/elements/icons/HeaderToggleGridIcon.tsx
index 16e878737..4a580bb03 100644
--- a/packages/web/components/elements/icons/HeaderToggleGridIcon.tsx
+++ b/packages/web/components/elements/icons/HeaderToggleGridIcon.tsx
@@ -11,9 +11,10 @@ export class HeaderToggleGridIcon extends React.Component<IconProps> {
       <SpanBox
         css={{
           display: 'flex',
-          '--inner-color': 'white',
+          '--inner-color': 'var(--colors-thHeaderIconInner)',
           '--ring-color': 'var(--colors-thHeaderIconRing)',
           '&:hover': {
+            '--inner-color': 'white',
             '--ring-fill': '#007AFF',
             '--ring-color': '#007AFF',
           },
diff --git a/packages/web/components/elements/icons/HeaderToggleListIcon.tsx b/packages/web/components/elements/icons/HeaderToggleListIcon.tsx
index 63cf27655..6ea8cf88b 100644
--- a/packages/web/components/elements/icons/HeaderToggleListIcon.tsx
+++ b/packages/web/components/elements/icons/HeaderToggleListIcon.tsx
@@ -7,16 +7,14 @@ import React from 'react'
 
 export class HeaderToggleListIcon extends React.Component<IconProps> {
   render() {
-    const size = (this.props.size || 26).toString()
-    const color = (this.props.color || '#2A2A2A').toString()
-
     return (
       <SpanBox
         css={{
           display: 'flex',
-          '--inner-color': 'white',
+          '--inner-color': 'var(--colors-thHeaderIconInner)',
           '--ring-color': 'var(--colors-thHeaderIconRing)',
           '&:hover': {
+            '--inner-color': 'white',
             '--ring-fill': '#007AFF',
             '--ring-color': '#007AFF',
           },