Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: align tab styles in new scan screen #1033

Merged
merged 1 commit into from
Nov 24, 2023
Merged

fix: align tab styles in new scan screen #1033

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 2 additions & 5 deletions packages/legacy/core/App/components/misc/NewQRView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const NewQRView: React.FC<Props> = ({ defaultToConnect, handleCodeScan, error, e
const [recordId, setRecordId] = useState<string | undefined>(undefined)
const { t } = useTranslation()
const invalidQrCodes = new Set<string>()
const { ColorPallet, TextTheme } = useTheme()
const { ColorPallet, TextTheme, TabTheme } = useTheme()
const { agent } = useAgent()
const styles = StyleSheet.create({
container: {
Expand Down Expand Up @@ -84,10 +84,7 @@ const NewQRView: React.FC<Props> = ({ defaultToConnect, handleCodeScan, error, e
},
tabContainer: {
flexDirection: 'row',
flexShrink: 1,
width: '100%',
borderTopWidth: 4,
borderTopColor: ColorPallet.brand.primaryBackground,
...TabTheme.tabBarStyle,
},
qrContainer: {
marginTop: 10,
Expand Down
28 changes: 13 additions & 15 deletions packages/legacy/core/App/components/misc/ScanTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,30 @@
import React from 'react'
import { StyleSheet, Text, TouchableOpacity } from 'react-native'
import { StyleSheet, Text, TouchableOpacity, useWindowDimensions } from 'react-native'
import Icon from 'react-native-vector-icons/MaterialIcons'

import { useTheme } from '../../contexts/theme'
import { testIdWithKey } from '../../utils/testable'

interface Props {
interface ScanTabProps {
onPress: () => void
active: boolean
iconName: string
title: string
}

const ScanTab: React.FC<Props> = ({ onPress, active, iconName, title }) => {
const { ColorPallet, TextTheme } = useTheme()
const ScanTab: React.FC<ScanTabProps> = ({ onPress, active, iconName, title }) => {
const { TabTheme } = useTheme()
const { fontScale } = useWindowDimensions()
const showLabels = fontScale * TabTheme.tabBarTextStyle.fontSize < 18

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: ColorPallet.grayscale.white,
justifyContent: 'center',
alignItems: 'center',
padding: 10,
...TabTheme.tabBarContainerStyle,
},
text: {
...TextTheme.normal,
},
textActive: {
color: ColorPallet.brand.primary,
...TabTheme.tabBarTextStyle,
color: active ? TabTheme.tabBarActiveTintColor : TabTheme.tabBarInactiveTintColor,
fontWeight: active ? 'bold' : 'normal',
},
})
return (
Expand All @@ -36,8 +34,8 @@ const ScanTab: React.FC<Props> = ({ onPress, active, iconName, title }) => {
accessibilityLabel={title}
testID={testIdWithKey(title)}
>
<Icon name={iconName} size={20} color={active ? styles.textActive.color : styles.text.color}></Icon>
<Text style={[styles.text, active && styles.textActive]}>{title}</Text>
<Icon name={iconName} size={30} color={styles.text.color}></Icon>
{showLabels ? <Text style={styles.text}>{title}</Text> : null}
</TouchableOpacity>
)
}
Expand Down
3 changes: 1 addition & 2 deletions packages/legacy/core/App/navigators/TabStack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,13 @@
import HomeStack from './HomeStack'

const TabStack: React.FC = () => {
const { width, height } = useWindowDimensions()
const { width, height, fontScale } = useWindowDimensions()

Check warning on line 21 in packages/legacy/core/App/navigators/TabStack.tsx

View check run for this annotation

Codecov / codecov/patch

packages/legacy/core/App/navigators/TabStack.tsx#L21 

Added line #L21 was not covered by tests
const { useCustomNotifications, enableReuseConnections, enableImplicitInvitations } = useConfiguration()
const { total } = useCustomNotifications()
const { t } = useTranslation()
const Tab = createBottomTabNavigator<TabStackParams>()
const { assertConnectedNetwork } = useNetwork()
const { ColorPallet, TabTheme } = useTheme()
const { fontScale } = useWindowDimensions()
const showLabels = fontScale * TabTheme.tabBarTextStyle.fontSize < 18
const styles = StyleSheet.create({
tabBarIcon: {
Expand Down
106 changes: 26 additions & 80 deletions packages/legacy/core/__tests__/components/__snapshots__/NewQRView.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,18 @@ exports[`NewQRView Component Renders correctly on first tab 1`] = `
<View
style={
Object {
"borderTopColor": "#000000",
"borderTopWidth": 4,
"backgroundColor": "#313132",
"borderTopWidth": 0,
"flexDirection": "row",
"flexShrink": 1,
"width": "100%",
"height": 60,
"paddingBottom": 0,
"shadowColor": "#000000",
"shadowOffset": Object {
"height": -3,
"width": 0,
},
"shadowOpacity": 0.1,
"shadowRadius": 6,
}
}
>
Expand Down Expand Up @@ -59,11 +66,9 @@ exports[`NewQRView Component Renders correctly on first tab 1`] = `
style={
Object {
"alignItems": "center",
"backgroundColor": "#FFFFFF",
"flex": 1,
"justifyContent": "center",
"opacity": 1,
"padding": 10,
}
}
testID="com.ariesbifold:id/Scan.ScanQRCode"
Expand All @@ -75,7 +80,7 @@ exports[`NewQRView Component Renders correctly on first tab 1`] = `
Array [
Object {
"color": "#42803E",
"fontSize": 20,
"fontSize": 30,
},
undefined,
Object {
Expand All @@ -89,22 +94,6 @@ exports[`NewQRView Component Renders correctly on first tab 1`] = `
>
</Text>
<Text
style={
Array [
Object {
"color": "#FFFFFF",
"fontSize": 18,
"fontWeight": "normal",
},
Object {
"color": "#42803E",
},
]
}
>
Scan.ScanQRCode
</Text>
</View>
<View
accessibilityLabel="Scan.MyQRCode"
Expand Down Expand Up @@ -138,11 +127,9 @@ exports[`NewQRView Component Renders correctly on first tab 1`] = `
style={
Object {
"alignItems": "center",
"backgroundColor": "#FFFFFF",
"flex": 1,
"justifyContent": "center",
"opacity": 1,
"padding": 10,
}
}
testID="com.ariesbifold:id/Scan.MyQRCode"
Expand All @@ -154,7 +141,7 @@ exports[`NewQRView Component Renders correctly on first tab 1`] = `
Array [
Object {
"color": "#FFFFFF",
"fontSize": 20,
"fontSize": 30,
},
undefined,
Object {
Expand All @@ -168,20 +155,6 @@ exports[`NewQRView Component Renders correctly on first tab 1`] = `
>
</Text>
<Text
style={
Array [
Object {
"color": "#FFFFFF",
"fontSize": 18,
"fontWeight": "normal",
},
false,
]
}
>
Scan.MyQRCode
</Text>
</View>
</View>
</RNCSafeAreaView>
Expand Down Expand Up @@ -369,11 +342,18 @@ exports[`NewQRView Component Renders correctly on second tab 1`] = `
<View
style={
Object {
"borderTopColor": "#000000",
"borderTopWidth": 4,
"backgroundColor": "#313132",
"borderTopWidth": 0,
"flexDirection": "row",
"flexShrink": 1,
"width": "100%",
"height": 60,
"paddingBottom": 0,
"shadowColor": "#000000",
"shadowOffset": Object {
"height": -3,
"width": 0,
},
"shadowOpacity": 0.1,
"shadowRadius": 6,
}
}
>
Expand Down Expand Up @@ -409,11 +389,9 @@ exports[`NewQRView Component Renders correctly on second tab 1`] = `
style={
Object {
"alignItems": "center",
"backgroundColor": "#FFFFFF",
"flex": 1,
"justifyContent": "center",
"opacity": 1,
"padding": 10,
}
}
testID="com.ariesbifold:id/Scan.ScanQRCode"
Expand All @@ -425,7 +403,7 @@ exports[`NewQRView Component Renders correctly on second tab 1`] = `
Array [
Object {
"color": "#FFFFFF",
"fontSize": 20,
"fontSize": 30,
},
undefined,
Object {
Expand All @@ -439,20 +417,6 @@ exports[`NewQRView Component Renders correctly on second tab 1`] = `
>
</Text>
<Text
style={
Array [
Object {
"color": "#FFFFFF",
"fontSize": 18,
"fontWeight": "normal",
},
false,
]
}
>
Scan.ScanQRCode
</Text>
</View>
<View
accessibilityLabel="Scan.MyQRCode"
Expand Down Expand Up @@ -486,11 +450,9 @@ exports[`NewQRView Component Renders correctly on second tab 1`] = `
style={
Object {
"alignItems": "center",
"backgroundColor": "#FFFFFF",
"flex": 1,
"justifyContent": "center",
"opacity": 1,
"padding": 10,
}
}
testID="com.ariesbifold:id/Scan.MyQRCode"
Expand All @@ -502,7 +464,7 @@ exports[`NewQRView Component Renders correctly on second tab 1`] = `
Array [
Object {
"color": "#42803E",
"fontSize": 20,
"fontSize": 30,
},
undefined,
Object {
Expand All @@ -516,22 +478,6 @@ exports[`NewQRView Component Renders correctly on second tab 1`] = `
>
</Text>
<Text
style={
Array [
Object {
"color": "#FFFFFF",
"fontSize": 18,
"fontWeight": "normal",
},
Object {
"color": "#42803E",
},
]
}
>
Scan.MyQRCode
</Text>
</View>
</View>
</RNCSafeAreaView>
Expand Down
20 changes: 1 addition & 19 deletions packages/legacy/core/__tests__/components/__snapshots__/ScanTab.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,9 @@ exports[`ScanTab Renders correctly 1`] = `
style={
Object {
"alignItems": "center",
"backgroundColor": "#FFFFFF",
"flex": 1,
"justifyContent": "center",
"opacity": 1,
"padding": 10,
}
}
testID="com.ariesbifold:id/title"
Expand All @@ -49,7 +47,7 @@ exports[`ScanTab Renders correctly 1`] = `
Array [
Object {
"color": "#42803E",
"fontSize": 20,
"fontSize": 30,
},
undefined,
Object {
Expand All @@ -63,21 +61,5 @@ exports[`ScanTab Renders correctly 1`] = `
>
</Text>
<Text
style={
Array [
Object {
"color": "#FFFFFF",
"fontSize": 18,
"fontWeight": "normal",
},
Object {
"color": "#42803E",
},
]
}
>
title
</Text>
</View>
`;