Merge branch 'forntend-account-improvements'

jadzeidan · Oct 28, 2024 · ffd4556 · ffd4556
2 parents cf3a145 + aa4e114
commit ffd4556
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 14 deletions.
diff --git a/frontends/web/src/components/title/subtitle.module.css b/frontends/web/src/components/title/subtitle.module.css
@@ -4,3 +4,9 @@
   line-height: 1.5;
   margin: 0 0 calc(var(--space-half) * 1.5) 0;
 }
+
+@media (min-width: 1200px) {
+  .subtitle {
+    --size-subheader: 20px;
+  }
+}
diff --git a/frontends/web/src/routes/account/account.module.css b/frontends/web/src/routes/account/account.module.css
@@ -54,7 +54,6 @@
     justify-content: flex-end;
 }
 
-
 .withWalletConnect .walletConnect {
     display: flex;
 }
@@ -85,6 +84,10 @@
     margin-right: var(--space-eight);
 }
 
+.errorLoadTransactions {
+    text-align: center;
+}
+
 .titleWithButton {
     align-items: baseline;
     color: var(--color-secondary);
@@ -98,6 +101,11 @@
     text-align: right;
 }
 
+.emptyTransactions {
+    color: var(--color-secondary);
+    text-align: center;
+}
+
 @media (max-width: 768px) {
 
     .accountInfoLink {
@@ -112,8 +120,6 @@
     .actionsContainer {
         justify-content: space-between;
         margin-bottom: var(--space-default);
-        margin-left: auto;
-        margin-right: auto;
         padding-bottom: 0;
         transform: none;
         width: 100%;
@@ -138,8 +144,6 @@
 
     .actionsContainer a {
         flex: 1 0 30%;
-        margin-left: 0;
-        margin-right: 0;
         max-width: 30%;
         min-width: unset;
     }
@@ -152,4 +156,12 @@
         margin-bottom: 0;
         width: auto;
     }
+
+
+    .exchange:first-child,
+    .send:first-child,
+    .receive:first-child,
+    .walletConnect:first-child {
+        margin-left: 0;
+    }
 }
diff --git a/frontends/web/src/routes/account/account.tsx b/frontends/web/src/routes/account/account.tsx
@@ -338,10 +338,10 @@ export const Account = ({
                 )}
 
                 {!transactions?.success ? (
-                  <div className={`flex flex-row flex-center ${style.empty}`}>
-                    <p>{t('transactions.errorLoadTransactions')}</p>
-                  </div>
-                ) : (
+                  <p className={style.errorLoadTransactions}>
+                    {t('transactions.errorLoadTransactions')}
+                  </p>
+                ) : !isAccountEmpty && (
                   <SubTitle className={style.titleWithButton}>
                     {t('accountSummary.transactionHistory')}
                     {hasTransactions && (
@@ -367,7 +367,9 @@ export const Account = ({
                   />
                 ))
               ) : transactions?.success && (
-                <p>{t('transactions.placeholder')}</p>
+                <p className={style.emptyTransactions}>
+                  {t('transactions.placeholder')}
+                </p>
               )}
 
               <TransactionDetails

diff --git a/frontends/web/src/routes/account/info/buyReceiveCTA.tsx b/frontends/web/src/routes/account/info/buyReceiveCTA.tsx
@@ -25,6 +25,7 @@ import { isBitcoinCoin, isEthereumBased } from '@/routes/account/utils';
 import { getExchangeSupportedAccounts } from '@/routes/exchange/utils';
 import { WalletConnectLight } from '@/components/icon';
 import { useMountedRef } from '@/hooks/mount';
+import { SubTitle } from '@/components/title';
 import styles from './buyReceiveCTA.module.css';
 
 type TBuyReceiveCTAProps = {
@@ -66,12 +67,12 @@ export const BuyReceiveCTA = ({
 
   return (
     <div className={`${styles.main}`}>
-      <h3 className="subTitle">
+      <SubTitle>
         {t('accountInfo.buyCTA.information.looksEmpty')}
-      </h3>
-      <h3 className="subTitle">
+      </SubTitle>
+      <p>
         {t('accountInfo.buyCTA.information.start')}
-      </h3>
+      </p>
       <div className={styles.container}>
         {balanceList && (
           <Button primary onClick={onReceiveCTA}>