From 95ad5e9d4ced61c2b8301ba10f14c2d5401cc2d0 Mon Sep 17 00:00:00 2001
From: VampireChicken12 <Johnbrown51@yahoo.com>
Date: Wed, 15 Nov 2023 20:23:29 -0500
Subject: [PATCH 1/2] fix: Fix on screen display color visibility in settings

---
 src/components/Settings/Settings.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
index 8d7db0ac..43794a73 100644
--- a/src/components/Settings/Settings.tsx
+++ b/src/components/Settings/Settings.tsx
@@ -171,42 +171,42 @@ export default function Settings({
 	});
 	const colorOptions: SelectOption[] = [
 		{
-			element: <div className={cn("m-2 h-2 w-2 rounded-[50%]", "bg-[red]")}></div>,
+			element: <div className={cn("m-2 h-3 w-3 rounded-[50%] border-black border-[1px] border-solid", "bg-[red]")}></div>,
 			label: red,
 			value: "red"
 		},
 		{
-			element: <div className={cn("m-2 h-2 w-2 rounded-[50%]", "bg-[green]")}></div>,
+			element: <div className={cn("m-2 h-3 w-3 rounded-[50%] border-black border-[1px] border-solid", "bg-[green]")}></div>,
 			label: green,
 			value: "green"
 		},
 		{
-			element: <div className={cn("m-2 h-2 w-2 rounded-[50%]", "bg-[blue]")}></div>,
+			element: <div className={cn("m-2 h-3 w-3 rounded-[50%] border-black border-[1px] border-solid", "bg-[blue]")}></div>,
 			label: blue,
 			value: "blue"
 		},
 		{
-			element: <div className={cn("m-2 h-2 w-2 rounded-[50%]", "bg-[yellow]")}></div>,
+			element: <div className={cn("m-2 h-3 w-3 rounded-[50%] border-black border-[1px] border-solid", "bg-[yellow]")}></div>,
 			label: yellow,
 			value: "yellow"
 		},
 		{
-			element: <div className={cn("m-2 h-2 w-2 rounded-[50%]", "bg-[orange]")}></div>,
+			element: <div className={cn("m-2 h-3 w-3 rounded-[50%] border-black border-[1px] border-solid", "bg-[orange]")}></div>,
 			label: orange,
 			value: "orange"
 		},
 		{
-			element: <div className={cn("m-2 h-2 w-2 rounded-[50%]", "bg-[purple]")}></div>,
+			element: <div className={cn("m-2 h-3 w-3 rounded-[50%] border-black border-[1px] border-solid", "bg-[purple]")}></div>,
 			label: purple,
 			value: "purple"
 		},
 		{
-			element: <div className={cn("m-2 h-2 w-2 rounded-[50%]", "bg-[pink]")}></div>,
+			element: <div className={cn("m-2 h-3 w-3 rounded-[50%] border-black border-[1px] border-solid", "bg-[pink]")}></div>,
 			label: pink,
 			value: "pink"
 		},
 		{
-			element: <div className={cn("m-2 h-2 w-2 rounded-[50%]", "bg-[white]")}></div>,
+			element: <div className={cn("m-2 h-3 w-3 rounded-[50%] border-black border-[1px] border-solid", "bg-[white]")}></div>,
 			label: white,
 			value: "white"
 		}

From 278149232e9fc34ef46bc9e9f56aa11fb24e9214 Mon Sep 17 00:00:00 2001
From: VampireChicken12 <Johnbrown51@yahoo.com>
Date: Wed, 15 Nov 2023 20:24:19 -0500
Subject: [PATCH 2/2] fix: Fix selected option text being white on light mode

---
 src/components/Inputs/Select/Select.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Inputs/Select/Select.tsx b/src/components/Inputs/Select/Select.tsx
index 06631e13..011b9696 100644
--- a/src/components/Inputs/Select/Select.tsx
+++ b/src/components/Inputs/Select/Select.tsx
@@ -67,16 +67,20 @@ const Select: React.FC<SelectProps> = ({ className, disabled, id, label, onChang
 					{selectedOption ? (
 						options.find((option) => option.value === selectedOption)?.element ? (
 							<div className="flex w-full items-center justify-between pr-4">
-								<span className={cn("text-white", disabledButtonClasses)}>{options.find((option) => option.value === selectedOption)?.label}</span>
+								<span className={cn("text-black dark:text-white", disabledButtonClasses)}>
+									{options.find((option) => option.value === selectedOption)?.label}
+								</span>
 								{options.find((option) => option.value === selectedOption)?.element}
 							</div>
 						) : (
 							<div className="flex w-full items-center justify-between pr-2">
-								<span className={cn("text-white", disabledButtonClasses)}>{options.find((option) => option.value === selectedOption)?.label}</span>
+								<span className={cn("text-black dark:text-white", disabledButtonClasses)}>
+									{options.find((option) => option.value === selectedOption)?.label}
+								</span>
 							</div>
 						)
 					) : (
-						<span className={cn("text-white", disabledButtonClasses)}>Select an option</span>
+						<span className={cn("text-black dark:text-white", disabledButtonClasses)}>Select an option</span>
 					)}
 					<Arrow rotation={isSelectVisible ? "up" : "down"} />
 				</button>