Unify profile follow btn colors with the rest

zio/stable
Paul Frazee 2022-11-05 15:07:28 -05:00
parent dd146957e6
commit 5d6ab1f548
5 changed files with 43 additions and 40 deletions

View File

@ -1,5 +1,5 @@
{
"name": "pubsq",
"name": "bsky.app",
"version": "0.0.1",
"private": true,
"scripts": {

View File

@ -14,7 +14,8 @@ import {ProfileViewModel} from '../../../state/models/profile-view'
import {useStores} from '../../../state'
import {EditProfileModel} from '../../../state/models/shell'
import {pluralize} from '../../lib/strings'
import {s, gradients, colors} from '../../lib/styles'
import {s, colors} from '../../lib/styles'
import {getGradient} from '../../lib/asset-gen'
import Toast from '../util/Toast'
import {UserAvatar} from '../util/UserAvatar'
import {UserBanner} from '../util/UserBanner'
@ -80,6 +81,7 @@ export const ProfileHeader = observer(function ProfileHeader({
// loaded
// =
const gradient = getGradient(view.handle)
const isMe = store.me.did === view.did
return (
<View style={styles.outer}>
@ -120,7 +122,7 @@ export const ProfileHeader = observer(function ProfileHeader({
) : (
<TouchableOpacity onPress={onPressToggleFollow}>
<LinearGradient
colors={[gradients.primary.start, gradients.primary.end]}
colors={[gradient[1], gradient[0]]}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
style={[styles.btn, styles.gradientBtn]}>

View File

@ -1,13 +1,6 @@
import React from 'react'
import Svg, {Circle, Text, Defs, LinearGradient, Stop} from 'react-native-svg'
import {colors} from '../../lib/styles'
const GRADIENTS = [
[colors.pink3, colors.purple3],
[colors.purple3, colors.blue3],
[colors.blue3, colors.green3],
[colors.red3, colors.pink3],
]
import {getGradient} from '../../lib/asset-gen'
export function UserAvatar({
size,
@ -42,11 +35,6 @@ export function UserAvatar({
)
}
export function getGradient(handle: string): string[] {
const gi = cyrb53(handle) % GRADIENTS.length
return GRADIENTS[gi]
}
function getInitials(str: string): string {
const tokens = str
.split(' ')
@ -60,24 +48,3 @@ function getInitials(str: string): string {
}
return 'X'
}
// 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)
}

View File

@ -1,6 +1,6 @@
import React from 'react'
import Svg, {Rect, Defs, LinearGradient, Stop} from 'react-native-svg'
import {getGradient} from './UserAvatar'
import {getGradient} from '../../lib/asset-gen'
export function UserBanner({handle}: {handle: string}) {
const gradient = getGradient(handle)
@ -12,8 +12,8 @@ export function UserBanner({handle}: {handle: string}) {
<Stop offset="1" stopColor={gradient[1]} stopOpacity="1" />
</LinearGradient>
<LinearGradient id="grad2" x1="0" y1="0" x2="0" y2="1">
<Stop offset="0" stopColor="#000" stopOpacity="0" />
<Stop offset="1" stopColor="#000" stopOpacity="0.1" />
<Stop offset="0" stopColor="#fff" stopOpacity="0" />
<Stop offset="1" stopColor="#fff" stopOpacity="0.3" />
</LinearGradient>
</Defs>
<Rect x="0" y="0" width="400" height="100" fill="url(#grad)" />

View File

@ -0,0 +1,34 @@
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)
}