From ae01f21c61037e735590c75fe5ad3b7040753a9e Mon Sep 17 00:00:00 2001
From: Chukwumdiebube <chukwumdiebubeojinta@gmail.com>
Date: Thu, 16 Feb 2023 14:23:08 +0100
Subject: [PATCH] Styled text input

---
 src/components/Helpers/Inputs/InputCom/index.jsx | 7 ++++---
 src/components/Reminders/AddEditReminder.jsx     | 3 ++-
 src/components/Reminders/ReminderTable.jsx       | 1 -
 src/index.css                                    | 7 +++++--
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx
index 6429708..f3253ec 100755
--- a/src/components/Helpers/Inputs/InputCom/index.jsx
+++ b/src/components/Helpers/Inputs/InputCom/index.jsx
@@ -9,7 +9,8 @@ export default function InputCom({
   iconName,
   inputHandler,
   value,
-  maxLength
+  maxLength,
+  borderColor
 }) {
   return (
     <div className="input-com">
@@ -21,12 +22,12 @@ export default function InputCom({
           {label}
         </label>
       )}
-      <div className="input-wrapper border border-light-purple dark:border-[#5356fb29] w-full rounded-[50px] h-[58px] overflow-hidden relative ">
+      <div className={`input-wrapper border border-light-purple dark:border-[#5356fb29] w-full rounded-[50px] h-[58px] overflow-hidden relative ${borderColor}`}>
         <input
           placeholder={placeholder}
           value={value}
           onChange={inputHandler}
-          className="input-field placeholder:text-base text-base px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
+          className="input-field placeholder:text-base text-base px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none"
           type={type}
           id={name}
           name={name}
diff --git a/src/components/Reminders/AddEditReminder.jsx b/src/components/Reminders/AddEditReminder.jsx
index 892009a..d7b3d2b 100644
--- a/src/components/Reminders/AddEditReminder.jsx
+++ b/src/components/Reminders/AddEditReminder.jsx
@@ -128,6 +128,7 @@ export default function AddEditReminder({ className }) {
                 value={reminder.description}
                 inputHandler={onReminderInputChange}
                 maxLength={100}
+                borderColor='border border-pink'
               />
             </div>
 
@@ -229,7 +230,7 @@ export default function AddEditReminder({ className }) {
                     value={reminder.notes}
                     placeholder="Provide a detailed description of your item."
                     rows="7"
-                    className="w-full h-full px-7 py-4  border border-light-purple dark:border-[#5356fb29]  rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none resize-none"
+                    className="w-full h-full px-7 py-4  border border-pink dark:border-[#5356fb29]  rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none resize-none"
                     onChange={onReminderInputChange}
                     maxLength={250}
                   />
diff --git a/src/components/Reminders/ReminderTable.jsx b/src/components/Reminders/ReminderTable.jsx
index 6a7f9ff..621ec4d 100755
--- a/src/components/Reminders/ReminderTable.jsx
+++ b/src/components/Reminders/ReminderTable.jsx
@@ -205,7 +205,6 @@ export default function ReminderTable({ className }) {
                     })
                   )
                 }
-
           </tbody>
         </table>
       </div>
diff --git a/src/index.css b/src/index.css
index e3dbeb4..578e833 100755
--- a/src/index.css
+++ b/src/index.css
@@ -735,7 +735,7 @@ TODO: Responsive ===========================
   appearance: none;
   background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat #fafafa;
   background-position: calc(100% - 0.75rem) center !important;
-  border: 0.5px solid #E3E4FE; 
+  @apply border border-pink;
 }
 
 .dark .reminder-select select {
@@ -764,6 +764,7 @@ TODO: Responsive ===========================
   padding: 1.25rem;
   background: #fafafa;
   border-radius: 9999px;
+  @apply border border-pink;
 }
 
 .dark .react-date-picker__wrapper {border: 0.5px solid #25284F;}
@@ -788,4 +789,6 @@ TODO: Responsive ===========================
 .react-date-picker__inputGroup__leadingZero{
   cursor: pointer;
   color: #374151;
-}
\ No newline at end of file
+}
+
+.animate-fadeIn {@apply transition duration-300}
\ No newline at end of file
-- 
2.34.1