Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Update gradients to use a more consistent blue theme

+30 -68
+1 -1
src/view/com/composer/ComposePost.tsx
··· 200 200 testID="composerPublishButton" 201 201 onPress={onPressPublish}> 202 202 <LinearGradient 203 - colors={[gradients.primary.start, gradients.primary.end]} 203 + colors={[gradients.blueLight.start, gradients.blueLight.end]} 204 204 start={{x: 0, y: 0}} 205 205 end={{x: 1, y: 1}} 206 206 style={styles.postBtn}>
+1 -1
src/view/com/discover/SuggestedFollows.tsx
··· 179 179 ) : ( 180 180 <TouchableOpacity onPress={() => onPressFollow(item)}> 181 181 <LinearGradient 182 - colors={[gradients.primary.start, gradients.primary.end]} 182 + colors={[gradients.blueLight.start, gradients.blueLight.end]} 183 183 start={{x: 0, y: 0}} 184 184 end={{x: 1, y: 1}} 185 185 style={[styles.btn, styles.gradientBtn]}>
+1 -1
src/view/com/modals/Confirm.tsx
··· 57 57 ) : ( 58 58 <TouchableOpacity style={s.mt10} onPress={onPress}> 59 59 <LinearGradient 60 - colors={[gradients.primary.start, gradients.primary.end]} 60 + colors={[gradients.blueLight.start, gradients.blueLight.end]} 61 61 start={{x: 0, y: 0}} 62 62 end={{x: 1, y: 1}} 63 63 style={[styles.btn]}>
+1 -1
src/view/com/modals/EditProfile.tsx
··· 153 153 ) : ( 154 154 <TouchableOpacity style={s.mt10} onPress={onPressSave}> 155 155 <LinearGradient 156 - colors={[gradients.primary.start, gradients.primary.end]} 156 + colors={[gradients.blueLight.start, gradients.blueLight.end]} 157 157 start={{x: 0, y: 0}} 158 158 end={{x: 1, y: 1}} 159 159 style={[styles.btn]}>
+1 -1
src/view/com/modals/ReportAccount.tsx
··· 57 57 ) : issue ? ( 58 58 <TouchableOpacity style={s.mt10} onPress={onPress}> 59 59 <LinearGradient 60 - colors={[gradients.primary.start, gradients.primary.end]} 60 + colors={[gradients.blueLight.start, gradients.blueLight.end]} 61 61 start={{x: 0, y: 0}} 62 62 end={{x: 1, y: 1}} 63 63 style={[styles.btn]}>
+1 -1
src/view/com/modals/ReportPost.tsx
··· 56 56 ) : issue ? ( 57 57 <TouchableOpacity style={s.mt10} onPress={onPress}> 58 58 <LinearGradient 59 - colors={[gradients.primary.start, gradients.primary.end]} 59 + colors={[gradients.blueLight.start, gradients.blueLight.end]} 60 60 start={{x: 0, y: 0}} 61 61 end={{x: 1, y: 1}} 62 62 style={[styles.btn]}>
+5 -4
src/view/com/profile/ProfileHeader.tsx
··· 16 16 ProfileImageLightbox, 17 17 } from '../../../state/models/shell-ui' 18 18 import {pluralize} from '../../../lib/strings' 19 - import {s} from '../../lib/styles' 20 - import {getGradient} from '../../lib/asset-gen' 19 + import {s, gradients} from '../../lib/styles' 21 20 import {DropdownButton, DropdownItem} from '../util/forms/DropdownButton' 22 21 import * as Toast from '../util/Toast' 23 22 import {LoadingPlaceholder} from '../util/LoadingPlaceholder' ··· 129 128 130 129 // loaded 131 130 // = 132 - const gradient = getGradient(view.handle) 133 131 const isMe = store.me.did === view.did 134 132 let dropdownItems: DropdownItem[] | undefined 135 133 if (!isMe) { ··· 177 175 testID="profileHeaderToggleFollowButton" 178 176 onPress={onPressToggleFollow}> 179 177 <LinearGradient 180 - colors={[gradient[1], gradient[0]]} 178 + colors={[ 179 + gradients.blueLight.start, 180 + gradients.blueLight.end, 181 + ]} 181 182 start={{x: 0, y: 0}} 182 183 end={{x: 1, y: 1}} 183 184 style={[styles.btn, styles.gradientBtn]}>
+1 -1
src/view/com/util/FAB.tsx
··· 24 24 store.shell.minimalShellMode ? styles.lower : undefined, 25 25 ]}> 26 26 <LinearGradient 27 - colors={[gradients.purple.start, gradients.purple.end]} 27 + colors={[gradients.blueLight.start, gradients.blueLight.end]} 28 28 start={{x: 0, y: 0}} 29 29 end={{x: 1, y: 1}} 30 30 style={styles.inner}>
+1 -1
src/view/com/util/PostEmbeds.tsx
··· 85 85 <AutoSizedImage uri={link.thumb} containerStyle={styles.extImage} /> 86 86 ) : ( 87 87 <LinearGradient 88 - colors={[gradients.blue.start, gradients.blue.end]} 88 + colors={[gradients.blueDark.start, gradients.blueDark.end]} 89 89 start={{x: 0, y: 0}} 90 90 end={{x: 1, y: 1}} 91 91 style={[styles.extImage, styles.extImageFallback]}
+3 -5
src/view/com/util/UserAvatar.tsx
··· 8 8 openPicker, 9 9 Image as PickedImage, 10 10 } from 'react-native-image-crop-picker' 11 - import {getGradient} from '../../lib/asset-gen' 12 - import {colors} from '../../lib/styles' 11 + import {colors, gradients} from '../../lib/styles' 13 12 14 13 export function UserAvatar({ 15 14 size, ··· 25 24 onSelectNewAvatar?: (img: PickedImage) => void 26 25 }) { 27 26 const initials = getInitials(displayName || handle) 28 - const gradient = getGradient(handle) 29 27 30 28 const handleEditAvatar = useCallback(() => { 31 29 Alert.alert('Select upload method', '', [ ··· 68 66 <Svg width={size} height={size} viewBox="0 0 100 100"> 69 67 <Defs> 70 68 <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1"> 71 - <Stop offset="0" stopColor={gradient[0]} stopOpacity="1" /> 72 - <Stop offset="1" stopColor={gradient[1]} stopOpacity="1" /> 69 + <Stop offset="0" stopColor={gradients.blue.start} stopOpacity="1" /> 70 + <Stop offset="1" stopColor={gradients.blue.end} stopOpacity="1" /> 73 71 </LinearGradient> 74 72 </Defs> 75 73 <Circle cx="50" cy="50" r="50" fill="url(#grad)" />
+7 -10
src/view/com/util/UserBanner.tsx
··· 3 3 import Svg, {Rect, Defs, LinearGradient, Stop} from 'react-native-svg' 4 4 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 5 5 import {Image as PickedImage} from 'react-native-image-crop-picker' 6 - import {getGradient} from '../../lib/asset-gen' 7 - import {colors} from '../../lib/styles' 6 + import {colors, gradients} from '../../lib/styles' 8 7 import { 9 8 openCamera, 10 9 openCropper, ··· 20 19 banner?: string | null 21 20 onSelectNewBanner?: (img: PickedImage) => void 22 21 }) { 23 - const gradient = getGradient(handle) 24 - 25 22 const handleEditBanner = useCallback(() => { 26 23 Alert.alert('Select upload method', '', [ 27 24 { ··· 67 64 <Svg width="100%" height="120" viewBox="50 0 200 100"> 68 65 <Defs> 69 66 <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1"> 70 - <Stop offset="0" stopColor={gradient[0]} stopOpacity="1" /> 71 - <Stop offset="1" stopColor={gradient[1]} stopOpacity="1" /> 72 - </LinearGradient> 73 - <LinearGradient id="grad2" x1="0" y1="0" x2="0" y2="1"> 74 - <Stop offset="0" stopColor="#fff" stopOpacity="0" /> 75 - <Stop offset="1" stopColor="#fff" stopOpacity="0.3" /> 67 + <Stop 68 + offset="0" 69 + stopColor={gradients.blueDark.start} 70 + stopOpacity="1" 71 + /> 72 + <Stop offset="1" stopColor={gradients.blueDark.end} stopOpacity="1" /> 76 73 </LinearGradient> 77 74 </Defs> 78 75 <Rect x="0" y="0" width="400" height="100" fill="url(#grad)" />
-34
src/view/lib/asset-gen.ts
··· 1 - import {colors} from './styles' 2 - 3 - const GRADIENTS = [ 4 - [colors.pink3, colors.purple3], 5 - [colors.purple3, colors.blue3], 6 - [colors.blue3, colors.green3], 7 - [colors.red3, colors.pink3], 8 - ] 9 - 10 - export function getGradient(handle: string): string[] { 11 - const gi = cyrb53(handle) % GRADIENTS.length 12 - return GRADIENTS[gi] 13 - } 14 - 15 - // deterministic string->hash 16 - // https://stackoverflow.com/a/52171480 17 - function cyrb53(str: string, seed = 0): number { 18 - let h1 = 0xdeadbeef ^ seed, 19 - h2 = 0x41c6ce57 ^ seed 20 - for (let i = 0, ch; i < str.length; i++) { 21 - ch = str.charCodeAt(i) 22 - h1 = Math.imul(h1 ^ ch, 2654435761) 23 - h2 = Math.imul(h2 ^ ch, 1597334677) 24 - } 25 - 26 - h1 = 27 - Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ 28 - Math.imul(h2 ^ (h2 >>> 13), 3266489909) 29 - h2 = 30 - Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ 31 - Math.imul(h1 ^ (h1 >>> 13), 3266489909) 32 - 33 - return 4294967296 * (2097151 & h2) + (h1 >>> 0) 34 - }
+3 -5
src/view/lib/styles.ts
··· 50 50 } 51 51 52 52 export const gradients = { 53 - primary: {start: '#db00ff', end: '#ff007a'}, 54 - error: {start: '#ff007a', end: '#ed0d78'}, 55 - purple: {start: colors.pink3, end: colors.purple3}, 56 - blue: {start: colors.purple3, end: colors.blue3}, 57 - green: {start: colors.blue3, end: colors.green3}, 53 + blueLight: {start: '#555FFB', end: colors.blue3}, // buttons 54 + blue: {start: '#5E55FB', end: colors.blue3}, // fab 55 + blueDark: {start: '#5F45E0', end: colors.blue3}, // avis, banner 58 56 } 59 57 60 58 export const s = StyleSheet.create({
+3 -1
src/view/lib/themes.ts
··· 21 21 replyLineDot: colors.gray3, 22 22 unreadNotifBg: '#ebf6ff', 23 23 postCtrl: '#8A7171', 24 + brandText: '#0066FF', 24 25 }, 25 26 primary: { 26 27 background: colors.blue3, ··· 207 208 fontWeight: '500', 208 209 }, 209 210 'title-lg': { 210 - fontSize: 24, 211 + fontSize: 22, 211 212 fontWeight: '500', 212 213 }, 213 214 title: { ··· 263 264 replyLineDot: colors.gray6, 264 265 unreadNotifBg: colors.blue5, 265 266 postCtrl: '#7A6161', 267 + brandText: '#0085ff', 266 268 }, 267 269 primary: { 268 270 ...defaultTheme.palette.primary,
+1 -1
src/view/screens/Home.tsx
··· 117 117 flexDirection: 'row', 118 118 position: 'absolute', 119 119 left: 10, 120 - backgroundColor: colors.pink3, 120 + backgroundColor: colors.blue3, 121 121 paddingHorizontal: 12, 122 122 paddingVertical: 10, 123 123 borderRadius: 30,