Unify profile follow btn colors with the rest
parent
dd146957e6
commit
5d6ab1f548
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "pubsq",
|
||||
"name": "bsky.app",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
|
|
@ -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]}>
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
|
@ -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)" />
|
||||
|
|
|
@ -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)
|
||||
}
|
Loading…
Reference in New Issue