fix: redesign admin ui

packages/frontend/app/components/ApiCredentialsForm.tsx

@@ -1,6 +1,6 @@
 import { Form, useActionData, useNavigation } from '@remix-run/react'
 import { useRef, useState, useEffect } from 'react'
-import { Input, Button } from '~/components/ui'
+import { Button, Text, TextField } from '@radix-ui/themes'
 import { validate as validateUUID } from 'uuid'
 
 interface ApiCredentialsFormProps {
@@ -52,11 +52,11 @@ export const ApiCredentialsForm = ({
     <div className='space-y-4'>
       {showClearCredentials ? (
         <Form method='post' action='/api/set-credentials' className='space-y-4'>
-          <p className='text-green-600'>✓ API credentials configured</p>
+          <p className='text-green-600 mb-4'>✓ API credentials configured</p>
           <input hidden readOnly name='intent' value='clear' />
           <Button
             type='submit'
-            intent='danger'
+            color='red'
             aria-label='Clear API credentials'
             disabled={isSubmitting}
           >
@@ -70,29 +70,55 @@ export const ApiCredentialsForm = ({
           className='space-y-4'
           ref={formRef} // Reference for the credentials form
         >
-          <Input
-            ref={inputRef}
-            required
-            type='text'
-            name='tenantId'
-            label='Tenant ID'
-            defaultValue={defaultTenantId}
-            onChange={handleTenantIdChange}
-            aria-invalid={!!tenantIdError}
-            aria-describedby={tenantIdError ? 'tenantId-error' : undefined}
-          />
+          <div>
+            <Text
+              as='label'
+              htmlFor='tenant-id'
+              size='2'
+              weight='medium'
+              className='block tracking-wide text-gray-700 mb-1'
+            >
+              Tenant ID<Text as='span' color='red'> *</Text>
+            </Text>
+            <TextField.Root
+              id='tenant-id'
+              ref={inputRef}
+              required
+              type='text'
+              name='tenantId'
+              defaultValue={defaultTenantId}
+              onChange={handleTenantIdChange}
+              aria-invalid={!!tenantIdError}
+              aria-describedby={tenantIdError ? 'tenantId-error' : undefined}
+              size='3'
+              className='w-full'
+            />
+          </div>
           {tenantIdError && (
             <p id='tenantId-error' className='text-red-500 text-sm'>
               {tenantIdError}
             </p>
           )}
-          <Input
-            required
-            type='password'
-            name='apiSecret'
-            label='API Secret'
-            defaultValue={defaultApiSecret}
-          />
+          <div>
+            <Text
+              as='label'
+              htmlFor='api-secret'
+              size='2'
+              weight='medium'
+              className='block tracking-wide text-gray-700 mb-1'
+            >
+              API Secret<Text as='span' color='red'> *</Text>
+            </Text>
+            <TextField.Root
+              id='api-secret'
+              required
+              type='password'
+              name='apiSecret'
+              defaultValue={defaultApiSecret}
+              size='3'
+              className='w-full'
+            />
+          </div>
           <input hidden readOnly name='intent' value='save' />
           <div className='flex justify-center'>
             <Button

packages/frontend/app/components/ConfirmationDialog.tsx

@@ -1,13 +1,13 @@
-import { Dialog, Transition } from '@headlessui/react'
-import {
-  forwardRef,
-  Fragment,
-  useImperativeHandle,
-  useRef,
-  useState
-} from 'react'
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
 import { ExclamationTriangle, XIcon } from './icons'
-import { Button, Input } from './ui'
+import {
+  Button,
+  TextField,
+  Dialog,
+  Flex,
+  Text,
+  IconButton
+} from '@radix-ui/themes'
 
 export type ConfirmationDialogRef = {
   display: () => void
@@ -62,101 +62,65 @@ export const ConfirmationDialog = forwardRef<
     useImperativeHandle(ref, () => ({ display }))
 
     return (
-      <>
-        <Transition.Root show={isOpen} as={Fragment}>
-          <Dialog
-            as='div'
-            className='relative z-10'
-            initialFocus={inputRef}
-            onClose={() => cancelHandler()}
-          >
-            <Transition.Child
-              as={Fragment}
-              enter='ease-out duration-300'
-              enterFrom='opacity-0'
-              enterTo='opacity-100'
-              leave='ease-in duration-200'
-              leaveFrom='opacity-100'
-              leaveTo='opacity-0'
-            >
-              <div className='fixed inset-0 bg-tealish/30 bg-opacity-75 transition-opacity' />
-            </Transition.Child>
+      <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
+        <Dialog.Content style={{ maxWidth: 500 }}>
+          <Dialog.Title>
+            <Flex align='center' gap='3'>
+              <Flex
+                align='center'
+                justify='center'
+                className='h-12 w-12 rounded-full bg-red-100'
+              >
+                <ExclamationTriangle
+                  className='text-red-500 h-6 w-6'
+                  aria-hidden='true'
+                />
+              </Flex>
+              <Text size='5' weight='bold'>
+                {title}
+              </Text>
+            </Flex>
+          </Dialog.Title>
 
-            <div className='fixed inset-0 z-10 overflow-y-auto'>
-              <div className='flex min-h-full items-center justify-center p-4 text-center'>
-                <Transition.Child
-                  as={Fragment}
-                  enter='ease-out duration-300'
-                  enterFrom='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
-                  enterTo='opacity-100 translate-y-0 sm:scale-100'
-                  leave='ease-in duration-200'
-                  leaveFrom='opacity-100 translate-y-0 sm:scale-100'
-                  leaveTo='opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
-                >
-                  <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'>
-                    <div className='absolute right-0 top-0 pr-4 pt-4'>
-                      <button
-                        type='button'
-                        className='text-gray-400 hover:text-gray-500 focus:outline-none'
-                        onClick={() => cancelHandler()}
-                      >
-                        <span className='sr-only'>Close</span>
-                        <XIcon className='h-8 w-8' aria-hidden='true' />
-                      </button>
-                    </div>
-                    <div>
-                      <div className='mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
-                        <ExclamationTriangle
-                          className='text-red-500 h-5 w-5'
-                          aria-hidden='true'
-                        />
-                      </div>
-                      <div className='mt-3 text-center'>
-                        <Dialog.Title
-                          as='h3'
-                          className='font-semibold leading-6 text-lg'
-                        >
-                          {title}
-                        </Dialog.Title>
-                        <div className='mt-2'>
-                          <p>
-                            {message
-                              ? message
-                              : `Please note that this action is not reversible.`}
-                          </p>
-                          <p className='font-medium mt-4'>
-                            To confirm, type &quot;
-                            <span className='font-bold'>{keyword}</span>
-                            &quot; below:
-                          </p>
-                          <Input
-                            value={confirmationPrompt}
-                            ref={inputRef}
-                            onChange={(e) =>
-                              setConfirmationPrompt(e.currentTarget.value)
-                            }
-                          />
-                        </div>
-                        <div className='mt-2'>
-                          <Button
-                            aria-label={confirmButtonText ?? 'Confirm'}
-                            intent='danger'
-                            onClick={() => confirmHandler()}
-                            className='w-full'
-                            disabled={!isCorrectPrompt()}
-                          >
-                            {confirmButtonText}
-                          </Button>
-                        </div>
-                      </div>
-                    </div>
-                  </Dialog.Panel>
-                </Transition.Child>
-              </div>
-            </div>
-          </Dialog>
-        </Transition.Root>
-      </>
+          <Dialog.Description size='2' mt='4' mb='4'>
+            {message
+              ? message
+              : 'Please note that this action is not reversible.'}
+          </Dialog.Description>
+
+          <Flex direction='column' gap='3'>
+            <Text size='2' weight='medium'>
+              To confirm, type &quot;
+              <Text weight='bold' as='span'>
+                {keyword}
+              </Text>
+              &quot; below:
+            </Text>
+            <TextField.Root
+              value={confirmationPrompt}
+              ref={inputRef}
+              onChange={(e) => setConfirmationPrompt(e.currentTarget.value)}
+              size='3'
+              placeholder={keyword}
+            />
+          </Flex>
+
+          <Flex gap='3' mt='5' justify='end'>
+            <Dialog.Close>
+              <Button variant='soft' color='gray' onClick={cancelHandler}>
+                Cancel
+              </Button>
+            </Dialog.Close>
+            <Button
+              color='red'
+              onClick={confirmHandler}
+              disabled={!isCorrectPrompt()}
+            >
+              {confirmButtonText}
+            </Button>
+          </Flex>
+        </Dialog.Content>
+      </Dialog.Root>
     )
   }
 )

packages/frontend/app/components/DangerZone.tsx

@@ -7,14 +7,13 @@ type DangerZoneProps = {
 
 export const DangerZone = ({ title, children }: DangerZoneProps) => {
   return (
-    <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'>
-      <div className='mb-4 md:mb-0'>
-        <h2 className='text-red-500 font-semibold text-2xl'>{title}</h2>
+    <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'>
+      {children}
+      <div className='mt-4 md:mt-0 md:ml-4'>
         <p className='text-red-400 font-medium'>
           Please note that this action is not reversible. Continue with caution.
         </p>
       </div>
-      {children}
     </div>
   )
 }

packages/frontend/app/components/Filters.tsx

@@ -19,9 +19,23 @@ export const PopoverFilter = ({
   values
 }: PopoverFilterProps) => {
   return (
-    <Popover className='relative mt-2'>
-      <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'>
-        {label}
+    <Popover className='relative'>
+      <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]'>
+        <span className='truncate'>{label}</span>
+        <svg
+          xmlns='http://www.w3.org/2000/svg'
+          width='14'
+          height='14'
+          viewBox='0 0 20 20'
+          fill='currentColor'
+          aria-hidden='true'
+        >
+          <path
+            fillRule='evenodd'
+            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'
+            clipRule='evenodd'
+          />
+        </svg>
       </Popover.Button>
       <Transition
         as={Fragment}