(fix:upload) UI enhance

arc53 · Nov 11, 2024 · 70f44fc · 70f44fc
1 parent 0039020
commit 70f44fc
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 16 deletions.
diff --git a/frontend/src/assets/file_upload.svg b/frontend/src/assets/file_upload.svg
diff --git a/frontend/src/assets/website_collect.svg b/frontend/src/assets/website_collect.svg
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
@@ -77,12 +77,12 @@
   },
   "modals": {
     "uploadDoc": {
-      "label": "Upload New Documentation",
+      "label": "Upload new document",
       "select": "Choose how to upload your document to DocsGPT",
       "file": "Upload from device",
       "back": "Back",
       "wait": "Please wait ...",
-      "remote": "Collect from a website",
+      "remote": "Collect from website",
       "start": "Start Chatting",
       "name": "Name",
       "choose": "Choose Files",

diff --git a/frontend/src/locale/es.json b/frontend/src/locale/es.json
@@ -77,7 +77,7 @@
   },
   "modals": {
     "uploadDoc": {
-      "label": "Subir Nueva Documentación",
+      "label": "Subir nuevo documento",
       "select": "Elija cómo cargar su documento en DocsGPT",
       "file": "Subir desde el dispositivo",
       "back": "Atrás",

diff --git a/frontend/src/locale/jp.json b/frontend/src/locale/jp.json
@@ -77,7 +77,7 @@
   },
   "modals": {
     "uploadDoc": {
-      "label": "新規書類のアップロード",
+      "label": "新しい文書をアップロードする",
       "select": "ドキュメントを DocsGPT にアップロードする方法を選択します",
       "file": "デバイスからアップロード",
       "back": "戻る",

diff --git a/frontend/src/locale/zh.json b/frontend/src/locale/zh.json
@@ -77,7 +77,7 @@
   },
   "modals": {
     "uploadDoc": {
-      "label": "上传新文档资料",
+      "label": "上传新文档",
       "select": "选择如何将文档上传到 DocsGPT",
       "file": "从设备上传",
       "back": "后退",

diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
@@ -351,32 +351,32 @@ function Upload({
   } else {
     view = (
       <div className="flex flex-col gap-4 w-full">
-        <p className="text-xl text-jet dark:text-bright-gray text-center font-semibold">
+        <p className="text-2xl text-jet dark:text-bright-gray text-center font-semibold">
           {t('modals.uploadDoc.label')}
         </p>
         {!activeTab && (
           <div>
-            <p className="text-gray-6000 dark:text-light-gray text-sm text-center">
+            <p className="text-gray-6000 dark:text-bright-gray text-sm text-center font-medium">
               {t('modals.uploadDoc.select')}
             </p>
             <div className="w-full gap-4 h-full p-4 flex flex-col md:flex-row md:gap-4 justify-center items-center">
               <button
                 onClick={() => setActiveTab('file')}
-                className="rounded-3xl text-md font-medium border flex flex-col items-center justify-center hover:shadow-lg dark:hover:shadow-lg p-8 dark:active:shadow-lg gap-4 bg-white dark:bg-outer-space dark:text-light-gray hover:bg-gray-100 dark:hover:bg-[#767183]/50 hover:text-purple-30 dark:hover:text-gray-30 border-purple-30 dark:border-gray-700 h-40 w-40 md:w-52 md:h-52"
+                className="opacity-85 hover:opacity-100 rounded-3xl text-sm font-medium border flex flex-col items-center justify-center hover:shadow-purple-30/30 hover:shadow-lg p-8 gap-4 bg-white text-[#777777] dark:bg-outer-space dark:text-[#c3c3c3] hover:border-purple-30 border-[#D7D7D7] h-40 w-40 md:w-52 md:h-52"
               >
                 <img
                   src={FileUpload}
-                  className="w-8 h-8 mr-2 dark:filter dark:invert"
+                  className="w-12 h-12 mr-2 dark:filter dark:invert dark:brightness-50"
                 />
                 {t('modals.uploadDoc.file')}
               </button>
               <button
                 onClick={() => setActiveTab('remote')}
-                className="rounded-3xl text-md font-medium border flex flex-col items-center justify-center hover:shadow-lg dark:hover:shadow-lg p-8 dark:active:shadow-lg gap-4 bg-white dark:bg-outer-space dark:text-light-gray hover:bg-gray-100 dark:hover:bg-[#767183]/50 hover:text-purple-30 dark:hover:text-gray-30 border-purple-30 dark:border-gray-700 h-40 w-40 md:w-52 md:h-52"
+                className="opacity-85 hover:opacity-100 rounded-3xl text-sm font-medium border flex flex-col items-center justify-center hover:shadow-purple-30/30 hover:shadow-lg p-8 gap-4 bg-white text-[#777777] dark:bg-outer-space dark:text-[#c3c3c3] hover:border-purple-30 border-[#D7D7D7] h-40 w-40 md:w-52 md:h-52"
               >
                 <img
                   src={WebsiteCollect}
-                  className="w-8 h-8 mr-2 dark:filter dark:invert"
+                  className="w-14 h-14 mr-2 dark:filter dark:invert dark:brightness-50"
                 />
                 {t('modals.uploadDoc.remote')}
               </button>