From 8a14eb5280af0edf38be57f8db4d714bf4fa5f19 Mon Sep 17 00:00:00 2001
From: Girish9960 <girish.patil@ayanworks.com>
Date: Mon, 31 Jul 2023 11:56:27 +0530
Subject: [PATCH] refactor:added icons, alignments, and replace colors

Signed-off-by: Girish9960 <girish.patil@ayanworks.com>
---
 src/components/Profile/AddPasskey.tsx               | 13 +++++++------
 src/components/Resources/Schema/Schemas.tsx         |  7 +++++--
 src/components/Resources/Schema/ViewSchema.tsx      |  7 +++++++
 src/components/organization/CreateOrgFormModal.tsx  |  9 ++++++---
 src/components/organization/OrgDropDown.tsx         |  2 +-
 src/components/organization/OrganizationsList.tsx   |  6 +++---
 .../invitations/ReceivedInvitations.tsx             |  4 ++--
 src/components/organization/users/index.tsx         |  8 ++++----
 8 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/components/Profile/AddPasskey.tsx b/src/components/Profile/AddPasskey.tsx
index 1c7778130..218cdc3cc 100644
--- a/src/components/Profile/AddPasskey.tsx
+++ b/src/components/Profile/AddPasskey.tsx
@@ -181,12 +181,13 @@ const AddPasskey = () => {
               </div>
 
               <div>
-                <button
-                  className="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
-                  onClick={addDevice}
-                >
-                  Add Device
-                </button>
+                
+               <button onClick={addDevice} type="button" className="text-white bg-[#3b5998] hover:bg-[#3b5998]/90 focus:ring-4 focus:outline-none focus:ring-[#3b5998]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-[#3b5998]/55 mr-2 mb-2">
+                <svg className='mr-2 pr-2' xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z"/>
+               </svg>
+               Add Device
+              </button>
                 {
                   (addSuccess || addfailure || fidoError) &&
                   <div className='p-2'>
diff --git a/src/components/Resources/Schema/Schemas.tsx b/src/components/Resources/Schema/Schemas.tsx
index 4aa59c804..d3bd15c92 100644
--- a/src/components/Resources/Schema/Schemas.tsx
+++ b/src/components/Resources/Schema/Schemas.tsx
@@ -92,8 +92,11 @@ const SchemaList = () => {
                 window.location.href = `/organizations/schemas/create?OrgId=${orgId}`
               }}
               className='text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800'
-            >
-              Create Schema
+            ><svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24">
+            <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z"/>
+          </svg>
+          
+              Create 
             </Button>
           </div>
           {loading
diff --git a/src/components/Resources/Schema/ViewSchema.tsx b/src/components/Resources/Schema/ViewSchema.tsx
index 69af002c4..7af9e9bc8 100644
--- a/src/components/Resources/Schema/ViewSchema.tsx
+++ b/src/components/Resources/Schema/ViewSchema.tsx
@@ -262,6 +262,9 @@ const ViewSchemas = () => {
                         color='bg-primary-800'
                         className='text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
                       >
+                         <svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24">
+                            <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z"/>
+                          </svg>
                         Create
                       </Button>
                     </div>
@@ -270,6 +273,10 @@ const ViewSchemas = () => {
                         type="reset"
                         className="text-base font-medium text-center text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:ring-4 focus:ring-blue-300 sm:w-auto dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-700"
                       >
+                        <svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
+  <path fill="#fff" d="M20 10.007a9.964 9.964 0 0 1-2.125 6.164 10.002 10.002 0 0 1-5.486 3.54 10.02 10.02 0 0 1-6.506-.596 9.99 9.99 0 0 1-4.749-4.477A9.958 9.958 0 0 1 3.402 2.525a10.012 10.012 0 0 1 12.331-.678l-.122-.355A1.135 1.135 0 0 1 16.34.057a1.143 1.143 0 0 1 1.439.726l1.11 3.326a1.107 1.107 0 0 1-.155.998 1.11 1.11 0 0 1-.955.465h-3.334a1.112 1.112 0 0 1-1.11-1.108 1.107 1.107 0 0 1 .788-1.043 7.792 7.792 0 0 0-9.475.95 7.746 7.746 0 0 0-1.451 9.39 7.771 7.771 0 0 0 3.73 3.37 7.794 7.794 0 0 0 9.221-2.374 7.75 7.75 0 0 0 1.63-4.75 1.107 1.107 0 0 1 1.112-1.109A1.112 1.112 0 0 1 20 10.007Z"/>
+</svg>
+
                         Reset
                       </Button>
                     </div>
diff --git a/src/components/organization/CreateOrgFormModal.tsx b/src/components/organization/CreateOrgFormModal.tsx
index 04b72b8ee..dda27bd75 100644
--- a/src/components/organization/CreateOrgFormModal.tsx
+++ b/src/components/organization/CreateOrgFormModal.tsx
@@ -235,7 +235,7 @@ const CreateOrgFormModal = (props: { openModal: boolean; setMessage: (message: s
 
                                             <div>
                                                 <label htmlFor="organizationlogo">
-                                                    <div className="px-4 py-2 bg-blue-700 text-white text-center rounded-lg">Choose file</div>
+                                                    <div className="px-4 py-2 bg-primary-700 text-white text-center rounded-lg">Choose file</div>
                                                     <input type="file" accept="image/*" name="file"
                                                         className="hidden"
                                                         id="organizationlogo" title=""
@@ -301,8 +301,11 @@ const CreateOrgFormModal = (props: { openModal: boolean; setMessage: (message: s
                             <Button type="submit"
                                 isProcessing={loading}
 
-                                className='float-right text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800'
-                            >
+                                className='float-right text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-700 dark:hover:bg-primary-700 dark:focus:ring-primary-800'
+                            ><svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24">
+                            <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z"/>
+                          </svg>
+                          
                                 Create
                             </Button>
                         </Form>
diff --git a/src/components/organization/OrgDropDown.tsx b/src/components/organization/OrgDropDown.tsx
index a75431dc9..750af4e98 100644
--- a/src/components/organization/OrgDropDown.tsx
+++ b/src/components/organization/OrgDropDown.tsx
@@ -76,7 +76,7 @@ const OrgDropDown = () => {
 					}
 				</>
 
-				<BiChevronDown size={25} color='white' />
+				<BiChevronDown size={25} color='primary-700' />
 			</div>
 			<div
 				id="dropdownUsers"
diff --git a/src/components/organization/OrganizationsList.tsx b/src/components/organization/OrganizationsList.tsx
index d38bc0fb8..52477922b 100644
--- a/src/components/organization/OrganizationsList.tsx
+++ b/src/components/organization/OrganizationsList.tsx
@@ -116,7 +116,7 @@ const OrganizationsList = () => {
 
   return (
     <div className="px-4 pt-6">
-      <div className="mb-4 col-span-full xl:mb-2">
+      <div className="pl-6 mb-4 col-span-full xl:mb-2">
 
         <BreadCrumbs />
         <h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
@@ -135,7 +135,7 @@ const OrganizationsList = () => {
               onClick={createOrganizationModel}
               className='text-base font-   text-center text-white bg-primary-700 rounded-lg hover:bg-accent-00 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"'
             >
-              <div className='pr-3'>
+               <div className='pr-3'>
               <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24">
   <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z"/>
 </svg>
@@ -191,7 +191,7 @@ const OrganizationsList = () => {
                                       return (
                                         <span
                                           key={index}
-                                          className="m-1 bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300"
+                                          className="m-1 bg-primary-50 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-primary-700"
                                         >
                                           {role.charAt(0).toUpperCase() + role.slice(1)}
                                         </span>
diff --git a/src/components/organization/invitations/ReceivedInvitations.tsx b/src/components/organization/invitations/ReceivedInvitations.tsx
index 8b7230dd7..a23ede801 100644
--- a/src/components/organization/invitations/ReceivedInvitations.tsx
+++ b/src/components/organization/invitations/ReceivedInvitations.tsx
@@ -108,7 +108,7 @@ const ReceivedInvitations = () => {
 
     return (
         <div className="px-4 pt-6">
-            <div className="mb-4 col-span-full xl:mb-2">
+            <div className="pl-6 mb-4 col-span-full xl:mb-2">
 
                 <BreadCrumbs />
                 <h1 className="ml-1 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
@@ -225,7 +225,7 @@ const ReceivedInvitations = () => {
                                                             <Button
                                                                 onClick={() => respondToInvitations(invitation, 'rejected')}
                                                                 color='bg-white'
-                                                                className='m-5 text-base font-medium text-center text-primary-700 bg-white border border-primary-700 rounded-lg focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600  dark:focus:ring-primary-800 dark:bg-gray-800"'
+                                                                className='m-5 text-base font-medium text-center text-gray-00 bg-secondary-700 rounded-lg focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600  dark:focus:ring-primary-800 dark:bg-gray-800"'
                                                             >
                                                                 <svg className="mr-1 h-6 w-6 text-primary-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
diff --git a/src/components/organization/users/index.tsx b/src/components/organization/users/index.tsx
index 4d3f780d6..0849424f1 100644
--- a/src/components/organization/users/index.tsx
+++ b/src/components/organization/users/index.tsx
@@ -19,17 +19,17 @@ const Users = () => {
   
     return (
         <div className="px-4 pt-6">
-            <div className="mb-4 col-span-full xl:mb-2">
+            <div className="pl-6 mb-4 col-span-full xl:mb-2">
                 <BreadCrumbs />             
             </div>
             
 <div className="mb-4 border-b border-gray-200 dark:border-gray-700">
-    <ul className="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
+    <ul className="pl-5 flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
         <li className="mr-2" role="presentation">
-            <button className="inline-block p-4 border-b-2 rounded-t-lg" id="profile-tab" data-tabs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Users</button>
+            <button className="text-xl inline-block p-4 border-b-2 rounded-t-lg " id="profile-tab" data-tabs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="true">Users</button>
         </li>
         <li className="mr-2" role="presentation">
-            <button className="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="dashboard-tab" data-tabs-target="#dashboard" type="button" role="tab" aria-controls="dashboard" aria-selected="false">Invitations</button>
+            <button className="text-xl inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="dashboard-tab" data-tabs-target="#dashboard" type="button" role="tab" aria-controls="dashboard" aria-selected="false">Invitations</button>
         </li>      
     </ul>
 </div>