refactor: migrate related components

apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx

@@ -1,12 +1,14 @@
 import { useEffect, useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
-import { IoTrash } from 'react-icons/io5';
-import { Button, Input, Textarea } from '@chakra-ui/react';
+import { IoAdd, IoTrash } from 'react-icons/io5';
 import { useQueryClient } from '@tanstack/react-query';
 
 import { PROJECT_LIST } from '../../../../common/api/constants';
 import { createProject } from '../../../../common/api/db';
 import { maybeAxiosError } from '../../../../common/api/utils';
+import Button from '../../../../common/components/buttons/Button';
+import Input from '../../../../common/components/input/input/Input';
+import Textarea from '../../../../common/components/input/textarea/Textarea';
 import { preventEscape } from '../../../../common/utils/keyEvent';
 import { documentationUrl } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -86,10 +88,10 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
       <Panel.Title>
         Create new project
         <Panel.InlineElements>
-          <Button onClick={onClose} variant='ontime-ghosted' size='sm' isDisabled={isSubmitting}>
+          <Button onClick={onClose} variant='ghosted' disabled={isSubmitting}>
             Cancel
           </Button>
-          <Button isDisabled={!isValid} type='submit' isLoading={isSubmitting} variant='ontime-filled' size='sm'>
+          <Button disabled={!isValid} type='submit' loading={isSubmitting} variant='primary'>
             Create project
           </Button>
         </Panel.InlineElements>
@@ -98,53 +100,31 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
       <Panel.Section className={style.innerColumn}>
         <label>
           Project title
-          <Input
-            variant='ontime-filled'
-            size='sm'
-            maxLength={50}
-            placeholder='Your project name'
-            autoComplete='off'
-            {...register('title')}
-          />
+          <Input fluid maxLength={50} placeholder='Your project name' {...register('title')} />
         </label>
         <label>
           Project description
-          <Input
-            variant='ontime-filled'
-            size='sm'
-            maxLength={100}
-            placeholder='Euro Love, Malmö 2024'
-            autoComplete='off'
-            {...register('description')}
-          />
+          <Input fluid maxLength={100} placeholder='Euro Love, Malmö 2024' {...register('description')} />
         </label>
         <label>
           Backstage info
           <Textarea
-            variant='ontime-filled'
-            size='sm'
+            fluid
             maxLength={150}
             placeholder='Wi-Fi password: 1234'
-            autoComplete='off'
-            resize='none'
+            resize='vertical'
             {...register('backstageInfo')}
           />
         </label>
         <label>
           Backstage QR code Url
-          <Input
-            variant='ontime-filled'
-            size='sm'
-            placeholder={documentationUrl}
-            autoComplete='off'
-            {...register('backstageUrl')}
-          />
+          <Input fluid placeholder={documentationUrl} {...register('backstageUrl')} />
         </label>
         <Panel.Section>
           <Panel.ListItem>
             <Panel.Field title='Custom data' description='Add custom data for your project' />
-            <Button variant='ontime-subtle' onClick={handleAddCustom}>
-              +
+            <Button onClick={handleAddCustom}>
+              Add <IoAdd />
             </Button>
           </Panel.ListItem>
           {fields.map((field, idx) => (
@@ -152,25 +132,13 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
               <Panel.Paragraph>{idx + 1}.</Panel.Paragraph>
               <label>
                 Title
-                <Input
-                  variant='ontime-filled'
-                  size='sm'
-                  placeholder={field.title}
-                  autoComplete='off'
-                  {...register(`custom.${idx}.title` as const)}
-                />
+                <Input placeholder={field.title} {...register(`custom.${idx}.title` as const)} />
               </label>
               <label>
                 Value
-                <Input
-                  variant='ontime-filled'
-                  size='sm'
-                  placeholder={field.value}
-                  autoComplete='off'
-                  {...register(`custom.${idx}.value` as const)}
-                />
+                <Input placeholder={field.value} autoComplete='off' {...register(`custom.${idx}.value` as const)} />
               </label>
-              <Button variant='ontime-ghosted' onClick={() => remove(idx)}>
+              <Button variant='ghosted' onClick={() => remove(idx)}>
                 <IoTrash />
               </Button>
             </div>