Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@poolsar42
poolsar42 committed Jun 7, 2023
1 parent abe02bc commit 3cc1739
Showing 1 changed file with 142 additions and 127 deletions.
269 changes: 142 additions & 127 deletions packages/design-system/src/templates/authorization/Authorization.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,7 @@ import {
DropdownSelectListItem,
} from '../../atoms/dropdown/DropdownSelectList'

import {
ChevronDownIcon,
ChevronUpIcon,
} from '@heroicons/react/20/solid'
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/20/solid'

type UserProfile = {
pfpURL: string
Expand Down Expand Up @@ -108,7 +105,7 @@ export default ({
<div
className={
'flex flex-col gap-4 basis-96 m-auto bg-white dark:bg-[#1F2937] p-6\
lg:rounded-${radius} min-h-[100dvh] lg:min-h-[580px] max-h-[100dvh] border border-[#D1D5DB] dark:border-gray-600'
lg:rounded-${radius} min-h-[100dvh] lg:min-h-[580px] max-h-fit border border-[#D1D5DB] dark:border-gray-600'
}
style={{
width: 418,
Expand All @@ -120,7 +117,7 @@ export default ({
src={userProfile.pfpURL}
hex={false}
size={'sm'}
// alt="User Profile"
// alt="User Profile"
/>
<img src={authorizeCheck} alt="Authorize Check" />
<Avatar src={appProfile.iconURL} size={'sm'} />
Expand All @@ -138,7 +135,7 @@ export default ({
style={{ color: '#6B7280' }}
className={'mb-2 font-extralight text-xs'}
>
REQUESTED
APP ASKS FOR
</p>
<ul
style={{ color: '#6B7280' }}
Expand All @@ -151,151 +148,170 @@ export default ({
allItemsSelected,
placeholder,
selectAllCheckboxTitle,
open
open,
}: DropdownListboxButtonType) => {
return <div className={`
return (
<div
className={`
border-b w-full transition-transform flex-row
flex justify-between items-center px-3 bg-white
dark:bg-[#1F2937] dark:border-gray-600 py-2
${open ? "bg-gray-50 shadow-sm rounded-lg" : ""}`}>
<div className='flex flex-row items-center gap-2 '>
<Info
name={scopeMeta.scopes[scope].name}
description={scopeMeta.scopes[scope].description}
/>
${open ? 'bg-gray-50 shadow-sm rounded-lg' : ''}`}
>
<div className="flex flex-row items-center gap-2 ">
<Info
name={scopeMeta.scopes[scope].name}
description={scopeMeta.scopes[scope].description}
/>

<div
data-popover
id={`popover-${scope}`}
role="tooltip"
className="absolute z-10 invisible inline-block
<div
data-popover
id={`popover-${scope}`}
role="tooltip"
className="absolute z-10 invisible inline-block
font-[Inter] rounded-lg text-gray-500
min-w-64 text-sm font-light bg-white
transition-opacity duration-300 border
dark:bg-[#1F2937] border-gray-200
shadow-sm opacity-0 dark:text-gray-400
dark:border-gray-600 dark:bg-gray-800"
>
<div className="px-3 py-2 bg-gray-100
>
<div
className="px-3 py-2 bg-gray-100
border-b border-gray-200 rounded-t-lg
dark:border-gray-600 dark:bg-gray-700">
<h3 className="font-semibold text-gray-900 dark:text-white">
{scope}
</h3>
</div>
<div className="px-3 py-2">
<p className="dark:text-white">
{scopeMeta.scopes[scope].description}
</p>
dark:border-gray-600 dark:bg-gray-700"
>
<h3 className="font-semibold text-gray-900 dark:text-white">
{scope}
</h3>
</div>
<div className="px-3 py-2">
<p className="dark:text-white">
{scopeMeta.scopes[scope].description}
</p>
</div>
</div>
</div>
<ScopeIcon scope={scope} />


<div className='flex flex-col items-start w-max'>
<Text
size="sm"
weight="medium"
className="flex-1 text-gray-500"
>
{scopeMeta.scopes[scope].name}
</Text>
{!selectedItem && !selectedItems.length && !allItemsSelected && (
<Text size="sm" className={`
${scopeMeta.scopes[scope].name === "Smart contract wallets"
? "" : "text-orange-500"}
dark:text-white truncate text-ellipsis
`}>
{placeholder}
</Text>
)}

{selectedItem?.title?.length && (
<Text size="sm" className="text-gray-500 dark:text-white truncate text-ellipsis">
{selectedItem.title}
</Text>
)}

{selectedItems.length > 1 && !allItemsSelected && (
<Text size="sm" className="text-gray-500 dark:text-white truncate text-ellipsis">
{selectedItems.length} items selected
</Text>
)}

{selectedItems.length === 1 && !allItemsSelected && (
<Text size="sm" className="text-gray-500 dark:text-white truncate text-ellipsis">
{selectedItems[0].title} selected
</Text>
)}
<ScopeIcon scope={scope} />

{allItemsSelected && (
<Text size="sm" className="text-gray-500 dark:text-white truncate text-ellipsis">
{selectAllCheckboxTitle}
<div className="flex flex-col items-start w-max">
<Text
size="sm"
weight="medium"
className="flex-1 text-gray-500"
>
{scopeMeta.scopes[scope].name}
</Text>
)}
{!selectedItem &&
!selectedItems.length &&
!allItemsSelected && (
<Text
size="sm"
className={`
${
scopeMeta.scopes[scope].name ===
'Smart contract wallets'
? ''
: 'text-orange-500'
}
dark:text-white truncate text-ellipsis
`}
>
{placeholder}
</Text>
)}

{selectedItem?.title?.length && (
<Text
size="sm"
className="text-gray-500 dark:text-white truncate text-ellipsis"
>
{selectedItem.title}
</Text>
)}

{selectedItems.length > 1 && !allItemsSelected && (
<Text
size="sm"
className="text-gray-500 dark:text-white truncate text-ellipsis"
>
{selectedItems.length} items selected
</Text>
)}

{selectedItems.length === 1 && !allItemsSelected && (
<Text
size="sm"
className="text-gray-500 dark:text-white truncate text-ellipsis"
>
{selectedItems[0].title} selected
</Text>
)}

{allItemsSelected && (
<Text
size="sm"
className="text-gray-500 dark:text-white truncate text-ellipsis"
>
{selectAllCheckboxTitle}
</Text>
)}
</div>
</div>
</div>

{open ? (
<ChevronUpIcon className="w-5 h-5 shrink-0 text-indigo-500" />
) : (
<ChevronDownIcon className="w-5 h-5 shrink-0" />
)}
</div>
{open ? (
<ChevronUpIcon className="w-5 h-5 shrink-0 text-indigo-500" />
) : (
<ChevronDownIcon className="w-5 h-5 shrink-0" />
)}
</div>
)
}

return (
<li
key={i}
className={'flex flex-row items-center w-full'}
>
{(scope === 'profile' ||
scope === 'system_identifiers') && (

<div
className='w-full transition-transform flex flex-row
<li key={i} className={'flex flex-row items-center w-full'}>
{(scope === 'profile' || scope === 'system_identifiers') && (
<div
className="w-full transition-transform flex flex-row
justify-between items-center px-3 bg-white
dark:bg-[#1F2937] dark:border-gray-600 gap-2 py-2 border-b'>

<Info
name={scopeMeta.scopes[scope].name}
description={scopeMeta.scopes[scope].description}
/>
dark:bg-[#1F2937] dark:border-gray-600 gap-2 py-2 border-b"
>
<Info
name={scopeMeta.scopes[scope].name}
description={scopeMeta.scopes[scope].description}
/>

<div
data-popover
id={`popover-${scope}`}
role="tooltip"
className="absolute z-10 invisible inline-block
<div
data-popover
id={`popover-${scope}`}
role="tooltip"
className="absolute z-10 invisible inline-block
font-[Inter]
min-w-64 text-sm font-light text-gray-500 transition-opacity duration-300 bg-white dark:bg-[#1F2937] border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800"
>
<div className="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
<h3 className="font-semibold text-gray-900 dark:text-white">
{scope}
</h3>
</div>
<div className="px-3 py-2">
<p className="dark:text-white">
{scopeMeta.scopes[scope].description}
</p>
</div>
<div data-popper-arrow></div>
>
<div className="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
<h3 className="font-semibold text-gray-900 dark:text-white">
{scope}
</h3>
</div>
<div className="px-3 py-2">
<p className="dark:text-white">
{scopeMeta.scopes[scope].description}
</p>
</div>
<div data-popper-arrow></div>
</div>

<ScopeIcon scope={scope} />

<ScopeIcon scope={scope} />


<Text
size="sm"
weight="medium"
className="flex-1 text-gray-500">
{scopeMeta.scopes[scope].name}
</Text>
</div>
)
}
<Text
size="sm"
weight="medium"
className="flex-1 text-gray-500"
>
{scopeMeta.scopes[scope].name}
</Text>
</div>
)}

{scope === 'erc_4337' && (
<div className="flex-1 min-w-0">
Expand Down Expand Up @@ -353,7 +369,6 @@ export default ({
/>
</div>
)}

</li>
)
})}
Expand Down Expand Up @@ -424,6 +439,6 @@ export default ({
</div>
</div>
</div>
</div >
</div>
)
}

0 comments on commit 3cc1739

Please sign in to comment.