fix(admin): adjust admin panel settings style (#11291)

Adjusted the style of some runtime configurations to match the new parameters.
Adjusted the style of dialog and right sidebar.

close AF-2411 AF-2412 AF-2413 AF-2422

packages/frontend/admin/src/modules/accounts/components/columns.tsx

@@ -4,10 +4,14 @@ import {
   AvatarImage,
 } from '@affine/admin/components/ui/avatar';
 import { FeatureType } from '@affine/graphql';
-import { AccountIcon, LockIcon, UnlockIcon } from '@blocksuite/icons/rc';
+import {
+  AccountIcon,
+  EmailIcon,
+  LockIcon,
+  UnlockIcon,
+} from '@blocksuite/icons/rc';
 import type { ColumnDef } from '@tanstack/react-table';
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { MailIcon } from 'lucide-react';
 import {
   type Dispatch,
   type ReactNode,
@@ -201,19 +205,29 @@ export const useColumns = ({
                       color={cssVarV2('selfhost/icon/tertiary')}
                     />
                   }
-                  IconFalse={<UnlockIcon fontSize={16} />}
+                  IconFalse={
+                    <UnlockIcon
+                      fontSize={16}
+                      color={cssVarV2('toast/iconState/error')}
+                    />
+                  }
                   textTrue="Password Set"
                   textFalse="No Password"
                 />
                 <StatusItem
                   condition={user.emailVerified}
                   IconTrue={
-                    <MailIcon
-                      size={16}
+                    <EmailIcon
+                      fontSize={16}
                       color={cssVarV2('selfhost/icon/tertiary')}
                     />
                   }
-                  IconFalse={<MailIcon size={16} />}
+                  IconFalse={
+                    <EmailIcon
+                      fontSize={16}
+                      color={cssVarV2('toast/iconState/error')}
+                    />
+                  }
                   textTrue="Email Verified"
                   textFalse="Email Not Verified"
                 />

packages/frontend/admin/src/modules/accounts/components/delete-account.tsx

@@ -53,9 +53,9 @@ export const DeleteAccountDialog = ({
           value={input}
           onChange={handleInput}
           placeholder="Please type email to confirm"
-          className="placeholder:opacity-50"
+          className="placeholder:opacity-50 mt-4 h-9"
         />
-        <DialogFooter>
+        <DialogFooter className="mt-6">
           <div className="flex justify-end gap-2 items-center w-full">
             <Button type="button" variant="outline" size="sm" onClick={onClose}>
               Cancel

packages/frontend/admin/src/modules/accounts/components/disable-account.tsx

@@ -53,9 +53,9 @@ export const DisableAccountDialog = ({
           value={input}
           onChange={handleInput}
           placeholder="Please type email to confirm"
-          className="placeholder:opacity-50"
+          className="placeholder:opacity-50 mt-4 h-9"
         />
-        <DialogFooter>
+        <DialogFooter className="mt-6">
           <div className="flex justify-end gap-2 items-center w-full">
             <Button type="button" variant="outline" size="sm" onClick={onClose}>
               Cancel

packages/frontend/admin/src/modules/accounts/components/discard-changes.tsx

@@ -23,12 +23,12 @@ export const DiscardChanges = ({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:w-[460px]">
         <DialogHeader>
-          <DialogTitle className="leading-6.5">Discard Changes</DialogTitle>
+          <DialogTitle>Discard Changes</DialogTitle>
           <DialogDescription className="leading-6 text-[15px]">
             Changes to this user will not be saved.
           </DialogDescription>
         </DialogHeader>
-        <DialogFooter>
+        <DialogFooter className="mt-6">
           <div className="flex justify-end gap-2 items-center w-full">
             <Button type="button" onClick={onClose} variant="outline">
               <span>Cancel</span>

packages/frontend/admin/src/modules/accounts/components/enable-account.tsx

@@ -32,7 +32,7 @@ export const EnableAccountDialog = ({
             used to log in.
           </DialogDescription>
         </DialogHeader>
-        <DialogFooter>
+        <DialogFooter className="mt-6">
           <div className="flex justify-end gap-2 items-center w-full">
             <Button type="button" onClick={onClose} variant="outline">
               <span>Cancel</span>

packages/frontend/admin/src/modules/accounts/components/export-users-dialog.tsx

@@ -105,7 +105,7 @@ export function ExportUsersDialog({
           ))}
         </div>
 
-        <DialogFooter>
+        <DialogFooter className="mt-6">
           <Button
             type="button"
             onClick={handleExport}

packages/frontend/admin/src/modules/accounts/components/reset-password.tsx

@@ -31,7 +31,7 @@ export const ResetPasswordDialog = ({
             complete it.
           </DialogDescription>
         </DialogHeader>
-        <DialogFooter>
+        <DialogFooter className="mt-4">
           <div className="flex justify-end gap-2 items-center w-full">
             <Input
               type="text"

packages/frontend/admin/src/modules/accounts/components/user-form.tsx

@@ -99,13 +99,14 @@ function UserForm({
         handleConfirm={handleConfirm}
         canSave={canSave}
       />
-      <div className="p-4 flex-grow overflow-y-auto space-y-[10px]">
-        <div className="flex flex-col rounded-md border py-4 gap-4">
+      <div className="p-4 flex-grow overflow-y-auto space-y-[8px]">
+        <div className="flex flex-col rounded-md border">
           <InputItem
-            label="Name"
+            label="User name"
             field="name"
             value={changes.name}
             onChange={setField}
+            placeholder="Enter user name"
           />
           <Separator />
           <InputItem
@@ -113,6 +114,7 @@ function UserForm({
             field="email"
             value={changes.email}
             onChange={setField}
+            placeholder="Enter email address"
           />
         </div>
 
@@ -153,8 +155,10 @@ function ToggleItem({
   );
 
   return (
-    <Label className="flex items-center justify-between px-4 py-3">
-      <span>{name}</span>
+    <Label className="flex items-center justify-between p-3 text-[15px] gap-2 font-medium leading-6 overflow-hidden">
+      <span className="overflow-hidden text-ellipsis" title={name}>
+        {name}
+      </span>
       <Switch checked={checked} onCheckedChange={onToggle} />
     </Label>
   );
@@ -165,11 +169,13 @@ function InputItem({
   field,
   value,
   onChange,
+  placeholder,
 }: {
   label: string;
   field: keyof UserInput;
   value?: string;
   onChange: (field: keyof UserInput, value: string) => void;
+  placeholder?: string;
 }) {
   const onValueChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
@@ -179,13 +185,16 @@ function InputItem({
   );
 
   return (
-    <div className="px-5 space-y-3">
-      <Label className="text-sm font-medium">{label}</Label>
+    <div className="p-3">
+      <Label className="text-[15px] leading-6 font-medium mb-1.5">
+        {label}
+      </Label>
       <Input
         type="text"
-        className="py-2 px-3 text-base font-normal"
+        className="py-2 px-3 text-[15px] font-normal h-9"
         value={value}
         onChange={onValueChange}
+        placeholder={placeholder}
       />
     </div>
   );