Skip to content

Commit 3217015

Browse files
JonathanMattheymkurapov
JonathanMatthey
and
mkurapov
authored
fix: redesign admin ui (#3793)
* add: Radix Themes * rm old background, add radix themes in container * fix: redesign tenants page * fix: redesign peers page * fix: redesign assets page * fix: redesign wallet addresses page * fix: redesign webhook page * fix: redesign payment page * fix: redesign sidebar * fix: light css background * fix: sidebar style * fix: tenants create page * fix: reorganize pages to have title + action above tables / cards * fix: sidebar bg offwhite * fix: sidebar spacing and title align * fix: redesign filters * fix: improve filters * fix: input form, align titles * fix: clean up create pages * fix : webhook and wallet inputs * fix: update edit pages, similar to create pages * bg diagonal * fix: replace Buttons components/ui with the radix-ui version, clean up all imports * fix: replace input with radix-ui textfield * fix: same for Table * fix: replace Label with Text from Radixui * fix: same with Select and PasswordInput * fix: improve filters * fix: redesign admin welcome homepage * fix: welcome screen spacing * fix: welcome input styling * fix: style improve inputs * fix: form inputs on 1 line * fix: improve entity pages * fix: improve styling * fix: simplify fielderror * fix: style forms * fix: errorpanel * Update packages/frontend/app/routes/wallet-addresses.$walletAddressId.tsx Co-authored-by: Max Kurapov <max@interledger.org> * Update packages/frontend/app/root.tsx Co-authored-by: Max Kurapov <max@interledger.org> * Update packages/frontend/app/routes/wallet-addresses.$walletAddressId.tsx Co-authored-by: Max Kurapov <max@interledger.org> * rm bg background * prettier * prettier * refactor(frontend): replace raw HTML headings with Radix Heading component * refactor(frontend): use Heading for admin card section titles * refactor(frontend) bring back polkadots --------- Co-authored-by: Max Kurapov <max@interledger.org>
1 parent b3d1ee3 commit 3217015

54 files changed

Lines changed: 6182 additions & 3626 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/frontend/app/components/ApiCredentialsForm.tsx‎

Lines changed: 55 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Form, useActionData, useNavigation } from '@remix-run/react'
22
import { useRef, useState, useEffect } from 'react'
3-
import { Input, Button } from '~/components/ui'
3+
import { Button, Text, TextField } from '@radix-ui/themes'
44
import { validate as validateUUID } from 'uuid'
55

66
interface ApiCredentialsFormProps {
@@ -52,11 +52,11 @@ export const ApiCredentialsForm = ({
5252
<div className='space-y-4'>
5353
{showClearCredentials ? (
5454
<Form method='post' action='/api/set-credentials' className='space-y-4'>
55-
<p className='text-green-600'>✓ API credentials configured</p>
55+
<p className='text-green-600 mb-4'>✓ API credentials configured</p>
5656
<input hidden readOnly name='intent' value='clear' />
5757
<Button
5858
type='submit'
59-
intent='danger'
59+
color='red'
6060
aria-label='Clear API credentials'
6161
disabled={isSubmitting}
6262
>
@@ -70,29 +70,63 @@ export const ApiCredentialsForm = ({
7070
className='space-y-4'
7171
ref={formRef} // Reference for the credentials form
7272
>
73-
<Input
74-
ref={inputRef}
75-
required
76-
type='text'
77-
name='tenantId'
78-
label='Tenant ID'
79-
defaultValue={defaultTenantId}
80-
onChange={handleTenantIdChange}
81-
aria-invalid={!!tenantIdError}
82-
aria-describedby={tenantIdError ? 'tenantId-error' : undefined}
83-
/>
73+
<div>
74+
<Text
75+
as='label'
76+
htmlFor='tenant-id'
77+
size='2'
78+
weight='medium'
79+
className='block tracking-wide text-gray-700 mb-1'
80+
>
81+
Tenant ID
82+
<Text as='span' color='red'>
83+
{' '}
84+
*
85+
</Text>
86+
</Text>
87+
<TextField.Root
88+
id='tenant-id'
89+
ref={inputRef}
90+
required
91+
type='text'
92+
name='tenantId'
93+
defaultValue={defaultTenantId}
94+
onChange={handleTenantIdChange}
95+
aria-invalid={!!tenantIdError}
96+
aria-describedby={tenantIdError ? 'tenantId-error' : undefined}
97+
size='3'
98+
className='w-full'
99+
/>
100+
</div>
84101
{tenantIdError && (
85102
<p id='tenantId-error' className='text-red-500 text-sm'>
86103
{tenantIdError}
87104
</p>
88105
)}
89-
<Input
90-
required
91-
type='password'
92-
name='apiSecret'
93-
label='API Secret'
94-
defaultValue={defaultApiSecret}
95-
/>
106+
<div>
107+
<Text
108+
as='label'
109+
htmlFor='api-secret'
110+
size='2'
111+
weight='medium'
112+
className='block tracking-wide text-gray-700 mb-1'
113+
>
114+
API Secret
115+
<Text as='span' color='red'>
116+
{' '}
117+
*
118+
</Text>
119+
</Text>
120+
<TextField.Root
121+
id='api-secret'
122+
required
123+
type='password'
124+
name='apiSecret'
125+
defaultValue={defaultApiSecret}
126+
size='3'
127+
className='w-full'
128+
/>
129+
</div>
96130
<input hidden readOnly name='intent' value='save' />
97131
<div className='flex justify-center'>
98132
<Button

‎packages/frontend/app/components/ConfirmationDialog.tsx‎

Lines changed: 61 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
1-
import { Dialog, Transition } from '@headlessui/react'
2-
import {
3-
forwardRef,
4-
Fragment,
5-
useImperativeHandle,
6-
useRef,
7-
useState
8-
} from 'react'
9-
import { ExclamationTriangle, XIcon } from './icons'
10-
import { Button, Input } from './ui'
1+
import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
2+
import { ExclamationTriangle } from './icons'
3+
import { Button, TextField, Dialog, Flex, Text } from '@radix-ui/themes'
114

125
export type ConfirmationDialogRef = {
136
display: () => void
@@ -62,101 +55,65 @@ export const ConfirmationDialog = forwardRef<
6255
useImperativeHandle(ref, () => ({ display }))
6356

6457
return (
65-
<>
66-
<Transition.Root show={isOpen} as={Fragment}>
67-
<Dialog
68-
as='div'
69-
className='relative z-10'
70-
initialFocus={inputRef}
71-
onClose={() => cancelHandler()}
72-
>
73-
<Transition.Child
74-
as={Fragment}
75-
enter='ease-out duration-300'
76-
enterFrom='opacity-0'
77-
enterTo='opacity-100'
78-
leave='ease-in duration-200'
79-
leaveFrom='opacity-100'
80-
leaveTo='opacity-0'
81-
>
82-
<div className='fixed inset-0 bg-tealish/30 bg-opacity-75 transition-opacity' />
83-
</Transition.Child>
58+
<Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
59+
<Dialog.Content style={{ maxWidth: 500 }}>
60+
<Dialog.Title>
61+
<Flex align='center' gap='3'>
62+
<Flex
63+
align='center'
64+
justify='center'
65+
className='h-12 w-12 rounded-full bg-red-100'
66+
>
67+
<ExclamationTriangle
68+
className='text-red-500 h-6 w-6'
69+
aria-hidden='true'
70+
/>
71+
</Flex>
72+
<Text size='5' weight='bold'>
73+
{title}
74+
</Text>
75+
</Flex>
76+
</Dialog.Title>
77+
78+
<Dialog.Description size='2' mt='4' mb='4'>
79+
{message
80+
? message
81+
: 'Please note that this action is not reversible.'}
82+
</Dialog.Description>
8483

85-
<div className='fixed inset-0 z-10 overflow-y-auto'>
86-
<div className='flex min-h-full items-center justify-center p-4 text-center'>
87-
<Transition.Child
88-
as={Fragment}
89-
enter='ease-out duration-300'
90-
enterFrom='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
91-
enterTo='opacity-100 translate-y-0 sm:scale-100'
92-
leave='ease-in duration-200'
93-
leaveFrom='opacity-100 translate-y-0 sm:scale-100'
94-
leaveTo='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
95-
>
96-
<Dialog.Panel className='relative transform overflow-hidden rounded-lg max-w-full transition-all bg-white px-4 pb-4 pt-5 text-left shadow-xl w-full sm:max-w-lg'>
97-
<div className='absolute right-0 top-0 pr-4 pt-4'>
98-
<button
99-
type='button'
100-
className='text-gray-400 hover:text-gray-500 focus:outline-none'
101-
onClick={() => cancelHandler()}
102-
>
103-
<span className='sr-only'>Close</span>
104-
<XIcon className='h-8 w-8' aria-hidden='true' />
105-
</button>
106-
</div>
107-
<div>
108-
<div className='mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
109-
<ExclamationTriangle
110-
className='text-red-500 h-5 w-5'
111-
aria-hidden='true'
112-
/>
113-
</div>
114-
<div className='mt-3 text-center'>
115-
<Dialog.Title
116-
as='h3'
117-
className='font-semibold leading-6 text-lg'
118-
>
119-
{title}
120-
</Dialog.Title>
121-
<div className='mt-2'>
122-
<p>
123-
{message
124-
? message
125-
: `Please note that this action is not reversible.`}
126-
</p>
127-
<p className='font-medium mt-4'>
128-
To confirm, type &quot;
129-
<span className='font-bold'>{keyword}</span>
130-
&quot; below:
131-
</p>
132-
<Input
133-
value={confirmationPrompt}
134-
ref={inputRef}
135-
onChange={(e) =>
136-
setConfirmationPrompt(e.currentTarget.value)
137-
}
138-
/>
139-
</div>
140-
<div className='mt-2'>
141-
<Button
142-
aria-label={confirmButtonText ?? 'Confirm'}
143-
intent='danger'
144-
onClick={() => confirmHandler()}
145-
className='w-full'
146-
disabled={!isCorrectPrompt()}
147-
>
148-
{confirmButtonText}
149-
</Button>
150-
</div>
151-
</div>
152-
</div>
153-
</Dialog.Panel>
154-
</Transition.Child>
155-
</div>
156-
</div>
157-
</Dialog>
158-
</Transition.Root>
159-
</>
84+
<Flex direction='column' gap='3'>
85+
<Text size='2' weight='medium'>
86+
To confirm, type &quot;
87+
<Text weight='bold' as='span'>
88+
{keyword}
89+
</Text>
90+
&quot; below:
91+
</Text>
92+
<TextField.Root
93+
value={confirmationPrompt}
94+
ref={inputRef}
95+
onChange={(e) => setConfirmationPrompt(e.currentTarget.value)}
96+
size='3'
97+
placeholder={keyword}
98+
/>
99+
</Flex>
100+
101+
<Flex gap='3' mt='5' justify='end'>
102+
<Dialog.Close>
103+
<Button variant='soft' color='gray' onClick={cancelHandler}>
104+
Cancel
105+
</Button>
106+
</Dialog.Close>
107+
<Button
108+
color='red'
109+
onClick={confirmHandler}
110+
disabled={!isCorrectPrompt()}
111+
>
112+
{confirmButtonText}
113+
</Button>
114+
</Flex>
115+
</Dialog.Content>
116+
</Dialog.Root>
160117
)
161118
}
162119
)

‎packages/frontend/app/components/DangerZone.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
import { type ReactNode } from 'react'
22

33
type DangerZoneProps = {
4-
title: string
54
children: ReactNode
65
}
76

8-
export const DangerZone = ({ title, children }: DangerZoneProps) => {
7+
export const DangerZone = ({ children }: DangerZoneProps) => {
98
return (
10-
<div className='flex flex-col items-start md:flex-row md:items-center justify-between p-4 border border-red-500 rounded-md shadow-md my-4'>
11-
<div className='mb-4 md:mb-0'>
12-
<h2 className='text-red-500 font-semibold text-2xl'>{title}</h2>
9+
<div className='flex flex-col items-start md:flex-row md:items-center justify-between p-4 border border-red-500 rounded-md my-4'>
10+
{children}
11+
<div className='mt-4 md:mt-0 md:ml-4'>
1312
<p className='text-red-400 font-medium'>
1413
Please note that this action is not reversible. Continue with caution.
1514
</p>
1615
</div>
17-
{children}
1816
</div>
1917
)
2018
}

‎packages/frontend/app/components/Filters.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,23 @@ export const PopoverFilter = ({
1919
values
2020
}: PopoverFilterProps) => {
2121
return (
22-
<Popover className='relative mt-2'>
23-
<Popover.Button className='relative w-[400px] cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-pearl focus:outline-none focus:ring-2 focus:ring-[#F37F64] sm:text-sm sm:leading-6'>
24-
{label}
22+
<Popover className='relative'>
23+
<Popover.Button className='inline-flex w-[400px] items-center justify-between gap-2 rounded-md border border-pearl bg-white px-3 py-2 text-sm text-tealish shadow-sm focus:outline-none focus:ring-2 focus:ring-[#F37F64]'>
24+
<span className='truncate'>{label}</span>
25+
<svg
26+
xmlns='http://www.w3.org/2000/svg'
27+
width='14'
28+
height='14'
29+
viewBox='0 0 20 20'
30+
fill='currentColor'
31+
aria-hidden='true'
32+
>
33+
<path
34+
fillRule='evenodd'
35+
d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.25a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z'
36+
clipRule='evenodd'
37+
/>
38+
</svg>
2539
</Popover.Button>
2640
<Transition
2741
as={Fragment}

0 commit comments

Comments
 (0)