Skip to content

Commit 66fc7a4

Browse files
Jon-edgeJon-edge
committed
Adjust general styling, remove gap from missing username
1 parent d2bc26b commit 66fc7a4

File tree

2 files changed

+49
-48
lines changed

2 files changed

+49
-48
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
- changed: Add more metadata to zealot upload
1717
- changed: Token swap error demoted to red error dropdown to a toast
1818
- changed: 1 cent minimum requirement for high fee warning
19+
- changed: "Guest Account (<3 characters of loginId>)" shown in `SideMenu` if more than 1 account and logged in to a light account
20+
- changed: No account name shown in `SideMenu` if only a single light account exists on the device
1921
- changed: Properly escape newlines in Zealot changelog
2022
- fixed: Cutoff UI in `CreateWalletImportScene` when keyboard open
2123
- fixed: Unecessary eye icon in `CreateWalletImportScene` text input field

‎src/components/themed/SideMenu.tsx‎

Lines changed: 47 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -299,49 +299,48 @@ export function SideMenu(props: DrawerContentComponentProps) {
299299
<View style={styles.topPanel}>
300300
<Image style={styles.logoImage} source={theme.primaryLogo} resizeMode="contain" />
301301
{isAccountRowShown ? (
302-
<Pressable accessible={false} onPress={handleToggleDropdown} style={styles.rowContainer}>
303-
<View style={styles.rowIconContainer}>
304-
<Fontello name="control-panel-account" style={styles.icon} size={theme.rem(1.5)} color={theme.iconTappable} />
305-
</View>
306-
<View style={styles.rowBodyContainer}>
307-
<TitleText style={styles.text}>{displayUsername}</TitleText>
308-
</View>
309-
{isMultiUsers ? (
310-
<View style={styles.rowIconContainer}>
311-
<Animated.View style={aRotate}>
312-
<Feather testID="downArrow" name="chevron-down" color={theme.iconTappable} size={theme.rem(1.5)} />
313-
</Animated.View>
302+
<>
303+
<Pressable accessible={false} onPress={handleToggleDropdown} style={styles.rowContainer}>
304+
<View style={styles.leftIconContainer}>
305+
<Fontello name="control-panel-account" style={styles.icon} size={theme.rem(1.5)} color={theme.iconTappable} />
314306
</View>
315-
) : null}
316-
</Pressable>
307+
<View style={styles.rowBodyContainer}>
308+
<TitleText style={styles.text}>{displayUsername}</TitleText>
309+
</View>
310+
{isMultiUsers ? (
311+
<View style={styles.rightIconContainer}>
312+
<Animated.View style={aRotate}>
313+
<Feather testID="downArrow" name="chevron-down" color={theme.iconTappable} size={theme.rem(1.5)} />
314+
</Animated.View>
315+
</View>
316+
) : null}
317+
</Pressable>
318+
<DividerLine marginRem={[0.25, -2, 0, 1]} />
319+
</>
317320
) : null}
318-
<DividerLine marginRem={[0.25, -2, 2, 1]} />
319321
</View>
320322
)
321323

322324
const usernameDropdown = (
323-
<Animated.View style={[styles.dropContainer, aBorderBottomRightRadius, aDropdown]}>
324-
<ScrollView scrollIndicatorInsets={SCROLL_INDICATOR_INSET_FIX}>
325-
{sortedUsers.map(userInfo => (
326-
<View key={userInfo.loginId} style={styles.rowContainer}>
327-
{/* This empty container is required to align the row contents properly */}
328-
<View style={styles.rowIconContainer} />
329-
<EdgeTouchableOpacity style={styles.rowBodyContainer} onPress={handleSwitchAccount(userInfo)}>
330-
<TitleText style={styles.text}>
331-
{userInfo.username == null ? sprintf(lstrings.guest_account_id_1s, userInfo.loginId.slice(userInfo.loginId.length - 3)) : userInfo.username}
332-
</TitleText>
333-
</EdgeTouchableOpacity>
334-
<EdgeTouchableOpacity style={styles.rowIconContainer} onPress={handleDeleteAccount(userInfo)}>
335-
<MaterialIcon accessibilityHint={lstrings.close_control_panel_hint} color={theme.iconTappable} name="close" size={theme.rem(1.5)} />
336-
</EdgeTouchableOpacity>
337-
</View>
338-
))}
339-
</ScrollView>
340-
</Animated.View>
341-
)
342-
343-
const activeDropBackground = (
344325
<>
326+
<Animated.View style={[styles.dropContainer, aBorderBottomRightRadius, aDropdown]}>
327+
<ScrollView scrollIndicatorInsets={SCROLL_INDICATOR_INSET_FIX}>
328+
{sortedUsers.map(userInfo => (
329+
<View key={userInfo.loginId} style={styles.rowContainer}>
330+
{/* This empty container is required to align the row contents properly */}
331+
<View style={styles.leftIconContainer} />
332+
<EdgeTouchableOpacity style={styles.rowBodyContainer} onPress={handleSwitchAccount(userInfo)}>
333+
<TitleText style={styles.text}>
334+
{userInfo.username == null ? sprintf(lstrings.guest_account_id_1s, userInfo.loginId.slice(userInfo.loginId.length - 3)) : userInfo.username}
335+
</TitleText>
336+
</EdgeTouchableOpacity>
337+
<EdgeTouchableOpacity style={styles.rightIconContainer} onPress={handleDeleteAccount(userInfo)}>
338+
<MaterialIcon accessibilityHint={lstrings.close_control_panel_hint} color={theme.iconTappable} name="close" size={theme.rem(1.5)} />
339+
</EdgeTouchableOpacity>
340+
</View>
341+
))}
342+
</ScrollView>
343+
</Animated.View>
345344
<Animated.View style={[styles.disable, styles.invisibleTapper, aFade]} pointerEvents="none" />
346345
<Pressable style={[styles.invisibleTapper, { zIndex: isDropped ? 1 : 0 }]} onPress={handleToggleDropdown} />
347346
</>
@@ -353,7 +352,7 @@ export function SideMenu(props: DrawerContentComponentProps) {
353352
<ScrollView overScrollMode="always" scrollIndicatorInsets={SCROLL_INDICATOR_INSET_FIX}>
354353
{rowDatas.map(rowData => (
355354
<EdgeTouchableOpacity accessible={false} onPress={rowData.pressHandler} key={rowData.title} style={styles.rowContainer}>
356-
<View style={styles.rowIconContainer}>
355+
<View style={styles.leftIconContainer}>
357356
{rowData.iconName != null ? <Fontello name={rowData.iconName} style={styles.icon} size={theme.rem(1.5)} color={theme.iconTappable} /> : null}
358357
{rowData.iconNameFontAwesome != null ? (
359358
<FontAwesome5Icon name={rowData.iconNameFontAwesome} style={styles.icon} size={theme.rem(1.25)} color={theme.iconTappable} />
@@ -375,7 +374,6 @@ export function SideMenu(props: DrawerContentComponentProps) {
375374
{topPanel}
376375
<View style={styles.bottomPanel} onLayout={handleBottomPanelLayout}>
377376
{usernameDropdown}
378-
{activeDropBackground}
379377
{navigationRows}
380378
</View>
381379
<Services navigation={rootNavigation} />
@@ -421,8 +419,7 @@ const getStyles = cacheStyles((theme: Theme) => ({
421419
borderTopColor: theme.sideMenuBorderColor,
422420
borderLeftColor: theme.sideMenuBorderColor,
423421
borderTopWidth: theme.sideMenuBorderWidth,
424-
borderLeftWidth: theme.sideMenuBorderWidth,
425-
height: theme.rem(7.75)
422+
borderLeftWidth: theme.sideMenuBorderWidth
426423
},
427424
footerContainer: {
428425
position: 'absolute',
@@ -455,22 +452,25 @@ const getStyles = cacheStyles((theme: Theme) => ({
455452
justifyContent: 'flex-start',
456453
alignItems: 'center'
457454
},
458-
rowIconContainer: {
459-
display: 'flex',
455+
leftIconContainer: {
456+
justifyContent: 'center',
457+
alignItems: 'center',
458+
height: theme.rem(3),
459+
aspectRatio: 1
460+
},
461+
rightIconContainer: {
460462
justifyContent: 'center',
461463
alignItems: 'center',
462464
height: theme.rem(3),
463-
aspectRatio: 1,
464-
marginLeft: theme.rem(0.25)
465+
marginHorizontal: theme.rem(0.5)
465466
},
466467
rowBodyContainer: {
467468
display: 'flex',
468469
flexDirection: 'row',
469470
justifyContent: 'flex-start',
470471
alignItems: 'center',
471472
flexGrow: 1,
472-
flexShrink: 1,
473-
marginRight: theme.rem(1)
473+
flexShrink: 1
474474
},
475475
// Animation
476476
dropContainer: {
@@ -495,8 +495,7 @@ const getStyles = cacheStyles((theme: Theme) => ({
495495
height: theme.rem(1.5)
496496
},
497497
text: {
498-
fontFamily: theme.sideMenuFont,
499-
marginLeft: theme.rem(0.5)
498+
fontFamily: theme.sideMenuFont
500499
},
501500
invisibleTapper: {
502501
position: 'absolute',

0 commit comments

Comments
 (0)