From fcd3fea1913d05d9ae215814049708c00bae6829 Mon Sep 17 00:00:00 2001
From: MoulikaKulkarni <moulika.kulkarni@ayanworks.com>
Date: Tue, 26 Sep 2023 18:29:32 +0530
Subject: [PATCH] fix: dark mode alignment fixes

Signed-off-by: MoulikaKulkarni <moulika.kulkarni@ayanworks.com>
---
 src/commonComponents/DeviceDetailsCard.tsx       | 16 +++++++++-------
 src/components/Profile/EditUserProfile.tsx       |  2 +-
 .../organization/invitations/Invitations.tsx     | 12 ++++++------
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/commonComponents/DeviceDetailsCard.tsx b/src/commonComponents/DeviceDetailsCard.tsx
index 7999bd8ed..5088e82f1 100644
--- a/src/commonComponents/DeviceDetailsCard.tsx
+++ b/src/commonComponents/DeviceDetailsCard.tsx
@@ -83,18 +83,20 @@ const DeviceDetails = (props: { deviceFriendlyName: string, createDateTime: stri
                         </div>
                         <div className="flex-1 min-w-0">
                             <div className="flex">
-                                <p className="text-base font-semibold text-gray-900 truncate dark:text-white pr-1">
+                                <p className="text-base font-semibold text-gray-900 truncate dark:text-white pr-3">
                                     {props?.deviceFriendlyName}
                                 </p>
                                 <button
-                                    className="p-1 border border-gray-400 rounded hover:bg-gray-100"
+                                    className="p-1 border border-gray-400 rounded hover:bg-gray-100 dark:hover:bg-black dark:text-white dark:hover:text-white"
                                     onClick={() => setOpenEditModel(true)}
                                 >
-                                    <img
-                                        src={editIcon}
-                                        alt="CREDEBL Logo"
-                                        style={{ width: '14px', height: '14px' }}
-                                    />
+                                    <svg className="h-4 w-4 dark:text-white dark:hover:text-white" viewBox="0 0 20 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                                <path stroke="none" d="M0 0h24v24H0z" />
+                                                <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
+                                                <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
+                                                <line x1="16" y1="5" x2="19" y2="8" />
+                                            </svg>
+                                    
                                 </button>
                             </div>
                             <p className="text-sm font-normal text-gray-500 truncate dark:text-gray-400">
diff --git a/src/components/Profile/EditUserProfile.tsx b/src/components/Profile/EditUserProfile.tsx
index 6b5d695d6..2c31e0660 100644
--- a/src/components/Profile/EditUserProfile.tsx
+++ b/src/components/Profile/EditUserProfile.tsx
@@ -313,7 +313,7 @@ const EditUserProfile = ({ toggleEditProfile, userProfileInfo, updateProfile}: E
                                 className="hidden"
                                 id="organizationlogo" title=""
                                 onChange={(event): void => handleImageChange(event)} />
-                              {imgError ? <div className="text-red-500">{imgError}</div> : <span className="mt-1 ml-2 text-sm text-gray-500 dark:text-gray-400">{logoImage.fileName || 'No File Chosen'}</span>}
+                              {imgError ? <div className="text-red-500">{imgError}</div> : <span className="mt-1 ml-2 text-sm text-gray-500 dark:text-white">{logoImage.fileName || 'No File Chosen'}</span>}
                             </label>
 
                           </div>
diff --git a/src/components/organization/invitations/Invitations.tsx b/src/components/organization/invitations/Invitations.tsx
index d3e288051..652eb640a 100644
--- a/src/components/organization/invitations/Invitations.tsx
+++ b/src/components/organization/invitations/Invitations.tsx
@@ -157,7 +157,7 @@ const Invitations = () => {
                                                 className="flex flex-wrap justify-between align-center"
                                             >
                                                 <div className="flex min-w-[40%] space-x-4 xl:mb-4 2xl:mb-0">
-                                                    <div>
+                                                    <div className='dark:text-white'>
                                                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" width="60px" height="60px">
                                                             <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                                                         </svg>
@@ -221,12 +221,12 @@ const Invitations = () => {
                                                 </span>
 
 
-                                                <p
-                                                    className="mr-2 flex items-center text-sm font-medium text-gray-500 dark:text-gray-400"
+                                                <p 
+                                                className="mr-2 flex items-center text-sm font-medium text-gray-500 dark:text-gray-400"
                                                 >
-                                                    Invited On: <DateTooltip date={invitation.createDateTime}> {dateConversion(invitation.createDateTime)} </DateTooltip>                                                
-                                                    </p>
-                                                    
+                                                    Invited On: &nbsp;<DateTooltip date={invitation.createDateTime}>{dateConversion(invitation.createDateTime)}</DateTooltip>
+                                                </p>          
+
                                             </div>
                                         </li>
                                     ))