Skip to content

Commit 94953b5

Browse files
author
ignaciosantise
committed
chore: changed accent color + ui improvements
1 parent aaf06cd commit 94953b5

File tree

15 files changed

+105
-71
lines changed

15 files changed

+105
-71
lines changed

‎packages/scaffold/src/modal/w3m-button/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export function W3mButton({
3737
size={size}
3838
label={label}
3939
loadingLabel={loadingLabel}
40+
disabled={disabled}
4041
testID="button-connect"
4142
/>
4243
);

‎packages/scaffold/src/modal/w3m-connect-button/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export interface W3mConnectButtonProps {
77
loadingLabel: string;
88
size?: ConnectButtonProps['size'];
99
style?: ConnectButtonProps['style'];
10+
disabled?: ConnectButtonProps['disabled'];
1011
testID?: string;
1112
}
1213

@@ -15,6 +16,7 @@ export function W3mConnectButton({
1516
loadingLabel,
1617
size = 'md',
1718
style,
19+
disabled,
1820
testID
1921
}: W3mConnectButtonProps) {
2022
const { open, loading } = useSnapshot(ModalController.state);
@@ -26,6 +28,7 @@ export function W3mConnectButton({
2628
loading={loading || open}
2729
style={style}
2830
testID={testID}
31+
disabled={disabled}
2932
>
3033
{loading || open ? loadingLabel : label}
3134
</ConnectButton>

‎packages/scaffold/src/views/w3m-connect-view/components/connect-email-input.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,11 @@ export function ConnectEmailInput({ isEmailEnabled, showSeparator, loading }: Pr
2121
const { connectors } = useSnapshot(ConnectorController.state);
2222
const [inputLoading, setInputLoading] = useState(false);
2323
const [error, setError] = useState('');
24+
const [isValidEmail, setIsValidEmail] = useState(false);
2425
const emailProvider = connectors.find(c => c.type === 'EMAIL')?.provider as W3mFrameProvider;
2526

26-
const onChangeText = () => {
27+
const onChangeText = (value: string) => {
28+
setIsValidEmail(CoreHelperUtil.isValidEmail(value));
2729
setError('');
2830
};
2931

@@ -68,6 +70,7 @@ export function ConnectEmailInput({ isEmailEnabled, showSeparator, loading }: Pr
6870
loading={inputLoading || loading}
6971
errorMessage={error}
7072
onChangeText={onChangeText}
73+
submitEnabled={isValidEmail}
7174
/>
7275
</FlexView>
7376
{showSeparator && <Separator text="or" style={styles.emailSeparator} />}

‎packages/scaffold/src/views/w3m-update-email-wallet-view/index.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export function UpdateEmailWalletView() {
3434
};
3535

3636
const onEmailSubmit = async (value: string) => {
37-
if (!emailConnector || !isValidNewEmail) return;
37+
if (!emailConnector) return;
3838

3939
const provider = emailConnector.provider as W3mFrameProvider;
4040
setLoading(true);
@@ -79,17 +79,17 @@ export function UpdateEmailWalletView() {
7979
margin={['0', 'xs', '0', 'xs']}
8080
>
8181
<Button onPress={RouterController.goBack} variant="shade" style={styles.cancelButton}>
82-
<Text variant="paragraph-600">Cancel</Text>
82+
<Text variant="paragraph-600" color="inverse-100">
83+
Cancel
84+
</Text>
8385
</Button>
8486
<Button
8587
onPress={() => onEmailSubmit(email)}
8688
variant="fill"
8789
style={styles.saveButton}
8890
disabled={loading || !isValidNewEmail}
8991
>
90-
<Text color="inverse-100" variant="paragraph-600">
91-
Save
92-
</Text>
92+
Save
9393
</Button>
9494
</FlexView>
9595
</FlexView>

‎packages/scaffold/src/views/w3m-what-is-a-wallet-view/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,8 @@ export function WhatIsAWalletView() {
5656
>
5757
Get a wallet
5858
</Button>
59-
<Link size="sm" iconLeft="helpCircle" onPress={undefined} style={styles.helpButton}>
60-
What is an email wallet
59+
<Link size="sm" iconLeft="helpCircle" onPress={() => undefined}>
60+
What is an email wallet?
6161
</Link>
6262
</FlexView>
6363
</ScrollView>

‎packages/ui/src/components/wui-card/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export function Card({ children, style }: CardProps) {
1818
enabled={Platform.OS === 'ios'}
1919
style={[
2020
styles.container,
21-
{ backgroundColor: Theme['bg-125'], borderColor: Theme['gray-glass-005'] },
21+
{ backgroundColor: Theme['bg-100'], borderColor: Theme['gray-glass-005'] },
2222
style
2323
]}
2424
>

‎packages/ui/src/components/wui-loading-spinner/index.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,7 @@ const AnimatedSvg = Animated.createAnimatedComponent(Svg);
1010

1111
export interface LoadingSpinnerProps {
1212
size?: Exclude<SizeType, 'xs' | 'xxs'>;
13-
color?: Exclude<
14-
ColorType,
15-
'fg-100' | 'error-100' | 'fg-300' | 'inverse-000' | 'inverse-100' | 'success-100'
16-
>;
13+
color?: Exclude<ColorType, 'fg-100' | 'error-100' | 'fg-300' | 'success-100'>;
1714
style?: StyleProp<ViewStyle>;
1815
}
1916

‎packages/ui/src/composites/wui-button/styles.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ export const getThemedButtonStyle = (
1414

1515
if (disabled) {
1616
return {
17-
backgroundColor: variant === 'fill' ? theme['gray-glass-020'] : theme['gray-glass-010'],
18-
borderColor: theme['gray-glass-005']
17+
backgroundColor: variant === 'fill' ? theme['gray-glass-002'] : theme['gray-glass-010'],
18+
borderColor: theme['gray-glass-002']
1919
};
2020
}
2121

@@ -38,7 +38,9 @@ export const getThemedTextStyle = (
3838
disabled?: boolean
3939
): StyleProp<any> => {
4040
if (disabled) {
41-
return variant === 'fill' ? { color: theme['fg-300'] } : { color: theme['gray-glass-020'] };
41+
return variant === 'fill'
42+
? { color: theme['gray-glass-020'] }
43+
: { color: theme['gray-glass-020'] };
4244
}
4345

4446
return variant === 'fill'

‎packages/ui/src/composites/wui-connect-button/index.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export type ConnectButtonProps = NativeProps & {
2020
children: React.ReactNode;
2121
style?: StyleProp<ViewStyle>;
2222
loading?: boolean;
23+
disabled?: boolean;
2324
};
2425

2526
export function ConnectButton({
@@ -28,6 +29,7 @@ export function ConnectButton({
2829
onPress,
2930
style,
3031
loading,
32+
disabled,
3133
...rest
3234
}: ConnectButtonProps) {
3335
const Theme = useTheme();
@@ -66,12 +68,12 @@ export function ConnectButton({
6668
const loadingTemplate = () => {
6769
if (!loading) return null;
6870

69-
return <LoadingSpinner size={size} style={styles.loader} />;
71+
return <LoadingSpinner size={size} style={styles.loader} color="inverse-100" />;
7072
};
7173

7274
return (
7375
<AnimatedPressable
74-
disabled={loading}
76+
disabled={loading || disabled}
7577
style={[styles.button, styles[`${size}Button`], { backgroundColor, borderColor }, style]}
7678
onPressIn={onPressIn}
7779
onPressOut={onPressOut}

‎packages/ui/src/composites/wui-connect-button/styles.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@ export const getThemedButtonStyle = (
1313

1414
if (loading) {
1515
return {
16-
backgroundColor: theme['gray-glass-015'],
17-
borderColor: theme['gray-glass-005']
16+
...buttonBaseStyle,
17+
backgroundColor: theme['accent-080']
1818
};
1919
}
2020

2121
if (pressed) {
2222
return {
2323
...buttonBaseStyle,
24-
backgroundColor: theme['accent-020']
24+
backgroundColor: theme['accent-080']
2525
};
2626
}
2727

@@ -36,7 +36,7 @@ export const getThemedTextStyle = (
3636
loading?: boolean
3737
): StyleProp<any> => {
3838
if (loading) {
39-
return { color: theme['accent-100'] };
39+
return { color: theme['inverse-100'] };
4040
}
4141

4242
return { color: theme['inverse-100'] };

‎packages/ui/src/composites/wui-email-input/index.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@ export type EmailInputProps = InputTextProps & {
1616
submitEnabled?: boolean;
1717
};
1818

19-
export const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+$/;
20-
2119
function RightIcon({
2220
loading,
2321
showChevron,

‎packages/ui/src/composites/wui-input-text/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ export const InputText = forwardRef<InputRef, InputTextProps>(
4747
const inputRef = useRef<TextInput>(null);
4848
const Theme = useTheme();
4949
const { animatedValue, valueRef, setStartValue, setEndValue } = useAnimatedValue(
50+
Theme['gray-glass-002'],
5051
Theme['gray-glass-005'],
51-
Theme['gray-glass-010'],
5252
100
5353
);
5454
const outerRadius = outerBorderRadius[size];
@@ -103,7 +103,7 @@ export const InputText = forwardRef<InputRef, InputTextProps>(
103103
style={[
104104
styles[`${size}Container`],
105105
{ backgroundColor: animatedValue, borderColor: innerBorder },
106-
disabled && { backgroundColor: Theme['gray-glass-015'] }
106+
disabled && { backgroundColor: Theme['gray-glass-002'] }
107107
]}
108108
>
109109
{icon && <Icon name={icon} size="md" color="fg-275" style={styles.icon} />}

‎packages/ui/src/composites/wui-network-button/index.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,18 +31,17 @@ export function NetworkButton({
3131
}: NetworkButtonProps) {
3232
const Theme = useTheme();
3333
const textColor = disabled ? 'fg-300' : 'fg-100';
34-
const borderColor = disabled ? 'gray-glass-005' : 'gray-glass-005';
3534

3635
const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
37-
Theme['gray-glass-002'],
36+
Theme['gray-glass-005'],
3837
Theme['gray-glass-010']
3938
);
4039

4140
const backgroundColor = disabled ? Theme['gray-glass-015'] : animatedValue;
4241

4342
return (
4443
<AnimatedPressable
45-
style={[styles.container, { backgroundColor, borderColor: Theme[borderColor] }, style]}
44+
style={[styles.container, { backgroundColor, borderColor: Theme['gray-glass-005'] }, style]}
4645
onPress={onPress}
4746
onPressIn={setEndValue}
4847
onPressOut={setStartValue}
@@ -54,7 +53,7 @@ export function NetworkButton({
5453
<Image
5554
style={[
5655
styles.image,
57-
{ borderColor: Theme[borderColor] },
56+
{ borderColor: Theme['gray-glass-005'] },
5857
disabled && styles.imageDisabled
5958
]}
6059
source={imageSrc}

‎packages/ui/src/utils/ThemeUtil.ts

Lines changed: 61 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,52 @@
11
import type { SpacingType, ThemeKeys } from './TypesUtil';
22

33
export const DarkTheme: { [key in ThemeKeys]: string } = {
4-
'accent-100': '#47a1ff',
5-
'accent-090': '#59aaff',
6-
'accent-020': '#6cb4ff',
7-
'accent-glass-090': 'rgba(51, 150, 255, 0.90)',
8-
'accent-glass-080': 'rgba(51, 150, 255, 0.80)',
9-
'accent-glass-020': 'rgba(71, 161, 255, 0.2)',
10-
'accent-glass-015': 'rgba(71, 161, 255, 0.15)',
11-
'accent-glass-010': 'rgba(71, 161, 255, 0.1)',
12-
'accent-glass-005': 'rgba(71, 161, 255, 0.05)',
13-
'accent-glass-002': 'rgba(51, 150, 255, 0.02)',
14-
15-
'fg-100': '#e4e7e7',
16-
'fg-125': '#d0d5d5',
17-
'fg-150': '#a8b1b1',
18-
'fg-175': '#a8b0b0',
19-
'fg-200': '#949e9e',
20-
'fg-225': '#868f8f',
4+
'accent-100': '#667DFF',
5+
'accent-090': '#7388FD',
6+
'accent-080': '#7F92FA',
7+
'accent-020': '#5869D1',
8+
'accent-glass-090': 'rgba(102, 125, 255, 0.90)',
9+
'accent-glass-080': 'rgba(102, 125, 255, 0.80)',
10+
'accent-glass-020': 'rgba(102, 125, 255, 0.2)',
11+
'accent-glass-015': 'rgba(102, 125, 255, 0.15)',
12+
'accent-glass-010': 'rgba(102, 125, 255, 0.1)',
13+
'accent-glass-005': 'rgba(102, 125, 255, 0.05)',
14+
'accent-glass-002': 'rgba(102, 125, 255, 0.02)',
15+
16+
'fg-100': '#E4E7E7',
17+
'fg-125': '#D0D5D5',
18+
'fg-150': '#A8B1B1',
19+
'fg-175': '#A8B0B0',
20+
'fg-200': '#949E9E',
21+
'fg-225': '#868F8F',
2122
'fg-250': '#788080',
2223
'fg-275': '#788181',
23-
'fg-300': '#6e7777',
24+
'fg-300': '#6E7777',
2425

25-
'bg-100': '#141414',
26-
'bg-125': '#191a1a',
27-
'bg-150': '#1e1f1f',
26+
'bg-100': '#121313',
27+
'bg-125': '#191A1A',
28+
'bg-150': '#1E1F1F',
2829
'bg-175': '#222525',
29-
'bg-200': '#272a2a',
30-
'bg-225': '#2c3030',
30+
'bg-200': '#272A2A',
31+
'bg-225': '#2C3030',
3132
'bg-250': '#313535',
32-
'bg-275': '#363b3b',
33-
'bg-300': '#3b4040',
33+
'bg-275': '#363B3B',
34+
'bg-300': '#3B4040',
3435

35-
'inverse-100': '#ffffff',
36+
'inverse-100': '#FFFFFF',
3637
'inverse-000': '#000000',
3738

38-
'success-100': '#26d962',
39-
'error-100': '#f25a67',
39+
'success-100': '#26D962',
40+
'success-glass-020': 'rgba(38, 217, 98, 0.20)',
41+
'success-glass-015': 'rgba(38, 217, 98, 0.15)',
42+
'success-glass-010': 'rgba(38, 217, 98, 0.10)',
43+
'success-glass-005': 'rgba(38, 217, 98, 0.05)',
44+
45+
'error-100': '#F25A67',
46+
'error-glass-020': 'rgba(242, 90, 103, 0.20)',
47+
'error-glass-015': 'rgba(242, 90, 103, 0.15)',
48+
'error-glass-010': 'rgba(242, 90, 103, 0.10)',
49+
'error-glass-005': 'rgba(242, 90, 103, 0.05)',
4050

4151
'teal-100': '#36e2e2',
4252
'magenta-100': '#cb4d8c',
@@ -64,16 +74,17 @@ export const DarkTheme: { [key in ThemeKeys]: string } = {
6474
};
6575

6676
export const LightTheme: { [key in ThemeKeys]: string } = {
67-
'accent-100': '#3396ff',
68-
'accent-090': '#2d7dd2',
69-
'accent-020': '#2978cc',
70-
'accent-glass-090': 'rgba(51, 150, 255, 0.9)',
71-
'accent-glass-080': 'rgba(51, 150, 255, 0.8)',
72-
'accent-glass-020': 'rgba(51, 150, 255, 0.2)',
73-
'accent-glass-015': 'rgba(51, 150, 255, 0.15)',
74-
'accent-glass-010': 'rgba(51, 150, 255, 0.1)',
75-
'accent-glass-005': 'rgba(51, 150, 255, 0.05)',
76-
'accent-glass-002': 'rgba(51, 150, 255, 0.02)',
77+
'accent-100': '#5570FF',
78+
'accent-090': '#4F67E7',
79+
'accent-080': '#485ED0',
80+
'accent-020': '#788DFF',
81+
'accent-glass-090': 'rgba(85, 112, 255, 0.90)',
82+
'accent-glass-080': 'rgba(85, 112, 255, 0.8)',
83+
'accent-glass-020': 'rgba(85, 112, 255, 0.2)',
84+
'accent-glass-015': 'rgba(85, 112, 255, 0.15)',
85+
'accent-glass-010': 'rgba(85, 112, 255, 0.1)',
86+
'accent-glass-005': 'rgba(85, 112, 255, 0.05)',
87+
'accent-glass-002': 'rgba(85, 112, 255, 0.02)',
7788

7889
'fg-100': '#141414',
7990
'fg-125': '#2d3131',
@@ -95,11 +106,20 @@ export const LightTheme: { [key in ThemeKeys]: string } = {
95106
'bg-275': '#dce7e7',
96107
'bg-300': '#d8e3e3',
97108

98-
'inverse-100': '#ffffff',
109+
'inverse-100': '#FFFFFF',
99110
'inverse-000': '#000000',
100111

101-
'success-100': '#26b562',
102-
'error-100': '#f05142',
112+
'success-100': '#26B562',
113+
'success-glass-020': 'rgba(38, 181, 98, 0.20)',
114+
'success-glass-015': 'rgba(38, 181, 98, 0.15)',
115+
'success-glass-010': 'rgba(38, 181, 98, 0.10)',
116+
'success-glass-005': 'rgba(38, 181, 98, 0.05)',
117+
118+
'error-100': '#F05142',
119+
'error-glass-020': 'rgba(240, 81, 66, 0.20)',
120+
'error-glass-015': 'rgba(240, 81, 66, 0.15)',
121+
'error-glass-010': 'rgba(240, 81, 66, 0.10)',
122+
'error-glass-005': 'rgba(240, 81, 66, 0.05)',
103123

104124
'teal-100': '#2bb6b6',
105125
'magenta-100': '#c65380',

0 commit comments

Comments
 (0)