forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Toast tweaks (#8791)
* Tweak colors
* Fix e2e
* Color tweaks
* Fix alignment
authored by
Eric Bailey
and committed by
GitHub
c103687d
dbb9ff69
+54
-14
+49
-13
src/components/Toast/Toast.tsx
+49
-13
src/components/Toast/Toast.tsx
···
1
1
import {createContext, useContext, useMemo} from 'react'
2
2
import {View} from 'react-native'
3
3
4
-
import {atoms as a, select, useTheme} from '#/alf'
4
+
import {atoms as a, select, useAlf, useTheme} from '#/alf'
5
5
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
6
6
import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
7
7
import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
···
32
32
type: ToastType
33
33
content: React.ReactNode
34
34
}) {
35
+
const {fonts} = useAlf()
35
36
const t = useTheme()
36
37
const styles = useToastStyles({type})
37
38
const Icon = ICONS[type]
39
+
/**
40
+
* Vibes-based number, adjusts `top` of `View` that wraps the text to
41
+
* compensate for different type sizes and keep the first line of text
42
+
* aligned with the icon. - esb
43
+
*/
44
+
const fontScaleCompensation = useMemo(
45
+
() => parseInt(fonts.scale) * -1 * 0.65,
46
+
[fonts.scale],
47
+
)
38
48
39
49
return (
40
50
<Context.Provider value={useMemo(() => ({type}), [type])}>
···
56
66
]}>
57
67
<Icon size="md" fill={styles.iconColor} />
58
68
59
-
<View style={[a.flex_1]}>
69
+
<View
70
+
style={[
71
+
a.flex_1,
72
+
{
73
+
top: fontScaleCompensation,
74
+
},
75
+
]}>
60
76
{typeof content === 'string' ? (
61
77
<ToastText>{content}</ToastText>
62
78
) : (
···
92
108
return {
93
109
default: {
94
110
backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
95
-
borderColor: t.atoms.border_contrast_high.borderColor,
111
+
borderColor: t.atoms.border_contrast_low.borderColor,
96
112
iconColor: t.atoms.text.color,
97
113
textColor: t.atoms.text.color,
98
114
},
99
115
success: {
100
116
backgroundColor: t.palette.primary_25,
101
-
borderColor: t.palette.primary_300,
102
-
iconColor: t.palette.primary_600,
103
-
textColor: t.palette.primary_600,
117
+
borderColor: select(t.name, {
118
+
light: t.palette.primary_300,
119
+
dim: t.palette.primary_200,
120
+
dark: t.palette.primary_100,
121
+
}),
122
+
iconColor: select(t.name, {
123
+
light: t.palette.primary_600,
124
+
dim: t.palette.primary_700,
125
+
dark: t.palette.primary_700,
126
+
}),
127
+
textColor: select(t.name, {
128
+
light: t.palette.primary_600,
129
+
dim: t.palette.primary_700,
130
+
dark: t.palette.primary_700,
131
+
}),
104
132
},
105
133
error: {
106
134
backgroundColor: t.palette.negative_25,
107
135
borderColor: select(t.name, {
108
-
light: t.palette.negative_300,
109
-
dim: t.palette.negative_300,
110
-
dark: t.palette.negative_300,
136
+
light: t.palette.negative_200,
137
+
dim: t.palette.negative_200,
138
+
dark: t.palette.negative_100,
139
+
}),
140
+
iconColor: select(t.name, {
141
+
light: t.palette.negative_700,
142
+
dim: t.palette.negative_900,
143
+
dark: t.palette.negative_900,
144
+
}),
145
+
textColor: select(t.name, {
146
+
light: t.palette.negative_700,
147
+
dim: t.palette.negative_900,
148
+
dark: t.palette.negative_900,
111
149
}),
112
-
iconColor: t.palette.negative_600,
113
-
textColor: t.palette.negative_600,
114
150
},
115
151
warning: {
116
152
backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
117
-
borderColor: t.atoms.border_contrast_high.borderColor,
153
+
borderColor: t.atoms.border_contrast_low.borderColor,
118
154
iconColor: t.atoms.text.color,
119
155
textColor: t.atoms.text.color,
120
156
},
121
157
info: {
122
158
backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
123
-
borderColor: t.atoms.border_contrast_high.borderColor,
159
+
borderColor: t.atoms.border_contrast_low.borderColor,
124
160
iconColor: t.atoms.text.color,
125
161
textColor: t.atoms.text.color,
126
162
},