replace select fields with styled components

Author: AnthonyMarin

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>

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