From ac5a7f9ae17b6898d1a49c5431c12078e363cbc3 Mon Sep 17 00:00:00 2001
From: Tim Perry <pimterry@gmail.com>
Date: Mon, 9 Sep 2024 14:48:14 +0200
Subject: [PATCH] Convert theme picker to Phosphor icons

---
 src/components/common/tabbed-options.tsx  | 8 +++++---
 src/components/settings/settings-page.tsx | 8 ++++----
 src/icons.tsx                             | 8 ++++++++
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/common/tabbed-options.tsx b/src/components/common/tabbed-options.tsx
index 33c4478e..92e3aa9e 100644
--- a/src/components/common/tabbed-options.tsx
+++ b/src/components/common/tabbed-options.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Icon, IconProp } from '../../icons';
+import { Icon, IconKey } from '../../icons';
 import { styled, css } from '../../styles';
 import { omit } from 'lodash';
 import { UnstyledButton } from './inputs';
@@ -45,7 +45,7 @@ export const TabsContainer = styled((p: {
 export const Tab = styled((p: {
     className?: string,
     selected?: boolean,
-    icon: IconProp,
+    icon: IconKey,
     value: any,
     children: React.ReactNode
 }) =>
@@ -56,7 +56,7 @@ export const Tab = styled((p: {
             event.tabValue = p.value;
         }}
     >
-        <Icon icon={p.icon} size='2x' />
+        <Icon icon={p.icon} />
         { p.children }
     </UnstyledButton>
 )`
@@ -89,5 +89,7 @@ export const Tab = styled((p: {
 
     > svg {
         margin-bottom: 10px;
+        width: 2em;
+        height: auto;
     }
 `;
\ No newline at end of file
diff --git a/src/components/settings/settings-page.tsx b/src/components/settings/settings-page.tsx
index 62a3c2e3..b9d182c8 100644
--- a/src/components/settings/settings-page.tsx
+++ b/src/components/settings/settings-page.tsx
@@ -300,25 +300,25 @@ class SettingsPage extends React.Component<SettingsPageProps> {
                                 }}
                             >
                                 <Tab
-                                    icon={['fas', 'magic']}
+                                    icon='MagicWand'
                                     value='automatic'
                                 >
                                     Automatic
                                 </Tab>
                                 <Tab
-                                    icon={['fas', 'sun']}
+                                    icon='Sun'
                                     value='light'
                                 >
                                     Light
                                 </Tab>
                                 <Tab
-                                    icon={['fas', 'moon']}
+                                    icon='Moon'
                                     value='dark'
                                 >
                                     Dark
                                 </Tab>
                                 <Tab
-                                    icon={['fas', 'adjust']}
+                                    icon='CircleHalf'
                                     value='high-contrast'
                                 >
                                     High Contrast
diff --git a/src/icons.tsx b/src/icons.tsx
index 0cea0257..86334cb6 100644
--- a/src/icons.tsx
+++ b/src/icons.tsx
@@ -19,6 +19,10 @@ import {
     Plug,
     QuestionMark,
     ArrowLeft,
+    MagicWand,
+    Sun,
+    Moon,
+    CircleHalf
 } from '@phosphor-icons/react';
 
 export type IconKey = keyof typeof Icons;
@@ -46,6 +50,10 @@ const Icons = {
     Plug,
     QuestionMark,
     ArrowLeft,
+    MagicWand,
+    Sun,
+    Moon,
+    CircleHalf
 } as const;
 
 // Import required FA icons: