From eda680ccdc67c7acaaa7711293c0aaa6ed0664c7 Mon Sep 17 00:00:00 2001 From: JimmFly Date: Mon, 31 Mar 2025 10:26:07 +0000 Subject: [PATCH] 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 --- .../admin/src/components/ui/dialog.tsx | 15 ++-- .../admin/src/components/ui/scroll-area.tsx | 2 +- .../modules/accounts/components/columns.tsx | 26 +++++-- .../accounts/components/delete-account.tsx | 4 +- .../accounts/components/disable-account.tsx | 4 +- .../accounts/components/discard-changes.tsx | 4 +- .../accounts/components/enable-account.tsx | 2 +- .../components/export-users-dialog.tsx | 2 +- .../accounts/components/reset-password.tsx | 2 +- .../modules/accounts/components/user-form.tsx | 25 ++++--- .../admin/src/modules/ai/discard-changes.tsx | 2 +- .../src/modules/nav/collapsible-item.tsx | 63 +++++++++++------ .../admin/src/modules/nav/server-version.tsx | 7 +- .../admin/src/modules/nav/settings-item.tsx | 34 +++++++-- .../admin/src/modules/nav/user-dropdown.tsx | 70 +++++++++++++------ .../src/modules/settings/config-input.tsx | 17 +++-- .../src/modules/settings/confirm-changes.tsx | 4 +- .../admin/src/modules/settings/index.tsx | 3 + .../modules/settings/runtime-setting-row.tsx | 4 +- 19 files changed, 202 insertions(+), 88 deletions(-) diff --git a/packages/frontend/admin/src/components/ui/dialog.tsx b/packages/frontend/admin/src/components/ui/dialog.tsx index c60b4f6c37..844bdb19a5 100644 --- a/packages/frontend/admin/src/components/ui/dialog.tsx +++ b/packages/frontend/admin/src/components/ui/dialog.tsx @@ -1,6 +1,7 @@ import { cn } from '@affine/admin/utils'; +import { CloseIcon } from '@blocksuite/icons/rc'; import * as DialogPrimitive from '@radix-ui/react-dialog'; -import { X } from 'lucide-react'; +import { cssVarV2 } from '@toeverything/theme/v2'; import * as React from 'react'; const Dialog = DialogPrimitive.Root; @@ -35,14 +36,14 @@ const DialogContent = React.forwardRef< {children} - - + + Close @@ -56,7 +57,7 @@ const DialogHeader = ({ }: React.HTMLAttributes) => (
(({ className, ...props }, ref) => ( )); diff --git a/packages/frontend/admin/src/components/ui/scroll-area.tsx b/packages/frontend/admin/src/components/ui/scroll-area.tsx index 69ffbe1066..789fa79983 100644 --- a/packages/frontend/admin/src/components/ui/scroll-area.tsx +++ b/packages/frontend/admin/src/components/ui/scroll-area.tsx @@ -11,7 +11,7 @@ const ScrollArea = React.forwardRef< className={cn('relative overflow-hidden', className)} {...props} > - + {children} diff --git a/packages/frontend/admin/src/modules/accounts/components/columns.tsx b/packages/frontend/admin/src/modules/accounts/components/columns.tsx index ae65be0636..99e3432938 100644 --- a/packages/frontend/admin/src/modules/accounts/components/columns.tsx +++ b/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={} + IconFalse={ + + } textTrue="Password Set" textFalse="No Password" /> } - IconFalse={} + IconFalse={ + + } textTrue="Email Verified" textFalse="Email Not Verified" /> diff --git a/packages/frontend/admin/src/modules/accounts/components/delete-account.tsx b/packages/frontend/admin/src/modules/accounts/components/delete-account.tsx index a7506d8f24..cf2c475fd1 100644 --- a/packages/frontend/admin/src/modules/accounts/components/delete-account.tsx +++ b/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" /> - +
- + - {currentUser?.name} + + {currentUser ? ( + + ) : null} + Logout @@ -104,25 +146,13 @@ export function UserDropdown({ isCollapsed }: UserDropdownProps) { - - - - - - -
- {currentUser?.name ?? currentUser?.email.split('@')[0]} - - Admin - -
+ {currentUser ? ( + + ) : null} Logout diff --git a/packages/frontend/admin/src/modules/settings/config-input.tsx b/packages/frontend/admin/src/modules/settings/config-input.tsx index e54144ebc9..956c8ab1c2 100644 --- a/packages/frontend/admin/src/modules/settings/config-input.tsx +++ b/packages/frontend/admin/src/modules/settings/config-input.tsx @@ -2,6 +2,7 @@ import { Input } from '@affine/admin/components/ui/input'; import { Switch } from '@affine/admin/components/ui/switch'; import { useCallback, useState } from 'react'; +import { Textarea } from '../../components/ui/textarea'; import { isEqual } from './utils'; interface ConfigInputProps { @@ -59,7 +60,7 @@ const Inputs: Record< ); }, JSON: function ObjectInput({ defaultValue, onChange }) { - const handleInputChange = (e: React.ChangeEvent) => { + const handleInputChange = (e: React.ChangeEvent) => { try { const value = JSON.parse(e.target.value); onChange(value); @@ -67,10 +68,10 @@ const Inputs: Record< }; return ( - ); }, @@ -98,9 +99,15 @@ export const ConfigInput = ({ const isValueEqual = isEqual(value, defaultValue); return ( -
+
-
+
{modifiedKeys.length > 0 ? ( - 
+          
             
{'{'}

             {modifiedKeys.map(key => (
               

@@ -70,7 +70,7 @@ export const ConfirmChanges = ({
         ) : (
           'There is no change.'
         )}
-        
+