diff options
-rw-r--r-- | src/view/com/composer/ComposePost.tsx | 2 | ||||
-rw-r--r-- | src/view/com/discover/SuggestedFollows.tsx | 2 | ||||
-rw-r--r-- | src/view/com/modals/Confirm.tsx | 2 | ||||
-rw-r--r-- | src/view/com/modals/EditProfile.tsx | 2 | ||||
-rw-r--r-- | src/view/com/modals/ReportAccount.tsx | 2 | ||||
-rw-r--r-- | src/view/com/modals/ReportPost.tsx | 2 | ||||
-rw-r--r-- | src/view/com/profile/ProfileHeader.tsx | 9 | ||||
-rw-r--r-- | src/view/com/util/FAB.tsx | 2 | ||||
-rw-r--r-- | src/view/com/util/PostEmbeds.tsx | 2 | ||||
-rw-r--r-- | src/view/com/util/UserAvatar.tsx | 8 | ||||
-rw-r--r-- | src/view/com/util/UserBanner.tsx | 17 | ||||
-rw-r--r-- | src/view/lib/asset-gen.ts | 34 | ||||
-rw-r--r-- | src/view/lib/styles.ts | 8 | ||||
-rw-r--r-- | src/view/lib/themes.ts | 4 | ||||
-rw-r--r-- | src/view/screens/Home.tsx | 2 |
15 files changed, 30 insertions, 68 deletions
diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx index b3a5680f2..eaf927987 100644 --- a/src/view/com/composer/ComposePost.tsx +++ b/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}> diff --git a/src/view/com/discover/SuggestedFollows.tsx b/src/view/com/discover/SuggestedFollows.tsx index f9e28da29..9a0127260 100644 --- a/src/view/com/discover/SuggestedFollows.tsx +++ b/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]}> diff --git a/src/view/com/modals/Confirm.tsx b/src/view/com/modals/Confirm.tsx index 7545e36a6..3e2ad6eea 100644 --- a/src/view/com/modals/Confirm.tsx +++ b/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]}> diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx index 1b0222980..f830f39e8 100644 --- a/src/view/com/modals/EditProfile.tsx +++ b/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]}> diff --git a/src/view/com/modals/ReportAccount.tsx b/src/view/com/modals/ReportAccount.tsx index bf4d5f5a0..f0b02ae3c 100644 --- a/src/view/com/modals/ReportAccount.tsx +++ b/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]}> diff --git a/src/view/com/modals/ReportPost.tsx b/src/view/com/modals/ReportPost.tsx index d4684069a..1435a723f 100644 --- a/src/view/com/modals/ReportPost.tsx +++ b/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]}> diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index ec577f25e..3bcc825fd 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/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 {getGradient} from '../../lib/asset-gen' +import {s, gradients} from '../../lib/styles' 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]}> diff --git a/src/view/com/util/FAB.tsx b/src/view/com/util/FAB.tsx index ae110c7fc..1129f3361 100644 --- a/src/view/com/util/FAB.tsx +++ b/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}> diff --git a/src/view/com/util/PostEmbeds.tsx b/src/view/com/util/PostEmbeds.tsx index 8d2bc6f33..bb98f55db 100644 --- a/src/view/com/util/PostEmbeds.tsx +++ b/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]} diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx index 6434bb287..bd4897ba8 100644 --- a/src/view/com/util/UserAvatar.tsx +++ b/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} from '../../lib/styles' +import {colors, gradients} 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="1" stopColor={gradient[1]} stopOpacity="1" /> + <Stop offset="0" stopColor={gradients.blue.start} stopOpacity="1" /> + <Stop offset="1" stopColor={gradients.blue.end} stopOpacity="1" /> </LinearGradient> </Defs> <Circle cx="50" cy="50" r="50" fill="url(#grad)" /> diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx index 982e053c3..2bd8f765b 100644 --- a/src/view/com/util/UserBanner.tsx +++ b/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} from '../../lib/styles' +import {colors, gradients} 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 offset="1" stopColor={gradient[1]} stopOpacity="1" /> - </LinearGradient> - <LinearGradient id="grad2" x1="0" y1="0" x2="0" y2="1"> - <Stop offset="0" stopColor="#fff" stopOpacity="0" /> - <Stop offset="1" stopColor="#fff" stopOpacity="0.3" /> + <Stop + offset="0" + stopColor={gradients.blueDark.start} + stopOpacity="1" + /> + <Stop offset="1" stopColor={gradients.blueDark.end} stopOpacity="1" /> </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 deleted file mode 100644 index 6dbce2510..000000000 --- a/src/view/lib/asset-gen.ts +++ /dev/null @@ -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) -} diff --git a/src/view/lib/styles.ts b/src/view/lib/styles.ts index 299c0196a..65bbe1cd0 100644 --- a/src/view/lib/styles.ts +++ b/src/view/lib/styles.ts @@ -50,11 +50,9 @@ export const colors = { } export const gradients = { - primary: {start: '#db00ff', end: '#ff007a'}, - error: {start: '#ff007a', end: '#ed0d78'}, - purple: {start: colors.pink3, end: colors.purple3}, - blue: {start: colors.purple3, end: colors.blue3}, - green: {start: colors.blue3, end: colors.green3}, + blueLight: {start: '#555FFB', end: colors.blue3}, // buttons + blue: {start: '#5E55FB', end: colors.blue3}, // fab + blueDark: {start: '#5F45E0', end: colors.blue3}, // avis, banner } export const s = StyleSheet.create({ diff --git a/src/view/lib/themes.ts b/src/view/lib/themes.ts index 451631e9b..5803bd21c 100644 --- a/src/view/lib/themes.ts +++ b/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, diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index cce8ffff2..8b88014d8 100644 --- a/src/view/screens/Home.tsx +++ b/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, |