forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Improve styles (#4916)
Co-authored-by: Hailey <me@haileyok.com>
authored by
Minseo Lee
Hailey
and committed by
GitHub
88f879ff
6f450b49
+89
-163
+14
-14
src/alf/themes.ts
+14
-14
src/alf/themes.ts
···
186
186
white: color.gray_0,
187
187
black: color.trueBlack,
188
188
189
-
contrast_25: color.gray_1000,
190
-
contrast_50: color.gray_975,
191
-
contrast_100: color.gray_950,
192
-
contrast_200: color.gray_900,
193
-
contrast_300: color.gray_800,
194
-
contrast_400: color.gray_700,
195
-
contrast_500: color.gray_600,
196
-
contrast_600: color.gray_500,
197
-
contrast_700: color.gray_400,
198
-
contrast_800: color.gray_300,
199
-
contrast_900: color.gray_200,
200
-
contrast_950: color.gray_100,
201
-
contrast_975: color.gray_50,
189
+
contrast_25: color.gray_975,
190
+
contrast_50: color.gray_950,
191
+
contrast_100: color.gray_900,
192
+
contrast_200: color.gray_800,
193
+
contrast_300: color.gray_700,
194
+
contrast_400: color.gray_600,
195
+
contrast_500: color.gray_500,
196
+
contrast_600: color.gray_400,
197
+
contrast_700: color.gray_300,
198
+
contrast_800: color.gray_200,
199
+
contrast_900: color.gray_100,
200
+
contrast_950: color.gray_50,
201
+
contrast_975: color.gray_25,
202
202
203
203
primary_25: color.primary_975,
204
204
primary_50: color.primary_950,
···
400
400
color: darkPalette.contrast_400,
401
401
},
402
402
text_contrast_medium: {
403
-
color: darkPalette.contrast_700,
403
+
color: darkPalette.contrast_600,
404
404
},
405
405
text_contrast_high: {
406
406
color: darkPalette.contrast_900,
+3
-21
src/components/Button.tsx
+3
-21
src/components/Button.tsx
···
202
202
} else if (color === 'secondary') {
203
203
if (variant === 'solid') {
204
204
if (!disabled) {
205
-
baseStyles.push({
206
-
backgroundColor: select(t.name, {
207
-
light: t.palette.contrast_25,
208
-
dim: t.palette.contrast_100,
209
-
dark: t.palette.contrast_100,
210
-
}),
211
-
})
212
-
hoverStyles.push({
213
-
backgroundColor: select(t.name, {
214
-
light: t.palette.contrast_50,
215
-
dim: t.palette.contrast_200,
216
-
dark: t.palette.contrast_200,
217
-
}),
218
-
})
205
+
baseStyles.push(t.atoms.bg_contrast_25)
206
+
hoverStyles.push(t.atoms.bg_contrast_50)
219
207
} else {
220
-
baseStyles.push({
221
-
backgroundColor: select(t.name, {
222
-
light: t.palette.contrast_100,
223
-
dim: t.palette.contrast_25,
224
-
dark: t.palette.contrast_25,
225
-
}),
226
-
})
208
+
baseStyles.push(t.atoms.bg_contrast_100)
227
209
}
228
210
} else if (variant === 'outline') {
229
211
baseStyles.push(a.border, t.atoms.bg, {
+3
-1
src/components/dialogs/GifSelect.tsx
+3
-1
src/components/dialogs/GifSelect.tsx
···
249
249
const control = Dialog.useDialogContext()
250
250
251
251
return (
252
-
<Dialog.ScrollableInner style={a.gap_md} label={_(msg`An error has occurred`)}>
252
+
<Dialog.ScrollableInner
253
+
style={a.gap_md}
254
+
label={_(msg`An error has occurred`)}>
253
255
<Dialog.Close />
254
256
<ErrorScreen
255
257
title={_(msg`Oh no!`)}
+1
src/components/forms/TextField.tsx
+1
src/components/forms/TextField.tsx
+2
-1
src/lib/styles.ts
+2
-1
src/lib/styles.ts
···
1
1
import {Dimensions, StyleProp, StyleSheet, TextStyle} from 'react-native'
2
+
3
+
import {isWeb} from 'platform/detection'
2
4
import {Theme, TypographyVariant} from './ThemeContext'
3
-
import {isWeb} from 'platform/detection'
4
5
5
6
// 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest
6
7
export const colors = {
+3
-3
src/lib/themes.ts
+3
-3
src/lib/themes.ts
···
295
295
...defaultTheme.palette,
296
296
default: {
297
297
background: darkPalette.black,
298
-
backgroundLight: darkPalette.contrast_50,
298
+
backgroundLight: darkPalette.contrast_25,
299
299
text: darkPalette.white,
300
-
textLight: darkPalette.contrast_700,
300
+
textLight: darkPalette.contrast_600,
301
301
textInverted: darkPalette.black,
302
302
link: darkPalette.primary_500,
303
303
border: darkPalette.contrast_100,
···
344
344
default: {
345
345
...darkTheme.palette.default,
346
346
background: dimPalette.black,
347
-
backgroundLight: dimPalette.contrast_50,
347
+
backgroundLight: dimPalette.contrast_25,
348
348
text: dimPalette.white,
349
349
textLight: dimPalette.contrast_700,
350
350
textInverted: dimPalette.black,
-2
src/view/com/pager/PagerWithHeader.web.tsx
-2
src/view/com/pager/PagerWithHeader.web.tsx
···
193
193
tabBarContainer: {
194
194
// @ts-ignore web-only
195
195
position: 'sticky',
196
-
overflow: 'hidden',
197
196
top: 0,
198
197
zIndex: 1,
199
198
},
200
199
tabBarContainerDesktop: {
201
200
marginHorizontal: 'auto',
202
-
paddingHorizontal: 2,
203
201
width: 600,
204
202
borderLeftWidth: 1,
205
203
borderRightWidth: 1,
+1
-1
src/view/com/pager/TabBar.tsx
+1
-1
src/view/com/pager/TabBar.tsx
+1
-1
src/view/com/post-thread/PostThreadItem.tsx
+1
-1
src/view/com/post-thread/PostThreadItem.tsx
+1
-3
src/view/com/posts/Feed.tsx
+1
-3
src/view/com/posts/Feed.tsx
+1
-6
src/view/com/util/PostMeta.tsx
+1
-6
src/view/com/util/PostMeta.tsx
···
91
91
</Text>
92
92
</ProfileHoverCard>
93
93
{!isAndroid && (
94
-
<Text
95
-
type="md"
96
-
style={pal.textLight}
97
-
lineHeight={1.2}
98
-
accessible={false}>
94
+
<Text type="md" style={pal.textLight} accessible={false}>
99
95
·
100
96
</Text>
101
97
)}
···
104
100
<TextLinkOnWebOnly
105
101
type="md"
106
102
style={pal.textLight}
107
-
lineHeight={1.2}
108
103
text={timeElapsed}
109
104
accessibilityLabel={niceDate(opts.timestamp)}
110
105
title={niceDate(opts.timestamp)}
+1
-1
src/view/screens/AccessibilitySettings.tsx
+1
-1
src/view/screens/AccessibilitySettings.tsx
+2
src/view/screens/LanguageSettings.tsx
+2
src/view/screens/LanguageSettings.tsx
···
145
145
backgroundColor: pal.viewLight.backgroundColor,
146
146
color: pal.text.color,
147
147
fontSize: 14,
148
+
fontFamily: 'inherit',
148
149
letterSpacing: 0.5,
149
150
fontWeight: '500',
150
151
paddingHorizontal: 14,
···
236
237
backgroundColor: pal.viewLight.backgroundColor,
237
238
color: pal.text.color,
238
239
fontSize: 14,
240
+
fontFamily: 'inherit',
239
241
letterSpacing: 0.5,
240
242
fontWeight: '500',
241
243
paddingHorizontal: 14,
+1
-1
src/view/screens/Search/Explore.tsx
+1
-1
src/view/screens/Search/Explore.tsx
···
571
571
keyExtractor={item => item.key}
572
572
// @ts-ignore web only -prf
573
573
desktopFixedHeight
574
-
contentContainerStyle={{paddingBottom: 200}}
574
+
contentContainerStyle={{paddingBottom: 100}}
575
575
keyboardShouldPersistTaps="handled"
576
576
keyboardDismissMode="on-drag"
577
577
/>
+2
-1
src/view/screens/Search/Search.tsx
+2
-1
src/view/screens/Search/Search.tsx
···
783
783
}}>
784
784
<MagnifyingGlassIcon
785
785
style={[pal.icon, styles.headerSearchIcon]}
786
-
size={21}
786
+
size={20}
787
787
/>
788
788
<TextInput
789
789
testID="searchTextInput"
···
1071
1071
headerSearchInput: {
1072
1072
flex: 1,
1073
1073
fontSize: 17,
1074
+
minWidth: 0,
1074
1075
},
1075
1076
headerCancelBtn: {
1076
1077
paddingLeft: 10,
+1
-1
src/view/screens/Settings/index.tsx
+1
-1
src/view/screens/Settings/index.tsx
+1
-1
src/view/screens/Storybook/index.tsx
+1
-1
src/view/screens/Storybook/index.tsx
+38
-26
src/view/shell/Drawer.tsx
+38
-26
src/view/shell/Drawer.tsx
···
33
33
import {formatCountShortOnly} from 'view/com/util/numeric/format'
34
34
import {Text} from 'view/com/util/text/Text'
35
35
import {UserAvatar} from 'view/com/util/UserAvatar'
36
+
import {atoms as a} from '#/alf'
36
37
import {useTheme as useAlfTheme} from '#/alf'
37
38
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
38
39
import {
···
96
97
numberOfLines={1}>
97
98
@{account.handle}
98
99
</Text>
99
-
<Text type="xl" style={[pal.textLight, styles.profileCardFollowers]}>
100
-
<Trans>
101
-
<Text type="xl-medium" style={pal.text}>
102
-
{formatCountShortOnly(profile?.followersCount ?? 0)}
103
-
</Text>{' '}
104
-
<Plural
105
-
value={profile?.followersCount || 0}
106
-
one="follower"
107
-
other="followers"
108
-
/>
109
-
</Trans>{' '}
110
-
·{' '}
111
-
<Trans>
112
-
<Text type="xl-medium" style={pal.text}>
113
-
{formatCountShortOnly(profile?.followsCount ?? 0)}
114
-
</Text>{' '}
115
-
<Plural
116
-
value={profile?.followsCount || 0}
117
-
one="following"
118
-
other="following"
119
-
/>
120
-
</Trans>
121
-
</Text>
100
+
<View
101
+
style={[
102
+
styles.profileCardFollowers,
103
+
a.gap_xs,
104
+
a.flex_row,
105
+
a.align_center,
106
+
a.flex_wrap,
107
+
]}>
108
+
<Text type="xl" style={pal.textLight}>
109
+
<Trans>
110
+
<Text type="xl-medium" style={pal.text}>
111
+
{formatCountShortOnly(profile?.followersCount ?? 0)}
112
+
</Text>{' '}
113
+
<Plural
114
+
value={profile?.followersCount || 0}
115
+
one="follower"
116
+
other="followers"
117
+
/>
118
+
</Trans>
119
+
</Text>
120
+
<Text type="xl" style={pal.textLight}>
121
+
·
122
+
</Text>
123
+
<Text type="xl" style={pal.textLight}>
124
+
<Trans>
125
+
<Text type="xl-medium" style={pal.text}>
126
+
{formatCountShortOnly(profile?.followsCount ?? 0)}
127
+
</Text>{' '}
128
+
<Plural
129
+
value={profile?.followsCount || 0}
130
+
one="following"
131
+
other="following"
132
+
/>
133
+
</Trans>
134
+
</Text>
135
+
</View>
122
136
</TouchableOpacity>
123
137
)
124
138
}
···
610
624
backgroundColor: '#1B1919',
611
625
},
612
626
main: {
613
-
paddingLeft: 20,
627
+
paddingHorizontal: 20,
614
628
paddingTop: 20,
615
629
},
616
630
smallSpacer: {
···
627
641
},
628
642
profileCardFollowers: {
629
643
marginTop: 16,
630
-
paddingRight: 10,
631
644
},
632
645
633
646
menuItem: {
634
647
flexDirection: 'row',
635
648
alignItems: 'center',
636
649
paddingVertical: 16,
637
-
paddingRight: 10,
638
650
},
639
651
menuItemIconWrapper: {
640
652
width: 24,
+8
-75
src/view/shell/desktop/Search.tsx
+8
-75
src/view/shell/desktop/Search.tsx
···
2
2
import {
3
3
ActivityIndicator,
4
4
StyleSheet,
5
-
TextInput,
6
5
TouchableOpacity,
7
6
View,
8
7
ViewStyle,
···
12
11
moderateProfile,
13
12
ModerationDecision,
14
13
} from '@atproto/api'
15
-
import {msg, Trans} from '@lingui/macro'
14
+
import {msg} from '@lingui/macro'
16
15
import {useLingui} from '@lingui/react'
17
16
import {StackActions, useNavigation} from '@react-navigation/native'
18
17
import {useQueryClient} from '@tanstack/react-query'
···
24
23
import {useModerationOpts} from '#/state/preferences/moderation-opts'
25
24
import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
26
25
import {usePalette} from 'lib/hooks/usePalette'
27
-
import {MagnifyingGlassIcon2} from 'lib/icons'
28
26
import {NavigationProp} from 'lib/routes/types'
29
27
import {precacheProfile} from 'state/queries/profile'
30
28
import {Link} from '#/view/com/util/Link'
31
29
import {UserAvatar} from '#/view/com/util/UserAvatar'
30
+
import {SearchInput} from 'view/com/util/forms/SearchInput'
32
31
import {Text} from 'view/com/util/text/Text'
33
32
import {atoms as a} from '#/alf'
34
33
···
183
182
184
183
return (
185
184
<View style={[styles.container, pal.view]}>
186
-
<View
187
-
style={[{backgroundColor: pal.colors.backgroundLight}, styles.search]}>
188
-
<View style={[styles.inputContainer]}>
189
-
<MagnifyingGlassIcon2
190
-
size={18}
191
-
style={[pal.textLight, styles.iconWrapper]}
192
-
/>
193
-
<TextInput
194
-
testID="searchTextInput"
195
-
placeholder={_(msg`Search`)}
196
-
placeholderTextColor={pal.colors.textLight}
197
-
selectTextOnFocus
198
-
returnKeyType="search"
199
-
value={query}
200
-
style={[pal.textLight, styles.input]}
201
-
onChangeText={onChangeText}
202
-
onSubmitEditing={onSubmit}
203
-
accessibilityRole="search"
204
-
accessibilityLabel={_(msg`Search`)}
205
-
accessibilityHint=""
206
-
autoCorrect={false}
207
-
autoComplete="off"
208
-
autoCapitalize="none"
209
-
/>
210
-
{query ? (
211
-
<View style={styles.cancelBtn}>
212
-
<TouchableOpacity
213
-
onPress={onPressCancelSearch}
214
-
accessibilityRole="button"
215
-
accessibilityLabel={_(msg`Cancel search`)}
216
-
accessibilityHint={_(msg`Exits inputting search query`)}
217
-
onAccessibilityEscape={onPressCancelSearch}>
218
-
<Text type="lg" style={[pal.link]}>
219
-
<Trans>Cancel</Trans>
220
-
</Text>
221
-
</TouchableOpacity>
222
-
</View>
223
-
) : undefined}
224
-
</View>
225
-
</View>
226
-
185
+
<SearchInput
186
+
query={query}
187
+
onChangeQuery={onChangeText}
188
+
onPressCancelSearch={onPressCancelSearch}
189
+
onSubmitQuery={onSubmit}
190
+
/>
227
191
{query !== '' && isActive && moderationOpts && (
228
192
<View style={[pal.view, pal.borderDark, styles.resultsContainer]}>
229
193
{isFetching && !autocompleteData?.length ? (
···
262
226
position: 'relative',
263
227
width: 300,
264
228
},
265
-
search: {
266
-
paddingHorizontal: 16,
267
-
paddingVertical: 2,
268
-
width: 300,
269
-
borderRadius: 20,
270
-
},
271
-
inputContainer: {
272
-
flexDirection: 'row',
273
-
},
274
-
iconWrapper: {
275
-
position: 'relative',
276
-
top: 2,
277
-
paddingVertical: 7,
278
-
marginRight: 8,
279
-
},
280
-
input: {
281
-
flex: 1,
282
-
fontSize: 18,
283
-
width: '100%',
284
-
paddingTop: 7,
285
-
paddingBottom: 7,
286
-
},
287
-
cancelBtn: {
288
-
paddingRight: 4,
289
-
paddingLeft: 10,
290
-
paddingVertical: 7,
291
-
},
292
229
resultsContainer: {
293
230
marginTop: 10,
294
231
flexDirection: 'column',
295
232
width: 300,
296
233
borderWidth: 1,
297
234
borderRadius: 6,
298
-
},
299
-
noResults: {
300
-
textAlign: 'center',
301
-
paddingVertical: 10,
302
235
},
303
236
})