Fix placeholder text margins

alephium · Feb 25, 2025 · 487b64b · 487b64b
1 parent ad191e7
commit 487b64b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 6 deletions.
diff --git a/apps/mobile-wallet/src/components/EmptyPlaceholder.tsx b/apps/mobile-wallet/src/components/EmptyPlaceholder.tsx
@@ -1,10 +1,14 @@
 import { ViewProps } from 'react-native'
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
 
 import Box from '~/components/layout/Box'
-import { VERTICAL_GAP } from '~/style/globalStyle'
+import { DEFAULT_MARGIN, VERTICAL_GAP } from '~/style/globalStyle'
 
-type EmptyPlaceholderProps = ViewProps & { noMargin?: boolean }
+type EmptyPlaceholderProps = ViewProps & {
+  noMargin?: boolean
+  hasHorizontalMargin?: boolean
+  hasVerticalMargin?: boolean
+}
 
 const EmptyPlaceholder = ({ children, ...props }: EmptyPlaceholderProps) => (
   <BoxStyled {...props}>
@@ -16,7 +20,17 @@ export default EmptyPlaceholder
 
 const BoxStyled = styled(Box)<EmptyPlaceholderProps>`
   justify-content: center;
-  margin: ${({ noMargin }) => (noMargin ? 0 : `${VERTICAL_GAP / 2}px 0`)};
+
+  margin-top: ${({ hasVerticalMargin }) => (hasVerticalMargin ? VERTICAL_GAP / 2 : 0)}px;
+  margin-bottom: ${({ hasVerticalMargin }) => (hasVerticalMargin ? VERTICAL_GAP / 2 : 0)}px;
+  margin-left: ${({ hasHorizontalMargin }) => (hasHorizontalMargin ? DEFAULT_MARGIN : 0)};
+  margin-right: ${({ hasHorizontalMargin }) => (hasHorizontalMargin ? DEFAULT_MARGIN : 0)};
+
+  ${({ noMargin }) =>
+    noMargin &&
+    css`
+      margin: 0;
+    `}
 `
 
 const Content = styled.View`

diff --git a/apps/mobile-wallet/src/screens/ContactListScreenBase.tsx b/apps/mobile-wallet/src/screens/ContactListScreenBase.tsx
@@ -55,7 +55,7 @@ const ContactListScreenBase = ({ onContactPress, onNewContactPress, ...props }:
         </HeaderScreenSection>
       )}
       {contacts.length === 0 ? (
-        <EmptyPlaceholder>
+        <EmptyPlaceholder hasHorizontalMargin>
           <EmojiContainer size={32}>🤷‍♀️</EmojiContainer>
           <AppText>{t('No contact yet!')}</AppText>
           <Button title={t('Add contact')} onPress={handleNewContactPress} variant="contrast" short />

diff --git a/apps/mobile-wallet/src/screens/Dashboard/DashboardScreen.tsx b/apps/mobile-wallet/src/screens/Dashboard/DashboardScreen.tsx
@@ -108,7 +108,7 @@ const DashboardScreen = ({ navigation, ...props }: ScreenProps) => {
       </ScreenSection>
 
       {totalBalance === BigInt(0) && addressesBalancesStatus === 'initialized' && (
-        <EmptyPlaceholder style={{ marginLeft: DEFAULT_MARGIN, marginRight: DEFAULT_MARGIN }}>
+        <EmptyPlaceholder hasHorizontalMargin>
           <AppText size={32}>🌈</AppText>
           <AppText color="secondary">{t('There is so much left to discover!')}</AppText>
           <AppText color="tertiary">{t('Start by adding funds to your wallet.')}</AppText>