Merge pull request #1937 from oasisprotocol/lw/tx-building-text-size

Fix transaction preview layout in extension and loading text size
oasisprotocol · May 15, 2024 · dd2ba1f · dd2ba1f
2 parents 2ebd0f5 + 31a780b
commit dd2ba1f
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 12 deletions.
diff --git a/.changelog/1937.trivial.md b/.changelog/1937.trivial.md
@@ -0,0 +1 @@
+Reduce loading text size
diff --git a/src/app/components/Persist/PersistLoadingGate.tsx b/src/app/components/Persist/PersistLoadingGate.tsx
@@ -24,7 +24,7 @@ export function PersistLoadingGate(props: Props) {
         <Layer modal background="background-front" responsive={false}>
           <Box pad="medium" gap="medium" direction="row" align="center">
             <Spinner size="medium" />
-            <Text size="large">{t('persist.loading', 'Loading')}</Text>
+            <Text size="medium">{t('persist.loading', 'Loading')}</Text>
           </Box>
         </Layer>
       )}

diff --git a/src/app/components/TransactionModal/index.tsx b/src/app/components/TransactionModal/index.tsx
@@ -107,19 +107,19 @@ export function TransactionModal() {
         {step === TransactionStep.Building && (
           <Box direction="row" align="center" gap="medium">
             <Spinner size="medium" />
-            <Text size="large">{t('transaction.step.building', 'Building transaction')}</Text>
+            <Text size="medium">{t('transaction.step.building', 'Building transaction')}</Text>
           </Box>
         )}
         {step === TransactionStep.Signing && (
           <Box direction="row" align="center" gap="medium">
             <Spinner size="medium" />
-            <Text size="large">{t('transaction.step.signing', 'Signing transaction')}</Text>
+            <Text size="medium">{t('transaction.step.signing', 'Signing transaction')}</Text>
           </Box>
         )}
         {step === TransactionStep.Submitting && (
           <Box direction="row" align="center" gap="medium">
             <Spinner size="medium" />
-            <Text size="large">{t('transaction.step.submitting', 'Submitting transaction')}</Text>
+            <Text size="medium">{t('transaction.step.submitting', 'Submitting transaction')}</Text>
           </Box>
         )}
       </Box>

diff --git a/src/app/components/TransactionTypeFormatter/index.tsx b/src/app/components/TransactionTypeFormatter/index.tsx
@@ -1,7 +1,6 @@
 import { NewTransactionType } from 'app/state/transaction/types'
 import React, { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Box } from 'grommet/es6/components/Box'
 import { Text } from 'grommet/es6/components/Text'
 
 interface Props {
@@ -20,13 +19,13 @@ export const TransactionTypeFormatter = memo((props: Props) => {
 
   const typeMessage = typeMap[type]
   return (
-    <Box direction="row" align="center" gap="xsmall">
+    <span>
       <Text color="grayMedium" size="small" style={{ textTransform: 'capitalize', fontWeight: 600 }}>
         {type}
       </Text>
       <Text color="grayMedium" size="xsmall" style={{ letterSpacing: 0 }}>
-        ({typeMessage})
+        &nbsp;({typeMessage})
       </Text>
-    </Box>
+    </span>
   )
 })
diff --git a/src/app/pages/AccountPage/index.tsx b/src/app/pages/AccountPage/index.tsx
@@ -108,9 +108,9 @@ export function AccountPage(props: AccountPageProps) {
       {active && <TransactionModal />}
       {(stake.loading || account.loading) && (
         <Layer modal background="background-front" responsive={false}>
-          <Box pad="medium" gap="medium" direction="row" align="center">
+          <Box pad="medium" gap="medium" direction="row" align="center" width="max-content">
             <Spinner size="medium" />
-            <Text size="large">{t('account.loading', 'Loading account')}</Text>
+            <Text size="medium">{t('account.loading', 'Loading account')}</Text>
           </Box>
         </Layer>
       )}

diff --git a/src/app/pages/OpenWalletPage/Features/ImportAccountsSelectionModal/index.tsx b/src/app/pages/OpenWalletPage/Features/ImportAccountsSelectionModal/index.tsx
@@ -112,7 +112,7 @@ export function ImportAccountsSelectionModal(props: ImportAccountsSelectionModal
               <Box direction="row" gap="medium" alignContent="center" pad={{ top: 'small' }}>
                 <Spinner size="medium" />
                 <Box alignSelf="center">
-                  <Text size="xlarge">
+                  <Text size="medium">
                     <ImportAccountsStepFormatter step={importAccounts.step} />
                   </Text>
                 </Box>

diff --git a/src/app/pages/ParaTimesPage/ParaTimeFormFooter/index.tsx b/src/app/pages/ParaTimesPage/ParaTimeFormFooter/index.tsx
@@ -44,7 +44,7 @@ export const ParaTimeFormFooter = ({
             label={secondaryLabel || t('paraTimes.footer.back', 'Back')}
             onClick={secondaryAction}
             plain
-            style={{ textAlign: 'center', fontSize: '14px', textDecoration: 'underline', color: 'brand' }}
+            style={{ textAlign: 'center', fontSize: '14px', textDecoration: 'underline' }}
           />
         )}
       </Box>