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

Update gradients to use a more consistent blue theme

Browse source
This commit is contained in:
Paul Frazee 2023-01-18 12:32:48 -06:00
parent 77580ab6a4
commit a51354e6e6
15 changed files with 30 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/view/com/util/FAB.tsx
View file

@ -24,7 +24,7 @@ export const FAB = observer(
store.shell.minimalShellMode ? styles.lower : undefined,
]}>
<LinearGradient
colors={[gradients.purple.start, gradients.purple.end]}
colors={[gradients.blueLight.start, gradients.blueLight.end]}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
style={styles.inner}>

2
src/view/com/util/PostEmbeds.tsx
View file

@ -85,7 +85,7 @@ export function PostEmbeds({
<AutoSizedImage uri={link.thumb} containerStyle={styles.extImage} />
) : (
<LinearGradient
colors={[gradients.blue.start, gradients.blue.end]}
colors={[gradients.blueDark.start, gradients.blueDark.end]}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
style={[styles.extImage, styles.extImageFallback]}

8
src/view/com/util/UserAvatar.tsx
View file

@ -8,8 +8,7 @@ import {
openPicker,
Image as PickedImage,
} from 'react-native-image-crop-picker'
import {getGradient} from '../../lib/asset-gen'
import {colors} from '../../lib/styles'
import {colors, gradients} from '../../lib/styles'
export function UserAvatar({
size,
@ -25,7 +24,6 @@ export function UserAvatar({
onSelectNewAvatar?: (img: PickedImage) => void
}) {
const initials = getInitials(displayName || handle)
const gradient = getGradient(handle)
const handleEditAvatar = useCallback(() => {
Alert.alert('Select upload method', '', [
@ -68,8 +66,8 @@ export function UserAvatar({
<Svg width={size} height={size} viewBox="0 0 100 100">
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
<Stop offset="0" stopColor={gradient[0]} stopOpacity="1" />
<Stop offset="1" stopColor={gradient[1]} stopOpacity="1" />
<Stop offset="0" stopColor={gradients.blue.start} stopOpacity="1" />
<Stop offset="1" stopColor={gradients.blue.end} stopOpacity="1" />
</LinearGradient>
</Defs>
<Circle cx="50" cy="50" r="50" fill="url(#grad)" />

17
src/view/com/util/UserBanner.tsx
View file

@ -3,8 +3,7 @@ import {StyleSheet, View, TouchableOpacity, Alert, Image} from 'react-native'
import Svg, {Rect, Defs, LinearGradient, Stop} from 'react-native-svg'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Image as PickedImage} from 'react-native-image-crop-picker'
import {getGradient} from '../../lib/asset-gen'
import {colors} from '../../lib/styles'
import {colors, gradients} from '../../lib/styles'
import {
openCamera,
openCropper,
@ -20,8 +19,6 @@ export function UserBanner({
banner?: string | null
onSelectNewBanner?: (img: PickedImage) => void
}) {
const gradient = getGradient(handle)
const handleEditBanner = useCallback(() => {
Alert.alert('Select upload method', '', [
{
@ -67,12 +64,12 @@ export function UserBanner({
<Svg width="100%" height="120" viewBox="50 0 200 100">
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
<Stop offset="0" stopColor={gradient[0]} stopOpacity="1" />
<Stop offset="1" stopColor={gradient[1]} stopOpacity="1" />
</LinearGradient>
<LinearGradient id="grad2" x1="0" y1="0" x2="0" y2="1">
<Stop offset="0" stopColor="#fff" stopOpacity="0" />
<Stop offset="1" stopColor="#fff" stopOpacity="0.3" />
<Stop
offset="0"
stopColor={gradients.blueDark.start}
stopOpacity="1"
/>
<Stop offset="1" stopColor={gradients.blueDark.end} stopOpacity="1" />
</LinearGradient>
</Defs>
<Rect x="0" y="0" width="400" height="100" fill="url(#grad)" />