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

Jump to bottom

feat: Change button color to black #5401

Merged
merged 10 commits into from
May 16, 2024
Merged

feat: Change button color to black #5401

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
78c4990
feat: Change button color to black
finnian0826 May 8, 2024
1cc068a
fix tests
finnian0826 May 8, 2024
4df2869
update font
finnian0826 May 9, 2024
fbeb120
remove font prop
finnian0826 May 9, 2024
2ad9b57
Merge branch 'main' into finnian0826/black-buttons
finnian0826 May 9, 2024
cf4053e
fix merge
finnian0826 May 9, 2024
c882c28
feedback
finnian0826 May 14, 2024
75e3893
Merge branch 'main' into finnian0826/black-buttons
finnian0826 May 14, 2024
1643055
kathy feedback
finnian0826 May 14, 2024
ddbe908
Merge branch 'main' into finnian0826/black-buttons
finnian0826 May 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/account/__snapshots__/AccountKeyEducation.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -555,7 +555,7 @@ exports[`AccountKeyEducation renders correctly 1`] = `
"color": "#2E3338",
"fontFamily": "Inter-SemiBold",
"fontSize": 16,
"lineHeight": 22,
"lineHeight": 24,
"marginLeft": 0,
"marginRight": 0,
}
Expand Down
6 changes: 3 additions & 3 deletions src/account/__snapshots__/Education.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,12 +241,12 @@ exports[`Education renders correctly 1`] = `
[
{
"alignItems": "center",
"backgroundColor": "#1AB775",
"backgroundColor": "#2E3338",
"flexDirection": "row",
"height": 48,
"justifyContent": "center",
"minWidth": 120,
"opacity": undefined,
"opacity": 1,
"paddingHorizontal": 24,
"paddingVertical": 5,
},
Expand All @@ -264,7 +264,7 @@ exports[`Education renders correctly 1`] = `
"color": "#FFFFFF",
"fontFamily": "Inter-SemiBold",
"fontSize": 16,
"lineHeight": 22,
"lineHeight": 24,
"marginLeft": 0,
"marginRight": 0,
}
Expand Down
2 changes: 1 addition & 1 deletion src/account/__snapshots__/GoldEducation.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -555,7 +555,7 @@ exports[`renders correctly 1`] = `
"color": "#2E3338",
"fontFamily": "Inter-SemiBold",
"fontSize": 16,
"lineHeight": 22,
"lineHeight": 24,
"marginLeft": 0,
"marginRight": 0,
}
Expand Down
6 changes: 3 additions & 3 deletions src/account/__snapshots__/Persona.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,12 +61,12 @@ exports[`Persona renders correctly 1`] = `
[
{
"alignItems": "center",
"backgroundColor": "#1AB77580",
"backgroundColor": "#2E3338",
"flexDirection": "row",
"height": 48,
"justifyContent": "center",
"minWidth": 120,
"opacity": undefined,
"opacity": 0.25,
"paddingHorizontal": 24,
"paddingVertical": 5,
},
Expand All @@ -82,7 +82,7 @@ exports[`Persona renders correctly 1`] = `
"color": "#FFFFFF",
"fontFamily": "Inter-SemiBold",
"fontSize": 16,
"lineHeight": 22,
"lineHeight": 24,
"marginLeft": 0,
"marginRight": 0,
}
Expand Down
6 changes: 3 additions & 3 deletions src/account/__snapshots__/Profile.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -308,12 +308,12 @@ exports[`Profile renders correctly 1`] = `
[
{
"alignItems": "center",
"backgroundColor": "#1AB775",
"backgroundColor": "#2E3338",
"flexDirection": "row",
"height": 48,
"justifyContent": "center",
"minWidth": 120,
"opacity": undefined,
"opacity": 1,
"paddingHorizontal": 24,
"paddingVertical": 5,
},
Expand All @@ -329,7 +329,7 @@ exports[`Profile renders correctly 1`] = `
"color": "#FFFFFF",
"fontFamily": "Inter-SemiBold",
"fontSize": 16,
"lineHeight": 22,
"lineHeight": 24,
"marginLeft": 0,
"marginRight": 0,
}
Expand Down
2 changes: 0 additions & 2 deletions src/app/MultichainBeta.tsx
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we still need this file? I suppose it's outside of the scope of the ticket to delete.

Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ function MultichainBeta() {
<View style={styles.ctaContainer}>
<Button
style={styles.cta}
fontStyle={typeScale.labelSemiBoldMedium}
touchableStyle={styles.ctaTouchable}
size={BtnSizes.FULL}
text={t('multichainBeta.primaryCta')}
Expand All @@ -64,7 +63,6 @@ function MultichainBeta() {
/>
<Button
style={styles.cta}
fontStyle={typeScale.labelSemiBoldMedium}
touchableStyle={styles.ctaTouchable}
type={BtnTypes.SECONDARY_WHITE_BG}
size={BtnSizes.FULL}
Expand Down
6 changes: 3 additions & 3 deletions src/app/__snapshots__/Debug.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,12 +147,12 @@ exports[`Debug renders correctly 1`] = `
[
{
"alignItems": "center",
"backgroundColor": "#1AB775",
"backgroundColor": "#2E3338",
"flexDirection": "row",
"height": 48,
"justifyContent": "center",
"minWidth": 120,
"opacity": undefined,
"opacity": 1,
"paddingHorizontal": 24,
"paddingVertical": 5,
},
Expand All @@ -167,7 +167,7 @@ exports[`Debug renders correctly 1`] = `
"color": "#FFFFFF",
"fontFamily": "Inter-SemiBold",
"fontSize": 16,
"lineHeight": 22,
"lineHeight": 24,
"marginLeft": 0,
"marginRight": 0,
}
Expand Down
12 changes: 6 additions & 6 deletions src/app/__snapshots__/ErrorScreen.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,12 +143,12 @@ exports[`ErrorScreen with errorMessage renders correctly 1`] = `
[
{
"alignItems": "center",
"backgroundColor": "#1AB775",
"backgroundColor": "#2E3338",
"flexDirection": "row",
"height": 48,
"justifyContent": "center",
"minWidth": 120,
"opacity": undefined,
"opacity": 1,
"paddingHorizontal": 24,
"paddingVertical": 5,
},
Expand All @@ -164,7 +164,7 @@ exports[`ErrorScreen with errorMessage renders correctly 1`] = `
"color": "#FFFFFF",
"fontFamily": "Inter-SemiBold",
"fontSize": 16,
"lineHeight": 22,
"lineHeight": 24,
"marginLeft": 0,
"marginRight": 0,
}
Expand Down Expand Up @@ -322,12 +322,12 @@ exports[`ErrorScreen without errorMessage renders correctly 1`] = `
[
{
"alignItems": "center",
"backgroundColor": "#1AB775",
"backgroundColor": "#2E3338",
"flexDirection": "row",
"height": 48,
"justifyContent": "center",
"minWidth": 120,
"opacity": undefined,
"opacity": 1,
"paddingHorizontal": 24,
"paddingVertical": 5,
},
Expand All @@ -343,7 +343,7 @@ exports[`ErrorScreen without errorMessage renders correctly 1`] = `
"color": "#FFFFFF",
"fontFamily": "Inter-SemiBold",
"fontSize": 16,
"lineHeight": 22,
"lineHeight": 24,
"marginLeft": 0,
"marginRight": 0,
}
Expand Down
2 changes: 1 addition & 1 deletion src/backup/__snapshots__/BackupPhrase.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -682,7 +682,7 @@ exports[`BackupPhrase renders correctly with backup not completed 1`] = `
"color": "#666666",
"fontFamily": "Inter-SemiBold",
"fontSize": 16,
"lineHeight": 22,
"lineHeight": 24,
"marginLeft": 0,
"marginRight": 0,
}
Expand Down
23 changes: 9 additions & 14 deletions src/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,9 @@
import { debounce } from 'lodash'
import React, { ReactNode, useCallback } from 'react'
import {
ActivityIndicator,
StyleProp,
StyleSheet,
Text,
TextStyle,
View,
ViewStyle,
} from 'react-native'
import { ActivityIndicator, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
import Touchable from 'src/components/Touchable'
import colors, { Colors } from 'src/styles/colors'
import fontStyles from 'src/styles/fonts'
import { typeScale } from 'src/styles/fonts'
import { vibrateInformative } from 'src/styles/hapticFeedback'

const BUTTON_TAP_DEBOUNCE_TIME = 300 // milliseconds
Expand Down Expand Up @@ -51,7 +43,6 @@ export interface ButtonProps {
testID?: string
touchableStyle?: StyleProp<ViewStyle>
iconMargin?: number
fontStyle?: TextStyle
}

export default React.memo(function Button(props: ButtonProps) {
Expand All @@ -70,7 +61,6 @@ export default React.memo(function Button(props: ButtonProps) {
loadingColor,
touchableStyle,
iconMargin = 4,
fontStyle = fontStyles.regular600,
} = props

// Debounce onPress event so that it is called once on trigger and
Expand Down Expand Up @@ -117,7 +107,7 @@ export default React.memo(function Button(props: ButtonProps) {
maxFontSizeMultiplier={1}
accessibilityLabel={accessibilityLabel}
style={{
...fontStyle, // this has to be before color because the legacy font styles default to colors.dark, which will end up overriding the button type based colors
...styles.fontStyle, // this has to be before color because the legacy font styles default to colors.dark, which will end up overriding the button type based colors
color: textColor,
marginLeft: icon && iconPositionLeft ? iconMargin : 0,
marginRight: icon && !iconPositionLeft ? iconMargin : 0,
Expand Down Expand Up @@ -159,6 +149,9 @@ const styles = StyleSheet.create({
height: 48,
flexGrow: 1,
},
fontStyle: {
...typeScale.labelSemiBoldMedium,
},
})

function getColors(type: BtnTypes, disabled: boolean | undefined) {
Expand All @@ -169,7 +162,8 @@ function getColors(type: BtnTypes, disabled: boolean | undefined) {
switch (type) {
case BtnTypes.PRIMARY:
textColor = colors.white
backgroundColor = disabled ? colors.primaryDisabled : colors.primary
backgroundColor = colors.black
opacity = disabled ? 0.25 : 1.0
break
case BtnTypes.SECONDARY:
textColor = disabled ? colors.gray4 : colors.black
Expand All @@ -193,6 +187,7 @@ function getColors(type: BtnTypes, disabled: boolean | undefined) {
textColor = colors.black
backgroundColor = colors.gray1
borderColor = colors.gray2
opacity = disabled ? 0.5 : 1.0
break
}

Expand Down
8 changes: 4 additions & 4 deletions src/components/__snapshots__/Button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ exports[`Button when type is SECONDARY renders 1`] = `
"color": "#2E3338",
"fontFamily": "Inter-SemiBold",
"fontSize": 16,
"lineHeight": 22,
"lineHeight": 24,
"marginLeft": 0,
"marginRight": 0,
}
Expand Down Expand Up @@ -155,12 +155,12 @@ exports[`Button when type not given defaults to primary 1`] = `
[
{
"alignItems": "center",
"backgroundColor": "#1AB775",
"backgroundColor": "#2E3338",
"flexDirection": "row",
"height": 48,
"justifyContent": "center",
"minWidth": 120,
"opacity": undefined,
"opacity": 1,
"paddingHorizontal": 24,
"paddingVertical": 5,
},
Expand All @@ -175,7 +175,7 @@ exports[`Button when type not given defaults to primary 1`] = `
"color": "#FFFFFF",
"fontFamily": "Inter-SemiBold",
"fontSize": 16,
"lineHeight": 22,
"lineHeight": 24,
"marginLeft": 0,
"marginRight": 0,
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/__snapshots__/FullscreenCTA.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,12 +143,12 @@ exports[`FullscreenCTA renders correctly 1`] = `
[
{
"alignItems": "center",
"backgroundColor": "#1AB775",
"backgroundColor": "#2E3338",
"flexDirection": "row",
"height": 48,
"justifyContent": "center",
"minWidth": 120,
"opacity": undefined,
"opacity": 1,
"paddingHorizontal": 24,
"paddingVertical": 5,
},
Expand All @@ -164,7 +164,7 @@ exports[`FullscreenCTA renders correctly 1`] = `
"color": "#FFFFFF",
"fontFamily": "Inter-SemiBold",
"fontSize": 16,
"lineHeight": 22,
"lineHeight": 24,
"marginLeft": 0,
"marginRight": 0,
}
Expand Down
12 changes: 6 additions & 6 deletions src/fiatExchanges/__snapshots__/CashInSuccess.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,12 +135,12 @@ exports[`CashinInSuccess renders correctly with a provider 1`] = `
[
{
"alignItems": "center",
"backgroundColor": "#1AB775",
"backgroundColor": "#2E3338",
"flexDirection": "row",
"height": 48,
"justifyContent": "center",
"minWidth": 120,
"opacity": undefined,
"opacity": 1,
"paddingHorizontal": 24,
"paddingVertical": 5,
},
Expand All @@ -157,7 +157,7 @@ exports[`CashinInSuccess renders correctly with a provider 1`] = `
"color": "#FFFFFF",
"fontFamily": "Inter-SemiBold",
"fontSize": 16,
"lineHeight": 22,
"lineHeight": 24,
"marginLeft": 0,
"marginRight": 0,
}
Expand Down Expand Up @@ -307,12 +307,12 @@ exports[`CashinInSuccess renders correctly without a provider 1`] = `
[
{
"alignItems": "center",
"backgroundColor": "#1AB775",
"backgroundColor": "#2E3338",
"flexDirection": "row",
"height": 48,
"justifyContent": "center",
"minWidth": 120,
"opacity": undefined,
"opacity": 1,
"paddingHorizontal": 24,
"paddingVertical": 5,
},
Expand All @@ -329,7 +329,7 @@ exports[`CashinInSuccess renders correctly without a provider 1`] = `
"color": "#FFFFFF",
"fontFamily": "Inter-SemiBold",
"fontSize": 16,
"lineHeight": 22,
"lineHeight": 24,
"marginLeft": 0,
"marginRight": 0,
}
Expand Down