Switch to procedurally-generated banners

src/view/com/profile/ProfileHeader.tsx

@@ -15,10 +15,9 @@ import {useStores} from '../../../state'
 import {EditProfileModel} from '../../../state/models/shell'
 import {pluralize} from '../../lib/strings'
 import {s, gradients, colors} from '../../lib/styles'
-import {BANNER} from '../../lib/assets'
 import Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
-import {Link} from '../util/Link'
+import {UserBanner} from '../util/UserBanner'
 
 export const ProfileHeader = observer(function ProfileHeader({
   view,
@@ -84,7 +83,7 @@ export const ProfileHeader = observer(function ProfileHeader({
   const isMe = store.me.did === view.did
   return (
     <View style={styles.outer}>
-      <Image style={styles.banner} source={BANNER} />
+      <UserBanner handle={view.handle} />
       {store.nav.tab.canGoBack ? (
         <TouchableOpacity style={styles.backButton} onPress={onPressBack}>
           <FontAwesomeIcon

src/view/com/util/UserAvatar.tsx

@@ -19,13 +19,13 @@ export function UserAvatar({
   handle: string
 }) {
   const initials = getInitials(displayName || handle)
-  const gi = cyrb53(handle) % GRADIENTS.length
+  const gradient = getGradient(handle)
   return (
     <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={GRADIENTS[gi][0]} stopOpacity="1" />
+          <Stop offset="0" stopColor={gradient[0]} stopOpacity="1" />
-          <Stop offset="1" stopColor={GRADIENTS[gi][1]} stopOpacity="1" />
+          <Stop offset="1" stopColor={gradient[1]} stopOpacity="1" />
         </LinearGradient>
       </Defs>
       <Circle cx="50" cy="50" r="50" fill="url(#grad)" />
@@ -42,6 +42,11 @@ 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(' ')

src/view/com/util/UserBanner.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import Svg, {Rect, Defs, LinearGradient, Stop} from 'react-native-svg'
+import {getGradient} from './UserAvatar'
+
+export function UserBanner({handle}: {handle: string}) {
+  const gradient = getGradient(handle)
+  return (
+    <Svg width="400" 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="#000" stopOpacity="0" />
+          <Stop offset="1" stopColor="#000" stopOpacity="0.7" />
+        </LinearGradient>
+      </Defs>
+      <Rect x="0" y="0" width="400" height="100" fill="url(#grad)" />
+      <Rect x="0" y="0" width="400" height="100" fill="url(#grad2)" />
+    </Svg>
+  )
+}

src/view/lib/assets.native.ts

@@ -1,4 +1,3 @@
 import {ImageSourcePropType} from 'react-native'
 
 export const DEF_AVATAR: ImageSourcePropType = require('../../../public/img/default-avatar.jpg')
-export const BANNER: ImageSourcePropType = require('../../../public/img/beta-banner.jpg')

src/view/lib/assets.ts

@@ -1,4 +1,3 @@
 import {ImageSourcePropType} from 'react-native'
 
 export const DEF_AVATAR: ImageSourcePropType = {uri: '/img/default-avatar.jpg'}
-export const BANNER: ImageSourcePropType = {uri: '/img/beta-banner.jpg'}