From 1bd9bf0f7d9a188cc65e3a3b24cdfb729e3d7a94 Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Tue, 24 Jun 2025 18:11:02 -0700
Subject: [PATCH 01/17] remove inner border on input fields

---
 src/components/settings/GeneralSettings.tsx   |  5 +-
 src/components/settings/RelayInfoSettings.tsx | 85 ++++++-------------
 src/components/settings/Settings.styles.ts    | 11 +++
 src/components/settings/WalletSettings.tsx    |  7 +-
 4 files changed, 44 insertions(+), 64 deletions(-)
 create mode 100644 src/components/settings/Settings.styles.ts

diff --git a/src/components/settings/GeneralSettings.tsx b/src/components/settings/GeneralSettings.tsx
index 5e21505f..ca510deb 100644
--- a/src/components/settings/GeneralSettings.tsx
+++ b/src/components/settings/GeneralSettings.tsx
@@ -4,6 +4,7 @@ import { QuestionCircleOutlined, LockOutlined, DatabaseOutlined, TagOutlined } f
 import useGenericSettings from '@app/hooks/useGenericSettings';
 import { SettingsGroupType } from '@app/types/settings.types';
 import BaseSettingsForm from './BaseSettingsForm';
+import * as S from './Settings.styles';
 
 const GeneralSettings: React.FC = () => {
   const {
@@ -92,7 +93,7 @@ const GeneralSettings: React.FC = () => {
             </span>
           }
         >
-          <Input
+          <S.InputField
             prefix={<TagOutlined />}
             placeholder="Enter service tag"
           />
@@ -109,7 +110,7 @@ const GeneralSettings: React.FC = () => {
             </span>
           }
         >
-          <Input
+          <S.InputField
             prefix={<DatabaseOutlined />}
             placeholder="./data/stats.db"
           />
diff --git a/src/components/settings/RelayInfoSettings.tsx b/src/components/settings/RelayInfoSettings.tsx
index fcfaaa71..c7978244 100644
--- a/src/components/settings/RelayInfoSettings.tsx
+++ b/src/components/settings/RelayInfoSettings.tsx
@@ -4,19 +4,12 @@ import { QuestionCircleOutlined, InfoCircleOutlined, UserOutlined, KeyOutlined }
 import useGenericSettings from '@app/hooks/useGenericSettings';
 import { SettingsGroupType } from '@app/types/settings.types';
 import BaseSettingsForm from './BaseSettingsForm';
-
+import * as S from './Settings.styles';
 const { Option } = Select;
 const { TextArea } = Input;
 
 const RelayInfoSettings: React.FC = () => {
-  const {
-    settings,
-    loading,
-    error,
-    fetchSettings,
-    updateSettings,
-    saveSettings,
-  } = useGenericSettings('relay_info');
+  const { settings, loading, error, fetchSettings, updateSettings, saveSettings } = useGenericSettings('relay_info');
 
   const [form] = Form.useForm();
 
@@ -64,12 +57,7 @@ const RelayInfoSettings: React.FC = () => {
       onSave={saveSettings}
       onReset={fetchSettings}
     >
-      <Form
-        form={form}
-        layout="vertical"
-        onValuesChange={handleValuesChange}
-        initialValues={settings || {}}
-      >
+      <Form form={form} layout="vertical" onValuesChange={handleValuesChange} initialValues={settings || {}}>
         <Form.Item
           name="relayname"
           label={
@@ -80,14 +68,9 @@ const RelayInfoSettings: React.FC = () => {
               </Tooltip>
             </span>
           }
-          rules={[
-            { required: true, message: 'Please enter the relay name' }
-          ]}
+          rules={[{ required: true, message: 'Please enter the relay name' }]}
         >
-          <Input 
-            prefix={<InfoCircleOutlined />} 
-            placeholder="My Nostr Relay" 
-          />
+          <S.InputField prefix={<InfoCircleOutlined />} placeholder="My Nostr Relay" />
         </Form.Item>
 
         <Form.Item
@@ -101,10 +84,7 @@ const RelayInfoSettings: React.FC = () => {
             </span>
           }
         >
-          <TextArea
-            placeholder="A Nostr relay for..."
-            autoSize={{ minRows: 2, maxRows: 6 }}
-          />
+          <TextArea placeholder="A Nostr relay for..." autoSize={{ minRows: 2, maxRows: 6 }} />
         </Form.Item>
 
         <Form.Item
@@ -118,10 +98,7 @@ const RelayInfoSettings: React.FC = () => {
             </span>
           }
         >
-          <Input 
-            prefix={<UserOutlined />} 
-            placeholder="admin@example.com" 
-          />
+          <S.InputField prefix={<UserOutlined />} placeholder="admin@example.com" />
         </Form.Item>
 
         <Form.Item
@@ -134,14 +111,9 @@ const RelayInfoSettings: React.FC = () => {
               </Tooltip>
             </span>
           }
-          rules={[
-            { required: true, message: 'Please enter the relay public key' }
-          ]}
+          rules={[{ required: true, message: 'Please enter the relay public key' }]}
         >
-          <Input 
-            prefix={<KeyOutlined />} 
-            placeholder="npub..." 
-          />
+          <S.InputField prefix={<KeyOutlined />} placeholder="npub..." />
         </Form.Item>
 
         <Form.Item
@@ -155,10 +127,7 @@ const RelayInfoSettings: React.FC = () => {
             </span>
           }
         >
-          <Input 
-            prefix={<KeyOutlined />} 
-            placeholder="DHT key" 
-          />
+          <S.InputField prefix={<KeyOutlined />} placeholder="DHT key" />
         </Form.Item>
 
         <Form.Item
@@ -172,9 +141,7 @@ const RelayInfoSettings: React.FC = () => {
             </span>
           }
         >
-          <Input 
-            placeholder="HORNETS Relay" 
-          />
+          <Input placeholder="HORNETS Relay" />
         </Form.Item>
 
         <Form.Item
@@ -188,9 +155,7 @@ const RelayInfoSettings: React.FC = () => {
             </span>
           }
         >
-          <Input 
-            placeholder="1.0.0" 
-          />
+          <Input placeholder="1.0.0" />
         </Form.Item>
 
         <Form.Item
@@ -221,12 +186,12 @@ const RelayInfoSettings: React.FC = () => {
                   return isNaN(num) ? null : num;
                 })
                 .filter((val: number | null): val is number => val !== null);
-              
+
               // Update the form field with number values
               form.setFieldsValue({ relaysupportednips: numberValues });
             }}
           >
-            {nipOptions.map(option => (
+            {nipOptions.map((option) => (
               <Option key={option.value} value={option.value}>
                 {option.label}
               </Option>
@@ -235,16 +200,18 @@ const RelayInfoSettings: React.FC = () => {
         </Form.Item>
 
         <Form.Item>
-          <p style={{ 
-            color: 'rgba(255, 255, 255, 0.8)',
-            fontSize: '0.9em',
-            padding: '0.75rem',
-            backgroundColor: 'rgba(0, 0, 0, 0.1)',
-            borderLeft: '3px solid rgba(82, 196, 255, 0.8)',
-            borderRadius: '0 4px 4px 0'
-          }}>
-            <span style={{ color: 'rgba(82, 196, 255, 1)' }}>Note:</span> This information will be publicly available to clients connecting to your relay.
-            It helps users understand the capabilities and ownership of your relay.
+          <p
+            style={{
+              color: 'rgba(255, 255, 255, 0.8)',
+              fontSize: '0.9em',
+              padding: '0.75rem',
+              backgroundColor: 'rgba(0, 0, 0, 0.1)',
+              borderLeft: '3px solid rgba(82, 196, 255, 0.8)',
+              borderRadius: '0 4px 4px 0',
+            }}
+          >
+            <span style={{ color: 'rgba(82, 196, 255, 1)' }}>Note:</span> This information will be publicly available to
+            clients connecting to your relay. It helps users understand the capabilities and ownership of your relay.
           </p>
         </Form.Item>
       </Form>
diff --git a/src/components/settings/Settings.styles.ts b/src/components/settings/Settings.styles.ts
new file mode 100644
index 00000000..23b2ff39
--- /dev/null
+++ b/src/components/settings/Settings.styles.ts
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { Input } from 'antd';
+
+export const InputField = styled(Input)`
+  &.ant-input-affix-wrapper {
+    background-color: var(--layout-sider-bg-color);
+  }
+  .ant-input {
+    border: none !important;
+  }
+`;
diff --git a/src/components/settings/WalletSettings.tsx b/src/components/settings/WalletSettings.tsx
index 6fd29e14..d5416344 100644
--- a/src/components/settings/WalletSettings.tsx
+++ b/src/components/settings/WalletSettings.tsx
@@ -4,6 +4,7 @@ import { QuestionCircleOutlined, LockOutlined, WalletOutlined } from '@ant-desig
 import useGenericSettings from '@app/hooks/useGenericSettings';
 import { SettingsGroupType } from '@app/types/settings.types';
 import BaseSettingsForm from './BaseSettingsForm';
+import * as S from './Settings.styles';
 
 const WalletSettings: React.FC = () => {
   const {
@@ -82,9 +83,9 @@ const WalletSettings: React.FC = () => {
             { required: true, message: 'Please enter a wallet name' }
           ]}
         >
-          <Input 
-            prefix={<WalletOutlined />} 
-            placeholder="Enter wallet name" 
+          <S.InputField
+            prefix={<WalletOutlined />}
+            placeholder="Enter wallet name"
           />
         </Form.Item>
 

From 52eb7a771dc4398dbb3a0e96e567594ea2c2852b Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Wed, 25 Jun 2025 11:47:46 -0700
Subject: [PATCH 02/17] removed background color on inputs with icons

---
 src/components/settings/Settings.styles.ts | 15 ++++++++++++---
 src/styles/themes/dark/darkTheme.ts        |  1 +
 src/styles/themes/light/lightTheme.ts      |  1 +
 src/styles/themes/themeVariables.ts        |  1 +
 src/styles/themes/types.ts                 |  1 +
 5 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/settings/Settings.styles.ts b/src/components/settings/Settings.styles.ts
index 23b2ff39..f0cb3cf5 100644
--- a/src/components/settings/Settings.styles.ts
+++ b/src/components/settings/Settings.styles.ts
@@ -3,9 +3,18 @@ import { Input } from 'antd';
 
 export const InputField = styled(Input)`
   &.ant-input-affix-wrapper {
-    background-color: var(--layout-sider-bg-color);
+    padding: 0 !important;
   }
-  .ant-input {
-    border: none !important;
+  &.ant-input-affix-wrapper {
+    background-color: var(--input-bg-color) !important;
+    input.ant-input {
+      padding: 0.5rem !important;
+      border: none !important;
+      background-color: transparent !important;
+    }
+    .ant-input-prefix {
+    
+      padding: 0.5rem 0rem 0.5rem 0.5rem !important;
+    }
   }
 `;
diff --git a/src/styles/themes/dark/darkTheme.ts b/src/styles/themes/dark/darkTheme.ts
index d7d7dde8..4de96e85 100644
--- a/src/styles/themes/dark/darkTheme.ts
+++ b/src/styles/themes/dark/darkTheme.ts
@@ -98,6 +98,7 @@ export const darkColorsTheme: ITheme = {
   layoutHeaderBg: '#1e2142',
   layoutSiderBg: '#121430',
   inputPlaceholder: 'rgba(255, 255, 255, 0.5)',
+  inputBg: `rgba(0, 0, 0, 0.2)`,
   itemHoverBg: '#1c2137',
   backgroundColorBase: '#1c2137',
   avatarBg: '#1c2137',
diff --git a/src/styles/themes/light/lightTheme.ts b/src/styles/themes/light/lightTheme.ts
index 43490c9a..36dc30ba 100644
--- a/src/styles/themes/light/lightTheme.ts
+++ b/src/styles/themes/light/lightTheme.ts
@@ -98,6 +98,7 @@ export const lightColorsTheme: ITheme = {
   layoutHeaderBg: 'transparent',
   layoutSiderBg: 'linear-gradient(261.31deg, #006ccf -29.57%, #00509a 121.11%)',
   inputPlaceholder: '#404040',
+  inputBg: 'rgba(215, 215, 215, 0.9)',
   itemHoverBg: '#f5f5f5',
   backgroundColorBase: '#F5F5F5',
   avatarBg: '#ccc',
diff --git a/src/styles/themes/themeVariables.ts b/src/styles/themes/themeVariables.ts
index 1c38f371..ee009e36 100644
--- a/src/styles/themes/themeVariables.ts
+++ b/src/styles/themes/themeVariables.ts
@@ -97,6 +97,7 @@ const getThemeVariables = (theme: ThemeType) => css`
   --layout-header-bg-color: ${themeObject[theme].layoutHeaderBg};
   --layout-sider-bg-color: ${themeObject[theme].layoutSiderBg};
   --input-placeholder-color: ${themeObject[theme].inputPlaceholder};
+  --input-bg-color: ${themeObject[theme].inputBg};
   --avatar-bg: ${themeObject[theme].avatarBg};
   --alert-text-color: ${themeObject[theme].alertTextColor};
   --breadcrumb-color: ${themeObject[theme].breadcrumb};
diff --git a/src/styles/themes/types.ts b/src/styles/themes/types.ts
index 70e68ade..61166300 100644
--- a/src/styles/themes/types.ts
+++ b/src/styles/themes/types.ts
@@ -64,6 +64,7 @@ export interface ITheme {
   layoutHeaderBg: string;
   layoutSiderBg: string;
   inputPlaceholder: string;
+  inputBg: string;
   itemHoverBg: string;
   backgroundColorBase: string;
   avatarBg: string;

From de84b727e5de85889385daeb87223595592f9018 Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Wed, 25 Jun 2025 11:55:48 -0700
Subject: [PATCH 03/17] create styling for Password Fields

---
 src/components/settings/Settings.styles.ts | 21 +++++++++++++++++++++
 src/components/settings/WalletSettings.tsx |  2 +-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/settings/Settings.styles.ts b/src/components/settings/Settings.styles.ts
index f0cb3cf5..9af0cbdc 100644
--- a/src/components/settings/Settings.styles.ts
+++ b/src/components/settings/Settings.styles.ts
@@ -18,3 +18,24 @@ export const InputField = styled(Input)`
     }
   }
 `;
+export const PasswordField = styled(Input.Password)`
+  &.ant-input-affix-wrapper {
+    padding: 0 !important;
+    background-color: var(--input-bg-color) !important;
+    input.ant-input {
+      padding: 0.5rem !important;
+      border: none !important;
+      background-color: transparent !important;
+    }
+    .ant-input-prefix {
+      padding: 0.5rem 0rem 0.5rem 0.5rem !important;
+    }
+    .ant-input-suffix {
+      padding: 0.5rem 0.5rem 0.5rem 0 !important;
+      .ant-input-password-icon.anticon {
+        color: var(--text-color) !important;
+        opacity: 0.7 !important;
+      }
+    }
+  }
+`;
diff --git a/src/components/settings/WalletSettings.tsx b/src/components/settings/WalletSettings.tsx
index d5416344..da98dd56 100644
--- a/src/components/settings/WalletSettings.tsx
+++ b/src/components/settings/WalletSettings.tsx
@@ -103,7 +103,7 @@ const WalletSettings: React.FC = () => {
             { required: true, message: 'Please enter the wallet API key' }
           ]}
         >
-          <Input.Password
+          <S.PasswordField
             prefix={<LockOutlined />}
             placeholder="Enter API key"
           />

From b198bb023efbd2fec6932c01e24b0e2c98130de6 Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Wed, 25 Jun 2025 11:57:38 -0700
Subject: [PATCH 04/17] replaced password fields with styled ones

---
 src/components/settings/GeneralSettings.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/settings/GeneralSettings.tsx b/src/components/settings/GeneralSettings.tsx
index ca510deb..8cb74e00 100644
--- a/src/components/settings/GeneralSettings.tsx
+++ b/src/components/settings/GeneralSettings.tsx
@@ -76,7 +76,7 @@ const GeneralSettings: React.FC = () => {
             { required: true, message: 'Please enter the private key' }
           ]}
         >
-          <Input.Password
+          <S.PasswordField
             prefix={<LockOutlined />}
             placeholder="Enter private key"
           />

From 0b42220039cea189349e08b0a6500a8f5763b680 Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Wed, 25 Jun 2025 12:20:30 -0700
Subject: [PATCH 05/17] replace InputField with InputWithPrefix

---
 src/components/settings/GeneralSettings.tsx   | 6 +++---
 src/components/settings/RelayInfoSettings.tsx | 8 ++++----
 src/components/settings/Settings.styles.ts    | 1 +
 src/components/settings/WalletSettings.tsx    | 2 +-
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/settings/GeneralSettings.tsx b/src/components/settings/GeneralSettings.tsx
index 8cb74e00..1d433653 100644
--- a/src/components/settings/GeneralSettings.tsx
+++ b/src/components/settings/GeneralSettings.tsx
@@ -59,7 +59,7 @@ const GeneralSettings: React.FC = () => {
             { pattern: /^\d+$/, message: 'Port must be a number' }
           ]}
         >
-          <Input placeholder="8080" />
+          <S.InputField placeholder="8080" />
         </Form.Item>
 
         <Form.Item
@@ -93,7 +93,7 @@ const GeneralSettings: React.FC = () => {
             </span>
           }
         >
-          <S.InputField
+          <S.InputFieldWithPrefix
             prefix={<TagOutlined />}
             placeholder="Enter service tag"
           />
@@ -110,7 +110,7 @@ const GeneralSettings: React.FC = () => {
             </span>
           }
         >
-          <S.InputField
+          <S.InputFieldWithPrefix
             prefix={<DatabaseOutlined />}
             placeholder="./data/stats.db"
           />
diff --git a/src/components/settings/RelayInfoSettings.tsx b/src/components/settings/RelayInfoSettings.tsx
index c7978244..e79fe193 100644
--- a/src/components/settings/RelayInfoSettings.tsx
+++ b/src/components/settings/RelayInfoSettings.tsx
@@ -70,7 +70,7 @@ const RelayInfoSettings: React.FC = () => {
           }
           rules={[{ required: true, message: 'Please enter the relay name' }]}
         >
-          <S.InputField prefix={<InfoCircleOutlined />} placeholder="My Nostr Relay" />
+          <S.InputFieldWithPrefix prefix={<InfoCircleOutlined />} placeholder="My Nostr Relay" />
         </Form.Item>
 
         <Form.Item
@@ -98,7 +98,7 @@ const RelayInfoSettings: React.FC = () => {
             </span>
           }
         >
-          <S.InputField prefix={<UserOutlined />} placeholder="admin@example.com" />
+          <S.InputFieldWithPrefix prefix={<UserOutlined />} placeholder="admin@example.com" />
         </Form.Item>
 
         <Form.Item
@@ -113,7 +113,7 @@ const RelayInfoSettings: React.FC = () => {
           }
           rules={[{ required: true, message: 'Please enter the relay public key' }]}
         >
-          <S.InputField prefix={<KeyOutlined />} placeholder="npub..." />
+          <S.InputFieldWithPrefix prefix={<KeyOutlined />} placeholder="npub..." />
         </Form.Item>
 
         <Form.Item
@@ -127,7 +127,7 @@ const RelayInfoSettings: React.FC = () => {
             </span>
           }
         >
-          <S.InputField prefix={<KeyOutlined />} placeholder="DHT key" />
+          <S.InputFieldWithPrefix prefix={<KeyOutlined />} placeholder="DHT key" />
         </Form.Item>
 
         <Form.Item
diff --git a/src/components/settings/Settings.styles.ts b/src/components/settings/Settings.styles.ts
index 9af0cbdc..dad33f69 100644
--- a/src/components/settings/Settings.styles.ts
+++ b/src/components/settings/Settings.styles.ts
@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import { Input } from 'antd';
 
 export const InputField = styled(Input)`
+export const InputFieldWithPrefix = styled(Input)`
   &.ant-input-affix-wrapper {
     padding: 0 !important;
   }
diff --git a/src/components/settings/WalletSettings.tsx b/src/components/settings/WalletSettings.tsx
index da98dd56..a3750937 100644
--- a/src/components/settings/WalletSettings.tsx
+++ b/src/components/settings/WalletSettings.tsx
@@ -83,7 +83,7 @@ const WalletSettings: React.FC = () => {
             { required: true, message: 'Please enter a wallet name' }
           ]}
         >
-          <S.InputField
+          <S.InputFieldWithPrefix
             prefix={<WalletOutlined />}
             placeholder="Enter wallet name"
           />

From 455f8fba72a587cafbee795e6a3b2c0f068d0748 Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Wed, 25 Jun 2025 12:20:52 -0700
Subject: [PATCH 06/17] create regular input field component

---
 src/components/settings/Settings.styles.ts | 8 ++++++++
 src/components/settings/SettingsPage.tsx   | 5 ++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/settings/Settings.styles.ts b/src/components/settings/Settings.styles.ts
index dad33f69..b6cb1cce 100644
--- a/src/components/settings/Settings.styles.ts
+++ b/src/components/settings/Settings.styles.ts
@@ -2,6 +2,14 @@ import styled from 'styled-components';
 import { Input } from 'antd';
 
 export const InputField = styled(Input)`
+  border-radius: 7px !important;
+  padding: 0.5rem !important;
+  &:focus{
+  border-color: var(--ant-primary-5) !important;
+  box-shadow: 0 0 0 2px var(--ant-primary-color-outline) !important;
+  }
+`;
+
 export const InputFieldWithPrefix = styled(Input)`
   &.ant-input-affix-wrapper {
     padding: 0 !important;
diff --git a/src/components/settings/SettingsPage.tsx b/src/components/settings/SettingsPage.tsx
index 3e21e3c1..fc389a59 100644
--- a/src/components/settings/SettingsPage.tsx
+++ b/src/components/settings/SettingsPage.tsx
@@ -122,9 +122,8 @@ const SettingsWrapper = styled.div`
   }
   
   .ant-input, .ant-input-number, .ant-select-selector {
-    background-color: rgba(0, 0, 0, 0.2) !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
-    border-radius: 4px !important;
+    background-color: var(--input-bg-color) !important;
+    border: 1px solid var(--border-base-color) !important;
   }
 `;
 

From 5bb495c7eafa7e47467110fe263fe6725977e0a4 Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Wed, 25 Jun 2025 12:30:25 -0700
Subject: [PATCH 07/17] increase padding on input fields

---
 src/components/settings/Settings.styles.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/settings/Settings.styles.ts b/src/components/settings/Settings.styles.ts
index b6cb1cce..8184a59d 100644
--- a/src/components/settings/Settings.styles.ts
+++ b/src/components/settings/Settings.styles.ts
@@ -3,7 +3,7 @@ import { Input } from 'antd';
 
 export const InputField = styled(Input)`
   border-radius: 7px !important;
-  padding: 0.5rem !important;
+  padding: 0.7rem !important;
   &:focus{
   border-color: var(--ant-primary-5) !important;
   box-shadow: 0 0 0 2px var(--ant-primary-color-outline) !important;
@@ -17,13 +17,13 @@ export const InputFieldWithPrefix = styled(Input)`
   &.ant-input-affix-wrapper {
     background-color: var(--input-bg-color) !important;
     input.ant-input {
-      padding: 0.5rem !important;
+      padding: 0.7rem !important;
       border: none !important;
       background-color: transparent !important;
     }
     .ant-input-prefix {
-    
-      padding: 0.5rem 0rem 0.5rem 0.5rem !important;
+
+      padding: 0.7rem 0rem 0.7rem 0.7rem !important;
     }
   }
 `;
@@ -32,15 +32,15 @@ export const PasswordField = styled(Input.Password)`
     padding: 0 !important;
     background-color: var(--input-bg-color) !important;
     input.ant-input {
-      padding: 0.5rem !important;
+      padding: 0.7rem !important;
       border: none !important;
       background-color: transparent !important;
     }
     .ant-input-prefix {
-      padding: 0.5rem 0rem 0.5rem 0.5rem !important;
+      padding: 0.7rem 0rem 0.7rem 0.7rem !important;
     }
     .ant-input-suffix {
-      padding: 0.5rem 0.5rem 0.5rem 0 !important;
+      padding: 0.7rem 0.7rem 0.7rem 0 !important;
       .ant-input-password-icon.anticon {
         color: var(--text-color) !important;
         opacity: 0.7 !important;

From e3c88726117b0d38598f7975db5e88a750ce0841 Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Wed, 25 Jun 2025 12:31:08 -0700
Subject: [PATCH 08/17] replace remaining regular input fields

---
 src/components/settings/ImageModerationSettings.tsx | 6 +++---
 src/components/settings/OllamaSettings.tsx          | 3 ++-
 src/components/settings/RelayInfoSettings.tsx       | 4 ++--
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/settings/ImageModerationSettings.tsx b/src/components/settings/ImageModerationSettings.tsx
index 7bd2012f..57868d96 100644
--- a/src/components/settings/ImageModerationSettings.tsx
+++ b/src/components/settings/ImageModerationSettings.tsx
@@ -4,7 +4,7 @@ import { QuestionCircleOutlined } from '@ant-design/icons';
 import useGenericSettings from '@app/hooks/useGenericSettings';
 import { ImageModerationSettings as ImageModerationSettingsType, SettingsGroupType } from '@app/types/settings.types';
 import BaseSettingsForm from './BaseSettingsForm';
-
+import * as S from './Settings.styles';
 const { Option } = Select;
 
 const ImageModerationSettings: React.FC = () => {
@@ -118,14 +118,14 @@ const ImageModerationSettings: React.FC = () => {
           label="API Endpoint"
           rules={[{ required: true, message: 'Please enter the API endpoint' }]}
         >
-          <Input placeholder="http://localhost:8000/moderate" />
+          <S.InputField placeholder="http://localhost:8000/moderate" />
         </Form.Item>
 
         <Form.Item
           name="image_moderation_temp_dir"
           label="Temporary Directory"
         >
-          <Input placeholder="./data/moderation/temp" />
+          <S.InputField placeholder="./data/moderation/temp" />
         </Form.Item>
 
         <Form.Item
diff --git a/src/components/settings/OllamaSettings.tsx b/src/components/settings/OllamaSettings.tsx
index cc9f49bb..29ce229f 100644
--- a/src/components/settings/OllamaSettings.tsx
+++ b/src/components/settings/OllamaSettings.tsx
@@ -4,6 +4,7 @@ import { QuestionCircleOutlined } from '@ant-design/icons';
 import useGenericSettings from '@app/hooks/useGenericSettings';
 import { SettingsGroupType } from '@app/types/settings.types';
 import BaseSettingsForm from './BaseSettingsForm';
+import { InputField } from './Settings.styles';
 
 const { Option } = Select;
 
@@ -113,7 +114,7 @@ const OllamaSettings: React.FC = () => {
             { type: 'url', message: 'Please enter a valid URL' }
           ]}
         >
-          <Input placeholder="http://localhost:11434" />
+          <InputField placeholder="http://localhost:11434" />
         </Form.Item>
 
         <Form.Item
diff --git a/src/components/settings/RelayInfoSettings.tsx b/src/components/settings/RelayInfoSettings.tsx
index e79fe193..b5d4142f 100644
--- a/src/components/settings/RelayInfoSettings.tsx
+++ b/src/components/settings/RelayInfoSettings.tsx
@@ -141,7 +141,7 @@ const RelayInfoSettings: React.FC = () => {
             </span>
           }
         >
-          <Input placeholder="HORNETS Relay" />
+          <S.InputField placeholder="HORNETS Relay" />
         </Form.Item>
 
         <Form.Item
@@ -155,7 +155,7 @@ const RelayInfoSettings: React.FC = () => {
             </span>
           }
         >
-          <Input placeholder="1.0.0" />
+          <S.InputField placeholder="1.0.0" />
         </Form.Item>
 
         <Form.Item

From efe8b430db175526358babc598af9366cec4571b Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Wed, 25 Jun 2025 12:46:32 -0700
Subject: [PATCH 09/17] create styling for number input

---
 src/components/settings/Settings.styles.ts | 24 ++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/settings/Settings.styles.ts b/src/components/settings/Settings.styles.ts
index 8184a59d..c25f6543 100644
--- a/src/components/settings/Settings.styles.ts
+++ b/src/components/settings/Settings.styles.ts
@@ -1,12 +1,12 @@
 import styled from 'styled-components';
-import { Input } from 'antd';
+import { Input, InputNumber } from 'antd';
 
 export const InputField = styled(Input)`
   border-radius: 7px !important;
   padding: 0.7rem !important;
-  &:focus{
-  border-color: var(--ant-primary-5) !important;
-  box-shadow: 0 0 0 2px var(--ant-primary-color-outline) !important;
+  &:focus {
+    border-color: var(--ant-primary-5) !important;
+    box-shadow: 0 0 0 2px var(--ant-primary-color-outline) !important;
   }
 `;
 
@@ -22,7 +22,6 @@ export const InputFieldWithPrefix = styled(Input)`
       background-color: transparent !important;
     }
     .ant-input-prefix {
-
       padding: 0.7rem 0rem 0.7rem 0.7rem !important;
     }
   }
@@ -42,9 +41,22 @@ export const PasswordField = styled(Input.Password)`
     .ant-input-suffix {
       padding: 0.7rem 0.7rem 0.7rem 0 !important;
       .ant-input-password-icon.anticon {
-        color: var(--text-color) !important;
+        color: var(--text-main-color) !important;
         opacity: 0.7 !important;
       }
     }
   }
 `;
+export const InputNumberField = styled(InputNumber)`
+  &.ant-input-number {
+    border-radius: 7px !important;
+    padding: 0rem !important;
+  }
+  &.ant-input-number:focus {
+    border-color: var(--ant-primary-5) !important;
+    box-shadow: 0 0 0 2px var(--ant-primary-color-outline) !important;
+  }
+  .anticon-up.ant-input-number-handler-up-inner, .anticon-down.ant-input-number-handler-down-inner {
+    color: var(--text-main-color) !important;
+  opacity: 0.7 !important;}
+`;

From fb2cc22e9bd45314e449579c64ef2a0434fd4e48 Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Wed, 25 Jun 2025 12:50:54 -0700
Subject: [PATCH 10/17] replace number fields with styled ones

---
 .../settings/ContentFilterSettings.tsx        |  7 +-
 .../settings/ImageModerationSettings.tsx      | 86 ++++++++-----------
 src/components/settings/OllamaSettings.tsx    |  6 +-
 src/components/settings/SettingsPage.tsx      |  1 -
 4 files changed, 45 insertions(+), 55 deletions(-)

diff --git a/src/components/settings/ContentFilterSettings.tsx b/src/components/settings/ContentFilterSettings.tsx
index 2e58cd92..d46cb16d 100644
--- a/src/components/settings/ContentFilterSettings.tsx
+++ b/src/components/settings/ContentFilterSettings.tsx
@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { Form, InputNumber, Switch, Select, Tooltip } from 'antd';
+import { Form, Switch, Select, Tooltip } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import useGenericSettings from '@app/hooks/useGenericSettings';
 import { SettingsGroupType } from '@app/types/settings.types';
 import BaseSettingsForm from './BaseSettingsForm';
+import { InputNumberField } from './Settings.styles';
 
 const { Option } = Select;
 
@@ -115,7 +116,7 @@ const ContentFilterSettings: React.FC = () => {
             { type: 'number', min: 100, message: 'Value must be at least 100' }
           ]}
         >
-          <InputNumber min={100} style={{ width: '100%' }} />
+          <InputNumberField min={100} style={{ width: '100%' }} />
         </Form.Item>
 
         <Form.Item
@@ -133,7 +134,7 @@ const ContentFilterSettings: React.FC = () => {
             { type: 'number', min: 1, message: 'Value must be at least 1' }
           ]}
         >
-          <InputNumber min={1} style={{ width: '100%' }} />
+          <InputNumberField min={1} style={{ width: '100%' }} />
         </Form.Item>
 
         <Form.Item
diff --git a/src/components/settings/ImageModerationSettings.tsx b/src/components/settings/ImageModerationSettings.tsx
index 57868d96..4e620391 100644
--- a/src/components/settings/ImageModerationSettings.tsx
+++ b/src/components/settings/ImageModerationSettings.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Form, Input, InputNumber, Switch, Select, Tooltip } from 'antd';
+import { Form, Switch, Select, Tooltip } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import useGenericSettings from '@app/hooks/useGenericSettings';
 import { ImageModerationSettings as ImageModerationSettingsType, SettingsGroupType } from '@app/types/settings.types';
@@ -8,14 +8,8 @@ import * as S from './Settings.styles';
 const { Option } = Select;
 
 const ImageModerationSettings: React.FC = () => {
-  const {
-    settings,
-    loading,
-    error,
-    fetchSettings,
-    updateSettings,
-    saveSettings,
-  } = useGenericSettings('image_moderation');
+  const { settings, loading, error, fetchSettings, updateSettings, saveSettings } =
+    useGenericSettings('image_moderation');
 
   const [form] = Form.useForm();
   const [isUserEditing, setIsUserEditing] = useState(false);
@@ -24,13 +18,13 @@ const ImageModerationSettings: React.FC = () => {
   useEffect(() => {
     if (settings && !isUserEditing) {
       console.log('ImageModerationSettings - Received settings:', settings);
-      
+
       // The useGenericSettings hook now returns properly prefixed field names
       // so we can use the settings directly without transformation
       const settingsObj = settings as Record<string, any>;
-      
+
       console.log('ImageModerationSettings - Setting form values directly:', settingsObj);
-      
+
       // Set form values directly since they're already properly prefixed
       form.setFieldsValue(settingsObj);
       console.log('ImageModerationSettings - Form values after set:', form.getFieldsValue());
@@ -70,11 +64,7 @@ const ImageModerationSettings: React.FC = () => {
           setIsUserEditing(false);
         }}
       >
-        <Form.Item
-          name="image_moderation_enabled"
-          label="Enable Image Moderation"
-          valuePropName="checked"
-        >
+        <Form.Item name="image_moderation_enabled" label="Enable Image Moderation" valuePropName="checked">
           <Switch />
         </Form.Item>
 
@@ -89,27 +79,35 @@ const ImageModerationSettings: React.FC = () => {
             </span>
           }
         >
-          <Select
-            allowClear={true}
-            placeholder="Select a moderation mode"
-          >
+          <Select allowClear={true} placeholder="Select a moderation mode">
             <Option value="basic">Basic Mode (Fastest, detects explicit content only)</Option>
             <Option value="strict">Strict Mode (Fast, blocks all buttocks)</Option>
             <Option value="full">Full Mode (Most accurate, uses Llama Vision)</Option>
           </Select>
         </Form.Item>
-        
+
         <Form.Item>
-          <div style={{ 
-            backgroundColor: 'rgba(0, 0, 0, 0.1)', 
-            padding: '12px', 
-            borderRadius: '4px',
-            marginBottom: '16px'
-          }}>
+          <div
+            style={{
+              backgroundColor: 'rgba(0, 0, 0, 0.1)',
+              padding: '12px',
+              borderRadius: '4px',
+              marginBottom: '16px',
+            }}
+          >
             <h4 style={{ marginTop: 0 }}>Moderation Mode Details:</h4>
-            <p><strong>Basic Mode:</strong> Only detects genitals, anus, and exposed breasts. Fastest processing (no Llama Vision). Best for high-volume applications.</p>
-            <p><strong>Strict Mode:</strong> Includes all &quot;basic&quot; detection plus automatic blocking of all detected buttocks. Fast processing. Best for zero-tolerance platforms.</p>
-            <p><strong>Full Mode (Default):</strong> Complete analysis with contextual evaluation. Slower due to Llama Vision, but most accurate. Reduces false positives.</p>
+            <p>
+              <strong>Basic Mode:</strong> Only detects genitals, anus, and exposed breasts. Fastest processing (no
+              Llama Vision). Best for high-volume applications.
+            </p>
+            <p>
+              <strong>Strict Mode:</strong> Includes all &quot;basic&quot; detection plus automatic blocking of all
+              detected buttocks. Fast processing. Best for zero-tolerance platforms.
+            </p>
+            <p>
+              <strong>Full Mode (Default):</strong> Complete analysis with contextual evaluation. Slower due to Llama
+              Vision, but most accurate. Reduces false positives.
+            </p>
           </div>
         </Form.Item>
 
@@ -121,10 +119,7 @@ const ImageModerationSettings: React.FC = () => {
           <S.InputField placeholder="http://localhost:8000/moderate" />
         </Form.Item>
 
-        <Form.Item
-          name="image_moderation_temp_dir"
-          label="Temporary Directory"
-        >
+        <Form.Item name="image_moderation_temp_dir" label="Temporary Directory">
           <S.InputField placeholder="./data/moderation/temp" />
         </Form.Item>
 
@@ -140,15 +135,10 @@ const ImageModerationSettings: React.FC = () => {
           }
           rules={[
             { required: true, message: 'Please enter a threshold value' },
-            { type: 'number', min: 0, max: 1, message: 'Value must be between 0 and 1' }
+            { type: 'number', min: 0, max: 1, message: 'Value must be between 0 and 1' },
           ]}
         >
-          <InputNumber
-            step={0.1}
-            min={0}
-            max={1}
-            style={{ width: '100%' }}
-          />
+          <S.InputNumberField step={0.1} min={0} max={1} style={{ width: '100%' }} />
         </Form.Item>
 
         <Form.Item
@@ -156,10 +146,10 @@ const ImageModerationSettings: React.FC = () => {
           label="Check Interval (seconds)"
           rules={[
             { required: true, message: 'Please enter a check interval' },
-            { type: 'number', min: 1, message: 'Value must be at least 1' }
+            { type: 'number', min: 1, message: 'Value must be at least 1' },
           ]}
         >
-          <InputNumber min={1} style={{ width: '100%' }} />
+          <S.InputNumberField min={1} style={{ width: '100%' }} />
         </Form.Item>
 
         <Form.Item
@@ -167,10 +157,10 @@ const ImageModerationSettings: React.FC = () => {
           label="Concurrency"
           rules={[
             { required: true, message: 'Please enter a concurrency value' },
-            { type: 'number', min: 1, message: 'Value must be at least 1' }
+            { type: 'number', min: 1, message: 'Value must be at least 1' },
           ]}
         >
-          <InputNumber min={1} style={{ width: '100%' }} />
+          <S.InputNumberField min={1} style={{ width: '100%' }} />
         </Form.Item>
 
         <Form.Item
@@ -178,10 +168,10 @@ const ImageModerationSettings: React.FC = () => {
           label="Timeout (seconds)"
           rules={[
             { required: true, message: 'Please enter a timeout value' },
-            { type: 'number', min: 1, message: 'Value must be at least 1' }
+            { type: 'number', min: 1, message: 'Value must be at least 1' },
           ]}
         >
-          <InputNumber min={1} style={{ width: '100%' }} />
+          <S.InputNumberField min={1} style={{ width: '100%' }} />
         </Form.Item>
       </Form>
     </BaseSettingsForm>
diff --git a/src/components/settings/OllamaSettings.tsx b/src/components/settings/OllamaSettings.tsx
index 29ce229f..a346f940 100644
--- a/src/components/settings/OllamaSettings.tsx
+++ b/src/components/settings/OllamaSettings.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { Form, Input, InputNumber, Select, Tooltip } from 'antd';
+import { Form, Select, Tooltip } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import useGenericSettings from '@app/hooks/useGenericSettings';
 import { SettingsGroupType } from '@app/types/settings.types';
 import BaseSettingsForm from './BaseSettingsForm';
-import { InputField } from './Settings.styles';
+import { InputField, InputNumberField } from './Settings.styles';
 
 const { Option } = Select;
 
@@ -162,7 +162,7 @@ const OllamaSettings: React.FC = () => {
             { type: 'number', min: 1, message: 'Value must be at least 1' }
           ]}
         >
-          <InputNumber min={1} style={{ width: '100%' }} />
+          <InputNumberField min={1} style={{ width: '100%' }} />
         </Form.Item>
       </Form>
     </BaseSettingsForm>
diff --git a/src/components/settings/SettingsPage.tsx b/src/components/settings/SettingsPage.tsx
index fc389a59..537e44e4 100644
--- a/src/components/settings/SettingsPage.tsx
+++ b/src/components/settings/SettingsPage.tsx
@@ -123,7 +123,6 @@ const SettingsWrapper = styled.div`
   
   .ant-input, .ant-input-number, .ant-select-selector {
     background-color: var(--input-bg-color) !important;
-    border: 1px solid var(--border-base-color) !important;
   }
 `;
 

From 79f33e92f0717c937236f0f79dfaca88e245c550 Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Wed, 25 Jun 2025 12:59:23 -0700
Subject: [PATCH 11/17] create styling for select component

---
 src/components/settings/Settings.styles.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/settings/Settings.styles.ts b/src/components/settings/Settings.styles.ts
index c25f6543..f680165f 100644
--- a/src/components/settings/Settings.styles.ts
+++ b/src/components/settings/Settings.styles.ts
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Input, InputNumber } from 'antd';
+import { Input, InputNumber, Select } from 'antd';
 
 export const InputField = styled(Input)`
   border-radius: 7px !important;
@@ -60,3 +60,9 @@ export const InputNumberField = styled(InputNumber)`
     color: var(--text-main-color) !important;
   opacity: 0.7 !important;}
 `;
+
+export const SelectField = styled(Select)`
+  .ant-select-arrow, .ant-select-clear{
+    color: var(--text-main-color) !important;
+  }
+`

From 8088ee7588833adb8bf0868d58d9312d15b59d92 Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Wed, 25 Jun 2025 13:05:38 -0700
Subject: [PATCH 12/17] replace select fields with styled components

---
 src/components/settings/ImageModerationSettings.tsx |  8 ++++----
 src/components/settings/OllamaSettings.tsx          | 10 +++++-----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/settings/ImageModerationSettings.tsx b/src/components/settings/ImageModerationSettings.tsx
index 4e620391..3de2e57d 100644
--- a/src/components/settings/ImageModerationSettings.tsx
+++ b/src/components/settings/ImageModerationSettings.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { Form, Switch, Select, Tooltip } from 'antd';
+import { Form, Switch, Tooltip } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import useGenericSettings from '@app/hooks/useGenericSettings';
 import { ImageModerationSettings as ImageModerationSettingsType, SettingsGroupType } from '@app/types/settings.types';
 import BaseSettingsForm from './BaseSettingsForm';
 import * as S from './Settings.styles';
-const { Option } = Select;
+const { Option } = S.SelectField;
 
 const ImageModerationSettings: React.FC = () => {
   const { settings, loading, error, fetchSettings, updateSettings, saveSettings } =
@@ -79,11 +79,11 @@ const ImageModerationSettings: React.FC = () => {
             </span>
           }
         >
-          <Select allowClear={true} placeholder="Select a moderation mode">
+          <S.SelectField allowClear={true} placeholder="Select a moderation mode">
             <Option value="basic">Basic Mode (Fastest, detects explicit content only)</Option>
             <Option value="strict">Strict Mode (Fast, blocks all buttocks)</Option>
             <Option value="full">Full Mode (Most accurate, uses Llama Vision)</Option>
-          </Select>
+          </S.SelectField>
         </Form.Item>
 
         <Form.Item>
diff --git a/src/components/settings/OllamaSettings.tsx b/src/components/settings/OllamaSettings.tsx
index a346f940..3c37515a 100644
--- a/src/components/settings/OllamaSettings.tsx
+++ b/src/components/settings/OllamaSettings.tsx
@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { Form, Select, Tooltip } from 'antd';
+import { Form, Tooltip } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import useGenericSettings from '@app/hooks/useGenericSettings';
 import { SettingsGroupType } from '@app/types/settings.types';
 import BaseSettingsForm from './BaseSettingsForm';
-import { InputField, InputNumberField } from './Settings.styles';
+import { InputField, InputNumberField, SelectField } from './Settings.styles';
 
-const { Option } = Select;
+const { Option } = SelectField;
 
 const OllamaSettings: React.FC = () => {
   const {
@@ -131,7 +131,7 @@ const OllamaSettings: React.FC = () => {
             { required: true, message: 'Please select an Ollama model' }
           ]}
         >
-          <Select
+          <SelectField
             placeholder="Select a model"
             allowClear
             showSearch
@@ -144,7 +144,7 @@ const OllamaSettings: React.FC = () => {
                 {option.label}
               </Option>
             ))}
-          </Select>
+          </SelectField>
         </Form.Item>
 
         <Form.Item

From b946c350e672a66b5818809ac0eabb5f8a2de26b Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Wed, 25 Jun 2025 15:16:31 -0700
Subject: [PATCH 13/17] basic upload field

---
 src/components/settings/Settings.styles.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/settings/Settings.styles.ts b/src/components/settings/Settings.styles.ts
index f680165f..3ef78c73 100644
--- a/src/components/settings/Settings.styles.ts
+++ b/src/components/settings/Settings.styles.ts
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Input, InputNumber, Select } from 'antd';
+import { Input, InputNumber, Select, Button} from 'antd';
 
 export const InputField = styled(Input)`
   border-radius: 7px !important;
@@ -66,3 +66,6 @@ export const SelectField = styled(Select)`
     color: var(--text-main-color) !important;
   }
 `
+export const UploadButton = styled(Button)`
+  margin-right:.5rem;
+`;
\ No newline at end of file

From 0f91f9f5023bf174be9b2464de9ab31c81cd17e5 Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Wed, 25 Jun 2025 15:16:44 -0700
Subject: [PATCH 14/17] place upload field for images

---
 src/components/settings/RelayInfoSettings.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/settings/RelayInfoSettings.tsx b/src/components/settings/RelayInfoSettings.tsx
index b5d4142f..b14248f9 100644
--- a/src/components/settings/RelayInfoSettings.tsx
+++ b/src/components/settings/RelayInfoSettings.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { Form, Input, Select, Tooltip } from 'antd';
-import { QuestionCircleOutlined, InfoCircleOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons';
+import { QuestionCircleOutlined, InfoCircleOutlined, UserOutlined, KeyOutlined, UploadOutlined } from '@ant-design/icons';
 import useGenericSettings from '@app/hooks/useGenericSettings';
 import { SettingsGroupType } from '@app/types/settings.types';
 import BaseSettingsForm from './BaseSettingsForm';
@@ -72,7 +72,21 @@ const RelayInfoSettings: React.FC = () => {
         >
           <S.InputFieldWithPrefix prefix={<InfoCircleOutlined />} placeholder="My Nostr Relay" />
         </Form.Item>
-
+        <Form.Item
+        name = "relayIcon"
+        label={
+          <span>
+            Relay Icon&nbsp;
+            <Tooltip title="An icon representing your relay">
+              <QuestionCircleOutlined />
+            </Tooltip>
+          </span>
+        }
+        >
+          <S.InputFieldWithPrefix
+            suffix={<S.UploadButton size='small' aria-label='Upload Relay Icon' icon={<UploadOutlined />}  > Upload Relay Icon</S.UploadButton>}
+          />
+        </Form.Item>
         <Form.Item
           name="relaydescription"
           label={

From 6e32d1d3e5bfde4d2ec10edbe88c77ce17cd7b4e Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Wed, 25 Jun 2025 15:35:06 -0700
Subject: [PATCH 15/17] add UI for uploading images

---
 src/components/settings/RelayInfoSettings.tsx | 11 +++++--
 src/components/settings/Settings.styles.ts    | 31 ++++++++++++++-----
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/components/settings/RelayInfoSettings.tsx b/src/components/settings/RelayInfoSettings.tsx
index b14248f9..cb79cd5a 100644
--- a/src/components/settings/RelayInfoSettings.tsx
+++ b/src/components/settings/RelayInfoSettings.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState} from 'react';
 import { Form, Input, Select, Tooltip } from 'antd';
 import { QuestionCircleOutlined, InfoCircleOutlined, UserOutlined, KeyOutlined, UploadOutlined } from '@ant-design/icons';
 import useGenericSettings from '@app/hooks/useGenericSettings';
@@ -10,7 +10,7 @@ const { TextArea } = Input;
 
 const RelayInfoSettings: React.FC = () => {
   const { settings, loading, error, fetchSettings, updateSettings, saveSettings } = useGenericSettings('relay_info');
-
+  const [image, setImage] = useState<string  | null>(null); 
   const [form] = Form.useForm();
 
   // Update form values when settings change
@@ -25,6 +25,10 @@ const RelayInfoSettings: React.FC = () => {
     updateSettings(changedValues);
   };
 
+  const onUploadIcon = (url: string) => { // use as onUploadIcon prop in Upload Component
+    setImage(url);
+  };
+
   // Common NIPs that relays might support
   const nipOptions = [
     { value: 1, label: 'NIP-01: Basic protocol flow' },
@@ -86,6 +90,9 @@ const RelayInfoSettings: React.FC = () => {
           <S.InputFieldWithPrefix
             suffix={<S.UploadButton size='small' aria-label='Upload Relay Icon' icon={<UploadOutlined />}  > Upload Relay Icon</S.UploadButton>}
           />
+          {image && (
+            <S.UploadedImageWrapper><img src={image} alt="" /></S.UploadedImageWrapper>
+          )}
         </Form.Item>
         <Form.Item
           name="relaydescription"
diff --git a/src/components/settings/Settings.styles.ts b/src/components/settings/Settings.styles.ts
index 3ef78c73..6e4e500e 100644
--- a/src/components/settings/Settings.styles.ts
+++ b/src/components/settings/Settings.styles.ts
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Input, InputNumber, Select, Button} from 'antd';
+import { Input, InputNumber, Select, Button } from 'antd';
 
 export const InputField = styled(Input)`
   border-radius: 7px !important;
@@ -56,16 +56,33 @@ export const InputNumberField = styled(InputNumber)`
     border-color: var(--ant-primary-5) !important;
     box-shadow: 0 0 0 2px var(--ant-primary-color-outline) !important;
   }
-  .anticon-up.ant-input-number-handler-up-inner, .anticon-down.ant-input-number-handler-down-inner {
+  .anticon-up.ant-input-number-handler-up-inner,
+  .anticon-down.ant-input-number-handler-down-inner {
     color: var(--text-main-color) !important;
-  opacity: 0.7 !important;}
+    opacity: 0.7 !important;
+  }
 `;
 
 export const SelectField = styled(Select)`
-  .ant-select-arrow, .ant-select-clear{
+  .ant-select-arrow,
+  .ant-select-clear {
     color: var(--text-main-color) !important;
   }
-`
+`;
 export const UploadButton = styled(Button)`
-  margin-right:.5rem;
-`;
\ No newline at end of file
+  margin-right: 0.5rem;
+`;
+export const UploadedImageWrapper = styled.div`
+  border-radius: 100%;
+  margin 1rem  0 0 0;
+  width: 12rem;
+  height: 12rem;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+`;

From fe72245572a1df4ec3bc90d418ddfb75d82c3abf Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Thu, 3 Jul 2025 10:22:36 -0700
Subject: [PATCH 16/17] wrap RelayIcon form item with ComingSoonWrapper

---
 src/components/settings/RelayInfoSettings.tsx | 62 ++++++++++++-------
 src/styles/themes/reusableComponentStyles.ts  |  7 ++-
 2 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/src/components/settings/RelayInfoSettings.tsx b/src/components/settings/RelayInfoSettings.tsx
index cb79cd5a..aaa151df 100644
--- a/src/components/settings/RelayInfoSettings.tsx
+++ b/src/components/settings/RelayInfoSettings.tsx
@@ -1,16 +1,23 @@
-import React, { useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
 import { Form, Input, Select, Tooltip } from 'antd';
-import { QuestionCircleOutlined, InfoCircleOutlined, UserOutlined, KeyOutlined, UploadOutlined } from '@ant-design/icons';
+import {
+  QuestionCircleOutlined,
+  InfoCircleOutlined,
+  UserOutlined,
+  KeyOutlined,
+  UploadOutlined,
+} from '@ant-design/icons';
 import useGenericSettings from '@app/hooks/useGenericSettings';
 import { SettingsGroupType } from '@app/types/settings.types';
 import BaseSettingsForm from './BaseSettingsForm';
 import * as S from './Settings.styles';
+import { ComingSoonWrapper } from '@app/styles/themes/reusableComponentStyles';
 const { Option } = Select;
 const { TextArea } = Input;
 
 const RelayInfoSettings: React.FC = () => {
   const { settings, loading, error, fetchSettings, updateSettings, saveSettings } = useGenericSettings('relay_info');
-  const [image, setImage] = useState<string  | null>(null); 
+  const [image, setImage] = useState<string | null>(null);
   const [form] = Form.useForm();
 
   // Update form values when settings change
@@ -25,7 +32,8 @@ const RelayInfoSettings: React.FC = () => {
     updateSettings(changedValues);
   };
 
-  const onUploadIcon = (url: string) => { // use as onUploadIcon prop in Upload Component
+  const onUploadIcon = (url: string) => {
+    // use as onUploadIcon prop in Upload Component
     setImage(url);
   };
 
@@ -76,24 +84,34 @@ const RelayInfoSettings: React.FC = () => {
         >
           <S.InputFieldWithPrefix prefix={<InfoCircleOutlined />} placeholder="My Nostr Relay" />
         </Form.Item>
-        <Form.Item
-        name = "relayIcon"
-        label={
-          <span>
-            Relay Icon&nbsp;
-            <Tooltip title="An icon representing your relay">
-              <QuestionCircleOutlined />
-            </Tooltip>
-          </span>
-        }
-        >
-          <S.InputFieldWithPrefix
-            suffix={<S.UploadButton size='small' aria-label='Upload Relay Icon' icon={<UploadOutlined />}  > Upload Relay Icon</S.UploadButton>}
-          />
-          {image && (
-            <S.UploadedImageWrapper><img src={image} alt="" /></S.UploadedImageWrapper>
-          )}
-        </Form.Item>
+        <ComingSoonWrapper>
+          <Form.Item
+            name="relayIcon"
+            label={
+              <span>
+                Relay Icon&nbsp;
+                <Tooltip title="An icon representing your relay">
+                  <QuestionCircleOutlined />
+                </Tooltip>
+                &nbsp;(Coming Soon)
+              </span>
+            }
+          >
+            {
+              <S.InputFieldWithPrefix
+                disabled={true}
+                placeholder="https://example.com/relay-icon.png"
+                // suffix={<S.UploadButton size='small' aria-label='Upload Relay Icon' icon={<UploadOutlined />}
+                // > Upload Relay Icon</S.UploadButton>}
+              />
+            }
+            {image && (
+              <S.UploadedImageWrapper>
+                <img src={image} alt="" />
+              </S.UploadedImageWrapper>
+            )}
+          </Form.Item>
+        </ComingSoonWrapper>
         <Form.Item
           name="relaydescription"
           label={
diff --git a/src/styles/themes/reusableComponentStyles.ts b/src/styles/themes/reusableComponentStyles.ts
index 3c238fb4..130b7352 100644
--- a/src/styles/themes/reusableComponentStyles.ts
+++ b/src/styles/themes/reusableComponentStyles.ts
@@ -3,4 +3,9 @@ import { Input } from "antd";
 
 export const StyledInput = styled(Input)`
   background-color: var(--layout-sider-bg-color) !important;
-`;
\ No newline at end of file
+`;
+
+export const ComingSoonWrapper = styled.div`
+  color: var(--text-light-color) !important;
+  opacity: 60% !important;
+`;

From 97f0baadfd9f0060974828f41a3af9c40adeb6a2 Mon Sep 17 00:00:00 2001
From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com>
Date: Thu, 3 Jul 2025 10:42:45 -0700
Subject: [PATCH 17/17] change color of remove icon on supported nips

---
 src/components/settings/RelayInfoSettings.tsx | 88 +++++++++----------
 src/components/settings/Settings.styles.ts    |  5 +-
 2 files changed, 48 insertions(+), 45 deletions(-)

diff --git a/src/components/settings/RelayInfoSettings.tsx b/src/components/settings/RelayInfoSettings.tsx
index aaa151df..19d617a1 100644
--- a/src/components/settings/RelayInfoSettings.tsx
+++ b/src/components/settings/RelayInfoSettings.tsx
@@ -32,10 +32,10 @@ const RelayInfoSettings: React.FC = () => {
     updateSettings(changedValues);
   };
 
-  const onUploadIcon = (url: string) => {
-    // use as onUploadIcon prop in Upload Component
-    setImage(url);
-  };
+  // const onUploadIcon = (url: string) => {
+  //   // use as onUploadIcon prop in Upload Component
+  //   setImage(url);
+  // };
 
   // Common NIPs that relays might support
   const nipOptions = [
@@ -196,47 +196,47 @@ const RelayInfoSettings: React.FC = () => {
         >
           <S.InputField placeholder="1.0.0" />
         </Form.Item>
-
-        <Form.Item
-          name="relaysupportednips"
-          label={
-            <span>
-              Supported NIPs&nbsp;
-              <Tooltip title="Nostr Implementation Possibilities (NIPs) supported by this relay">
-                <QuestionCircleOutlined />
-              </Tooltip>
-            </span>
-          }
-        >
-          <Select
-            mode="tags"
-            placeholder="Select or type custom NIP numbers (e.g. 1, 42, 999)"
-            style={{ width: '100%' }}
-            tokenSeparators={[',', ' ']}
-            filterOption={(input, option) => {
-              if (!option?.children) return false;
-              return option.children.toString().toLowerCase().includes(input.toLowerCase());
-            }}
-            onChange={(values: (string | number)[]) => {
-              // Convert all values to numbers, filtering out invalid ones
-              const numberValues = values
-                .map((val: string | number) => {
-                  const num = Number(val);
-                  return isNaN(num) ? null : num;
-                })
-                .filter((val: number | null): val is number => val !== null);
-
-              // Update the form field with number values
-              form.setFieldsValue({ relaysupportednips: numberValues });
-            }}
+        <S.StyledOption>
+          <Form.Item
+            name="relaysupportednips"
+            label={
+              <span>
+                Supported NIPs&nbsp;
+                <Tooltip title="Nostr Implementation Possibilities (NIPs) supported by this relay">
+                  <QuestionCircleOutlined />
+                </Tooltip>
+              </span>
+            }
           >
-            {nipOptions.map((option) => (
-              <Option key={option.value} value={option.value}>
-                {option.label}
-              </Option>
-            ))}
-          </Select>
-        </Form.Item>
+            <Select
+              mode="tags"
+              placeholder="Select or type custom NIP numbers (e.g. 1, 42, 999)"
+              style={{ width: '100%' }}
+              tokenSeparators={[',', ' ']}
+              filterOption={(input, option) => {
+                if (!option?.children) return false;
+                return option.children.toString().toLowerCase().includes(input.toLowerCase());
+              }}
+              onChange={(values: (string | number)[]) => {
+                // Convert all values to numbers, filtering out invalid ones
+                const numberValues = values
+                  .map((val: string | number) => {
+                    const num = Number(val);
+                    return isNaN(num) ? null : num;
+                  })
+                  .filter((val: number | null): val is number => val !== null);
+                // Update the form field with number values
+                form.setFieldsValue({ relaysupportednips: numberValues });
+              }}
+            >
+              {nipOptions.map((option) => (
+                <Option key={option.value} value={option.value}>
+                  {option.label}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+        </S.StyledOption>
 
         <Form.Item>
           <p
diff --git a/src/components/settings/Settings.styles.ts b/src/components/settings/Settings.styles.ts
index 6e4e500e..695b5d71 100644
--- a/src/components/settings/Settings.styles.ts
+++ b/src/components/settings/Settings.styles.ts
@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 import { Input, InputNumber, Select, Button } from 'antd';
-
 export const InputField = styled(Input)`
   border-radius: 7px !important;
   padding: 0.7rem !important;
@@ -86,3 +85,7 @@ export const UploadedImageWrapper = styled.div`
     display: block;
   }
 `;
+export const StyledOption = styled.div`
+  .ant-select-selection-item-remove{
+  color: var(--text-light-color);
+`;