fix: update the account page's style, update the Setting Modal translations

web/app/account/account-page/index.tsx

@@ -6,7 +6,6 @@ import { useContext } from 'use-context-selector'
 import s from './index.module.css'
 import Collapse from '@/app/components/header/account-setting/collapse'
 import type { IItem } from '@/app/components/header/account-setting/collapse'
-import classNames from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Confirm from '@/app/components/base/confirm'
 import Button from '@/app/components/base/button'
@@ -141,26 +140,34 @@ export default function AccountPage() {
       </div>
       <div className='mb-8'>
         <div className={titleClassName}>{t('common.account.name')}</div>
-        <div className={classNames('flex items-center justify-between mt-2 w-full h-9 px-3 bg-gray-100 rounded text-sm font-normal text-gray-800 cursor-pointer group')}>
-          <span className='flex-1 mr-2'>
-            {userProfile.name}
-          </span>
-          <div className='items-center h-6 px-2 text-xs font-normal bg-gray-100 rounded flex' onClick={handleEditName}>{t('common.operation.edit')}</div>
+        <div className='flex items-center justify-between gap-2 w-full mt-2'>
+          <div className='flex-1 bg-gray-100 rounded-md p-2 system-sm-regular text-components-input-text-filled '>
+            <span className='pl-1'>{userProfile.name}</span>
+          </div>
+          <div className=' bg-gray-100 rounded-md py-2 px-3 cursor-pointer system-sm-medium text-components-input-text-filled' onClick={handleEditName}>
+            {t('common.operation.edit')}
+          </div>
         </div>
       </div>
       <div className='mb-8'>
         <div className={titleClassName}>{t('common.account.email')}</div>
-        <div className={classNames(inputClassName, 'cursor-pointer')}>{userProfile.email}</div>
-      </div>
-      {IS_CE_EDITION && (
-        <div className='mb-8 flex justify-between'>
-          <div>
-            <div className='mb-1 text-sm font-medium text-gray-900'>{t('common.account.password')}</div>
-            <div className='mb-2 text-xs text-gray-500'>{t('common.account.passwordTip')}</div>
+        <div className='flex items-center justify-between gap-2 w-full mt-2'>
+          <div className='flex-1 bg-gray-100 rounded-md p-2 system-sm-regular text-components-input-text-filled '>
+            <span className='pl-1'>{userProfile.email}</span>
           </div>
-          <Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</Button>
         </div>
-      )}
+      </div>
+      {
+        IS_CE_EDITION && (
+          <div className='mb-8 flex justify-between'>
+            <div>
+              <div className='mb-1 text-sm font-medium text-gray-900'>{t('common.account.password')}</div>
+              <div className='mb-2 text-xs text-gray-500'>{t('common.account.passwordTip')}</div>
+            </div>
+            <Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</Button>
+          </div>
+        )
+      }
       <div className='mb-6 border-[0.5px] border-gray-100' />
       <div className='mb-8'>
         <div className={titleClassName}>{t('common.account.langGeniusAccount')}</div>
@@ -175,117 +182,123 @@ export default function AccountPage() {
         )}
         {!IS_CE_EDITION && <Button className='mt-2 text-[#D92D20]' onClick={() => setShowDeleteAccountModal(true)}>{t('common.account.delete')}</Button>}
       </div>
-      {editNameModalVisible && (
-        <Modal
-          isShow
-          onClose={() => setEditNameModalVisible(false)}
-          className={s.modal}
-        >
-          <div className='mb-6 text-lg font-medium text-gray-900'>{t('common.account.editName')}</div>
-          <div className={titleClassName}>{t('common.account.name')}</div>
-          <input
-            className={inputClassName}
-            value={editName}
-            onChange={e => setEditName(e.target.value)}
-          />
-          <div className='flex justify-end mt-10'>
-            <Button className='mr-2' onClick={() => setEditNameModalVisible(false)}>{t('common.operation.cancel')}</Button>
-            <Button
-              disabled={editing || !editName}
-              variant='primary'
-              onClick={handleSaveName}
-            >
-              {t('common.operation.save')}
-            </Button>
-          </div>
-        </Modal>
-      )}
-      {editPasswordModalVisible && (
-        <Modal
-          isShow
-          onClose={() => {
-            setEditPasswordModalVisible(false)
-            resetPasswordForm()
-          }}
-          className={s.modal}
-        >
-          <div className='mb-6 text-lg font-medium text-gray-900'>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
-          {userProfile.is_password_set && (
-            <>
-              <div className={titleClassName}>{t('common.account.currentPassword')}</div>
-              <input
-                type="password"
-                className={inputClassName}
-                value={currentPassword}
-                onChange={e => setCurrentPassword(e.target.value)}
-              />
-            </>
-          )}
-          <div className='mt-8 text-sm font-medium text-gray-900'>
-            {userProfile.is_password_set ? t('common.account.newPassword') : t('common.account.password')}
-          </div>
-          <input
-            type="password"
-            className={inputClassName}
-            value={password}
-            onChange={e => setPassword(e.target.value)}
-          />
-          <div className='mt-8 text-sm font-medium text-gray-900'>{t('common.account.confirmPassword')}</div>
-          <input
-            type="password"
-            className={inputClassName}
-            value={confirmPassword}
-            onChange={e => setConfirmPassword(e.target.value)}
-          />
-          <div className='flex justify-end mt-10'>
-            <Button className='mr-2' onClick={() => {
+      {
+        editNameModalVisible && (
+          <Modal
+            isShow
+            onClose={() => setEditNameModalVisible(false)}
+            className={s.modal}
+          >
+            <div className='mb-6 text-lg font-medium text-gray-900'>{t('common.account.editName')}</div>
+            <div className={titleClassName}>{t('common.account.name')}</div>
+            <input
+              className={inputClassName}
+              value={editName}
+              onChange={e => setEditName(e.target.value)}
+            />
+            <div className='flex justify-end mt-10'>
+              <Button className='mr-2' onClick={() => setEditNameModalVisible(false)}>{t('common.operation.cancel')}</Button>
+              <Button
+                disabled={editing || !editName}
+                variant='primary'
+                onClick={handleSaveName}
+              >
+                {t('common.operation.save')}
+              </Button>
+            </div>
+          </Modal>
+        )
+      }
+      {
+        editPasswordModalVisible && (
+          <Modal
+            isShow
+            onClose={() => {
               setEditPasswordModalVisible(false)
               resetPasswordForm()
-            }}>{t('common.operation.cancel')}</Button>
-            <Button
-              disabled={editing}
-              variant='primary'
-              onClick={handleSavePassword}
-            >
-              {userProfile.is_password_set ? t('common.operation.reset') : t('common.operation.save')}
-            </Button>
-          </div>
-        </Modal>
-      )}
-      {showDeleteAccountModal && (
-        <Confirm
-          isShow
-          onCancel={() => setShowDeleteAccountModal(false)}
-          onConfirm={() => setShowDeleteAccountModal(false)}
-          showCancel={false}
-          type='warning'
-          title={t('common.account.delete')}
-          content={
-            <>
-              <div className='my-1 text-[#D92D20] text-sm leading-5'>
-                {t('common.account.deleteTip')}
-              </div>
-              <div className='mt-3 text-sm leading-5'>
-                <span>{t('common.account.deleteConfirmTip')}</span>
-                <a
-                  className='text-primary-600 cursor'
-                  href={`mailto:support@dify.ai?subject=Delete Account Request&body=Delete Account: ${userProfile.email}`}
-                  target='_blank'
-                  rel='noreferrer noopener'
-                  onClick={(e) => {
-                    e.preventDefault()
-                    window.location.href = e.currentTarget.href
-                  }}
-                >
-                  support@dify.ai
-                </a>
-              </div>
-              <div className='my-2 px-3 py-2 rounded-lg bg-gray-100 text-sm font-medium leading-5 text-gray-800'>{`${t('common.account.delete')}: ${userProfile.email}`}</div>
-            </>
-          }
-          confirmText={t('common.operation.ok') as string}
-        />
-      )}
+            }}
+            className={s.modal}
+          >
+            <div className='mb-6 text-lg font-medium text-gray-900'>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
+            {userProfile.is_password_set && (
+              <>
+                <div className={titleClassName}>{t('common.account.currentPassword')}</div>
+                <input
+                  type="password"
+                  className={inputClassName}
+                  value={currentPassword}
+                  onChange={e => setCurrentPassword(e.target.value)}
+                />
+              </>
+            )}
+            <div className='mt-8 text-sm font-medium text-gray-900'>
+              {userProfile.is_password_set ? t('common.account.newPassword') : t('common.account.password')}
+            </div>
+            <input
+              type="password"
+              className={inputClassName}
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+            />
+            <div className='mt-8 text-sm font-medium text-gray-900'>{t('common.account.confirmPassword')}</div>
+            <input
+              type="password"
+              className={inputClassName}
+              value={confirmPassword}
+              onChange={e => setConfirmPassword(e.target.value)}
+            />
+            <div className='flex justify-end mt-10'>
+              <Button className='mr-2' onClick={() => {
+                setEditPasswordModalVisible(false)
+                resetPasswordForm()
+              }}>{t('common.operation.cancel')}</Button>
+              <Button
+                disabled={editing}
+                variant='primary'
+                onClick={handleSavePassword}
+              >
+                {userProfile.is_password_set ? t('common.operation.reset') : t('common.operation.save')}
+              </Button>
+            </div>
+          </Modal>
+        )
+      }
+      {
+        showDeleteAccountModal && (
+          <Confirm
+            isShow
+            onCancel={() => setShowDeleteAccountModal(false)}
+            onConfirm={() => setShowDeleteAccountModal(false)}
+            showCancel={false}
+            type='warning'
+            title={t('common.account.delete')}
+            content={
+              <>
+                <div className='my-1 text-[#D92D20] text-sm leading-5'>
+                  {t('common.account.deleteTip')}
+                </div>
+                <div className='mt-3 text-sm leading-5'>
+                  <span>{t('common.account.deleteConfirmTip')}</span>
+                  <a
+                    className='text-primary-600 cursor'
+                    href={`mailto:support@dify.ai?subject=Delete Account Request&body=Delete Account: ${userProfile.email}`}
+                    target='_blank'
+                    rel='noreferrer noopener'
+                    onClick={(e) => {
+                      e.preventDefault()
+                      window.location.href = e.currentTarget.href
+                    }}
+                  >
+                    support@dify.ai
+                  </a>
+                </div>
+                <div className='my-2 px-3 py-2 rounded-lg bg-gray-100 text-sm font-medium leading-5 text-gray-800'>{`${t('common.account.delete')}: ${userProfile.email}`}</div>
+              </>
+            }
+            confirmText={t('common.operation.ok') as string}
+          />
+        )
+      }
     </>
   )
 }

web/app/account/header.tsx

@@ -20,7 +20,7 @@ const Header = () => {
           <LogoSite className='object-contain' />
         </div>
         <div className='w-[1px] h-4 bg-divider-regular' />
-        <p className='text-text-primary text-xl'>{t('common.account.account')}</p>
+        <p className='text-text-primary title-3xl-semi-bold'>{t('common.account.account')}</p>
       </div>
       <div className='flex items-center flex-shrink-0 gap-3'>
         <Button className='gap-2 py-2 px-3 system-sm-medium' onClick={back}>

web/app/components/header/account-setting/index.tsx

@@ -2,8 +2,6 @@
 import { useTranslation } from 'react-i18next'
 import { useEffect, useRef, useState } from 'react'
 import {
-  RiApps2AddFill,
-  RiApps2AddLine,
   RiBox3Fill,
   RiBox3Line,
   RiCloseLine,
@@ -20,7 +18,6 @@ import {
   RiTranslate2,
 } from '@remixicon/react'
 import MembersPage from './members-page'
-import IntegrationsPage from './Integrations-page'
 import LanguagePage from './language-page'
 import ApiBasedExtensionPage from './api-based-extension-page'
 import DataSourcePage from './data-source-page'
@@ -122,12 +119,6 @@ export default function AccountSetting({
       key: 'account-group',
       name: t('common.settings.accountGroup'),
       items: [
-        {
-          key: 'integrations',
-          name: t('common.settings.integrations'),
-          icon: <RiApps2AddLine className={iconClassName} />,
-          activeIcon: <RiApps2AddFill className={iconClassName} />,
-        },
         {
           key: 'language',
           name: t('common.settings.language'),
@@ -210,7 +201,6 @@ export default function AccountSetting({
           <div className='px-4 sm:px-8 pt-2'>
             {activeMenu === 'members' && <MembersPage />}
             {activeMenu === 'billing' && <BillingPage />}
-            {activeMenu === 'integrations' && <IntegrationsPage />}
             {activeMenu === 'language' && <LanguagePage />}
             {activeMenu === 'provider' && <ModelProviderPage />}
             {activeMenu === 'data-source' && <DataSourcePage />}

web/i18n/en-US/common.ts

@@ -140,7 +140,7 @@ const translation = {
     logout: 'Log out',
   },
   settings: {
-    accountGroup: 'ACCOUNT',
+    accountGroup: 'GENERAL',
     workplaceGroup: 'WORKSPACE',
     account: 'My account',
     members: 'Members',

web/i18n/zh-Hans/common.ts

@@ -140,7 +140,7 @@ const translation = {
     logout: '登出',
   },
   settings: {
-    accountGroup: '账户',
+    accountGroup: '通用',
     workplaceGroup: '工作空间',
     members: '成员',
     billing: '账单',
@@ -154,7 +154,7 @@ const translation = {
   account: {
     account: '账户',
     myAccount: '我的账户',
-    studio: 'Dify Studio',
+    studio: 'Dify 工作室',
     avatar: '头像',
     name: '用户名',
     email: '邮箱',