ansxor.ca
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Remove use of `flatten` where possible (#9325)
* remove use of flatten where possible
* restore flatten where it says it's needed
* missing utils alpha
samuel.fm
+4
-6
src/components/Button.tsx
+4
-6
src/components/Button.tsx
···
7
Pressable,
8
type PressableProps,
9
type StyleProp,
10
-
StyleSheet,
11
type TargetedEvent,
12
type TextProps,
13
type TextStyle,
···
512
[state, variant, color, size, disabled],
513
)
514
515
-
const flattenedBaseStyles = flatten([baseStyles, style])
516
-
517
return (
518
<PressableComponent
519
role="button"
···
533
a.align_center,
534
a.justify_center,
535
a.curve_continuous,
536
-
flattenedBaseStyles,
537
...(state.hovered || state.pressed
538
-
? [hoverStyles, flatten(hoverStyleProp)]
539
: []),
540
]}
541
onPressIn={onPressIn}
···
726
baseStyles.push(a.text_xs, a.leading_snug, a.font_semi_bold)
727
}
728
729
-
return StyleSheet.flatten(baseStyles)
730
}, [t, variant, color, size, disabled])
731
}
732
···
7
Pressable,
8
type PressableProps,
9
type StyleProp,
10
type TargetedEvent,
11
type TextProps,
12
type TextStyle,
···
511
[state, variant, color, size, disabled],
512
)
513
514
return (
515
<PressableComponent
516
role="button"
···
530
a.align_center,
531
a.justify_center,
532
a.curve_continuous,
533
+
baseStyles,
534
+
style,
535
...(state.hovered || state.pressed
536
+
? [hoverStyles, hoverStyleProp]
537
: []),
538
]}
539
onPressIn={onPressIn}
···
724
baseStyles.push(a.text_xs, a.leading_snug, a.font_semi_bold)
725
}
726
727
+
return flatten(baseStyles)
728
}, [t, variant, color, size, disabled])
729
}
730
+4
-4
src/components/Dialog/index.web.tsx
+4
-4
src/components/Dialog/index.web.tsx
···
16
import {logger} from '#/logger'
17
import {useA11y} from '#/state/a11y'
18
import {useDialogStateControlContext} from '#/state/dialogs'
19
-
import {atoms as a, flatten, useBreakpoints, useTheme, web} from '#/alf'
20
import {Button, ButtonIcon} from '#/components/Button'
21
import {Context} from '#/components/Dialog/context'
22
import {
···
180
onClick={stopPropagation}
181
onStartShouldSetResponder={_ => true}
182
onTouchEnd={stopPropagation}
183
-
style={flatten([
184
a.relative,
185
a.rounded_md,
186
a.w_full,
···
195
},
196
!reduceMotionEnabled && a.zoom_fade_in,
197
style,
198
-
])}>
199
<DismissableLayer.DismissableLayer
200
onInteractOutside={preventDefault}
201
onFocusOutside={preventDefault}
···
244
contentContainerStyle={[a.h_full, a.px_0, webInnerContentContainerStyle]}>
245
<FlatList
246
ref={ref}
247
-
style={[a.h_full, gtMobile ? a.px_2xl : a.px_xl, flatten(style)]}
248
{...props}
249
/>
250
{footer}
···
16
import {logger} from '#/logger'
17
import {useA11y} from '#/state/a11y'
18
import {useDialogStateControlContext} from '#/state/dialogs'
19
+
import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
20
import {Button, ButtonIcon} from '#/components/Button'
21
import {Context} from '#/components/Dialog/context'
22
import {
···
180
onClick={stopPropagation}
181
onStartShouldSetResponder={_ => true}
182
onTouchEnd={stopPropagation}
183
+
style={[
184
a.relative,
185
a.rounded_md,
186
a.w_full,
···
195
},
196
!reduceMotionEnabled && a.zoom_fade_in,
197
style,
198
+
]}>
199
<DismissableLayer.DismissableLayer
200
onInteractOutside={preventDefault}
201
onFocusOutside={preventDefault}
···
244
contentContainerStyle={[a.h_full, a.px_0, webInnerContentContainerStyle]}>
245
<FlatList
246
ref={ref}
247
+
style={[a.h_full, gtMobile ? a.px_2xl : a.px_xl, style]}
248
{...props}
249
/>
250
{footer}
+1
-1
src/components/FeedCard.tsx
+1
-1
src/components/FeedCard.tsx
+2
-11
src/components/IconCircle.tsx
+2
-11
src/components/IconCircle.tsx
···
2
3
import {
4
atoms as a,
5
-
flatten,
6
type TextStyleProp,
7
useTheme,
8
type ViewStyleProp,
···
33
height: size === 'lg' ? 52 : 64,
34
backgroundColor: t.palette.primary_50,
35
},
36
-
flatten(style),
37
]}>
38
-
<Icon
39
-
size={size}
40
-
style={[
41
-
{
42
-
color: t.palette.primary_500,
43
-
},
44
-
flatten(iconStyle),
45
-
]}
46
-
/>
47
</View>
48
)
49
}
+1
-1
src/components/LabelingServiceCard/index.tsx
+1
-1
src/components/LabelingServiceCard/index.tsx
+1
-1
src/components/Link.tsx
+1
-1
src/components/Link.tsx
+2
-2
src/components/Lists.tsx
+2
-2
src/components/Lists.tsx
···
5
6
import {cleanError} from '#/lib/strings/errors'
7
import {CenteredView} from '#/view/com/util/Views'
8
-
import {atoms as a, flatten, useBreakpoints, useTheme} from '#/alf'
9
import {Button, ButtonText} from '#/components/Button'
10
import {Error} from '#/components/Error'
11
import {Loader} from '#/components/Loader'
···
43
a.pb_lg,
44
t.atoms.border_contrast_low,
45
{height: height ?? 180, paddingTop: 30},
46
-
flatten(style),
47
]}>
48
{isFetchingNextPage ? (
49
<Loader size="xl" />
···
5
6
import {cleanError} from '#/lib/strings/errors'
7
import {CenteredView} from '#/view/com/util/Views'
8
+
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
9
import {Button, ButtonText} from '#/components/Button'
10
import {Error} from '#/components/Error'
11
import {Loader} from '#/components/Loader'
···
43
a.pb_lg,
44
t.atoms.border_contrast_low,
45
{height: height ?? 180, paddingTop: 30},
46
+
style,
47
]}>
48
{isFetchingNextPage ? (
49
<Loader size="xl" />
+2
-7
src/components/Loader.tsx
+2
-7
src/components/Loader.tsx
···
7
withTiming,
8
} from 'react-native-reanimated'
9
10
-
import {atoms as a, flatten, useTheme} from '#/alf'
11
import {type Props, useCommonSVGProps} from '#/components/icons/common'
12
import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader'
13
···
37
]}>
38
<Icon
39
{...props}
40
-
style={[
41
-
a.absolute,
42
-
a.inset_0,
43
-
t.atoms.text_contrast_high,
44
-
flatten(props.style),
45
-
]}
46
/>
47
</Animated.View>
48
)
···
7
withTiming,
8
} from 'react-native-reanimated'
9
10
+
import {atoms as a, useTheme} from '#/alf'
11
import {type Props, useCommonSVGProps} from '#/components/icons/common'
12
import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader'
13
···
37
]}>
38
<Icon
39
{...props}
40
+
style={[a.absolute, a.inset_0, t.atoms.text_contrast_high, props.style]}
41
/>
42
</Animated.View>
43
)
+2
-2
src/components/Loader.web.tsx
+2
-2
src/components/Loader.web.tsx
···
1
import {View} from 'react-native'
2
3
-
import {atoms as a, flatten, useTheme} from '#/alf'
4
import {type Props, useCommonSVGProps} from '#/components/icons/common'
5
import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader'
6
···
24
a.absolute,
25
a.inset_0,
26
t.atoms.text_contrast_high,
27
-
flatten(props.style),
28
]}
29
/>
30
</div>
···
1
import {View} from 'react-native'
2
3
+
import {atoms as a, useTheme} from '#/alf'
4
import {type Props, useCommonSVGProps} from '#/components/icons/common'
5
import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader'
6
···
24
a.absolute,
25
a.inset_0,
26
t.atoms.text_contrast_high,
27
+
props.style,
28
]}
29
/>
30
</div>
+6
-6
src/components/PolicyUpdateOverlay/Overlay.tsx
+6
-6
src/components/PolicyUpdateOverlay/Overlay.tsx
···
5
useSafeAreaInsets,
6
} from 'react-native-safe-area-context'
7
import {LinearGradient} from 'expo-linear-gradient'
8
9
import {isAndroid, isNative} from '#/platform/detection'
10
import {useA11y} from '#/state/a11y'
11
-
import {atoms as a, flatten, useBreakpoints, useTheme, web} from '#/alf'
12
-
import {transparentifyColor} from '#/alf/util/colorGeneration'
13
import {FocusScope} from '#/components/FocusScope'
14
import {LockScroll} from '#/components/LockScroll'
15
···
47
) : (
48
<LinearGradient
49
colors={[
50
-
transparentifyColor(t.atoms.bg.backgroundColor, 0),
51
t.atoms.bg.backgroundColor,
52
t.atoms.bg.backgroundColor,
53
]}
···
97
]}>
98
<LinearGradient
99
colors={[
100
-
transparentifyColor(t.atoms.bg.backgroundColor, 0),
101
t.atoms.bg.backgroundColor,
102
]}
103
start={[0.5, 0]}
···
113
role="dialog"
114
aria-role="dialog"
115
aria-label={label}
116
-
style={flatten([
117
a.relative,
118
a.w_full,
119
a.p_2xl,
···
128
maxWidth: 420,
129
}),
130
],
131
-
])}>
132
{children}
133
</View>
134
</FocusScope>
···
5
useSafeAreaInsets,
6
} from 'react-native-safe-area-context'
7
import {LinearGradient} from 'expo-linear-gradient'
8
+
import {utils} from '@bsky.app/alf'
9
10
import {isAndroid, isNative} from '#/platform/detection'
11
import {useA11y} from '#/state/a11y'
12
+
import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
13
import {FocusScope} from '#/components/FocusScope'
14
import {LockScroll} from '#/components/LockScroll'
15
···
47
) : (
48
<LinearGradient
49
colors={[
50
+
utils.alpha(t.atoms.bg.backgroundColor, 0),
51
t.atoms.bg.backgroundColor,
52
t.atoms.bg.backgroundColor,
53
]}
···
97
]}>
98
<LinearGradient
99
colors={[
100
+
utils.alpha(t.atoms.bg.backgroundColor, 0),
101
t.atoms.bg.backgroundColor,
102
]}
103
start={[0.5, 0]}
···
113
role="dialog"
114
aria-role="dialog"
115
aria-label={label}
116
+
style={[
117
a.relative,
118
a.w_full,
119
a.p_2xl,
···
128
maxWidth: 420,
129
}),
130
],
131
+
]}>
132
{children}
133
</View>
134
</FocusScope>
+8
-7
src/components/PostControls/index.tsx
+8
-7
src/components/PostControls/index.tsx
···
1
-
import {memo, useState} from 'react'
2
import {type StyleProp, View, type ViewStyle} from 'react-native'
3
import {
4
type AppBskyFeedDefs,
···
25
useProgressGuideControls,
26
} from '#/state/shell/progress-guide'
27
import * as Toast from '#/view/com/util/Toast'
28
-
import {atoms as a, flatten, useBreakpoints} from '#/alf'
29
import {Reply as Bubble} from '#/components/icons/Reply'
30
import {useFormatPostStatCount} from '#/components/PostControls/util'
31
import {BookmarkButton} from './BookmarkButton'
···
188
})
189
}
190
191
-
const secondaryControlSpacingStyles = flatten([
192
-
{gap: 0}, // default, we want `gap` to be defined on the resulting object
193
-
variant !== 'compact' && a.gap_xs,
194
-
(big || gtPhone) && a.gap_sm,
195
-
])
196
197
return (
198
<View
···
1
+
import {memo, useMemo, useState} from 'react'
2
import {type StyleProp, View, type ViewStyle} from 'react-native'
3
import {
4
type AppBskyFeedDefs,
···
25
useProgressGuideControls,
26
} from '#/state/shell/progress-guide'
27
import * as Toast from '#/view/com/util/Toast'
28
+
import {atoms as a, useBreakpoints} from '#/alf'
29
import {Reply as Bubble} from '#/components/icons/Reply'
30
import {useFormatPostStatCount} from '#/components/PostControls/util'
31
import {BookmarkButton} from './BookmarkButton'
···
188
})
189
}
190
191
+
const secondaryControlSpacingStyles = useMemo(() => {
192
+
let gap = 0 // default, we want `gap` to be defined on the resulting object
193
+
if (variant !== 'compact') gap = a.gap_xs.gap
194
+
if (big || gtPhone) gap = a.gap_sm.gap
195
+
return {gap}
196
+
}, [variant, big, gtPhone])
197
198
return (
199
<View
+1
-1
src/components/ProfileCard.tsx
+1
-1
src/components/ProfileCard.tsx
+3
-7
src/components/RichText.tsx
+3
-7
src/components/RichText.tsx
···
48
[value],
49
)
50
51
-
const flattenedStyle = flatten(style)
52
-
const plainStyles = [a.leading_snug, flattenedStyle]
53
-
const interactiveStyles = [
54
-
a.leading_snug,
55
-
flatten(interactiveStyle),
56
-
flattenedStyle,
57
-
]
58
59
const {text, facets} = richText
60
61
if (!facets?.length) {
62
if (isOnlyEmoji(text)) {
63
const fontSize =
64
(flattenedStyle.fontSize ?? a.text_sm.fontSize) * emojiMultiplier
65
return (
···
48
[value],
49
)
50
51
+
const plainStyles = [a.leading_snug, style]
52
+
const interactiveStyles = [plainStyles, interactiveStyle]
53
54
const {text, facets} = richText
55
56
if (!facets?.length) {
57
if (isOnlyEmoji(text)) {
58
+
const flattenedStyle = flatten(style)
59
const fontSize =
60
(flattenedStyle.fontSize ?? a.text_sm.fontSize) * emojiMultiplier
61
return (
+4
-4
src/components/Tooltip/index.web.tsx
+4
-4
src/components/Tooltip/index.web.tsx
···
1
import {Children, createContext, useContext, useMemo} from 'react'
2
import {View} from 'react-native'
3
import {Popover} from 'radix-ui'
4
5
import {atoms as a, flatten, select, useTheme} from '#/alf'
6
-
import {transparentifyColor} from '#/alf/util/colorGeneration'
7
import {
8
ARROW_SIZE,
9
BUBBLE_MAX_WIDTH,
···
80
{
81
minWidth: 'max-content',
82
boxShadow: select(t.name, {
83
-
light: `0 0 24px ${transparentifyColor(t.palette.black, 0.2)}`,
84
-
dark: `0 0 24px ${transparentifyColor(t.palette.black, 0.2)}`,
85
-
dim: `0 0 24px ${transparentifyColor(t.palette.black, 0.2)}`,
86
}),
87
},
88
])}>
···
1
import {Children, createContext, useContext, useMemo} from 'react'
2
import {View} from 'react-native'
3
+
import {utils} from '@bsky.app/alf'
4
import {Popover} from 'radix-ui'
5
6
import {atoms as a, flatten, select, useTheme} from '#/alf'
7
import {
8
ARROW_SIZE,
9
BUBBLE_MAX_WIDTH,
···
80
{
81
minWidth: 'max-content',
82
boxShadow: select(t.name, {
83
+
light: `0 0 24px ${utils.alpha(t.palette.black, 0.2)}`,
84
+
dark: `0 0 24px ${utils.alpha(t.palette.black, 0.2)}`,
85
+
dim: `0 0 24px ${utils.alpha(t.palette.black, 0.2)}`,
86
}),
87
},
88
])}>
+3
-3
src/components/Typography.tsx
+3
-3
src/components/Typography.tsx
···
1
import {UITextView} from 'react-native-uitextview'
2
3
import {logger} from '#/logger'
4
-
import {atoms, flatten, useAlf, useTheme, web} from '#/alf'
5
import {
6
childHasEmoji,
7
normalizeTextStyles,
···
26
}: TextProps) {
27
const {fonts, flags} = useAlf()
28
const t = useTheme()
29
-
const s = normalizeTextStyles([atoms.text_sm, t.atoms.text, flatten(style)], {
30
fontScale: fonts.scaleMultiplier,
31
fontFamily: fonts.family,
32
flags,
···
84
<Text
85
{...attr}
86
{...rest}
87
-
style={[atoms.text_md, atoms.leading_normal, flatten(style)]}
88
/>
89
)
90
}
···
1
import {UITextView} from 'react-native-uitextview'
2
3
import {logger} from '#/logger'
4
+
import {atoms, useAlf, useTheme, web} from '#/alf'
5
import {
6
childHasEmoji,
7
normalizeTextStyles,
···
26
}: TextProps) {
27
const {fonts, flags} = useAlf()
28
const t = useTheme()
29
+
const s = normalizeTextStyles([atoms.text_sm, t.atoms.text, style], {
30
fontScale: fonts.scaleMultiplier,
31
fontFamily: fonts.family,
32
flags,
···
84
<Text
85
{...attr}
86
{...rest}
87
+
style={[atoms.text_md, atoms.leading_relaxed, style]}
88
/>
89
)
90
}
+3
-3
src/components/WelcomeModal.tsx
+3
-3
src/components/WelcomeModal.tsx
···
8
import {logger} from '#/logger'
9
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
10
import {Logo} from '#/view/icons/Logo'
11
-
import {atoms as a, flatten, useBreakpoints, web} from '#/alf'
12
import {Button, ButtonText} from '#/components/Button'
13
import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'
14
import {Text} from '#/components/Typography'
···
78
]}>
79
<FocusScope.FocusScope asChild loop trapped>
80
<View
81
-
style={flatten([
82
{
83
maxWidth: 800,
84
maxHeight: 600,
···
89
a.rounded_lg,
90
a.overflow_hidden,
91
a.zoom_in,
92
-
])}>
93
<ImageBackground
94
source={welcomeModalBg}
95
style={[a.flex_1, a.justify_center]}
···
8
import {logger} from '#/logger'
9
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
10
import {Logo} from '#/view/icons/Logo'
11
+
import {atoms as a, useBreakpoints, web} from '#/alf'
12
import {Button, ButtonText} from '#/components/Button'
13
import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'
14
import {Text} from '#/components/Typography'
···
78
]}>
79
<FocusScope.FocusScope asChild loop trapped>
80
<View
81
+
style={[
82
{
83
maxWidth: 800,
84
maxHeight: 600,
···
89
a.rounded_lg,
90
a.overflow_hidden,
91
a.zoom_in,
92
+
]}>
93
<ImageBackground
94
source={welcomeModalBg}
95
style={[a.flex_1, a.justify_center]}
+2
-2
src/components/dms/EmojiReactionPicker.web.tsx
+2
-2
src/components/dms/EmojiReactionPicker.web.tsx
···
134
accessibilityRole="button"
135
role="button"
136
onPress={() => setExpanded(true)}
137
-
style={flatten([
138
a.rounded_full,
139
{height: 34, width: 34},
140
a.justify_center,
141
a.align_center,
142
-
])}>
143
<DotGridIcon size="lg" style={t.atoms.text_contrast_medium} />
144
</Pressable>
145
</DropdownMenu.Item>
···
134
accessibilityRole="button"
135
role="button"
136
onPress={() => setExpanded(true)}
137
+
style={[
138
a.rounded_full,
139
{height: 34, width: 34},
140
a.justify_center,
141
a.align_center,
142
+
]}>
143
<DotGridIcon size="lg" style={t.atoms.text_contrast_medium} />
144
</Pressable>
145
</DropdownMenu.Item>
+1
-1
src/components/dms/ReportDialog.tsx
+1
-1
src/components/dms/ReportDialog.tsx
+2
-3
src/components/forms/Toggle.tsx
+2
-3
src/components/forms/Toggle.tsx
···
6
import {isNative} from '#/platform/detection'
7
import {
8
atoms as a,
9
-
flatten,
10
native,
11
type TextStyleProp,
12
useTheme,
···
233
onPressOut={onPressOut}
234
onFocus={onFocus}
235
onBlur={onBlur}
236
-
style={[a.flex_row, a.align_center, a.gap_sm, flatten(style)]}>
237
{typeof children === 'function' ? children(state) : children}
238
</Pressable>
239
</ItemContext.Provider>
···
260
native({
261
paddingTop: 2,
262
}),
263
-
flatten(style),
264
]}>
265
{children}
266
</Text>
···
6
import {isNative} from '#/platform/detection'
7
import {
8
atoms as a,
9
native,
10
type TextStyleProp,
11
useTheme,
···
232
onPressOut={onPressOut}
233
onFocus={onFocus}
234
onBlur={onBlur}
235
+
style={[a.flex_row, a.align_center, a.gap_sm, style]}>
236
{typeof children === 'function' ? children(state) : children}
237
</Pressable>
238
</ItemContext.Provider>
···
259
native({
260
paddingTop: 2,
261
}),
262
+
style,
263
]}>
264
{children}
265
</Text>
+1
-1
src/components/icons/TEMPLATE.tsx
+1
-1
src/components/icons/TEMPLATE.tsx
+3
-3
src/screens/Messages/components/MessageInput.web.tsx
+3
-3
src/screens/Messages/components/MessageInput.web.tsx
···
1
import React from 'react'
2
-
import {Pressable, StyleSheet, View} from 'react-native'
3
import {msg} from '@lingui/macro'
4
import {useLingui} from '@lingui/react'
5
import Graphemer from 'graphemer'
···
19
type EmojiPickerPosition,
20
} from '#/view/com/composer/text-input/web/EmojiPicker'
21
import * as Toast from '#/view/com/util/Toast'
22
-
import {atoms as a, useTheme} from '#/alf'
23
import {Button} from '#/components/Button'
24
import {useSharedInputStyles} from '#/components/forms/TextField'
25
import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji'
···
199
</Button>
200
<TextareaAutosize
201
ref={textAreaRef}
202
-
style={StyleSheet.flatten([
203
a.flex_1,
204
a.px_sm,
205
a.border_0,
···
1
import React from 'react'
2
+
import {Pressable, View} from 'react-native'
3
import {msg} from '@lingui/macro'
4
import {useLingui} from '@lingui/react'
5
import Graphemer from 'graphemer'
···
19
type EmojiPickerPosition,
20
} from '#/view/com/composer/text-input/web/EmojiPicker'
21
import * as Toast from '#/view/com/util/Toast'
22
+
import {atoms as a, flatten, useTheme} from '#/alf'
23
import {Button} from '#/components/Button'
24
import {useSharedInputStyles} from '#/components/forms/TextField'
25
import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji'
···
199
</Button>
200
<TextareaAutosize
201
ref={textAreaRef}
202
+
style={flatten([
203
a.flex_1,
204
a.px_sm,
205
a.border_0,
+2
-11
src/screens/Onboarding/Layout.tsx
+2
-11
src/screens/Onboarding/Layout.tsx
···
10
import {Context} from '#/screens/Onboarding/state'
11
import {
12
atoms as a,
13
-
flatten,
14
native,
15
type TextStyleProp,
16
tokens,
···
228
}: React.PropsWithChildren<TextStyleProp>) {
229
return (
230
<Text
231
-
style={[
232
-
a.pb_sm,
233
-
a.text_4xl,
234
-
a.font_semi_bold,
235
-
a.leading_tight,
236
-
flatten(style),
237
-
]}>
238
{children}
239
</Text>
240
)
···
245
style,
246
}: React.PropsWithChildren<TextStyleProp>) {
247
const t = useTheme()
248
-
return (
249
-
<P style={[t.atoms.text_contrast_medium, flatten(style)]}>{children}</P>
250
-
)
251
}
···
10
import {Context} from '#/screens/Onboarding/state'
11
import {
12
atoms as a,
13
native,
14
type TextStyleProp,
15
tokens,
···
227
}: React.PropsWithChildren<TextStyleProp>) {
228
return (
229
<Text
230
+
style={[a.pb_sm, a.text_4xl, a.font_semi_bold, a.leading_tight, style]}>
231
{children}
232
</Text>
233
)
···
238
style,
239
}: React.PropsWithChildren<TextStyleProp>) {
240
const t = useTheme()
241
+
return <P style={[t.atoms.text_contrast_medium, style]}>{children}</P>
242
}
+1
-1
src/screens/Profile/components/ProfileFeedHeader.tsx
+1
-1
src/screens/Profile/components/ProfileFeedHeader.tsx
+1
-1
src/screens/ProfileList/components/Header.tsx
+1
-1
src/screens/ProfileList/components/Header.tsx
+1
-3
src/screens/StarterPack/StarterPackScreen.tsx
+1
-3
src/screens/StarterPack/StarterPackScreen.tsx
···
458
</ProfileSubpageHeader>
459
{!hasSession || richText || joinedAllTimeCount >= 25 ? (
460
<View style={[a.px_lg, a.pt_md, a.pb_sm, a.gap_md]}>
461
-
{richText ? (
462
-
<RichText value={richText} style={[a.text_md, a.leading_snug]} />
463
-
) : null}
464
{!hasSession ? (
465
<Button
466
label={_(msg`Join Bluesky`)}
+1
-1
src/screens/VideoFeed/index.tsx
+1
-1
src/screens/VideoFeed/index.tsx
+2
-2
src/view/com/util/images/ImageLayoutGrid.tsx
+2
-2
src/view/com/util/images/ImageLayoutGrid.tsx
···
1
import React from 'react'
2
-
import {type StyleProp, StyleSheet, View, type ViewStyle} from 'react-native'
3
import {type AnimatedRef, useAnimatedRef} from 'react-native-reanimated'
4
import {type AppBskyEmbedImages} from '@atproto/api'
5
···
224
if (corners.includes('bottomRight')) {
225
styles.push({borderBottomRightRadius: 0})
226
}
227
-
return StyleSheet.flatten(styles)
228
}
···
1
import React from 'react'
2
+
import {type StyleProp, View, type ViewStyle} from 'react-native'
3
import {type AnimatedRef, useAnimatedRef} from 'react-native-reanimated'
4
import {type AppBskyEmbedImages} from '@atproto/api'
5
···
224
if (corners.includes('bottomRight')) {
225
styles.push({borderBottomRightRadius: 0})
226
}
227
+
return styles
228
}
+3
-2
src/view/icons/Logo.tsx
+3
-2
src/view/icons/Logo.tsx
···
1
import React from 'react'
2
-
import {StyleSheet, type TextProps} from 'react-native'
3
import Svg, {
4
Defs,
5
LinearGradient,
···
12
13
import {colors} from '#/lib/styles'
14
import {useKawaiiMode} from '#/state/preferences/kawaii'
15
16
const ratio = 57 / 64
17
···
23
export const Logo = React.forwardRef(function LogoImpl(props: Props, ref) {
24
const {fill, ...rest} = props
25
const gradient = fill === 'sky'
26
-
const styles = StyleSheet.flatten(props.style)
27
const _fill = gradient ? 'url(#sky)' : fill || styles?.color || colors.blue3
28
// @ts-ignore it's fiiiiine
29
const size = parseInt(rest.width || 32)
···
1
import React from 'react'
2
+
import {type TextProps} from 'react-native'
3
import Svg, {
4
Defs,
5
LinearGradient,
···
12
13
import {colors} from '#/lib/styles'
14
import {useKawaiiMode} from '#/state/preferences/kawaii'
15
+
import {flatten} from '#/alf'
16
17
const ratio = 57 / 64
18
···
24
export const Logo = React.forwardRef(function LogoImpl(props: Props, ref) {
25
const {fill, ...rest} = props
26
const gradient = fill === 'sky'
27
+
const styles = flatten(props.style)
28
const _fill = gradient ? 'url(#sky)' : fill || styles?.color || colors.blue3
29
// @ts-ignore it's fiiiiine
30
const size = parseInt(rest.width || 32)