fix(costcenter):price icon

labring · Dec 24, 2024 · f464747 · f464747
1 parent c7a8673
commit f464747
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 48 deletions.
diff --git a/frontend/providers/costcenter/public/locales/en/common.json b/frontend/providers/costcenter/public/locales/en/common.json
@@ -67,7 +67,7 @@
   "All": "All",
   "Total": "Total",
   "Page": "Page",
-  "View Discount Rules": "View recharge discount rules.",
+  "View Discount Rules": "Review Bonus Policy",
   "Cancel": "Cancel",
   "Not Enough Balance": "Insufficient balance, please recharge immediately.",
   "Insufficient Balance": "Insufficient balance",
@@ -235,6 +235,9 @@
   "usage": "usage",
   "resource": "resource",
   "Double": "Double",
-  "first_recharge_tips": "Partial specifications can enjoy double the amount of the initial recharge.",
-  "first_recharge_title": "Double on First Recharge"
-}
+  "first_recharge_tips": "Get double credits when making a first-time purchase for some tiers.",
+  "first_recharge_title": "Get Double with Initial Purchase!",
+  "credit_purchase": "Credit Purchase",
+  "remaining_balance": "Remaining Balance",
+  "custom_amount": "Custom Amount"
+}
diff --git a/frontend/providers/costcenter/public/locales/zh/common.json b/frontend/providers/costcenter/public/locales/zh/common.json
@@ -236,5 +236,8 @@
   "resource": "资源",
   "Double": "双倍",
   "first_recharge_tips": "部分规格首次充值可享双倍赠送金额",
-  "first_recharge_title": "首充双倍"
+  "first_recharge_title": "首充双倍!",
+  "credit_purchase": "余额充值",
+  "remaining_balance": "当前余额",
+  "custom_amount": "输入金额"
 }
diff --git a/frontend/providers/costcenter/src/components/CurrencySymbol.tsx b/frontend/providers/costcenter/src/components/CurrencySymbol.tsx
@@ -8,10 +8,14 @@ export default function CurrencySymbol({
 } & IconProps &
   TextProps) {
   return type === 'shellCoin' ? (
-    <Img src={sealosCoin.src} boxSize={'16px'} maxW={'unset'} {...props} w={'auto'}></Img>
+    <Img src={sealosCoin.src} boxSize={'16px'} maxW={'unset'} {...props}></Img>
   ) : type === 'cny' ? (
-    <Text {...props}>￥</Text>
+    <Text {...props} boxSize={'auto'}>
+      ￥
+    </Text>
   ) : (
-    <Text {...props}>$</Text>
+    <Text {...props} boxSize={'auto'}>
+      $
+    </Text>
   );
 }
diff --git a/frontend/providers/costcenter/src/components/RechargeModal.tsx b/frontend/providers/costcenter/src/components/RechargeModal.tsx
@@ -1,7 +1,7 @@
 import vector from '@/assert/Vector.svg';
 import stripe_icon from '@/assert/bi_stripe.svg';
 import wechat_icon from '@/assert/ic_baseline-wechat.svg';
-import { default as CurrencySymbol, default as Currencysymbol } from '@/components/CurrencySymbol';
+import CurrencySymbol from '@/components/CurrencySymbol';
 import OuterLink from '@/components/outerLink';
 import { useCustomToast } from '@/hooks/useCustomToast';
 import useEnvStore from '@/stores/env';
@@ -190,7 +190,7 @@ const BonusBox = (props: {
             <Text>{t('Double')}!</Text>
             <Flex align={'center'}>
               +
-              <CurrencySymbol boxSize={'10px'} mr={'2px'} />
+              <CurrencySymbol boxSize={'10px'} mr={'2px'} type={currency} />
               <Text>{props.bouns}</Text>
             </Flex>
           </Flex>
@@ -201,7 +201,7 @@ const BonusBox = (props: {
           minW={'max-content'}
           left="78px"
           top="4px"
-          px={'13.5px'}
+          px={'9.5px'}
           py={'2.5px'}
           color={'purple.600'}
           background="purple.100"
@@ -219,9 +219,9 @@ const BonusBox = (props: {
       ) : (
         <></>
       )}
-      <Flex align={'center'}>
-        <Currencysymbol boxSize="20px" type={currency} />
-        <Text ml="4px" fontStyle="normal" fontWeight="500" fontSize="24px">
+      <Flex align={'center'} fontSize="24px">
+        <CurrencySymbol boxSize="20px" type={currency} />
+        <Text ml="4px" fontStyle="normal" fontWeight="500">
           {props.amount}
         </Text>
       </Flex>
@@ -424,7 +424,7 @@ const RechargeModal = forwardRef(
                   fontSize={'16px'}
                   borderColor={'grayModern.100'}
                 >
-                  {t('Recharge Amount')}
+                  {t('credit_purchase')}
                 </ModalHeader>
                 <ModalCloseButton top={'8px'} right={'18px'} />
                 <Flex
@@ -439,11 +439,11 @@ const RechargeModal = forwardRef(
                   alignItems="center"
                 >
                   <Flex align={'center'} alignSelf={'flex-start'} mb={'20px'}>
-                    <Text color="grayModern.600" fontWeight={'normal'} mr={'20px'}>
-                      {t('Balance')}
+                    <Text color="grayModern.600" fontWeight={'normal'} mr={'24px'}>
+                      {t('remaining_balance')}
                     </Text>
-                    <Currencysymbol boxSize="20px" type={currency} />
-                    <Text ml="4px" color="#24282C" fontSize="24px" fontWeight={'medium'}>
+                    <CurrencySymbol boxSize="20px" type={currency} fontSize="24px" />
+                    <Text ml="4px" color="#24282C" fontWeight={'medium'} fontSize="24px">
                       {formatMoney(balance).toFixed(2)}
                     </Text>
                   </Flex>
@@ -460,9 +460,19 @@ const RechargeModal = forwardRef(
                           fontSize={'14px'}
                           fontWeight={500}
                         >
-                          {t('first_recharge_title')}!
+                          {t('first_recharge_title')}
                         </Text>
-                        <MyTooltip label={<Text>{t('first_recharge_tips')}</Text>}>
+                        <MyTooltip
+                          px={'12px'}
+                          py={'8px'}
+                          minW={'unset'}
+                          width={'auto'}
+                          label={
+                            <Text fontSize={'12px'} fontWeight={400}>
+                              {t('first_recharge_tips')}
+                            </Text>
+                          }
+                        >
                           <HelpIcon boxSize={'16px'}></HelpIcon>
                         </MyTooltip>
                       </Flex>
@@ -484,20 +494,21 @@ const RechargeModal = forwardRef(
                     </Flex>
                   </Flex>
                   <Flex alignSelf={'flex-start'} align={'center'}>
-                    <Text color="grayModern.600" mr={'28px'}>
-                      {t('Recharge Amount')}
+                    <Text color="grayModern.600" mr={'36px'}>
+                      {t('custom_amount')}
                     </Text>
                     <NumberInput
                       defaultValue={15}
                       clampValueOnBlur={false}
                       min={0}
+                      flex={1}
                       step={step}
                       // mt="8px"
-                      w="215px"
-                      h="42px"
+                      w="200px"
+                      h="32px"
                       boxSizing="border-box"
                       background="grayModern.50"
-                      px={'12px'}
+                      pl={'12px'}
                       border="1px solid"
                       borderColor={'grayModern.200'}
                       borderRadius="8px"
@@ -518,8 +529,8 @@ const RechargeModal = forwardRef(
                         setAmount(v);
                       }}
                     >
-                      <NumberInputField color={'grayModern.900'} />
-                      <Currencysymbol boxSize="14px" mr={'32px'} type={currency} />
+                      <NumberInputField color={'grayModern.900'} borderRadius={'unset'} />
+                      <CurrencySymbol boxSize="14px" mr={'32px'} type={currency} />
 
                       <NumberInputStepper borderColor={'grayModern.200'}>
                         <NumberIncrementStepper width={'24px'} borderColor={'grayModern.200'}>
@@ -530,21 +541,25 @@ const RechargeModal = forwardRef(
                         </NumberDecrementStepper>
                       </NumberInputStepper>
                     </NumberInput>
-                    <Text
-                      py={'1px'}
-                      px="7px"
-                      ml={'10px'}
-                      color={'purple.600'}
-                      background="purple.100"
-                      borderRadius="6px 6px 6px 0px;"
-                      fontStyle="normal"
-                      fontWeight="500"
-                      fontSize="12px"
-                      mr="4px"
-                    >
-                      {t('Bonus')} {getBonus(amount)}
-                    </Text>
-                    <CurrencySymbol boxSize={'10px'} />
+                    <Flex fontSize={'12px'} align={'center'}>
+                      <Text
+                        py={'1px'}
+                        px="7px"
+                        ml={'10px'}
+                        color={'purple.600'}
+                        background="purple.100"
+                        borderRadius="6px 6px 6px 0px;"
+                        fontStyle="normal"
+                        fontWeight="500"
+                        fontSize="12px"
+                        mr="4px"
+                      >
+                        {t('Bonus')}
+                      </Text>
+
+                      <CurrencySymbol boxSize={'10px'} type={currency} />
+                      {getBonus(amount)}
+                    </Flex>
                   </Flex>
                   <Flex
                     alignSelf={'flex-start'}
@@ -574,10 +589,7 @@ const RechargeModal = forwardRef(
                     )}
                     {wechatEnabled && (
                       <Button
-                        // size="primary"
                         variant="solid"
-                        // bgColor={'grayModern.900'}
-                        // color={'white'}
                         w="full"
                         h="auto"
                         py="14px"

diff --git a/frontend/providers/costcenter/src/components/outerLink.tsx b/frontend/providers/costcenter/src/components/outerLink.tsx
@@ -1,17 +1,18 @@
+import uil_info_circle from '@/assert/uil_info-circle.svg';
 import { Flex, Img, Link } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
-import uil_info_circle from '@/assert/uil_info-circle.svg';
 
 export default function Index({ text, href }: { text: string; href?: string }) {
   const { t } = useTranslation();
   return (
     <Flex align={'center'}>
-      <Img src={uil_info_circle.src} w={'18px'} h="18px" mr={'5px'}></Img>
+      <Img src={uil_info_circle.src} boxSize={'16px'} mr={'4px'}></Img>
       <Link
         fontStyle="normal"
         fontWeight="400"
         fontSize="12px"
         color="brightBlue.600"
+        textDecoration={'underline'}
         {...(href
           ? {
               href: href

diff --git a/frontend/providers/costcenter/src/styles/chakraTheme.ts b/frontend/providers/costcenter/src/styles/chakraTheme.ts
@@ -125,5 +125,11 @@ export const theme = extendTheme(originTheme, {
     '*': `'PingFang SC'`,
     div: `'PingFang SC'`,
     button: `'PingFang SC'`
+  },
+  colors: {
+    purple: {
+      100: '#F7E7FF',
+      600: '#9E53C1'
+    }
   }
 });