From 28489d244c5e4be9562bf35708c98bb83036ecdb Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 19 Feb 2025 04:10:14 +0530
Subject: [PATCH] (feat:input) consistent colors

---
 frontend/src/components/Input.tsx    |  2 +-
 frontend/src/modals/WrapperModal.tsx | 21 ++++++++++++++++-----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Input.tsx b/frontend/src/components/Input.tsx
index f224e2ba..e703ff14 100644
--- a/frontend/src/components/Input.tsx
+++ b/frontend/src/components/Input.tsx
@@ -47,7 +47,7 @@ const Input = ({
       </input>
       {label && (
         <div className="absolute -top-2 left-2">
-          <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver flex items-center">
+          <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver flex items-center">
             {label}
             {required && (
               <span className="text-[#D30000] dark:text-[#D42626] ml-0.5">
diff --git a/frontend/src/modals/WrapperModal.tsx b/frontend/src/modals/WrapperModal.tsx
index c2b22a90..eee205f0 100644
--- a/frontend/src/modals/WrapperModal.tsx
+++ b/frontend/src/modals/WrapperModal.tsx
@@ -1,12 +1,21 @@
 import React, { useEffect, useRef } from 'react';
 
 import Exit from '../assets/exit.svg';
-import { WrapperModalPropsType } from './types';
+
+interface WrapperModalPropsType {
+  children: React.ReactNode;
+  close: () => void;
+  isPerformingTask?: boolean;
+  className?: string;
+  contentClassName?: string;
+}
 
 export default function WrapperModal({
   children,
   close,
-  isPerformingTask,
+  isPerformingTask = false,
+  className = 'sm:w-[512px]', // Default width, but can be overridden
+  contentClassName = 'p-8', // Default padding, but can be overridden
 }: WrapperModalPropsType) {
   const modalRef = useRef<HTMLDivElement>(null);
 
@@ -40,17 +49,19 @@ export default function WrapperModal({
     <div className="fixed top-0 left-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">
       <div
         ref={modalRef}
-        className="relative w-11/12 rounded-2xl bg-white dark:bg-[#26272E] sm:w-[512px] p-8"
+        className={`relative w-11/12 rounded-2xl bg-white dark:bg-[#26272E] ${className}`}
       >
         {!isPerformingTask && (
           <button
             className="absolute top-3 right-4 m-2 w-3 z-50"
             onClick={close}
           >
-            <img className="filter dark:invert" src={Exit} />
+            <img className="filter dark:invert" src={Exit} alt="Close" />
           </button>
         )}
-        {children}
+        <div className={contentClassName}>
+          {children}
+        </div>
       </div>
     </div>
   );