Unify profile follow btn colors with the rest

4 files changed, 42 insertions, 39 deletions

diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index e2ed43908..dfd8d3c29 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -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]}>
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index 8699bcd37..2385316fe 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -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)
-}
diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx
index d3be5d2cb..6c8868972 100644
--- a/src/view/com/util/UserBanner.tsx
+++ b/src/view/com/util/UserBanner.tsx
@@ -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)" />
diff --git a/src/view/lib/asset-gen.ts b/src/view/lib/asset-gen.ts
new file mode 100644
index 000000000..6dbce2510
--- /dev/null
+++ b/src/view/lib/asset-gen.ts
@@ -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)
+}