Skip to content

Commit 140d2dd

Browse files
brianacnguyenbrianacnguyen
authored
feat: Update button shape to rounded rectangular (#14540)
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **Description** This PR updates the border radius of `ButtonBase` and affected component to `12px` for Brand Evolution. https://www.figma.com/file/ToIjJTBVgkaUEubb7dux9k?node-id=33685:26169&locale=en&type=design#1208645957 <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> ## **Related issues** Fixes: #14451 ## **Manual testing steps** 1. Check everywhere please 2. 3. ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **After** https://github.com/user-attachments/assets/bab29288-001e-4865-86ea-7204c9dfa051 <!-- [screenshots/recordings] --> ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
1 parent fa630e5 commit 140d2dd

File tree

91 files changed

+210
-196
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

91 files changed

+210
-196
lines changed

‎app/component-library/components-temp/Buttons/ButtonToggle/ButtonToggle.styles.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const styleSheet = (params: {
2020
}) => {
2121
const { vars, theme } = params;
2222
const { colors } = theme;
23-
const { style, isActive } = vars;
23+
const { style, isActive, size } = vars;
2424
const colorObj = colors.primary;
2525

2626
return StyleSheet.create({
@@ -29,6 +29,7 @@ const styleSheet = (params: {
2929
backgroundColor: isActive ? colorObj.muted : 'transparent',
3030
borderWidth: 1,
3131
borderColor: isActive ? colorObj.default : colors.border.default,
32+
borderRadius: Number(size) / 2,
3233
} as ViewStyle,
3334
style,
3435
) as ViewStyle,

‎app/component-library/components-temp/Buttons/ButtonToggle/ButtonToggle.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import React from 'react';
77
import { useStyles } from '../../../hooks';
88
import Button from '../../../components/Buttons/Button/foundation/ButtonBase';
99
import Text from '../../../components/Texts/Text/Text';
10+
import { ButtonSize } from '../../../components/Buttons/Button';
1011

1112
// Internal dependencies.
1213
import { ButtonToggleProps } from './ButtonToggle.types';
@@ -20,12 +21,14 @@ import {
2021
const ButtonToggle = ({
2122
style,
2223
isActive = false,
24+
size = ButtonSize.Md,
2325
label,
2426
...props
2527
}: ButtonToggleProps) => {
2628
const { styles } = useStyles(styleSheet, {
2729
style,
2830
isActive,
31+
size,
2932
});
3033

3134
const getLabelColor = () =>

‎app/component-library/components-temp/Buttons/ButtonToggle/ButtonToggle.types.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// External dependencies.
22
import { ButtonBaseProps } from '../../../components/Buttons/Button/foundation/ButtonBase';
3+
import { ButtonSize } from '../../../components/Buttons/Button';
34

45
/**
56
* ButtonToggle component props.
@@ -16,4 +17,5 @@ export type ButtonToggleProps = Omit<ButtonBaseProps, 'labelColor'> & {
1617
*/
1718
export type ButtonToggleStyleSheetVars = Pick<ButtonToggleProps, 'style'> & {
1819
isActive: boolean;
20+
size: ButtonSize;
1921
};

‎app/component-library/components/BottomSheets/BottomSheetFooter/__snapshots__/BottomSheetFooter.test.tsx.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ exports[`BottomSheetFooter should render snapshot correctly 1`] = `
2525
"alignSelf": "flex-start",
2626
"backgroundColor": "transparent",
2727
"borderColor": "#4459ff",
28-
"borderRadius": 20,
28+
"borderRadius": 12,
2929
"borderWidth": 1,
3030
"flex": 1,
3131
"flexDirection": "row",
@@ -64,7 +64,7 @@ exports[`BottomSheetFooter should render snapshot correctly 1`] = `
6464
"alignItems": "center",
6565
"alignSelf": "flex-start",
6666
"backgroundColor": "#4459ff",
67-
"borderRadius": 20,
67+
"borderRadius": 12,
6868
"flex": 1,
6969
"flexDirection": "row",
7070
"height": 40,

‎app/component-library/components/Buttons/Button/foundation/ButtonBase/ButtonBase.styles.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const styleSheet = (params: {
4242
height: isAutoSize ? size : Number(size),
4343
alignItems: 'center',
4444
justifyContent: 'center',
45-
borderRadius: isAutoSize ? 0 : Number(size) / 2,
45+
borderRadius: isAutoSize ? 0 : 12,
4646
paddingHorizontal: isAutoSize ? 0 : 16,
4747
...(isDisabled && { opacity: 0.5 }),
4848
...widthObject,

‎app/component-library/components/Buttons/Button/foundation/ButtonBase/__snapshots__/ButtonBase.test.tsx.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ exports[`ButtonBase should render correctly 1`] = `
1111
"alignItems": "center",
1212
"alignSelf": "flex-start",
1313
"backgroundColor": "#f3f5f9",
14-
"borderRadius": 20,
14+
"borderRadius": 12,
1515
"flexDirection": "row",
1616
"height": 40,
1717
"justifyContent": "center",
@@ -55,7 +55,7 @@ exports[`ButtonBase should render correctly when disabled 1`] = `
5555
"alignItems": "center",
5656
"alignSelf": "flex-start",
5757
"backgroundColor": "#f3f5f9",
58-
"borderRadius": 20,
58+
"borderRadius": 12,
5959
"flexDirection": "row",
6060
"height": 40,
6161
"justifyContent": "center",

‎app/component-library/components/Buttons/Button/variants/ButtonPrimary/__snapshots__/ButtonPrimary.test.tsx.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ exports[`ButtonPrimary render matches latest snapshot 1`] = `
1414
"alignItems": "center",
1515
"alignSelf": "flex-start",
1616
"backgroundColor": "#4459ff",
17-
"borderRadius": 20,
17+
"borderRadius": 12,
1818
"flexDirection": "row",
1919
"height": 40,
2020
"justifyContent": "center",

‎app/component-library/components/Buttons/Button/variants/ButtonSecondary/__snapshots__/ButtonSecondary.test.tsx.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ exports[`ButtonSecondary should render correctly 1`] = `
1414
"alignSelf": "flex-start",
1515
"backgroundColor": "transparent",
1616
"borderColor": "#4459ff",
17-
"borderRadius": 20,
17+
"borderRadius": 12,
1818
"borderWidth": 1,
1919
"flexDirection": "row",
2020
"height": 40,

‎app/components/Snaps/SnapUIRenderer/__snapshots__/SnapUIRenderer.test.ts.snap

+7-7
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ exports[`SnapUIRenderer adds a footer if required 1`] = `
121121
"alignSelf": "flex-start",
122122
"backgroundColor": "transparent",
123123
"borderColor": "#4459ff",
124-
"borderRadius": 24,
124+
"borderRadius": 12,
125125
"borderWidth": 1,
126126
"flex": 1,
127127
"flexDirection": "row",
@@ -1143,7 +1143,7 @@ exports[`SnapUIRenderer renders complex nested components 1`] = `
11431143
"alignSelf": "flex-start",
11441144
"backgroundColor": "transparent",
11451145
"borderColor": "#4459ff",
1146-
"borderRadius": 24,
1146+
"borderRadius": 12,
11471147
"borderWidth": 1,
11481148
"flex": 1,
11491149
"flexDirection": "row",
@@ -1182,7 +1182,7 @@ exports[`SnapUIRenderer renders complex nested components 1`] = `
11821182
"alignItems": "center",
11831183
"alignSelf": "flex-start",
11841184
"backgroundColor": "#121314",
1185-
"borderRadius": 24,
1185+
"borderRadius": 12,
11861186
"flex": 1,
11871187
"flexDirection": "row",
11881188
"height": 48,
@@ -1392,7 +1392,7 @@ exports[`SnapUIRenderer renders footers 1`] = `
13921392
"alignSelf": "flex-start",
13931393
"backgroundColor": "transparent",
13941394
"borderColor": "#4459ff",
1395-
"borderRadius": 24,
1395+
"borderRadius": 12,
13961396
"borderWidth": 1,
13971397
"flex": 1,
13981398
"flexDirection": "row",
@@ -1431,7 +1431,7 @@ exports[`SnapUIRenderer renders footers 1`] = `
14311431
"alignItems": "center",
14321432
"alignSelf": "flex-start",
14331433
"backgroundColor": "#121314",
1434-
"borderRadius": 24,
1434+
"borderRadius": 12,
14351435
"flex": 1,
14361436
"flexDirection": "row",
14371437
"height": 48,
@@ -2051,7 +2051,7 @@ exports[`SnapUIRenderer supports the onCancel prop 1`] = `
20512051
"alignSelf": "flex-start",
20522052
"backgroundColor": "transparent",
20532053
"borderColor": "#4459ff",
2054-
"borderRadius": 24,
2054+
"borderRadius": 12,
20552055
"borderWidth": 1,
20562056
"flex": 1,
20572057
"flexDirection": "row",
@@ -2090,7 +2090,7 @@ exports[`SnapUIRenderer supports the onCancel prop 1`] = `
20902090
"alignItems": "center",
20912091
"alignSelf": "flex-start",
20922092
"backgroundColor": "#121314",
2093-
"borderRadius": 24,
2093+
"borderRadius": 12,
20942094
"flex": 1,
20952095
"flexDirection": "row",
20962096
"height": 48,

‎app/components/UI/AddCustomToken/__snapshots__/index.test.tsx.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,7 @@ exports[`AddCustomToken render correctly 1`] = `
287287
"alignItems": "center",
288288
"alignSelf": "center",
289289
"backgroundColor": "#4459ff",
290-
"borderRadius": 24,
290+
"borderRadius": 12,
291291
"color": "#4459ff",
292292
"flexDirection": "row",
293293
"fontFamily": "CentraNo1-Book",

‎app/components/UI/BasicFunctionality/BasicFunctionalityModal/__snapshots__/BasicFunctionalityModal.test.js.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -327,7 +327,7 @@ exports[`BasicFunctionalityModal should render correctly 1`] = `
327327
"alignSelf": "flex-start",
328328
"backgroundColor": "transparent",
329329
"borderColor": "#4459ff",
330-
"borderRadius": 24,
330+
"borderRadius": 12,
331331
"borderWidth": 1,
332332
"flex": 1,
333333
"flexDirection": "row",
@@ -373,7 +373,7 @@ exports[`BasicFunctionalityModal should render correctly 1`] = `
373373
"alignItems": "center",
374374
"alignSelf": "flex-start",
375375
"backgroundColor": "#ca3542",
376-
"borderRadius": 24,
376+
"borderRadius": 12,
377377
"flex": 1,
378378
"flexDirection": "row",
379379
"height": 48,

‎app/components/UI/Bridge/Views/BridgeView/__snapshots__/BridgeView.test.tsx.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -825,7 +825,7 @@ exports[`BridgeView Bottom Content blurs input when opening QuoteExpiredModal 1`
825825
"alignItems": "center",
826826
"alignSelf": "flex-start",
827827
"backgroundColor": "#4459ff",
828-
"borderRadius": 20,
828+
"borderRadius": 12,
829829
"flexDirection": "row",
830830
"height": 40,
831831
"justifyContent": "center",
@@ -1772,7 +1772,7 @@ exports[`BridgeView renders 1`] = `
17721772
"alignItems": "center",
17731773
"alignSelf": "flex-start",
17741774
"backgroundColor": "#4459ff",
1775-
"borderRadius": 20,
1775+
"borderRadius": 12,
17761776
"flexDirection": "row",
17771777
"height": 40,
17781778
"justifyContent": "center",

‎app/components/UI/Bridge/components/BridgeDestTokenSelector/__snapshots__/BridgeDestTokenSelector.test.tsx.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -593,7 +593,7 @@ exports[`BridgeDestTokenSelector renders with initial state and displays tokens
593593
"alignSelf": "flex-start",
594594
"backgroundColor": "transparent",
595595
"borderColor": "#b7bbc866",
596-
"borderRadius": 20,
596+
"borderRadius": 12,
597597
"borderWidth": 1,
598598
"flexDirection": "row",
599599
"height": 40,
@@ -645,7 +645,7 @@ exports[`BridgeDestTokenSelector renders with initial state and displays tokens
645645
"alignSelf": "flex-start",
646646
"backgroundColor": "transparent",
647647
"borderColor": "#b7bbc866",
648-
"borderRadius": 20,
648+
"borderRadius": 12,
649649
"borderWidth": 1,
650650
"flexDirection": "row",
651651
"height": 40,

‎app/components/UI/Bridge/components/BridgeSourceNetworkSelector/__snapshots__/BridgeSourceNetworkSelector.test.tsx.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -1028,7 +1028,7 @@ exports[`BridgeSourceNetworkSelector renders with initial state and displays net
10281028
"alignSelf": "stretch",
10291029
"backgroundColor": "transparent",
10301030
"borderColor": "#4459ff",
1031-
"borderRadius": 20,
1031+
"borderRadius": 12,
10321032
"borderWidth": 1,
10331033
"flexDirection": "row",
10341034
"height": 40,

‎app/components/UI/Bridge/components/BridgeSourceTokenSelector/__snapshots__/BridgeSourceTokenSelector.test.tsx.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -572,7 +572,7 @@ exports[`BridgeSourceTokenSelector renders with initial state and displays token
572572
"alignSelf": "flex-start",
573573
"backgroundColor": "transparent",
574574
"borderColor": "#b7bbc866",
575-
"borderRadius": 20,
575+
"borderRadius": 12,
576576
"borderWidth": 1,
577577
"flexDirection": "row",
578578
"height": 40,

‎app/components/UI/Bridge/components/QuoteExpiredModal/__snapshots__/QuoteExpiredModal.test.tsx.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@ exports[`QuoteExpiredModal renders correctly 1`] = `
266266
"alignItems": "center",
267267
"alignSelf": "flex-start",
268268
"backgroundColor": "#4459ff",
269-
"borderRadius": 24,
269+
"borderRadius": 12,
270270
"flex": 1,
271271
"flexDirection": "row",
272272
"height": 48,

‎app/components/UI/Bridge/components/SlippageModal/__snapshots__/SlippageModal.test.tsx.snap

+5-5
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,7 @@ exports[`SlippageModal renders all UI elements with the proper slippage options
290290
"borderRadius": 16,
291291
"borderWidth": 1,
292292
"flexDirection": "row",
293-
"height": 32,
293+
"height": 40,
294294
"justifyContent": "center",
295295
"paddingHorizontal": 16,
296296
}
@@ -338,7 +338,7 @@ exports[`SlippageModal renders all UI elements with the proper slippage options
338338
"borderRadius": 16,
339339
"borderWidth": 1,
340340
"flexDirection": "row",
341-
"height": 32,
341+
"height": 40,
342342
"justifyContent": "center",
343343
"paddingHorizontal": 16,
344344
}
@@ -386,7 +386,7 @@ exports[`SlippageModal renders all UI elements with the proper slippage options
386386
"borderRadius": 16,
387387
"borderWidth": 1,
388388
"flexDirection": "row",
389-
"height": 32,
389+
"height": 40,
390390
"justifyContent": "center",
391391
"paddingHorizontal": 16,
392392
}
@@ -434,7 +434,7 @@ exports[`SlippageModal renders all UI elements with the proper slippage options
434434
"borderRadius": 16,
435435
"borderWidth": 1,
436436
"flexDirection": "row",
437-
"height": 32,
437+
"height": 40,
438438
"justifyContent": "center",
439439
"paddingHorizontal": 16,
440440
}
@@ -484,7 +484,7 @@ exports[`SlippageModal renders all UI elements with the proper slippage options
484484
"alignSelf": "flex-start",
485485
"backgroundColor": "transparent",
486486
"borderColor": "#4459ff",
487-
"borderRadius": 24,
487+
"borderRadius": 12,
488488
"borderWidth": 1,
489489
"flex": 1,
490490
"flexDirection": "row",

‎app/components/UI/CollectibleContracts/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ const createStyles = (colors) =>
9696
marginRight: 5,
9797
maxWidth: '60%',
9898
opacity: 0.5,
99+
borderRadius: 20,
99100
},
100101
controlButton: {
101102
backgroundColor: colors.background.default,
@@ -105,6 +106,7 @@ const createStyles = (colors) =>
105106
marginLeft: 5,
106107
marginRight: 5,
107108
maxWidth: '60%',
109+
borderRadius: 20,
108110
},
109111
emptyView: {
110112
justifyContent: 'center',

‎app/components/UI/CollectibleModal/__snapshots__/CollectibleModal.test.tsx.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ exports[`CollectibleModal should render correctly 1`] = `
203203
"alignItems": "center",
204204
"alignSelf": "center",
205205
"backgroundColor": "transparent",
206-
"borderRadius": 24,
206+
"borderRadius": 12,
207207
"flexDirection": "row",
208208
"height": 48,
209209
"justifyContent": "center",

‎app/components/UI/ConfirmAddAsset/__snapshots__/ConfirmAddAsset.test.tsx.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -309,7 +309,7 @@ exports[`ConfirmAddAsset render matches previous snapshot 1`] = `
309309
"alignSelf": "flex-start",
310310
"backgroundColor": "transparent",
311311
"borderColor": "#4459ff",
312-
"borderRadius": 24,
312+
"borderRadius": 12,
313313
"borderWidth": 1,
314314
"flex": 1,
315315
"flexDirection": "row",
@@ -348,7 +348,7 @@ exports[`ConfirmAddAsset render matches previous snapshot 1`] = `
348348
"alignItems": "center",
349349
"alignSelf": "flex-start",
350350
"backgroundColor": "#4459ff",
351-
"borderRadius": 24,
351+
"borderRadius": 12,
352352
"flex": 1,
353353
"flexDirection": "row",
354354
"height": 48,

‎app/components/UI/Earn/Views/EarnInputView/__snapshots__/EarnInputView.test.tsx.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -1569,7 +1569,7 @@ exports[`EarnInputView render matches snapshot 1`] = `
15691569
"alignItems": "center",
15701570
"alignSelf": "stretch",
15711571
"backgroundColor": "#4459ff",
1572-
"borderRadius": 24,
1572+
"borderRadius": 12,
15731573
"flexDirection": "row",
15741574
"height": 48,
15751575
"justifyContent": "center",
@@ -3178,7 +3178,7 @@ exports[`EarnInputView when values are entered in the keypad updates ETH and fia
31783178
"alignItems": "center",
31793179
"alignSelf": "stretch",
31803180
"backgroundColor": "#4459ff",
3181-
"borderRadius": 24,
3181+
"borderRadius": 12,
31823182
"flexDirection": "row",
31833183
"height": 48,
31843184
"justifyContent": "center",

‎app/components/UI/Earn/Views/EarnWithdrawInputView/__snapshots__/EarnWithdrawInputView.test.tsx.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -1570,7 +1570,7 @@ exports[`UnstakeInputView render matches snapshot 1`] = `
15701570
"alignItems": "center",
15711571
"alignSelf": "stretch",
15721572
"backgroundColor": "#4459ff",
1573-
"borderRadius": 24,
1573+
"borderRadius": 12,
15741574
"flexDirection": "row",
15751575
"height": 48,
15761576
"justifyContent": "center",

‎app/components/UI/Earn/components/CurrencySwitch.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const createStyles = (colors: Colors) =>
2828
backgroundColor: colors.background.default,
2929
borderColor: colors.border.muted,
3030
borderWidth: 1,
31+
borderRadius: 16,
3132
},
3233
currencyToggleText: {
3334
flexDirection: 'row',

0 commit comments

Comments
 (0)