Skip to content

Commit f63ddae

Browse files
pwltrpwltr
authored
Merge pull request #1017 from synonymdev/fix/ui-fixes
fix: UI spacing fixes
2 parents 1e3086d + 401da38 commit f63ddae

File tree

21 files changed

+94
-94
lines changed

21 files changed

+94
-94
lines changed

‎src/components/AmountToggle.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { EBalanceUnit } from '../store/types/wallet';
1313
const AmountToggle = ({
1414
sats,
1515
unit,
16+
secondaryFont = 'caption13Up',
1617
space = 0, // space between the rows
1718
reverse = false,
1819
disable = false,
@@ -23,6 +24,7 @@ const AmountToggle = ({
2324
testID,
2425
}: {
2526
sats: number;
27+
secondaryFont?: 'text01m' | 'caption13Up';
2628
unit?: EBalanceUnit;
2729
reverse?: boolean;
2830
space?: number;
@@ -51,15 +53,15 @@ const AmountToggle = ({
5153
<Money
5254
key="secondary"
5355
sats={sats}
54-
size="text01m"
56+
size={secondaryFont}
5557
color="gray1"
5658
decimalLength={decimalLength}
5759
{...{ ...(primaryUnit === EBalanceUnit.fiat ? btcProps : fiatProps) }}
5860
/>,
5961
];
6062

6163
return reverse ? arr.reverse() : arr;
62-
}, [primaryUnit, sats, reverse, space, decimalLength]);
64+
}, [primaryUnit, sats, reverse, space, decimalLength, secondaryFont]);
6365

6466
LayoutAnimation.easeInEaseOut();
6567

‎src/components/Assets.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const Assets = (): ReactElement => {
3737

3838
const styles = StyleSheet.create({
3939
title: {
40-
marginTop: 32,
40+
marginTop: 26,
4141
marginBottom: 23,
4242
},
4343
});

‎src/components/BalanceHeader.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,11 +76,12 @@ const BalanceHeader = (): ReactElement => {
7676
pending: (
7777
<Money
7878
color="gray1"
79-
size="caption13M"
79+
size="caption13Up"
8080
sats={claimableBalance}
8181
unit={balanceUnit}
8282
enableHide={true}
8383
symbol={false}
84+
decimalLength="long"
8485
/>
8586
),
8687
}}
@@ -118,7 +119,7 @@ const styles = StyleSheet.create({
118119
paddingLeft: 16,
119120
},
120121
row: {
121-
marginTop: 13,
122+
marginTop: 6,
122123
flexDirection: 'row',
123124
alignItems: 'center',
124125
justifyContent: 'space-between',

‎src/components/Dialog.tsx‎

Lines changed: 39 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -44,44 +44,46 @@ const Dialog = ({
4444
}
4545

4646
return (
47-
<Modal
48-
animationType="fade"
49-
// on iOS transparent={true} leads to a bug
50-
// use it with presentationStyle="fullScreen" to get a black background
51-
// https://github.com/facebook/react-native/issues/34018
52-
transparent={true}
53-
presentationStyle="fullScreen"
54-
visible={visible}
55-
onRequestClose={onRequestClose}>
56-
<View style={styles.centeredView}>
57-
<View style={styles.view}>
58-
<View style={styles.text}>
59-
<Text style={styles.title}>{title}</Text>
60-
<Text style={styles.description}>{description}</Text>
61-
</View>
62-
<View
63-
style={styles.buttons}
64-
testID={visible ? visibleTestID : undefined}>
65-
{onCancel && (
66-
<TouchableOpacity
67-
style={[styles.button, styles.buttonLeft]}
68-
onPress={onCancel}
69-
testID="DialogCancel">
70-
<Text style={styles.buttonText}>{cancelText}</Text>
71-
</TouchableOpacity>
72-
)}
73-
{onConfirm && (
74-
<TouchableOpacity
75-
style={styles.button}
76-
onPress={onConfirm}
77-
testID="DialogConfirm">
78-
<Text style={styles.buttonText}>{confirmText}</Text>
79-
</TouchableOpacity>
80-
)}
81-
</View>
47+
<>
48+
{visible && (
49+
<View>
50+
<Modal
51+
animationType="fade"
52+
transparent={true}
53+
visible={visible}
54+
onRequestClose={onRequestClose}>
55+
<View style={styles.centeredView}>
56+
<View style={styles.view}>
57+
<View style={styles.text}>
58+
<Text style={styles.title}>{title}</Text>
59+
<Text style={styles.description}>{description}</Text>
60+
</View>
61+
<View
62+
style={styles.buttons}
63+
testID={visible ? visibleTestID : undefined}>
64+
{onCancel && (
65+
<TouchableOpacity
66+
style={[styles.button, styles.buttonLeft]}
67+
onPress={onCancel}
68+
testID="DialogCancel">
69+
<Text style={styles.buttonText}>{cancelText}</Text>
70+
</TouchableOpacity>
71+
)}
72+
{onConfirm && (
73+
<TouchableOpacity
74+
style={styles.button}
75+
onPress={onConfirm}
76+
testID="DialogConfirm">
77+
<Text style={styles.buttonText}>{confirmText}</Text>
78+
</TouchableOpacity>
79+
)}
80+
</View>
81+
</View>
82+
</View>
83+
</Modal>
8284
</View>
83-
</View>
84-
</Modal>
85+
)}
86+
</>
8587
);
8688
};
8789

‎src/components/ImageText.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { memo, ReactElement } from 'react';
22
import { View, TouchableOpacity, StyleSheet } from 'react-native';
3-
import { Text01M, Caption13M } from '../styles/text';
3+
import { Text01M, Text02M } from '../styles/text';
44
import { PenIcon } from '../styles/icons';
55
import Money from '../components/Money';
66

@@ -28,7 +28,7 @@ const ImageText = ({
2828
{icon}
2929
<View style={styles.titleContainer}>
3030
<Text01M>{title}</Text01M>
31-
<Caption13M color="gray1">{description}</Caption13M>
31+
<Text02M color="gray1">{description}</Text02M>
3232
</View>
3333
</View>
3434

@@ -46,7 +46,7 @@ const ImageText = ({
4646
<Money
4747
style={styles.value}
4848
sats={value}
49-
size="caption13M"
49+
size="text02m"
5050
color="gray1"
5151
symbol={true}
5252
showFiat={true}

‎src/components/Money.tsx‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,10 @@ import { useSelector } from 'react-redux';
44

55
import {
66
Caption13M,
7+
Caption13Up,
78
Display,
8-
Headline,
99
Text01M,
10-
Text01S,
1110
Text02M,
12-
Text02S,
1311
Title,
1412
} from '../styles/text';
1513
import { BIcon, LightningIcon } from '../styles/icons';
@@ -36,13 +34,11 @@ interface IMoney {
3634
testID?: string;
3735
size?:
3836
| 'display'
39-
| 'text01s'
4037
| 'text01m'
41-
| 'text02s'
4238
| 'text02m'
4339
| 'caption13M'
44-
| 'title'
45-
| 'headline';
40+
| 'caption13Up'
41+
| 'title';
4642
}
4743

4844
const Money = (props: IMoney): ReactElement => {
@@ -68,20 +64,15 @@ const Money = (props: IMoney): ReactElement => {
6864

6965
const [Text, lineHeight, iconHeight, iconWidth] = useMemo(() => {
7066
switch (size) {
71-
case 'headline':
72-
// Override lineHeight for Display font
73-
return [Headline, '41px', 40, 20];
7467
case 'title':
7568
return [Title, undefined, 26, 12];
76-
case 'text01s':
77-
return [Text01S, undefined, 21, 10];
7869
case 'text01m':
7970
return [Text01M, undefined, 21, 10];
80-
case 'text02s':
81-
return [Text02S, undefined, 18, 9];
8271
case 'text02m':
8372
return [Text02M, undefined, 18, 9];
8473
case 'caption13M':
74+
return [Caption13Up, undefined, 16, 8];
75+
case 'caption13Up':
8576
return [Caption13M, undefined, 16, 8];
8677
default:
8778
// Override lineHeight for Display font

‎src/components/NumberPadTextField.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const NumberPadTextField = ({
9696
<Money
9797
style={styles.secondary}
9898
sats={satoshis}
99-
size="text01m"
99+
size="caption13Up"
100100
color="gray1"
101101
{...{ ...(unit === EBalanceUnit.fiat ? btcProps : fiatProps) }}
102102
/>

‎src/components/Suggestions.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,8 +139,8 @@ const Suggestions = (): ReactElement => {
139139

140140
const styles = StyleSheet.create({
141141
title: {
142-
marginTop: 28,
143-
marginBottom: 5,
142+
marginTop: 25,
143+
marginBottom: 6,
144144
marginLeft: 16,
145145
},
146146
container: {

‎src/components/Widgets.tsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -196,9 +196,7 @@ const Widgets = (): ReactElement => {
196196
return (
197197
<>
198198
<View style={styles.titleRow}>
199-
<Caption13Up style={styles.title} color="gray1">
200-
{t('widgets')}
201-
</Caption13Up>
199+
<Caption13Up color="gray1">{t('widgets')}</Caption13Up>
202200
</View>
203201
<Text color="gray">{t('disabled')}</Text>
204202
</>
@@ -208,9 +206,7 @@ const Widgets = (): ReactElement => {
208206
return (
209207
<>
210208
<View style={styles.titleRow} testID="WidgetsTitle">
211-
<Caption13Up style={styles.title} color="gray1">
212-
{t('widgets')}
213-
</Caption13Up>
209+
<Caption13Up color="gray1">{t('widgets')}</Caption13Up>
214210
{widgetsArray.length > 0 && (
215211
<TouchableOpacity
216212
style={styles.edit}
@@ -230,6 +226,7 @@ const Widgets = (): ReactElement => {
230226
</View>
231227
<Text01M>{t('widget_add')}</Text01M>
232228
</TouchableOpacity>
229+
<View style={styles.divider} />
233230
<Modal
234231
transparent={true}
235232
visible={editing}
@@ -273,20 +270,26 @@ const styles = StyleSheet.create({
273270
flexDirection: 'row',
274271
alignItems: 'center',
275272
justifyContent: 'space-between',
276-
},
277-
title: {
278-
paddingTop: 32,
279-
paddingBottom: 8,
273+
paddingTop: 30,
280274
},
281275
edit: {
282-
paddingTop: 32,
283-
paddingBottom: 8,
276+
// increase hitbox
277+
paddingTop: 10,
278+
marginTop: -10,
279+
paddingBottom: 10,
280+
marginBottom: -10,
281+
paddingRight: 16,
282+
marginRight: -16,
284283
paddingLeft: 16,
284+
marginLeft: -16,
285285
},
286286
add: {
287-
height: 88,
287+
marginTop: 27,
288288
flexDirection: 'row',
289289
alignItems: 'center',
290+
},
291+
divider: {
292+
paddingBottom: 27,
290293
borderBottomColor: 'rgba(255, 255, 255, 0.1)',
291294
borderBottomWidth: 1,
292295
},

‎src/screens/Activity/ActivityDetail.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -320,7 +320,7 @@ const OnchainActivityDetail = ({
320320
<Money
321321
sats={value}
322322
unit={EBalanceUnit.fiat}
323-
size="caption13M"
323+
size="caption13Up"
324324
color="gray1"
325325
/>
326326
<View style={styles.title}>
@@ -632,7 +632,7 @@ const LightningActivityDetail = ({
632632
<Money
633633
sats={value}
634634
unit={EBalanceUnit.fiat}
635-
size="caption13M"
635+
size="caption13Up"
636636
color="gray1"
637637
/>
638638
<View style={styles.title}>

0 commit comments

Comments
 (0)