forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Update gradients to use a more consistent blue theme
+30
-68
+1
-1
src/view/com/composer/ComposePost.tsx
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
+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
-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
+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
+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,