From fb2afa7eda0e1944f0598351b2bb44a196279c2a Mon Sep 17 00:00:00 2001
From: speakeloudest <speakeloudest@gmail.com>
Date: Sun, 17 Aug 2025 07:11:03 -0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E6=96=87=E6=A1=88?=
 =?UTF-8?q?=E5=A4=A7=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(user)/profile/change-password.tsx        | 25 +++--
 .../(user)/profile/notify-settings.tsx        | 97 ++++++++++---------
 .../(user)/profile/third-party-accounts.tsx   | 16 ++-
 apps/user/assets/svg-icon/email.svg           | 10 ++
 4 files changed, 82 insertions(+), 66 deletions(-)
 create mode 100644 apps/user/assets/svg-icon/email.svg

diff --git a/apps/user/app/(main)/(content)/(user)/profile/change-password.tsx b/apps/user/app/(main)/(content)/(user)/profile/change-password.tsx
index 305c5b9..66d078b 100644
--- a/apps/user/app/(main)/(content)/(user)/profile/change-password.tsx
+++ b/apps/user/app/(main)/(content)/(user)/profile/change-password.tsx
@@ -42,8 +42,8 @@ export default function ChangePassword() {
 
   return (
     <Card className='min-w-80 rounded-[20px] border border-[#D9D9D9] p-4 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] sm:p-6'>
-      <div className={'mb-3'}>
-        <div className={'flex items-center justify-between font-bold sm:text-xl'}>
+      <div className={'mb-3 sm:mb-5'}>
+        <div className={'ml-1 flex items-center justify-between font-bold sm:mb-2 sm:text-xl'}>
           {t('accountSettings')}
           <Button
             type='submit'
@@ -56,10 +56,14 @@ export default function ChangePassword() {
             {t('save')}
           </Button>
         </div>
-        <div className={'text-xs font-light sm:text-[15px]'}>{t('description')}</div>
+        <div className={'ml-1 text-xs font-light sm:mt-1 sm:text-sm'}>{t('description')}</div>
       </div>
       <Form {...form}>
-        <form id='password-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
+        <form
+          id='password-form'
+          onSubmit={form.handleSubmit(onSubmit)}
+          className='space-y-2.5 sm:space-y-5'
+        >
           <FormField
             control={form.control}
             name='password'
@@ -68,7 +72,7 @@ export default function ChangePassword() {
                 <FormControl>
                   <Input
                     className={
-                      'h-[60px] rounded-[20px] text-base shadow-[inset_0_0_7.6px_0_#00000040] sm:text-xl md:text-xl'
+                      'line-clamp-1 h-[46px] flex-1 rounded-full px-5 text-base !leading-[46px] shadow-[inset_0_0_7.6px_0_#00000040]'
                     }
                     type='password'
                     placeholder={t('newPassword')}
@@ -87,7 +91,7 @@ export default function ChangePassword() {
                 <FormControl>
                   <Input
                     className={
-                      'h-[60px] rounded-[20px] text-base shadow-[inset_0_0_7.6px_0_#00000040] sm:text-xl md:text-xl'
+                      'line-clamp-1 h-[46px] flex-1 rounded-full px-5 text-base !leading-[46px] shadow-[inset_0_0_7.6px_0_#00000040]'
                     }
                     type='password'
                     placeholder={t('repeatNewPassword')}
@@ -100,13 +104,8 @@ export default function ChangePassword() {
           />
         </form>
       </Form>
-      <div className={'mt-8 hidden justify-center sm:flex'}>
-        <AiroButton
-          type='submit'
-          variant={'default'}
-          form='password-form'
-          className={'h-full rounded-[50px] px-[55px] py-[9px] text-xl'}
-        >
+      <div className={'mt-5 hidden justify-center sm:flex'}>
+        <AiroButton type='submit' variant={'default'} form='password-form'>
           {t('save')}
         </AiroButton>
       </div>
diff --git a/apps/user/app/(main)/(content)/(user)/profile/notify-settings.tsx b/apps/user/app/(main)/(content)/(user)/profile/notify-settings.tsx
index 4eebfb9..dd43813 100644
--- a/apps/user/app/(main)/(content)/(user)/profile/notify-settings.tsx
+++ b/apps/user/app/(main)/(content)/(user)/profile/notify-settings.tsx
@@ -60,13 +60,13 @@ export default function NotifySettings() {
 
   return (
     <Card className='flex h-full flex-col justify-between rounded-[20px] border border-[#D9D9D9] p-4 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] sm:p-6'>
-      <div className={'mb-3'}>
-        <div className={'flex items-center justify-between font-bold sm:text-xl'}>
+      <div className={'mb-3 sm:mb-0'}>
+        <div className={'ml-1 flex items-center justify-between font-bold sm:mb-2 sm:text-xl'}>
           {t('notify.notificationSettings')}
           <Button
             type='submit'
             size='sm'
-            form='notify-form'
+            form='password-form'
             className={
               'h-[32px] w-[110px] rounded-[50px] border-0 border-[#0F2C53] bg-[#0F2C53] text-center text-base font-medium leading-[32px] text-white transition hover:bg-[#225BA9] hover:text-white sm:hidden'
             }
@@ -74,53 +74,54 @@ export default function NotifySettings() {
             {t('notify.save')}
           </Button>
         </div>
-        <div className={'text-xs font-light sm:text-[15px]'}>{t('notify.description')}</div>
+        <div className={'ml-1 text-xs font-light sm:mt-1 sm:text-sm'}>
+          {' '}
+          {t('notify.description')}
+        </div>
+      </div>
+      <div className={'flex flex-1 flex-col justify-end'}>
+        <Form {...form}>
+          <form
+            id='notify-form'
+            onSubmit={form.handleSubmit(onSubmit)}
+            className='space-y-2 sm:space-y-2.5'
+          >
+            <div className='grid grid-cols-2 gap-2.5 sm:grid-cols-1'>
+              {[
+                { name: 'enable_balance_notify', label: 'balanceChange' },
+                { name: 'enable_login_notify', label: 'login' },
+                { name: 'enable_subscribe_notify', label: 'subscribe' },
+                { name: 'enable_trade_notify', label: 'finance' },
+              ].map(({ name, label }) => (
+                <FormField
+                  key={name}
+                  control={form.control}
+                  name={name as any}
+                  render={({ field }) => (
+                    <FormItem className='flex flex-col items-center justify-center rounded-[20px] bg-[#EAEAEA] py-2.5'>
+                      <FormLabel className='text-muted-foreground text-sm text-[#848484]'>
+                        {t(`notify.${label}`)}
+                      </FormLabel>
+                      <FormControl>
+                        <Switch
+                          className={
+                            'data-[state=checked]:border-[#87ACC8] data-[state=unchecked]:border-[#B1B2BC] data-[state-unchecked]:bg-[#D9D9D9] data-[state=checked]:bg-[#A8D4ED]'
+                          }
+                          thumbClassName={'border-[#D9D9D9] border'}
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              ))}
+            </div>
+          </form>
+        </Form>
       </div>
-      <Form {...form}>
-        <form
-          id='notify-form'
-          onSubmit={form.handleSubmit(onSubmit)}
-          className='space-y-2 sm:space-y-4'
-        >
-          <div className='grid grid-cols-2 gap-2.5 sm:grid-cols-1 sm:gap-4'>
-            {[
-              { name: 'enable_balance_notify', label: 'balanceChange' },
-              { name: 'enable_login_notify', label: 'login' },
-              { name: 'enable_subscribe_notify', label: 'subscribe' },
-              { name: 'enable_trade_notify', label: 'finance' },
-            ].map(({ name, label }) => (
-              <FormField
-                key={name}
-                control={form.control}
-                name={name as any}
-                render={({ field }) => (
-                  <FormItem className='flex flex-col items-center justify-center rounded-[20px] bg-[#EAEAEA] py-2.5'>
-                    <FormLabel className='text-muted-foreground text-sm text-[#848484]'>
-                      {t(`notify.${label}`)}
-                    </FormLabel>
-                    <FormControl>
-                      <Switch
-                        className={
-                          'data-[state=checked]:border-[#87ACC8] data-[state=unchecked]:border-[#B1B2BC] data-[state-unchecked]:bg-[#D9D9D9] data-[state=checked]:bg-[#A8D4ED]'
-                        }
-                        thumbClassName={'border-[#D9D9D9] border'}
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                      />
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
-            ))}
-          </div>
-        </form>
-      </Form>
       <div className={'mt-8 hidden justify-center sm:flex'}>
-        <AiroButton
-          type='submit'
-          form='notify-form'
-          className={'h-full px-[55px] py-[9px] text-xl'}
-        >
+        <AiroButton type='submit' form='notify-form'>
           {t('notify.save')}
         </AiroButton>
       </div>
diff --git a/apps/user/app/(main)/(content)/(user)/profile/third-party-accounts.tsx b/apps/user/app/(main)/(content)/(user)/profile/third-party-accounts.tsx
index 429ecd0..8dd999e 100644
--- a/apps/user/app/(main)/(content)/(user)/profile/third-party-accounts.tsx
+++ b/apps/user/app/(main)/(content)/(user)/profile/third-party-accounts.tsx
@@ -6,6 +6,9 @@ import { bindOAuth, unbindOAuth, updateBindEmail, updateBindMobile } from '@/ser
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Button } from '@workspace/airo-ui/components/button';
 import { Card } from '@workspace/airo-ui/components/card';
+
+import SvgIcon from '@/components/SvgIcon';
+
 import {
   Dialog,
   DialogContent,
@@ -245,7 +248,7 @@ export default function ThirdPartyAccounts() {
         }
       >
         <div className={'flex items-center justify-between text-base font-bold sm:text-xl'}>
-          <span>{t('title')}</span>
+          <span className={'ml-1'}>{t('title')}</span>
           <div
             className={
               'h-[32px] w-[110px] rounded-full bg-[#D9D9D9] text-center font-medium leading-[32px] text-white sm:hidden'
@@ -254,14 +257,17 @@ export default function ThirdPartyAccounts() {
             {t('save')}
           </div>
         </div>
-        <div className='mb-2 text-xs text-[#666666] sm:mb-4 sm:mt-1 sm:text-sm'>
+        <div className='mb-2 ml-1 text-xs text-[#666666] sm:mb-4 sm:mt-1 sm:text-sm'>
           {user?.auth_methods?.[0]?.auth_identifier}
         </div>
-        <div className={'mb-1 sm:mb-3'}>{t('emailLabel')}</div>
-        <div className={'flex items-center gap-2'}>
+        <div className={'mb-1 ml-4 flex items-center gap-2 sm:mb-3'}>
+          <SvgIcon name={'email'} />
+          {t('emailLabel')}
+        </div>
+        <div className={'flex items-center gap-6'}>
           <div
             className={
-              'line-clamp-1 h-[60px] flex-1 rounded-[20px] bg-[#EAEAEA] px-5 text-base !leading-[60px] shadow-[inset_0px_0px_7.6px_0px_rgba(0,0,0,0.25)] sm:text-xl'
+              'line-clamp-1 h-[46px] flex-1 rounded-full bg-[#EAEAEA] px-5 text-base !leading-[46px] shadow-[inset_0px_0px_7.6px_0px_rgba(0,0,0,0.25)]'
             }
           >
             {user?.auth_methods?.[0]?.auth_identifier}
diff --git a/apps/user/assets/svg-icon/email.svg b/apps/user/assets/svg-icon/email.svg
new file mode 100644
index 0000000..4656b22
--- /dev/null
+++ b/apps/user/assets/svg-icon/email.svg
@@ -0,0 +1,10 @@
+<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1657_2239)">
+<path d="M19.4845 0H3.53155C1.58277 0 0 1.60697 0 3.59281V14.4072C0 15.5242 0.500838 16.5237 1.29062 17.1835C1.30667 17.1965 1.31951 17.2096 1.33557 17.2194C1.93593 17.7028 2.6904 17.9967 3.51549 18H19.4845C20.3 17.9967 21.048 17.7093 21.642 17.2324C21.6997 17.1965 21.7575 17.1573 21.8057 17.1083C21.8217 17.092 21.8346 17.0724 21.8474 17.0561C22.5505 16.4028 22.9936 15.4654 23 14.4202V3.59281C23 1.6135 21.4301 0.00979858 19.4845 0ZM14.977 9.00817L21.1796 2.69788C21.3145 2.9657 21.3948 3.27273 21.3948 3.59608V14.4268C21.3948 14.7501 21.3177 15.0539 21.1796 15.3217L14.977 9.01143V9.00817ZM19.4845 1.6331C19.629 1.6331 19.767 1.65269 19.9019 1.68536L12.8548 8.85465C12.4985 9.22047 12.0105 9.42624 11.5032 9.42624C10.996 9.42624 10.508 9.22047 10.1516 8.85465L3.11097 1.69516C3.23939 1.66576 3.37423 1.64943 3.51549 1.64943L19.4845 1.6331ZM1.82035 15.3185C1.68551 15.0506 1.60525 14.7469 1.60525 14.4235V3.60915C1.60525 3.27926 1.68551 2.96897 1.82677 2.69461L8.0134 8.9951L1.82035 15.3185ZM3.51549 16.3832C3.36781 16.3832 3.22334 16.3604 3.08208 16.3277L9.15634 10.1481C9.79844 10.736 10.63 11.0626 11.4968 11.0626C12.3604 11.0659 13.1919 10.7392 13.834 10.1579L19.9051 16.3342C19.7702 16.3669 19.629 16.3865 19.4813 16.3865H3.51549V16.3832Z" fill="#666666"/>
+</g>
+<defs>
+<clipPath id="clip0_1657_2239">
+<rect width="23" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>