refactor: add title for status page and update UI style for it.

src/client/components/monitor/StatusPage/EditForm.tsx

@@ -1,9 +1,10 @@
-import { Button, Divider, Form, Input, Switch, Typography } from 'antd';
+import { Switch, Divider, Form, Input, Typography } from 'antd';
 import React from 'react';
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { MonitorPicker } from '../MonitorPicker';
 import { urlSlugValidator } from '../../../utils/validator';
 import { useTranslation } from '@i18next-toolkit/react';
+import { Button } from '@/components/ui/button';
+import { LuMinusCircle, LuPlus } from 'react-icons/lu';
 
 const { Text } = Typography;
 
@@ -96,7 +97,7 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
                             </Form.Item>
 
                             <div className="item-center flex">
-                              <div className="flex-1">
+                              <div className="flex flex-1 items-center">
                                 <Form.Item
                                   name={[field.name, 'showCurrent']}
                                   valuePropName="checked"
@@ -110,8 +111,8 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
                                 </span>
                               </div>
 
-                              <MinusCircleOutlined
-                                className="mt-1.5 text-lg"
+                              <LuMinusCircle
+                                className="mt-1.5 cursor-pointer text-lg"
                                 onClick={() => remove(field.name)}
                               />
                             </div>
@@ -121,10 +122,10 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
                     </div>
 
                     <Button
-                      type="dashed"
+                      variant="dashed"
                       onClick={() => add()}
                       style={{ width: '60%' }}
-                      icon={<PlusOutlined />}
+                      Icon={LuPlus}
                     >
                       {t('Add Monitor')}
                     </Button>
@@ -137,12 +138,12 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
           </Form.List>
 
           <div className="flex gap-4">
-            <Button type="primary" htmlType="submit" loading={props.isLoading}>
+            <Button type="submit" loading={props.isLoading}>
               {props.saveButtonLabel ?? t('Save')}
             </Button>
 
             {props.onCancel && (
-              <Button htmlType="button" onClick={props.onCancel}>
+              <Button variant="outline" type="button" onClick={props.onCancel}>
                 {t('Cancel')}
               </Button>
             )}

src/client/components/monitor/StatusPage/index.tsx

@@ -1,4 +1,3 @@
-import { Button } from 'antd';
 import React, { useState } from 'react';
 import { trpc } from '../../../api/trpc';
 import { useAllowEdit } from './useAllowEdit';
@@ -12,6 +11,8 @@ import { ColorSchemeSwitcher } from '../../ColorSchemeSwitcher';
 import { StatusPageServices } from './Services';
 import { useTranslation } from '@i18next-toolkit/react';
 import { Link, useNavigate } from '@tanstack/react-router';
+import { Helmet } from 'react-helmet';
+import { Button } from '@/components/ui/button';
 
 interface MonitorStatusPageProps {
   slug: string;
@@ -72,6 +73,13 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
 
     return (
       <div className="flex h-full w-full">
+        <Helmet>
+          <title>
+            {info?.title}
+            {info?.description && ` | ${info?.description}`}
+          </title>
+        </Helmet>
+
         {editMode && (
           <div className="w-1/3 overflow-auto border-r border-gray-300 px-4 py-8 dark:border-gray-600">
             <MonitorStatusPageEditForm
@@ -97,13 +105,11 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
 
           {allowEdit && !editMode && (
             <div className="mb-4 flex gap-2">
-              <Button type="primary" onClick={() => setEditMode(true)}>
-                {t('Edit')}
-              </Button>
+              <Button onClick={() => setEditMode(true)}>{t('Edit')}</Button>
 
               {showBackBtn && (
                 <Link to="/">
-                  <Button type="default">{t('Back to Admin')}</Button>
+                  <Button variant="outline">{t('Back to Admin')}</Button>
                 </Link>
               )}
             </div>

src/client/components/ui/button.tsx

@@ -21,6 +21,8 @@ const buttonVariants = cva(
           'bg-zinc-100 text-zinc-900 shadow-sm hover:bg-zinc-100/80 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80',
         ghost:
           'hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50',
+        dashed:
+          'border border-zinc-200 bg-white shadow-sm border-dashed hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50',
         link: 'text-zinc-900 underline-offset-4 hover:underline dark:text-zinc-50',
       },
       size: {

src/client/package.json

@@ -71,6 +71,7 @@
     "react-dom": "^18.2.0",
     "react-easy-sort": "^1.5.3",
     "react-grid-layout": "1.4.2",
+    "react-helmet": "^6.1.0",
     "react-hook-form": "^7.51.1",
     "react-icons": "^4.12.0",
     "react-leaflet": "^4.2.1",
@@ -92,9 +93,10 @@
     "@types/leaflet": "^1.9.8",
     "@types/loadable__component": "^5.13.8",
     "@types/lodash-es": "^4.17.12",
-    "@types/react": "^18.2.21",
+    "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "@types/react-grid-layout": "^1.3.5",
+    "@types/react-helmet": "^6.1.11",
     "@types/react-resizable": "^3.0.7",
     "@types/uuid": "^9.0.7",
     "@vitejs/plugin-react": "^4.0.4",