From 2999497f1684c85153f19b0100543593d5b4d021 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Thu, 22 May 2025 07:13:16 +0000
Subject: [PATCH] chore(admin): adjust import user style (#12295)

close AF-2619 AF-2618

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Style**
  - Updated various components to use dynamic theme-based colors and consistent border radius for a more unified look and feel.
  - Adjusted icon size and text styling in the file upload area for improved visual clarity.
  - Applied consistent secondary text color to informational paragraphs.

- **User Interface**
  - Changed the table header label from "Username" to "Name" and removed uppercase styling from all table headers.
  - Updated file upload instructions for clearer guidance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../import-users/csv-format-guidance.tsx      |  2 +-
 .../import-users/file-upload-area.tsx         | 25 +++++++++++++++----
 .../import-users/import-content.tsx           |  5 ++--
 .../accounts/components/user-table.tsx        | 10 ++++----
 4 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/admin/src/modules/accounts/components/import-users/csv-format-guidance.tsx b/packages/frontend/admin/src/modules/accounts/components/import-users/csv-format-guidance.tsx
index 63e620d90..0c29860e0 100644
--- a/packages/frontend/admin/src/modules/accounts/components/import-users/csv-format-guidance.tsx
+++ b/packages/frontend/admin/src/modules/accounts/components/import-users/csv-format-guidance.tsx
@@ -18,7 +18,7 @@ export const CsvFormatGuidance: FC<CsvFormatGuidanceProps> = ({
 }) => {
   return (
     <div
-      className="flex p-1.5 gap-1"
+      className="flex p-1.5 gap-1 rounded-[6px]"
       style={{
         fontSize: cssVar('fontXs'),
         color: cssVarV2('text/secondary'),
diff --git a/packages/frontend/admin/src/modules/accounts/components/import-users/file-upload-area.tsx b/packages/frontend/admin/src/modules/accounts/components/import-users/file-upload-area.tsx
index 39bc87f61..374faad14 100644
--- a/packages/frontend/admin/src/modules/accounts/components/import-users/file-upload-area.tsx
+++ b/packages/frontend/admin/src/modules/accounts/components/import-users/file-upload-area.tsx
@@ -1,5 +1,6 @@
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import { UploadIcon } from '@blocksuite/icons/rc';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import {
   type ChangeEvent,
   type DragEvent,
@@ -85,7 +86,7 @@ export const FileUploadArea = forwardRef<
 
   return (
     <div
-      className={`flex justify-center p-8 border-2 border-dashed rounded-md ${
+      className={`flex justify-center p-8 border-2 border-dashed rounded-[6px] ${
         isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300'
       }`}
       onDragOver={handleDragOver}
@@ -93,16 +94,30 @@ export const FileUploadArea = forwardRef<
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
       onClick={triggerFileInput}
+      style={{
+        borderColor: isDragging
+          ? cssVarV2('button/primary')
+          : cssVarV2('layer/insideBorder/blackBorder'),
+      }}
     >
       <div className="text-center">
-        <UploadIcon fontSize={36} className="mx-auto mb-2 text-gray-400" />
-        <div className="text-sm font-medium">
+        <UploadIcon
+          fontSize={24}
+          className="mx-auto mb-3"
+          style={{
+            color: cssVarV2('selfhost/icon/secondary'),
+          }}
+        />
+        <div
+          className="text-xs font-medium"
+          style={{ color: cssVarV2('text/secondary') }}
+        >
           {isDragging
             ? 'Release mouse to upload file'
-            : 'Click to upload CSV file'}
+            : 'Upload your CSV file or drag it here'}
         </div>
         <p className="mt-1 text-xs text-gray-500">
-          {isDragging ? 'Preparing to upload...' : 'Or drag and drop file here'}
+          {isDragging ? 'Preparing to upload...' : ''}
         </p>
       </div>
       <input
diff --git a/packages/frontend/admin/src/modules/accounts/components/import-users/import-content.tsx b/packages/frontend/admin/src/modules/accounts/components/import-users/import-content.tsx
index 455cf3876..1d8c8f350 100644
--- a/packages/frontend/admin/src/modules/accounts/components/import-users/import-content.tsx
+++ b/packages/frontend/admin/src/modules/accounts/components/import-users/import-content.tsx
@@ -1,3 +1,4 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
 import type { FC, RefObject } from 'react';
 
 import type { ParsedUser } from '../../utils/csv-utils';
@@ -20,7 +21,7 @@ export const ImportPreviewContent: FC<ImportPreviewContentProps> = ({
   return (
     <div className="grid gap-3">
       {!isImported && (
-        <p>
+        <p style={{ color: cssVarV2('text/secondary') }}>
           {parsedUsers.length} users detected from the CSV file. Please confirm
           the user list below and import.
         </p>
@@ -49,7 +50,7 @@ export const ImportInitialContent: FC<ImportInitialContentProps> = ({
 }) => {
   return (
     <div className="grid gap-3">
-      <p>
+      <p style={{ color: cssVarV2('text/secondary') }}>
         You need to import the accounts by importing a CSV file in the correct
         format. Please download the CSV template.
       </p>
diff --git a/packages/frontend/admin/src/modules/accounts/components/user-table.tsx b/packages/frontend/admin/src/modules/accounts/components/user-table.tsx
index fde484c5a..f584d15e8 100644
--- a/packages/frontend/admin/src/modules/accounts/components/user-table.tsx
+++ b/packages/frontend/admin/src/modules/accounts/components/user-table.tsx
@@ -13,16 +13,16 @@ export const UserTable: React.FC<UserTableProps> = ({ users }) => {
       <table className="w-full border-collapse">
         <thead className="bg-white sticky top-0">
           <tr>
-            <th className="py-2 px-4 border-b text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-              Username
+            <th className="py-2 px-4 border-b text-left text-xs font-medium text-gray-500 tracking-wider ">
+              Name
             </th>
-            <th className="py-2 px-4 border-b text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            <th className="py-2 px-4 border-b text-left text-xs font-medium text-gray-500 tracking-wider">
               Email
             </th>
-            <th className="py-2 px-4 border-b text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            <th className="py-2 px-4 border-b text-left text-xs font-medium text-gray-500 tracking-wider">
               Password
             </th>
-            <th className="py-2 px-4 border-b text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            <th className="py-2 px-4 border-b text-left text-xs font-medium text-gray-500 tracking-wider">
               Status
             </th>
           </tr>