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

Update gradients to use a more consistent blue theme

zio/stable
Paul Frazee 2023-01-18 12:32:48 -06:00
parent 77580ab6a4
commit a51354e6e6
15 changed files with 30 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/view/com/composer/ComposePost.tsx
View File

@ -200,7 +200,7 @@ export const ComposePost = observer(function ComposePost({
testID="composerPublishButton"
onPress={onPressPublish}>
<LinearGradient
colors={[gradients.primary.start, gradients.primary.end]}
colors={[gradients.blueLight.start, gradients.blueLight.end]}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
style={styles.postBtn}>

2
src/view/com/discover/SuggestedFollows.tsx
View File

@ -179,7 +179,7 @@ const User = ({
) : (
<TouchableOpacity onPress={() => onPressFollow(item)}>
<LinearGradient
colors={[gradients.primary.start, gradients.primary.end]}
colors={[gradients.blueLight.start, gradients.blueLight.end]}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
style={[styles.btn, styles.gradientBtn]}>

2
src/view/com/modals/Confirm.tsx
View File

@ -57,7 +57,7 @@ export function Component({
) : (
<TouchableOpacity style={s.mt10} onPress={onPress}>
<LinearGradient
colors={[gradients.primary.start, gradients.primary.end]}
colors={[gradients.blueLight.start, gradients.blueLight.end]}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
style={[styles.btn]}>

2
src/view/com/modals/EditProfile.tsx
View File

@ -153,7 +153,7 @@ export function Component({
) : (
<TouchableOpacity style={s.mt10} onPress={onPressSave}>
<LinearGradient
colors={[gradients.primary.start, gradients.primary.end]}
colors={[gradients.blueLight.start, gradients.blueLight.end]}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
style={[styles.btn]}>

2
src/view/com/modals/ReportAccount.tsx
View File

@ -57,7 +57,7 @@ export function Component({did}: {did: string}) {
) : issue ? (
<TouchableOpacity style={s.mt10} onPress={onPress}>
<LinearGradient
colors={[gradients.primary.start, gradients.primary.end]}
colors={[gradients.blueLight.start, gradients.blueLight.end]}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
style={[styles.btn]}>

2
src/view/com/modals/ReportPost.tsx
View File

@ -56,7 +56,7 @@ export function Component({postUrl}: {postUrl: string}) {
) : issue ? (
<TouchableOpacity style={s.mt10} onPress={onPress}>
<LinearGradient
colors={[gradients.primary.start, gradients.primary.end]}
colors={[gradients.blueLight.start, gradients.blueLight.end]}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
style={[styles.btn]}>

9
src/view/com/profile/ProfileHeader.tsx
View File

@ -16,8 +16,7 @@ import {
ProfileImageLightbox,
} from '../../../state/models/shell-ui'
import {pluralize} from '../../../lib/strings'
import {s} from '../../lib/styles'
import {getGradient} from '../../lib/asset-gen'
import {s, gradients} from '../../lib/styles'
import {DropdownButton, DropdownItem} from '../util/forms/DropdownButton'
import * as Toast from '../util/Toast'
import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
@ -129,7 +128,6 @@ export const ProfileHeader = observer(function ProfileHeader({
// loaded
// =
const gradient = getGradient(view.handle)
const isMe = store.me.did === view.did
let dropdownItems: DropdownItem[] | undefined
if (!isMe) {
@ -177,7 +175,10 @@ export const ProfileHeader = observer(function ProfileHeader({
testID="profileHeaderToggleFollowButton"
onPress={onPressToggleFollow}>
<LinearGradient
colors={[gradient[1], gradient[0]]}
colors={[
gradients.blueLight.start,
gradients.blueLight.end,
]}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
style={[styles.btn, styles.gradientBtn]}>

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)" />

34
src/view/lib/asset-gen.ts
View File

@ -1,34 +0,0 @@
import {colors} from './styles'
const GRADIENTS = [
[colors.pink3, colors.purple3],
[colors.purple3, colors.blue3],
[colors.blue3, colors.green3],
[colors.red3, colors.pink3],
]
export function getGradient(handle: string): string[] {
const gi = cyrb53(handle) % GRADIENTS.length
return GRADIENTS[gi]
}
// deterministic string->hash
// https://stackoverflow.com/a/52171480
function cyrb53(str: string, seed = 0): number {
let h1 = 0xdeadbeef ^ seed,
h2 = 0x41c6ce57 ^ seed
for (let i = 0, ch; i < str.length; i++) {
ch = str.charCodeAt(i)
h1 = Math.imul(h1 ^ ch, 2654435761)
h2 = Math.imul(h2 ^ ch, 1597334677)
}
h1 =
Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^
Math.imul(h2 ^ (h2 >>> 13), 3266489909)
h2 =
Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^
Math.imul(h1 ^ (h1 >>> 13), 3266489909)
return 4294967296 * (2097151 & h2) + (h1 >>> 0)
}

8
src/view/lib/styles.ts
View File

@ -50,11 +50,9 @@ export const colors = {
}
export const gradients = {
primary: {start: '#db00ff', end: '#ff007a'},
error: {start: '#ff007a', end: '#ed0d78'},
purple: {start: colors.pink3, end: colors.purple3},
blue: {start: colors.purple3, end: colors.blue3},
green: {start: colors.blue3, end: colors.green3},
blueLight: {start: '#555FFB', end: colors.blue3}, // buttons
blue: {start: '#5E55FB', end: colors.blue3}, // fab
blueDark: {start: '#5F45E0', end: colors.blue3}, // avis, banner
}
export const s = StyleSheet.create({

4
src/view/lib/themes.ts
View File

@ -21,6 +21,7 @@ export const defaultTheme: Theme = {
replyLineDot: colors.gray3,
unreadNotifBg: '#ebf6ff',
postCtrl: '#8A7171',
brandText: '#0066FF',
},
primary: {
background: colors.blue3,
@ -207,7 +208,7 @@ export const defaultTheme: Theme = {
fontWeight: '500',
},
'title-lg': {
fontSize: 24,
fontSize: 22,
fontWeight: '500',
},
title: {
@ -263,6 +264,7 @@ export const darkTheme: Theme = {
replyLineDot: colors.gray6,
unreadNotifBg: colors.blue5,
postCtrl: '#7A6161',
brandText: '#0085ff',
},
primary: {
...defaultTheme.palette.primary,

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

@ -117,7 +117,7 @@ const styles = StyleSheet.create({
flexDirection: 'row',
position: 'absolute',
left: 10,
backgroundColor: colors.pink3,
backgroundColor: colors.blue3,
paddingHorizontal: 12,
paddingVertical: 10,
borderRadius: 30,