Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

User-Centric UI/UX Refinement with Tailwind CSS Integration #50

Merged
merged 2 commits into from
Jul 31, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions src/components/Profile/AddPasskey.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'>
Expand Down
7 changes: 5 additions & 2 deletions src/components/Resources/Schema/Schemas.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 7 additions & 0 deletions src/components/Resources/Schema/ViewSchema.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
9 changes: 6 additions & 3 deletions src/components/organization/CreateOrgFormModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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=""
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/organization/OrgDropDown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ const OrgDropDown = () => {
}
</>

<BiChevronDown size={25} color='white' />
<BiChevronDown size={25} color='primary-700' />
</div>
<div
id="dropdownUsers"
Expand Down
6 changes: 3 additions & 3 deletions src/components/organization/OrganizationsList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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" />
Expand Down
8 changes: 4 additions & 4 deletions src/components/organization/users/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down