From abf5b89c282ddc37aef9fe07f7b2efb01d37ce04 Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Sun, 7 Jul 2024 08:33:02 +0100
Subject: [PATCH] refactor: handling applied styles based on colorVariant in a
 neater manner

---
 frontend/src/components/Input.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Input.tsx b/frontend/src/components/Input.tsx
index d3203099..56ca1d52 100644
--- a/frontend/src/components/Input.tsx
+++ b/frontend/src/components/Input.tsx
@@ -15,14 +15,15 @@ const Input = ({
   onPaste,
   onKeyDown,
 }: InputProps) => {
+  const colorStyles = {
+    silver: 'border-silver dark:border-silver/40',
+    jet: 'border-jet',
+    gray: 'border-gray-5000 dark:text-silver',
+  };
+
   return (
     <input
-      className={`h-[42px] w-full rounded-full border-2 px-3 outline-none dark:bg-transparent dark:text-white ${className} ${
-        colorVariant === 'silver' ? 'border-silver dark:border-silver/40' : ''
-      } ${colorVariant === 'jet' ? 'border-jet' : ''} ${
-        colorVariant === 'gray' ? 'border-gray-5000 dark:text-silver' : ''
-      }
-      }`}
+      className={`h-[42px] w-full rounded-full border-2 px-3 outline-none dark:bg-transparent dark:text-white ${className} ${colorStyles[colorVariant]}`}
       type={type}
       id={id}
       name={name}