Update gradients to use a more consistent blue theme

src/view/com/composer/ComposePost.tsx

@@ -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}>

src/view/com/discover/SuggestedFollows.tsx

@@ -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]}>

src/view/com/modals/Confirm.tsx

@@ -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]}>

src/view/com/modals/EditProfile.tsx

@@ -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]}>

src/view/com/modals/ReportAccount.tsx

@@ -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]}>

src/view/com/modals/ReportPost.tsx

@@ -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]}>

src/view/com/profile/ProfileHeader.tsx

@@ -16,8 +16,7 @@ import {
   ProfileImageLightbox,
 } from '../../../state/models/shell-ui'
 import {pluralize} from '../../../lib/strings'
-import {s} from '../../lib/styles'
+import {s, gradients} from '../../lib/styles'
-import {getGradient} from '../../lib/asset-gen'
 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]}>

src/view/com/util/FAB.tsx

@@ -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}>

src/view/com/util/PostEmbeds.tsx

@@ -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]}

src/view/com/util/UserAvatar.tsx

@@ -8,8 +8,7 @@ import {
   openPicker,
   Image as PickedImage,
 } from 'react-native-image-crop-picker'
-import {getGradient} from '../../lib/asset-gen'
+import {colors, gradients} from '../../lib/styles'
-import {colors} 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="0" stopColor={gradients.blue.start} stopOpacity="1" />
-          <Stop offset="1" stopColor={gradient[1]} stopOpacity="1" />
+          <Stop offset="1" stopColor={gradients.blue.end} stopOpacity="1" />
         </LinearGradient>
       </Defs>
       <Circle cx="50" cy="50" r="50" fill="url(#grad)" />

src/view/com/util/UserBanner.tsx

@@ -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, gradients} from '../../lib/styles'
-import {colors} 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
-          <Stop offset="1" stopColor={gradient[1]} stopOpacity="1" />
+            offset="0"
-        </LinearGradient>
+            stopColor={gradients.blueDark.start}
-        <LinearGradient id="grad2" x1="0" y1="0" x2="0" y2="1">
+            stopOpacity="1"
-          <Stop offset="0" stopColor="#fff" stopOpacity="0" />
+          />
-          <Stop offset="1" stopColor="#fff" stopOpacity="0.3" />
+          <Stop offset="1" stopColor={gradients.blueDark.end} stopOpacity="1" />
         </LinearGradient>
       </Defs>
       <Rect x="0" y="0" width="400" height="100" fill="url(#grad)" />

src/view/lib/asset-gen.ts

@@ -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)
-}

src/view/lib/styles.ts

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

src/view/lib/themes.ts

@@ -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,

src/view/screens/Home.tsx

@@ -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,