Skip to content

Commit f5c9df8

Browse files
sujitawsujitaw
authored
Fixed Ui issue for signin page logo responsiveness and link styling (#1074)
* wip Signed-off-by: Sujit <sujit.sutar@ayanworks.com> * feat/added tooltip for schema list card Signed-off-by: Sujit <sujit.sutar@ayanworks.com> * fix/ellipse comments Signed-off-by: Sujit <sujit.sutar@ayanworks.com> --------- Signed-off-by: Sujit <sujit.sutar@ayanworks.com>
1 parent 139d4c4 commit f5c9df8

File tree

9 files changed

+81
-51
lines changed

9 files changed

+81
-51
lines changed

‎nextjs/src/app/globals.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -355,3 +355,14 @@ ul.timelinestatic > li {
355355
.text-avatar-6 {
356356
color: #76ddef;
357357
}
358+
359+
.url-link {
360+
color: initial;
361+
cursor: pointer;
362+
transition: color 0.2s ease;
363+
}
364+
365+
.url-link:hover {
366+
color: #0265fd !important;
367+
text-decoration: underline;
368+
}

‎nextjs/src/features/components/SignUpUser.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,7 @@ export default function SignUpUser(): React.JSX.Element {
6464
<div className="text-muted-foreground mt-4 text-center text-sm">
6565
Already have an account?{' '}
6666
<Link href={signInUrl}>
67-
<span className="text-muted-foreground hover:text-foreground hover:underline">
68-
Sign in
69-
</span>
67+
<span className="url-link hover:underline">Sign in</span>
7068
</Link>
7169
</div>
7270
</div>

‎nextjs/src/features/components/sigin-view.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,21 +33,23 @@ export default function SignInPage(): React.JSX.Element {
3333

3434
return (
3535
<div className="relative flex min-h-screen flex-col bg-[image:var(--card-gradient)]">
36-
<div className="absolute top-8 left-8 z-20">
36+
<div className="absolute top-1 left-0 z-20 md:top-8 md:left-4">
3737
<Image
3838
height={CredeblLogoHeight}
3939
width={CredeblLogoWidth}
4040
alt="Logo"
4141
src={logoImageSrc}
42+
className="mx-0 h-10 w-fit px-2 md:h-auto md:w-50"
4243
/>
4344
</div>
4445

4546
<div className="flex flex-1 items-center justify-center px-4">
4647
<UserAuthForm />
4748
</div>
4849

49-
<footer className="text-muted-foreground mb-4 text-center text-sm">
50-
© 2019 - {new Date().getFullYear()} AYANWORKS | All rights reserved.
50+
<footer className="text-muted-foreground mb-1 text-center text-xs md:mb-4 md:text-sm">
51+
© 2019 - {new Date().getFullYear()} AYANWORKS TECHNOLOGY SOLUTIONS
52+
PRIVATE LIMITED.
5153
</footer>
5254
</div>
5355
)

‎nextjs/src/features/components/user-auth-form.tsx‎

Lines changed: 31 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -280,7 +280,7 @@ export default function SignInViewPage(): React.JSX.Element {
280280
}
281281

282282
return (
283-
<div className="relative flex w-full flex-col items-center justify-center">
283+
<div className="relative mt-4 flex w-full flex-col items-center justify-end md:justify-center">
284284
{alert && (
285285
<div className="w-full max-w-md" role="alert">
286286
<AlertComponent
@@ -303,8 +303,8 @@ export default function SignInViewPage(): React.JSX.Element {
303303
/>
304304
</div>
305305
)}
306-
<div className="bg-card border-border relative z-10 h-full w-full max-w-md overflow-hidden rounded-xl border p-8 shadow-xl transition-transform duration-300">
307-
<div className="mb-6 text-center">
306+
<div className="bg-card border-border relative z-10 h-full w-full max-w-md overflow-hidden rounded-xl border p-4 pt-6 shadow-xl transition-transform duration-300 md:p-8">
307+
<div className="mb-2 text-center md:mb-6">
308308
<p className="text-muted-foreground text-sm">
309309
Sign in to your account to continue
310310
</p>
@@ -314,7 +314,7 @@ export default function SignInViewPage(): React.JSX.Element {
314314
<Button
315315
type="button"
316316
variant="ghost"
317-
className={`flex flex-1 items-center justify-center gap-1 px-4 py-2 hover:text-inherit ${
317+
className={`flex h-8 flex-1 items-center justify-center gap-1 px-4 py-2 text-xs hover:text-inherit md:h-auto md:text-sm ${
318318
isPasswordTab
319319
? 'bg-card text-foreground hover:bg-background'
320320
: 'bg-muted text-muted-foreground hover:bg-transparent'
@@ -327,7 +327,7 @@ export default function SignInViewPage(): React.JSX.Element {
327327
<Button
328328
type="button"
329329
variant="ghost"
330-
className={`flex flex-1 items-center justify-center gap-1 px-4 py-2 hover:text-inherit ${
330+
className={`flex h-8 flex-1 items-center justify-center gap-1 px-4 py-2 text-xs hover:text-inherit md:h-auto md:text-sm not-last:${
331331
!isPasswordTab
332332
? 'bg-card text-foreground hover:bg-background'
333333
: 'bg-muted text-muted-foreground hover:bg-transparent'
@@ -346,7 +346,7 @@ export default function SignInViewPage(): React.JSX.Element {
346346
name="email"
347347
render={({ field }) => (
348348
<FormItem>
349-
<FormLabel className="data-[error=true]:text-foreground">
349+
<FormLabel className="data-[error=true]:text-foreground text-xs md:text-sm">
350350
Email
351351
</FormLabel>
352352
<FormControl>
@@ -356,7 +356,7 @@ export default function SignInViewPage(): React.JSX.Element {
356356
{...field}
357357
type="email"
358358
placeholder="test@example.com"
359-
className="pl-10"
359+
className="pl-10 text-xs md:text-sm"
360360
disabled={loading}
361361
/>
362362
</div>
@@ -372,15 +372,17 @@ export default function SignInViewPage(): React.JSX.Element {
372372
name="password"
373373
render={({ field }) => (
374374
<FormItem>
375-
<FormLabel>Password</FormLabel>
375+
<FormLabel className="text-xs md:text-sm">
376+
Password
377+
</FormLabel>
376378
<FormControl>
377379
<div className="relative">
378380
<LockKeyhole className="text-muted-foreground absolute top-2.5 left-3 h-4 w-4" />
379381
<Input
380382
{...field}
381383
type={showPassword ? 'text' : 'password'}
382384
placeholder="••••••••"
383-
className="pr-10 pl-10"
385+
className="pr-10 pl-10 text-xs md:text-sm"
384386
disabled={loading}
385387
/>
386388
<button
@@ -403,59 +405,64 @@ export default function SignInViewPage(): React.JSX.Element {
403405
)}
404406

405407
{isPasswordTab && (
406-
<div className="text-right text-sm">
408+
<div className="text-right text-xs md:text-sm">
407409
<Button
408410
type="button"
409411
onClick={forgotUserPassword}
410412
variant={'default'}
411-
className="focus-visible:ring-ring text-foreground w-fit bg-transparent px-2 text-left underline-offset-4 shadow-none hover:bg-transparent hover:underline focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
413+
className="focus-visible:ring-ring text-foreground url-link w-fit bg-transparent px-2 text-left text-xs underline-offset-4 shadow-none hover:bg-transparent hover:underline focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none md:text-sm [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
412414
>
413415
Forgot password?
414416
</Button>
415417
</div>
416418
)}
417419

418-
<Button type="submit" disabled={loading} className="w-full">
420+
<Button
421+
type="submit"
422+
disabled={loading}
423+
className="w-full text-xs md:text-sm"
424+
>
419425
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
420426
{isPasswordTab ? 'Sign in' : 'Continue with passkey'}
421427
</Button>
422428

423-
<div className="my-6 flex items-center justify-center gap-4">
429+
<div className="my-2 flex items-center justify-center gap-2 md:my-6 md:gap-4">
424430
<hr className="border-border flex-grow border-t" />
425-
<span className="text-muted-foreground text-sm">OR</span>
431+
<span className="text-muted-foreground text-xs md:text-sm">
432+
OR
433+
</span>
426434
<hr className="border-border flex-grow border-t" />
427435
</div>
428436

429437
<div className="mt-6 flex flex-col gap-3">
430438
<Button
431439
type="button"
432-
className=""
440+
className="text-xs md:text-sm"
433441
onClick={() => route.push('#')}
434442
variant={'outline'}
435443
>
436-
<Icons.google className="mr-2 h-4 w-4" />
444+
<Icons.google className="mr-2 h-2 w-2 md:h-4 md:w-4" />
437445
Sign in with Google
438446
</Button>
439447

440448
<Button
441449
type="button"
442-
className=""
450+
className="text-xs md:text-sm"
443451
onClick={() => route.push('#')}
444452
variant={'outline'}
445453
>
446-
<Icons.gitHub className="mr-2 h-4 w-4" />
447-
<span className="text-sm font-medium">Sign in with GitHub</span>
454+
<Icons.gitHub className="mr-2 h-2 w-2 md:h-4 md:w-4" />
455+
<span className="text-xs font-medium md:text-sm">
456+
Sign in with GitHub
457+
</span>
448458
</Button>
449459
</div>
450460

451-
<div className="mt-4 text-center text-sm">
461+
<div className="mt-4 text-center text-xs md:text-sm">
452462
<span className="text-muted-foreground">
453463
Don’t have an account?{' '}
454464
</span>
455-
<Link
456-
href={signUpUrl}
457-
className="text-muted-foreground hover:text-inherit hover:underline"
458-
>
465+
<Link href={signUpUrl} className="url-link">
459466
Create one
460467
</Link>
461468
</div>

‎nextjs/src/features/connections/components/Connections.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ export default function Connections(): JSX.Element {
151151
return (
152152
<Button
153153
variant="link"
154-
className="text-foreground p-0 text-left"
154+
className="text-foreground url-link p-0 text-left"
155155
onClick={() => openDrawer(connection)}
156156
>
157157
{connection.theirLabel || 'N/A'}

‎nextjs/src/features/dashboard/components/OrganizationCardList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -347,7 +347,7 @@ const OrganizationCardList = (): React.JSX.Element => {
347347
<CardFooter className="mt-auto justify-end pt-2">
348348
<Link
349349
href="/organizations"
350-
className="transition hover:underline hover:opacity-80"
350+
className="url-link transition hover:underline hover:opacity-80"
351351
>
352352
View all
353353
</Link>

‎nextjs/src/features/dashboard/components/SchemasList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -291,7 +291,7 @@ const SchemasList = ({
291291
<CardFooter className="mt-auto justify-end pt-2">
292292
<Link
293293
href="/organizations/schemas"
294-
className="transition hover:underline hover:opacity-80"
294+
className="url-link transition hover:underline hover:opacity-80"
295295
>
296296
View all
297297
</Link>

‎nextjs/src/features/organization/connectionIssuance/components/CredentialTableCells.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const SchemaNameCell = ({
4242
router.push('/organizations/schemas')
4343
}
4444
}}
45-
className="cursor-pointer border-none bg-transparent p-0 text-sm hover:underline"
45+
className="url-link cursor-pointer border-none bg-transparent p-0 text-sm"
4646
>
4747
{schemaName}
4848
</button>

‎nextjs/src/features/schemas/components/SchemaCard.tsx‎

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,17 @@ import {
88
ISchemaData,
99
} from '../type/schemas-interface'
1010
import React, { useState } from 'react'
11+
import {
12+
Tooltip,
13+
TooltipContent,
14+
TooltipProvider,
15+
TooltipTrigger,
16+
} from '@/components/ui/tooltip'
1117
import { usePathname, useRouter } from 'next/navigation'
1218

1319
import { Button } from '@/components/ui/button'
1420
import CopyDid from '@/config/CopyDid'
1521
import CustomCheckbox from '@/components/CustomCheckbox'
16-
import DataTooltip from '@/components/dataTooltip'
1722
import DateTooltip from '@/components/DateTooltip'
1823
import { ShieldCheck } from 'lucide-react'
1924
import { dateConversion } from '@/utils/DateConversion'
@@ -192,22 +197,29 @@ const SchemaCard = (props: ISchemaCardProps): React.JSX.Element => {
192197
</div>
193198

194199
<div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
195-
{props.w3cSchema ? (
196-
<DataTooltip
197-
data={props.attributes}
198-
renderItem={(attribute: IAttributes) => attribute.attributeName}
199-
>
200-
<AttributesList
201-
attributes={props.attributes}
202-
limitedAttributes={props.limitedAttributes}
203-
/>
204-
</DataTooltip>
205-
) : (
206-
<AttributesList
207-
attributes={props.attributes}
208-
limitedAttributes={props.limitedAttributes}
209-
/>
210-
)}
200+
<TooltipProvider>
201+
<Tooltip>
202+
<TooltipTrigger asChild>
203+
<div>
204+
<AttributesList
205+
attributes={props.attributes}
206+
limitedAttributes={props.limitedAttributes}
207+
/>
208+
</div>
209+
</TooltipTrigger>
210+
<TooltipContent
211+
side="bottom"
212+
sideOffset={4}
213+
className="break-words whitespace-normal"
214+
>
215+
<pre className="block font-semibold break-words whitespace-normal">
216+
{props.attributes
217+
.map((val: { attributeName: string }) => val.attributeName)
218+
.join(' , ')}
219+
</pre>
220+
</TooltipContent>
221+
</Tooltip>
222+
</TooltipProvider>
211223

212224
{props.w3cSchema &&
213225
!props.isVerification &&

0 commit comments

Comments
 (0)