Styles + main-button

viaprotocol · Oct 5, 2023 · 0832b85 · 0832b85
1 parent fbf33e4
commit 0832b85
Show file tree

Hide file tree

Showing 12 changed files with 28 additions and 16 deletions.
diff --git a/src/background/utils/index.ts b/src/background/utils/index.ts
@@ -130,7 +130,7 @@ declare global {
 export const walletConnectClientMeta = {
   description: i18n.t('appDescription'),
   url: 'https://rabby.io',
-  icons: ['https://rabby.io/assets/images/logo-128.png'],
+  icons: ['https://myally.xyz/vite.svg'],
   name: 'Rabby',
 };
 export const setWalletConnectClientMeta = (keyring: WalletConnectKeyring) => {

diff --git a/src/ui/app.tsx b/src/ui/app.tsx
@@ -36,7 +36,7 @@ Sentry.init({
 function initAppMeta() {
   const head = document.querySelector('head');
   const icon = document.createElement('link');
-  icon.href = 'https://rabby.io/assets/images/logo-128.png';
+  icon.href = 'https://myally.xyz/vite.svg';
   icon.rel = 'icon';
   head?.appendChild(icon);
   const name = document.createElement('meta');

diff --git a/src/ui/style/antd-overwrite.less b/src/ui/style/antd-overwrite.less
@@ -52,7 +52,6 @@
   &:focus {
     background-color: @primary-color;
     border-color: @primary-color;
-    box-shadow: 0px 8px 16px #292929;
   }
 }
 .ant-input-suffix.ant-input-suffix.ant-input-suffix .anticon {

diff --git a/src/ui/style/index.less b/src/ui/style/index.less
@@ -342,3 +342,9 @@ button:focus {
     }
   }
 }
+
+@layer utilities {
+  .main-button {
+    @apply text-mainButton font-semibold bg-mainButton hover:bg-mainButtonHover active:bg-mainButtonActive disabled:bg-mainButtonDisabled !important;
+  }
+}
diff --git a/src/ui/views/Approval/components/Actions/TokenApprove.tsx b/src/ui/views/Approval/components/Actions/TokenApprove.tsx
@@ -230,7 +230,7 @@ const TokenApprove = ({
                     </span>
                   </div>
                   <span
-                    className="text-blue-light text-12 font-medium cursor-pointer ml-4"
+                    className="text-white text-12 font-medium cursor-pointer ml-4"
                     onClick={() => setEditApproveModalVisible(true)}
                   >
                     {t('global.editButton')}

diff --git a/src/ui/views/Approval/components/Actions/index.tsx b/src/ui/views/Approval/components/Actions/index.tsx
@@ -51,7 +51,8 @@ export const SignTitle = styled.div`
     display: flex;
     font-size: 18px;
     line-height: 21px;
-    color: #333333;
+    color: #ffffff;
+    font-weight: 600;
     flex: 1;
     .icon-speedup {
       width: 10px;

diff --git a/src/ui/views/Approval/components/FooterBar/SubmitActions.tsx b/src/ui/views/Approval/components/FooterBar/SubmitActions.tsx
@@ -32,20 +32,19 @@ export const SubmitActions: React.FC<Props> = ({
       {isSign ? (
         <div
           className={clsx(
-            'bg-blue-light text-white',
             'rounded-[8px] h-[48px]',
             'flex items-center',
             'relative',
             'before:absolute before:right-[60px]',
-            'before:bg-[#FFFFFF1A]',
+            'before:bg-[#333333]',
             'before:h-[32px] before:w-1',
             'hover:before:hidden',
             'overflow-hidden'
           )}
         >
           <button
             className={clsx(
-              'hover:bg-[#00000033]',
+              'text-button bg-button enabled:hover:bg-button-hover enabled:active:bg-button-active',
               'w-[184px] h-full',
               'font-medium'
             )}
@@ -55,7 +54,7 @@ export const SubmitActions: React.FC<Props> = ({
           </button>
           <button
             className={clsx(
-              'hover:bg-[#00000033]',
+              'text-button bg-button enabled:hover:bg-button-hover enabled:active:bg-button-active',
               'w-[60px] h-full',
               'flex justify-center items-center'
             )}
@@ -74,8 +73,8 @@ export const SubmitActions: React.FC<Props> = ({
               disabled={disabledProcess}
               type="primary"
               className={clsx(
-                'w-[246px] h-[48px] rounded-[8px]',
-                'disabled:opacity-40 disabled:bg-blue-light',
+                'w-[246px] h-[48px] rounded-[8px] text-button',
+                'bg-button enabled:hover:bg-button-hover enabled:active:bg-button-active disabled:opacity-40 disabled:cursor-not-allowed',
                 'before:content-none'
               )}
               onClick={handleClickSign}

diff --git a/src/ui/views/Approval/components/TextActions/index.tsx b/src/ui/views/Approval/components/TextActions/index.tsx
@@ -21,7 +21,8 @@ export const SignTitle = styled.div`
     display: flex;
     font-size: 18px;
     line-height: 21px;
-    color: #333333;
+    color: #ffffff;
+    font-weight: 600;
     .icon-speedup {
       width: 10px;
       margin-right: 6px;

diff --git a/src/ui/views/Approval/components/TypedDataActions/index.tsx b/src/ui/views/Approval/components/TypedDataActions/index.tsx
@@ -39,7 +39,8 @@ export const SignTitle = styled.div`
     display: flex;
     font-size: 18px;
     line-height: 21px;
-    color: #333333;
+    color: #ffffff;
+    font-weight: 600;
     .icon-speedup {
       width: 10px;
       margin-right: 6px;

diff --git a/src/ui/views/ImportWatchAddress.tsx b/src/ui/views/ImportWatchAddress.tsx
@@ -110,8 +110,8 @@ const ImportWatchAddress = () => {
       bridge: DEFAULT_BRIDGE,
       clientMeta: {
         description: t('global.appDescription'),
-        url: 'https://rabby.io',
-        icons: ['https://rabby.io/assets/images/logo-128.png'],
+        url: 'https://myally.xyz',
+        icons: ['https://myally.xyz/vite.svg'],
         name: t('global.appName'),
       },
     });

diff --git a/src/ui/views/SwapRenew/Component/Main.tsx b/src/ui/views/SwapRenew/Component/Main.tsx
@@ -484,7 +484,7 @@ export const Main = () => {
           type="primary"
           block
           size="large"
-          className="h-[48px] text-white text-[16px] font-medium"
+          className="h-[48px] text-[16px] main-button"
           onClick={() => {
             if (!activeProvider || expired || slippageChanged) {
               setVisible(true);

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -34,6 +34,10 @@ module.exports = {
     backgroundImage: {
       refreshGradient: 'linear-gradient(180deg, #A8A29E 0%, #78716C 100%)',
       buttonGradient: 'linear-gradient(180deg, #363636 0%, #292929 100%)',
+      mainButton: 'linear-gradient(180deg, #A8A29E 0%, #78716C 100%)',
+      mainButtonHover: 'linear-gradient(180deg, #CEC7C3 0%, #9B928C 100%)',
+      mainButtonActive: 'linear-gradient(180deg, #8D8884 0%, #524C48 100%)',
+      mainButtonDisabled: 'linear-gradient(180deg, #464240 0%, #373330 100%)',
     },
     colors: {
       form: {
@@ -78,6 +82,7 @@ module.exports = {
         light: '#707880',
         common: '#666666',
       },
+      mainButton: '#1B1A18',
     },
     boxShadow: {
       default: '0px 1px 0px 0px rgba(0, 0, 0, 0.48)',