zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Improve styles (#4916) 

Co-authored-by: Hailey <me@haileyok.com>
zio/stable
Minseo Lee 2024-08-12 06:30:18 +09:00 committed by GitHub
parent 6f450b4982
commit 88f879ffe9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
20 changed files with 89 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/alf/themes.ts
View File

@ -186,19 +186,19 @@ export function createThemes({
white: color.gray_0,
black: color.trueBlack,
contrast_25: color.gray_1000,
contrast_50: color.gray_975,
contrast_100: color.gray_950,
contrast_200: color.gray_900,
contrast_300: color.gray_800,
contrast_400: color.gray_700,
contrast_500: color.gray_600,
contrast_600: color.gray_500,
contrast_700: color.gray_400,
contrast_800: color.gray_300,
contrast_900: color.gray_200,
contrast_950: color.gray_100,
contrast_975: color.gray_50,
contrast_25: color.gray_975,
contrast_50: color.gray_950,
contrast_100: color.gray_900,
contrast_200: color.gray_800,
contrast_300: color.gray_700,
contrast_400: color.gray_600,
contrast_500: color.gray_500,
contrast_600: color.gray_400,
contrast_700: color.gray_300,
contrast_800: color.gray_200,
contrast_900: color.gray_100,
contrast_950: color.gray_50,
contrast_975: color.gray_25,
primary_25: color.primary_975,
primary_50: color.primary_950,
@ -400,7 +400,7 @@ export function createThemes({
color: darkPalette.contrast_400,
},
text_contrast_medium: {
color: darkPalette.contrast_700,
color: darkPalette.contrast_600,
},
text_contrast_high: {
color: darkPalette.contrast_900,

24
src/components/Button.tsx
View File

@ -202,28 +202,10 @@ export const Button = React.forwardRef<View, ButtonProps>(
} else if (color === 'secondary') {
if (variant === 'solid') {
if (!disabled) {
baseStyles.push({
backgroundColor: select(t.name, {
light: t.palette.contrast_25,
dim: t.palette.contrast_100,
dark: t.palette.contrast_100,
}),
})
hoverStyles.push({
backgroundColor: select(t.name, {
light: t.palette.contrast_50,
dim: t.palette.contrast_200,
dark: t.palette.contrast_200,
}),
})
baseStyles.push(t.atoms.bg_contrast_25)
hoverStyles.push(t.atoms.bg_contrast_50)
} else {
baseStyles.push({
backgroundColor: select(t.name, {
light: t.palette.contrast_100,
dim: t.palette.contrast_25,
dark: t.palette.contrast_25,
}),
})
baseStyles.push(t.atoms.bg_contrast_100)
}
} else if (variant === 'outline') {
baseStyles.push(a.border, t.atoms.bg, {

4
src/components/dialogs/GifSelect.tsx
View File

@ -249,7 +249,9 @@ function DialogError({details}: {details?: string}) {
const control = Dialog.useDialogContext()
return (
<Dialog.ScrollableInner style={a.gap_md} label={_(msg`An error has occurred`)}>
<Dialog.ScrollableInner
style={a.gap_md}
label={_(msg`An error has occurred`)}>
<Dialog.Close />
<ErrorScreen
title={_(msg`Oh no!`)}

1
src/components/forms/TextField.tsx
View File

@ -193,6 +193,7 @@ export function createInput(Component: typeof TextInput) {
lineHeight: a.text_md.fontSize * 1.1875,
textAlignVertical: rest.multiline ? 'top' : undefined,
minHeight: rest.multiline ? 80 : undefined,
minWidth: 0,
},
// fix for autofill styles covering border
web({

3
src/lib/styles.ts
View File

@ -1,6 +1,7 @@
import {Dimensions, StyleProp, StyleSheet, TextStyle} from 'react-native'
import {Theme, TypographyVariant} from './ThemeContext'
import {isWeb} from 'platform/detection'
import {Theme, TypographyVariant} from './ThemeContext'
// 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest
export const colors = {

6
src/lib/themes.ts
View File

@ -295,9 +295,9 @@ export const darkTheme: Theme = {
...defaultTheme.palette,
default: {
background: darkPalette.black,
backgroundLight: darkPalette.contrast_50,
backgroundLight: darkPalette.contrast_25,
text: darkPalette.white,
textLight: darkPalette.contrast_700,
textLight: darkPalette.contrast_600,
textInverted: darkPalette.black,
link: darkPalette.primary_500,
border: darkPalette.contrast_100,
@ -344,7 +344,7 @@ export const dimTheme: Theme = {
default: {
...darkTheme.palette.default,
background: dimPalette.black,
backgroundLight: dimPalette.contrast_50,
backgroundLight: dimPalette.contrast_25,
text: dimPalette.white,
textLight: dimPalette.contrast_700,
textInverted: dimPalette.black,

2
src/view/com/pager/PagerWithHeader.web.tsx
View File

@ -193,13 +193,11 @@ const styles = StyleSheet.create({
tabBarContainer: {
// @ts-ignore web-only
position: 'sticky',
overflow: 'hidden',
top: 0,
zIndex: 1,
},
tabBarContainerDesktop: {
marginHorizontal: 'auto',
paddingHorizontal: 2,
width: 600,
borderLeftWidth: 1,
borderRightWidth: 1,

2
src/view/com/pager/TabBar.tsx
View File

@ -180,7 +180,7 @@ const desktopStyles = StyleSheet.create({
left: 0,
right: 0,
top: '100%',
borderBottomWidth: 1,
borderBottomWidth: StyleSheet.hairlineWidth,
},
})

2
src/view/com/post-thread/PostThreadItem.tsx
View File

@ -660,7 +660,7 @@ function ExpandedPostDetails({
a.flex_row,
a.align_center,
a.flex_wrap,
a.gap_sm,
a.gap_xs,
s.mt2,
s.mb10,
]}>

4
src/view/com/posts/Feed.tsx
View File

@ -480,9 +480,7 @@ let Feed = ({
// -prf
return <DiscoverFallbackHeader />
}
return (
<FeedSlice slice={item.slice} hideTopBorder={index === 0 && !isWeb} />
)
return <FeedSlice slice={item.slice} hideTopBorder={index === 0} />
} else {
return null
}

7
src/view/com/util/PostMeta.tsx
View File

@ -91,11 +91,7 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
</Text>
</ProfileHoverCard>
{!isAndroid && (
<Text
type="md"
style={pal.textLight}
lineHeight={1.2}
accessible={false}>
<Text type="md" style={pal.textLight} accessible={false}>
&middot;
</Text>
)}
@ -104,7 +100,6 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
<TextLinkOnWebOnly
type="md"
style={pal.textLight}
lineHeight={1.2}
text={timeElapsed}
accessibilityLabel={niceDate(opts.timestamp)}
title={niceDate(opts.timestamp)}

2
src/view/screens/AccessibilitySettings.tsx
View File

@ -80,7 +80,7 @@ export function AccessibilitySettingsScreen({}: Props) {
style={s.flex1}
contentContainerStyle={[
s.flex1,
{paddingBottom: 200},
{paddingBottom: 100},
isMobile && pal.viewLight,
]}>
<Text type="xl-bold" style={[pal.text, styles.heading]}>

2
src/view/screens/LanguageSettings.tsx
View File

@ -145,6 +145,7 @@ export function LanguageSettingsScreen(_props: Props) {
backgroundColor: pal.viewLight.backgroundColor,
color: pal.text.color,
fontSize: 14,
fontFamily: 'inherit',
letterSpacing: 0.5,
fontWeight: '500',
paddingHorizontal: 14,
@ -236,6 +237,7 @@ export function LanguageSettingsScreen(_props: Props) {
backgroundColor: pal.viewLight.backgroundColor,
color: pal.text.color,
fontSize: 14,
fontFamily: 'inherit',
letterSpacing: 0.5,
fontWeight: '500',
paddingHorizontal: 14,

2
src/view/screens/Search/Explore.tsx
View File

@ -571,7 +571,7 @@ export function Explore() {
keyExtractor={item => item.key}
// @ts-ignore web only -prf
desktopFixedHeight
contentContainerStyle={{paddingBottom: 200}}
contentContainerStyle={{paddingBottom: 100}}
keyboardShouldPersistTaps="handled"
keyboardDismissMode="on-drag"
/>

3
src/view/screens/Search/Search.tsx
View File

@ -783,7 +783,7 @@ let SearchInputBox = ({
}}>
<MagnifyingGlassIcon
style={[pal.icon, styles.headerSearchIcon]}
size={21}
size={20}
/>
<TextInput
testID="searchTextInput"
@ -1071,6 +1071,7 @@ const styles = StyleSheet.create({
headerSearchInput: {
flex: 1,
fontSize: 17,
minWidth: 0,
},
headerCancelBtn: {
paddingLeft: 10,

2
src/view/screens/Settings/index.tsx
View File

@ -325,7 +325,7 @@ export function SettingsScreen({}: Props) {
</View>
</SimpleViewHeader>
<ScrollView
style={[s.hContentRegion, isMobile && pal.viewLight]}
style={[isMobile && pal.viewLight]}
scrollIndicatorInsets={{right: 1}}
// @ts-ignore web only -prf
dataSet={{'stable-gutters': 1}}>

2
src/view/screens/Storybook/index.tsx
View File

@ -36,7 +36,7 @@ function StorybookInner() {
return (
<CenteredView style={[t.atoms.bg]}>
<View style={[a.p_xl, a.gap_5xl, {paddingBottom: 200}]}>
<View style={[a.p_xl, a.gap_5xl, {paddingBottom: 100}]}>
{!showContainedList ? (
<>
<View style={[a.flex_row, a.align_start, a.gap_md]}>

24
src/view/shell/Drawer.tsx
View File

@ -33,6 +33,7 @@ import {NavSignupCard} from '#/view/shell/NavSignupCard'
import {formatCountShortOnly} from 'view/com/util/numeric/format'
import {Text} from 'view/com/util/text/Text'
import {UserAvatar} from 'view/com/util/UserAvatar'
import {atoms as a} from '#/alf'
import {useTheme as useAlfTheme} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {
@ -96,7 +97,15 @@ let DrawerProfileCard = ({
numberOfLines={1}>
@{account.handle}
</Text>
<Text type="xl" style={[pal.textLight, styles.profileCardFollowers]}>
<View
style={[
styles.profileCardFollowers,
a.gap_xs,
a.flex_row,
a.align_center,
a.flex_wrap,
]}>
<Text type="xl" style={pal.textLight}>
<Trans>
<Text type="xl-medium" style={pal.text}>
{formatCountShortOnly(profile?.followersCount ?? 0)}
@ -106,8 +115,12 @@ let DrawerProfileCard = ({
one="follower"
other="followers"
/>
</Trans>{' '}
&middot;{' '}
</Trans>
</Text>
<Text type="xl" style={pal.textLight}>
&middot;
</Text>
<Text type="xl" style={pal.textLight}>
<Trans>
<Text type="xl-medium" style={pal.text}>
{formatCountShortOnly(profile?.followsCount ?? 0)}
@ -119,6 +132,7 @@ let DrawerProfileCard = ({
/>
</Trans>
</Text>
</View>
</TouchableOpacity>
)
}
@ -610,7 +624,7 @@ const styles = StyleSheet.create({
backgroundColor: '#1B1919',
},
main: {
paddingLeft: 20,
paddingHorizontal: 20,
paddingTop: 20,
},
smallSpacer: {
@ -627,14 +641,12 @@ const styles = StyleSheet.create({
},
profileCardFollowers: {
marginTop: 16,
paddingRight: 10,
},
menuItem: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 16,
paddingRight: 10,
},
menuItemIconWrapper: {
width: 24,

9
src/view/shell/desktop/RightNav.tsx
View File

@ -11,6 +11,7 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {s} from 'lib/styles'
import {TextLink} from 'view/com/util/Link'
import {Text} from 'view/com/util/text/Text'
import {atoms as a} from '#/alf'
import {ProgressGuideList} from '#/components/ProgressGuide/List'
import {DesktopFeeds} from './Feeds'
import {DesktopSearch} from './Search'
@ -56,7 +57,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
paddingTop: hasSession ? 0 : 18,
},
]}>
<View style={[{flexWrap: 'wrap'}, s.flexRow]}>
<View style={[{flexWrap: 'wrap'}, s.flexRow, a.gap_xs]}>
{hasSession && (
<>
<TextLink
@ -69,7 +70,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
text={_(msg`Feedback`)}
/>
<Text type="md" style={pal.textLight}>
&nbsp;&middot;&nbsp;
&middot;
</Text>
</>
)}
@ -80,7 +81,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
text={_(msg`Privacy`)}
/>
<Text type="md" style={pal.textLight}>
&nbsp;&middot;&nbsp;
&middot;
</Text>
<TextLink
type="md"
@ -89,7 +90,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
text={_(msg`Terms`)}
/>
<Text type="md" style={pal.textLight}>
&nbsp;&middot;&nbsp;
&middot;
</Text>
<TextLink
type="md"

81
src/view/shell/desktop/Search.tsx
View File

@ -2,7 +2,6 @@ import React from 'react'
import {
ActivityIndicator,
StyleSheet,
TextInput,
TouchableOpacity,
View,
ViewStyle,
@ -12,7 +11,7 @@ import {
moderateProfile,
ModerationDecision,
} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {StackActions, useNavigation} from '@react-navigation/native'
import {useQueryClient} from '@tanstack/react-query'
@ -24,11 +23,11 @@ import {s} from '#/lib/styles'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
import {usePalette} from 'lib/hooks/usePalette'
import {MagnifyingGlassIcon2} from 'lib/icons'
import {NavigationProp} from 'lib/routes/types'
import {precacheProfile} from 'state/queries/profile'
import {Link} from '#/view/com/util/Link'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {SearchInput} from 'view/com/util/forms/SearchInput'
import {Text} from 'view/com/util/text/Text'
import {atoms as a} from '#/alf'
@ -183,47 +182,12 @@ export function DesktopSearch() {
return (
<View style={[styles.container, pal.view]}>
<View
style={[{backgroundColor: pal.colors.backgroundLight}, styles.search]}>
<View style={[styles.inputContainer]}>
<MagnifyingGlassIcon2
size={18}
style={[pal.textLight, styles.iconWrapper]}
<SearchInput
query={query}
onChangeQuery={onChangeText}
onPressCancelSearch={onPressCancelSearch}
onSubmitQuery={onSubmit}
/>
<TextInput
testID="searchTextInput"
placeholder={_(msg`Search`)}
placeholderTextColor={pal.colors.textLight}
selectTextOnFocus
returnKeyType="search"
value={query}
style={[pal.textLight, styles.input]}
onChangeText={onChangeText}
onSubmitEditing={onSubmit}
accessibilityRole="search"
accessibilityLabel={_(msg`Search`)}
accessibilityHint=""
autoCorrect={false}
autoComplete="off"
autoCapitalize="none"
/>
{query ? (
<View style={styles.cancelBtn}>
<TouchableOpacity
onPress={onPressCancelSearch}
accessibilityRole="button"
accessibilityLabel={_(msg`Cancel search`)}
accessibilityHint={_(msg`Exits inputting search query`)}
onAccessibilityEscape={onPressCancelSearch}>
<Text type="lg" style={[pal.link]}>
<Trans>Cancel</Trans>
</Text>
</TouchableOpacity>
</View>
) : undefined}
</View>
</View>
{query !== '' && isActive && moderationOpts && (
<View style={[pal.view, pal.borderDark, styles.resultsContainer]}>
{isFetching && !autocompleteData?.length ? (
@ -262,33 +226,6 @@ const styles = StyleSheet.create({
position: 'relative',
width: 300,
},
search: {
paddingHorizontal: 16,
paddingVertical: 2,
width: 300,
borderRadius: 20,
},
inputContainer: {
flexDirection: 'row',
},
iconWrapper: {
position: 'relative',
top: 2,
paddingVertical: 7,
marginRight: 8,
},
input: {
flex: 1,
fontSize: 18,
width: '100%',
paddingTop: 7,
paddingBottom: 7,
},
cancelBtn: {
paddingRight: 4,
paddingLeft: 10,
paddingVertical: 7,
},
resultsContainer: {
marginTop: 10,
flexDirection: 'column',
@ -296,8 +233,4 @@ const styles = StyleSheet.create({
borderWidth: 1,
borderRadius: 6,
},
noResults: {
textAlign: 'center',
paddingVertical: 10,
},
})