refactor: use sira ui to replace some components.

perf: adjust header menu dropdown position.

src/components/Header/index.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Badge, Button, HoverCard, Menu } from '@mantine/core';
+import { ActionIcon, Button, HoverCard, Menu } from '@mantine/core';
 import {
   IconArrowsLeftRight,
   IconBook2,
@@ -100,38 +100,29 @@ export const Header: FC<Props> = ({ client }) => {
         >
           Home
         </Button>
-        <p className={`text-2xl underline font-bold`}>{_.truncate(store.currentInstance?.name, { length: 20 })}</p>
-        <Badge
-          className={`!cursor-pointer hover:border hover:border-brand-4`}
-          onClick={onClickHost}
-          size="xl"
-          radius="lg"
-          variant="dot"
-          color={'green'}
-        >
+        <p className={`text-2xl font-bold`}>{_.truncate(store.currentInstance?.name, { length: 20 })}</p>
+        <span className={`!cursor-pointer hover:underline badge outline lg success`} onClick={onClickHost}>
           Host: {_.truncate(store.currentInstance?.host, { length: 40 })}
-        </Badge>
-        <Badge className={``} size="xl" radius="lg">
-          Database Size: {_.ceil((stats?.databaseSize ?? 0) / 1048576, 2)} MB
-        </Badge>
+        </span>
         <p className={`font-bold `}>Last Updated: {getTimeText(stats?.lastUpdate)}</p>
-        <Badge className={``} size="xl" radius="lg" variant="dot" color={health ? 'green' : 'yellow'}>
+        <span className={`badge outline lg primary`}>
+          Database Size: {_.ceil((stats?.databaseSize ?? 0) / 1048576, 2)} MB
+        </span>
+        <span className={`badge light lg ${health ? 'success' : 'warn'}`}>
           Status: {health ? 'Available' : 'Unknown'}
-        </Badge>
+        </span>
 
         <HoverCard withinPortal shadow="lg" radius={'lg'} transition={'fade'}>
           <HoverCard.Target>
-            <Badge className={``} size="xl" radius="lg">
-              Version: {version?.pkgVersion}
-            </Badge>
+            <span className={`badge light lg primary`}>Version: {version?.pkgVersion}</span>
           </HoverCard.Target>
           <HoverCard.Dropdown>
             Commit Date: {version?.commitDate} <br />
             Commit Sha: {version?.commitSha}
           </HoverCard.Dropdown>
         </HoverCard>
 
-        <Menu withinPortal shadow="xl" width={180} radius={'lg'} transition={'pop'}>
+        <Menu withinPortal position="bottom-end" shadow="xl" width={180} radius={'lg'} transition={'pop'}>
           <Menu.Target>
             <ActionIcon color="primary" size="lg" radius="xl" variant="outline">
               <IconSettings size={26} />

src/pages/index/documents.tsx

@@ -344,7 +344,7 @@ export const Documents = () => {
                     <div className={`ml-auto mt-auto flex gap-x-4 items-center`}>
                       {searchDocumentsQuery.isFetching && <Loader color="gray" size="sm" />}
                       <div className="dropdown info">
-                        <label className={`btn sm solid info`} tabIndex={0}>
+                        <label className={`btn solid info`} tabIndex={0}>
                           Add Documents
                         </label>
                         <div className="menu left-top w-max font-semibold">
@@ -367,7 +367,7 @@ export const Documents = () => {
 
                       <button
                         type={'submit'}
-                        className={`btn sm solid primary bg-gradient-to-br from-[#c84e89] to-[#F15F79]`}
+                        className={`btn solid primary bg-gradient-to-br from-[#c84e89] to-[#F15F79]`}
                       >
                         Search
                       </button>

src/pages/index/layout.tsx

@@ -153,9 +153,7 @@ function IndexesLayout() {
           >
             <p className={`col-span-4 text-xl font-bold`}>{uid}</p>
             <div className={`col-span-4 flex justify-end gap-x-2 items-center`}>
-              <Badge className={`mr-auto`} size="lg" variant="outline">
-                Count: {indexStat?.numberOfDocuments ?? 0}
-              </Badge>
+              <span className={`mr-auto badge outline primary`}>Count: {indexStat?.numberOfDocuments ?? 0}</span>
 
               <Tooltip label="Field Distribution">
                 <ActionIcon

src/pages/key/index.tsx

@@ -1,6 +1,6 @@
 import './index.css';
 import { useCallback, useMemo, useState } from 'react';
-import { ActionIcon, Badge, Button, CopyButton, Modal, MultiSelect, Table, TextInput, Tooltip } from '@mantine/core';
+import { ActionIcon, CopyButton, Modal, MultiSelect, Table, TextInput, Tooltip } from '@mantine/core';
 import { useMeiliClient } from '@/src/hooks/useMeiliClient';
 import { Key } from 'meilisearch';
 import { EmptyArea } from '@/src/components/EmptyArea';
@@ -133,14 +133,18 @@ function Keys() {
           <td>
             <div className={`flex gap-1 flex-wrap`}>
               {t.indexes.map((index) => (
-                <Badge key={index}>{index}</Badge>
+                <span className="badge secondary light" key={index}>
+                  {index}
+                </span>
               ))}
             </div>
           </td>
           <td>
             <div className={`flex gap-1 flex-wrap`}>
               {t.actions.map((action) => (
-                <Badge key={action}>{action}</Badge>
+                <span className="badge secondary light" key={action}>
+                  {action}
+                </span>
               ))}
             </div>
           </td>
@@ -149,9 +153,9 @@ function Keys() {
           <td>{getTimeText(t.expiresAt, { defaultText: 'Forever' })}</td>
           <td>
             <div className={`flex gap-1`}>
-              <Button color={'red'} onClick={() => onClickDelKey(t)}>
+              <button className={'btn sm solid danger'} onClick={() => onClickDelKey(t)}>
                 Delete
-              </Button>
+              </button>
             </div>
           </td>
         </tr>
@@ -240,9 +244,9 @@ function Keys() {
               radius={'lg'}
               onChange={({ target: { value } }) => setFilter((filter) => ({ ...filter, query: value }))}
             ></TextInput>
-            <Button radius={'lg'} onClick={() => onClickCreate()}>
+            <button className={'btn solid info sm'} onClick={() => onClickCreate()}>
               Create
-            </Button>
+            </button>
           </div>
           <div
             className={`flex-1 p-2 w-full overflow-scroll`}
@@ -375,9 +379,9 @@ function Keys() {
                 {...form.getInputProps('expiresAt')}
               />
             </Tooltip>
-            <Button type="submit" radius={'xl'} size={'lg'} variant="light" loading={isCreateLoading}>
+            <button type="submit" className={`${isCreateLoading ? 'is-loading' : ''} btn solid success`}>
               Create this key
-            </Button>
+            </button>
             <Footer />
           </form>
         </Modal>

src/pages/task/index.tsx

@@ -1,14 +1,14 @@
 import './index.css';
 import { useCallback, useMemo, useState } from 'react';
-import { Badge, Code, Modal, Select, TextInput } from '@mantine/core';
+import { Code, Modal, Select, TextInput } from '@mantine/core';
 import { useMeiliClient } from '@/src/hooks/useMeiliClient';
 import { Task, TasksResults } from 'meilisearch';
 import { EmptyArea } from '@/src/components/EmptyArea';
 import { useInfiniteQuery } from 'react-query';
 import Fuse from 'fuse.js';
 import { useAppStore } from '@/src/store';
 import { Header } from '@/src/components/Header';
-import { getTimeText, stringifyJsonPretty, TaskColors } from '@/src/utils/text';
+import { getTimeText, stringifyJsonPretty, TaskThemes } from '@/src/utils/text';
 import _ from 'lodash';
 import { TaskTypes } from 'meilisearch/src/types/types';
 import { useDebounceFn } from 'ahooks';
@@ -92,9 +92,7 @@ function Tasks() {
           >
             <div className={`flex items-center gap-2`}>
               <p className={`text-2xl font-extrabold`}>{`#${uid}`}</p>
-              <Badge color={TaskColors[t.status]} size={'lg'}>
-                {t.status}
-              </Badge>
+              <span className={`badge light ${TaskThemes[t.status]} uppercase `}>{t.status}</span>
               <p className={`ml-auto text-lg`}>{t.type}</p>
             </div>
             <div className={`grid grid-cols-4 gap-2 task-card-options`}>

src/utils/text.ts

@@ -20,6 +20,12 @@ export const TaskColors: Record<TaskStatus, MantineColor> = {
   [TaskStatus.TASK_FAILED]: 'yellow',
   [TaskStatus.TASK_PROCESSING]: 'grape',
 };
+export const TaskThemes: Record<TaskStatus, string> = {
+  [TaskStatus.TASK_SUCCEEDED]: 'success',
+  [TaskStatus.TASK_ENQUEUED]: 'warn',
+  [TaskStatus.TASK_FAILED]: 'danger',
+  [TaskStatus.TASK_PROCESSING]: 'secondary',
+};
 
 export const showTaskSubmitNotification = (task: EnqueuedTask): void => {
   showNotification({

tailwind.config.cjs

@@ -1,25 +1,26 @@
-const theme = require('./src/style/theme.json')
+const theme = require('./src/style/theme.json');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: ['./src/**/*.{html,css,js,jsx,ts,tsx}'],
-    theme: {
-        extend: {
-            colors: theme.colors
-        },
+  content: ['./src/**/*.{html,css,js,jsx,ts,tsx}'],
+  theme: {
+    extend: {
+      colors: theme.colors,
     },
-    plugins: [
-        require("@sira-ui/tailwind")({
-            themes: [
-                {
-                    name: "light",
-                    colorScheme: "light",
-                    colors: {
-                        primary: "#F15F79",
-                        info: "#219bfe",
-                    },
-                },
-            ],
-        }),
-    ],
-}
+  },
+  plugins: [
+    require('@sira-ui/tailwind')({
+      themes: [
+        {
+          name: 'light',
+          colorScheme: 'light',
+          colors: {
+            primary: '#f9377d',
+            secondary: '#21004b',
+            info: '#219bfe',
+          },
+        },
+      ],
+    }),
+  ],
+};