Skip to content

Commit

Permalink
chore: prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@andyv09
andyv09 committed Jan 29, 2024
1 parent 1ae1211 commit cfa0344
Show file tree
Hide file tree
Showing 5 changed files with 58 additions and 55 deletions.
44 changes: 22 additions & 22 deletions packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/credentialPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const AddressDisplay = ({ address }: { address: string }) => {
const t = useTranslations('AddressDisplay');
return (
<div className="flex flex-col space-y-0.5">
<h2 className="pr-2 font-bold text-gray-800 dark:text-navy-blue-200">
<h2 className="dark:text-navy-blue-200 pr-2 font-bold text-gray-800">
{t('title')}:
</h2>
<div className="flex">
Expand All @@ -36,13 +36,13 @@ const AddressDisplay = ({ address }: { address: string }) => {
href={`https://etherscan.io/address/${address}`}
target="_blank"
rel="noopener noreferrer"
className="font-normal text-gray-700 underline cursor-pointer text-md animated-transition dark:text-navy-blue-300 underline-offset-2"
className="text-md animated-transition dark:text-navy-blue-300 cursor-pointer font-normal text-gray-700 underline underline-offset-2"
>
{`${address.slice(0, 8)}...${address.slice(-8)}`}
</a>
</Tooltip>
<button className="pl-1" onClick={() => copyToClipboard(address)}>
<DocumentDuplicateIcon className="w-5 h-5 ml-1 text-gray-700 animated-transition dark:text-navy-blue-300 hover:text-gray-700" />
<DocumentDuplicateIcon className="animated-transition dark:text-navy-blue-300 ml-1 h-5 w-5 text-gray-700 hover:text-gray-700" />
</button>
</div>
</div>
Expand All @@ -51,10 +51,10 @@ const AddressDisplay = ({ address }: { address: string }) => {

const DisplayDate = ({ text, date }: { text: string; date: string }) => (
<div className="flex flex-col items-start space-y-0.5">
<h2 className="pr-2 font-bold text-gray-800 dark:text-navy-blue-200">
<h2 className="dark:text-navy-blue-200 pr-2 font-bold text-gray-800">
{text}:
</h2>
<h3 className="text-gray-700 text-md dark:text-navy-blue-200">
<h3 className="text-md dark:text-navy-blue-200 text-gray-700">
{new Date(Date.parse(date)).toDateString()}
</h3>
</div>
Expand All @@ -77,7 +77,7 @@ const CredentialSubject = ({
return (
<>
<div className="flex flex-col space-y-0.5">
<h2 className="pr-2 font-bold text-gray-800 dark:text-navy-blue-200">
<h2 className="dark:text-navy-blue-200 pr-2 font-bold text-gray-800">
DID:
</h2>
<div className="flex">
Expand All @@ -101,10 +101,10 @@ const CredentialSubject = ({
isObject ? 'items-center' : 'flex-col items-start space-y-0.5'
)}
>
<h2 className="pr-2 font-bold text-gray-800 capitalize dark:text-navy-blue-200">
<h2 className="dark:text-navy-blue-200 pr-2 font-bold capitalize text-gray-800">
{key}:
</h2>
<div className="w-full font-normal text-gray-700 truncate text-md dark:text-navy-blue-300">
<div className="text-md dark:text-navy-blue-300 w-full truncate font-normal text-gray-700">
{isObject ? (
<button
className="dark:border-navy-blue-300 dark:hover:border-navy-blue-400 dark:focus:ring-navy-blue-500 rounded-md border border-gray-300 px-2 py-0.5 text-sm hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
Expand Down Expand Up @@ -148,46 +148,46 @@ const CredentialPanel = ({ credential }: FormatedPanelProps) => {
return (
<>
<div className="flex flex-col space-y-8">
<div className="flex flex-col-reverse px-6 pt-6 items-cetner sm:flex-row">
<div className="items-cetner flex flex-col-reverse px-6 pt-6 sm:flex-row">
<div className="w-full sm:w-11/12">
<h2 className="font-bold text-gray-800 dark:text-navy-blue-200">
<h2 className="dark:text-navy-blue-200 font-bold text-gray-800">
{t('title')}
</h2>
<Tooltip
content={types}
className="border-navy-blue-300 bg-navy-blue-100 text-navy-blue-700"
>
<h1 className="text-lg font-medium text-left text-pink-500 font-ubuntu dark:text-orange-accent-dark sm:text-xl md:text-2xl lg:truncate">
<h1 className="font-ubuntu dark:text-orange-accent-dark text-left text-lg font-medium text-pink-500 sm:text-xl md:text-2xl lg:truncate">
{types}
</h1>
</Tooltip>
</div>
<div className="flex justify-end flex-1 w-full space-x-1">
<div className="flex w-full flex-1 justify-end space-x-1">
<Tooltip
className="border-navy-blue-300 bg-navy-blue-100 text-navy-blue-700"
content={
isValid ? t('credential-valid') : t('credential-invalid')
}
>
{isValid ? (
<CheckCircleIcon className="w-12 h-12 text-pink-500 dark:text-orange-accent-dark" />
<CheckCircleIcon className="dark:text-orange-accent-dark h-12 w-12 text-pink-500" />
) : (
<ExclamationCircleIcon className="w-12 h-12 text-pink-500 dark:text-orange-accent-dark" />
<ExclamationCircleIcon className="dark:text-orange-accent-dark h-12 w-12 text-pink-500" />
)}
</Tooltip>
<div className="flex flex-col items-end">
<h1 className="text-lg font-medium text-left text-pink-500 font-ubuntu dark:text-orange-accent-dark sm:text-xl md:text-2xl lg:truncate">
<h1 className="font-ubuntu dark:text-orange-accent-dark text-left text-lg font-medium text-pink-500 sm:text-xl md:text-2xl lg:truncate">
{t('status')}
</h1>
<h2 className="font-bold text-gray-800 dark:text-navy-blue-200">
<h2 className="dark:text-navy-blue-200 font-bold text-gray-800">
{isValid ? 'Valid' : 'Invalid'}
</h2>
</div>
</div>
</div>
<div className="flex flex-col px-6 space-y-8 md:flex-row md:space-x-16 md:space-y-0">
<div className="flex flex-col space-y-8 px-6 md:flex-row md:space-x-16 md:space-y-0">
<div className="flex w-full flex-col items-start space-y-2 md:max-w-[50%]">
<h1 className="font-medium text-pink-500 text-md dark:text-orange-accent-dark">
<h1 className="text-md dark:text-orange-accent-dark font-medium text-pink-500">
{t('subject')}
</h1>
<CredentialSubject
Expand All @@ -199,11 +199,11 @@ const CredentialPanel = ({ credential }: FormatedPanelProps) => {
<div className="flex flex-1">
<div className="flex flex-col space-y-8">
<div className="flex flex-col items-start justify-center space-y-2 ">
<h1 className="font-medium text-pink-500 text-md dark:text-orange-accent-dark">
<h1 className="text-md dark:text-orange-accent-dark font-medium text-pink-500">
{t('issuer')}
</h1>
<div className="flex flex-col space-y-0.5">
<h2 className="pr-2 font-bold text-gray-800 dark:text-navy-blue-200">
<h2 className="dark:text-navy-blue-200 pr-2 font-bold text-gray-800">
DID:
</h2>
<div className="flex">
Expand All @@ -218,7 +218,7 @@ const CredentialPanel = ({ credential }: FormatedPanelProps) => {
</div>
</div>
<div className="flex flex-col items-start space-y-2">
<h1 className="font-medium text-pink-500 text-md dark:text-orange-accent-dark">
<h1 className="text-md dark:text-orange-accent-dark font-medium text-pink-500">
{t('dates')}
</h1>
<DisplayDate
Expand All @@ -236,7 +236,7 @@ const CredentialPanel = ({ credential }: FormatedPanelProps) => {
</div>
</div>
<div
className="px-6 font-medium text-gray-700 cursor-pointer text-md dark:text-navy-blue-200"
className="text-md dark:text-navy-blue-200 cursor-pointer px-6 font-medium text-gray-700"
onClick={() => {
const params = new URLSearchParams(window.location.search);
params.set('view', 'Json');
Expand Down
28 changes: 14 additions & 14 deletions packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/formatedView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,18 +41,18 @@ export const FormatedView = ({

return (
<>
<div className="w-full h-full bg-white shadow-lg dark:bg-navy-blue-800 rounded-3xl">
<div className="flex flex-col-reverse items-center max-w-full px-10 pt-6 pb-2 space-x-4 dark:from-navy-blue-700 dark:to-navy-blue-700 rounded-t-2xl bg-gradient-to-br from-pink-100 to-orange-100 sm:flex-row">
<div className="dark:bg-navy-blue-800 h-full w-full rounded-3xl bg-white shadow-lg">
<div className="dark:from-navy-blue-700 dark:to-navy-blue-700 flex max-w-full flex-col-reverse items-center space-x-4 rounded-t-2xl bg-gradient-to-br from-pink-100 to-orange-100 px-10 pb-2 pt-6 sm:flex-row">
<div className="flex w-full">
<div className="flex flex-col space-y-4">
<div className="flex flex-col">
<h2 className="font-bold text-gray-800 dark:text-navy-blue-200">
<h2 className="dark:text-navy-blue-200 font-bold text-gray-800">
{t('holder')}
</h2>
<h1 className="text-lg font-medium text-left text-pink-500 font-ubuntu dark:text-orange-accent-dark sm:text-xl md:text-2xl lg:truncate">
<h1 className="font-ubuntu dark:text-orange-accent-dark text-left text-lg font-medium text-pink-500 sm:text-xl md:text-2xl lg:truncate">
{/* {holder.substring(0, 20)}...
{holder.substring(holder.length, holder.length - 10)} */}
<div className="flex items-center mt-2">
<div className="mt-2 flex items-center">
<Tooltip
content={holder}
className="border-navy-blue-300 bg-navy-blue-100 text-navy-blue-700"
Expand All @@ -61,7 +61,7 @@ export const FormatedView = ({
href={`https://dev.uniresolver.io/#${holder}`}
target="_blank"
rel="noreferrer"
className="text-lg font-medium text-left text-pink-500 underline font-ubuntu dark:text-orange-accent-dark sm:text-xl md:text-2xl lg:truncate"
className="font-ubuntu dark:text-orange-accent-dark text-left text-lg font-medium text-pink-500 underline sm:text-xl md:text-2xl lg:truncate"
>{`${holder.substring(
0,
holder.lastIndexOf(':')
Expand All @@ -77,44 +77,44 @@ export const FormatedView = ({
copyToClipboard(holder);
}}
>
<DocumentDuplicateIcon className="w-5 h-5 ml-1 text-pink-500 animated-transition dark:text-orange-accent-dark hover:opacity-80" />
<DocumentDuplicateIcon className="animated-transition dark:text-orange-accent-dark ml-1 h-5 w-5 text-pink-500 hover:opacity-80" />
</button>
</div>
</h1>
</div>
{issuanceDate && (
<div className="flex flex-col">
<h2 className="font-bold text-gray-800 dark:text-navy-blue-200">
<h2 className="dark:text-navy-blue-200 font-bold text-gray-800">
{t('presented')}
</h2>
{new Date(Date.parse(issuanceDate)).toDateString()}
</div>
)}
<div className="flex flex-col">
<h2 className="font-bold text-gray-800 dark:text-navy-blue-200">
<h2 className="dark:text-navy-blue-200 font-bold text-gray-800">
{t('credentials')}
</h2>
</div>
</div>
</div>
<div className="flex justify-end flex-1 w-full space-x-1">
<div className="flex w-full flex-1 justify-end space-x-1">
<Tooltip
content={
isValid ? t('presentation-valid') : t('presentation-invalid')
}
className="border-navy-blue-300 bg-navy-blue-100 text-navy-blue-700"
>
{isValid ? (
<CheckCircleIcon className="w-12 h-12 text-pink-500 dark:text-orange-accent-dark" />
<CheckCircleIcon className="dark:text-orange-accent-dark h-12 w-12 text-pink-500" />
) : (
<ExclamationCircleIcon className="w-12 h-12 text-pink-500 dark:text-orange-accent-dark" />
<ExclamationCircleIcon className="dark:text-orange-accent-dark h-12 w-12 text-pink-500" />
)}
</Tooltip>
<div className="flex flex-col items-end">
<h1 className="text-lg font-medium text-left text-pink-500 font-ubuntu dark:text-orange-accent-dark sm:text-xl md:text-2xl lg:truncate">
<h1 className="font-ubuntu dark:text-orange-accent-dark text-left text-lg font-medium text-pink-500 sm:text-xl md:text-2xl lg:truncate">
{t('credential-status')}
</h1>
<h2 className="font-bold text-gray-800 dark:text-navy-blue-200">
<h2 className="dark:text-navy-blue-200 font-bold text-gray-800">
{isValid ? t('valid') : t('invalid')}
</h2>
</div>
Expand Down
6 changes: 3 additions & 3 deletions packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ export default async function Page({
const view = searchParams.view ?? 'Normal';

return (
<div className="flex items-start justify-center flex-1 w-full">
<div className="flex-1 max-w-full md:max-w-3xl">
<div className="flex w-full flex-1 items-start justify-center">
<div className="max-w-full flex-1 md:max-w-3xl">
{view === 'Normal' && (
<FormatedView
credential={credentials[parseInt(page, 10) - 1]}
Expand All @@ -71,7 +71,7 @@ export default async function Page({
/>
)}
{view === 'Json' && (
<div className="w-full h-full p-6 bg-white shadow-lg dark:bg-navy-blue-800 rounded-3xl">
<div className="dark:bg-navy-blue-800 h-full w-full rounded-3xl bg-white p-6 shadow-lg">
<JsonPanel data={presentation} />
</div>
)}
Expand Down
15 changes: 9 additions & 6 deletions packages/dapp/src/app/api/og/route.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ export async function GET(req: NextRequest) {
} = values;

if (type && type === 'share-presentation') {
// If 1 VC show VC

// If more...
return new ImageResponse(
(
<div
Expand All @@ -44,8 +47,8 @@ export async function GET(req: NextRequest) {
'linear-gradient(0deg, rgba(255,175,138,1) 0%, rgba(255,171,185,1) 100%)',
}}
>
<div tw="flex">
<div tw="flex w-full flex-col p-12 md:flex-row md:items-center">
<div tw="flex justify-center">
<div tw="flex ml-16 w-full flex-col p-12 md:flex-row md:items-center justify-center">
<div
tw="flex flex-3 flex-col p-4 rounded-3xl shadow-md shadow-black/50"
style={{
Expand Down Expand Up @@ -132,9 +135,9 @@ export async function GET(req: NextRequest) {
'linear-gradient(0deg, rgba(255,175,138,1) 0%, rgba(255,171,185,1) 100%)',
}}
>
<div tw="flex">
<div tw="flex w-full flex-col p-12 md:flex-row md:items-center">
<div tw="flex flex-3 flex-col">
<div tw="flex justify-center">
<div tw="flex justify-center w-full flex-col p-12 md:flex-row md:items-center">
<div tw="pl-8 flex flex-3 flex-col">
<h2
tw="text-6xl"
style={{
Expand All @@ -154,7 +157,7 @@ export async function GET(req: NextRequest) {
{description}
</div>
</div>
<div tw="h-[128px] w-[2px] bg-gray-600 mx-8" />
<div tw="h-[256px] w-[2px] bg-gray-600 mx-8" />
<div tw="flex flex-2 flex-col items-center justify-center">
<img
alt="Masca logo"
Expand Down
20 changes: 10 additions & 10 deletions packages/dapp/src/components/ShareCredentialModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,18 +180,18 @@ export const ShareCredentialModal = () => {
onClose={() => setIsOpen(false)}
hideCloseButton={true}
placement="center"
className="py-2 mx-4 main-bg"
className="main-bg mx-4 py-2"
>
<ModalContent>
{() => (
<>
<ModalHeader>
<div className="w-full font-medium leading-6 text-center text-gray-900 text-h3 font-ubuntu dark:text-navy-blue-50">
<div className="text-h3 font-ubuntu dark:text-navy-blue-50 w-full text-center font-medium leading-6 text-gray-900">
{t('title')}
</div>
</ModalHeader>
<ModalBody>
<p className="text-center text-gray-600 text-md dark:text-navy-blue-200">
<p className="text-md dark:text-navy-blue-200 text-center text-gray-600">
{t('description')}
</p>
{supportedDidMethod && supportedCredentials && (
Expand Down Expand Up @@ -220,8 +220,8 @@ export const ShareCredentialModal = () => {
placeholder={t('placeholder')}
/>
</div>
<div className="flex flex-col mt-6 space-y-2">
<h3 className="text-xl text-pink-500 dark:text-orange-accent-dark">
<div className="mt-6 flex flex-col space-y-2">
<h3 className="dark:text-orange-accent-dark text-xl text-pink-500">
{t('selected')}
</h3>
<div className="flex flex-col space-y-2">
Expand Down Expand Up @@ -255,7 +255,7 @@ export const ShareCredentialModal = () => {
{!supportedDidMethod && (
<div className="mt-6">
<div className="flex flex-col space-y-2">
<h3 className="text-xl text-pink-500 dark:text-orange-accent-dark">
<h3 className="dark:text-orange-accent-dark text-xl text-pink-500">
{t('unsupported-method-title')}
</h3>
<div className="flex flex-col space-y-2">
Expand All @@ -267,7 +267,7 @@ export const ShareCredentialModal = () => {
{!supportedCredentials && (
<div className="mt-6">
<div className="flex flex-col space-y-2">
<h3 className="text-xl text-pink-500 dark:text-orange-accent-dark">
<h3 className="dark:text-orange-accent-dark text-xl text-pink-500">
{t('unsupported-credentials-title')}
</h3>
<div className="flex flex-col space-y-2">
Expand All @@ -278,9 +278,9 @@ export const ShareCredentialModal = () => {
)}

{shareLink && (
<div className="mt-4 text-gray-800 dark:text-navy-blue-100">
<div className="dark:text-navy-blue-100 mt-4 text-gray-800">
{t('share-link-description')}
<div className="flex mt-2 gap-x-2">
<div className="mt-2 flex gap-x-2">
<LinkedinShareButton
url={shareLink}
className="flex items-center justify-center gap-x-2"
Expand All @@ -299,7 +299,7 @@ export const ShareCredentialModal = () => {
</div>
)}

<div className="flex items-center justify-end w-full mt-10">
<div className="mt-10 flex w-full items-center justify-end">
<Button
variant="cancel"
size="xs"
Expand Down

0 comments on commit cfa0344

Please sign in to comment.