forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Web darkmode fixes (#474)
* Change dark mode borders to be slightly lighter than the bg rather than slightly darker
* Add dark mode styling to web composer
* Fix editprofile darkmode
authored by
Paul Frazee
and committed by
GitHub
f917c426
5caa6a5e
+51
-40
+1
-1
src/lib/themes.ts
+1
-1
src/lib/themes.ts
+45
-31
src/view/com/composer/text-input/TextInput.web.tsx
+45
-31
src/view/com/composer/text-input/TextInput.web.tsx
···
11
11
import isEqual from 'lodash.isequal'
12
12
import {UserAutocompleteModel} from 'state/models/discovery/user-autocomplete'
13
13
import {createSuggestion} from './web/Autocomplete'
14
+
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
14
15
15
16
export interface TextInputRef {
16
17
focus: () => void
···
42
43
TextInputProps,
43
44
ref,
44
45
) => {
45
-
const editor = useEditor({
46
-
extensions: [
47
-
Document,
48
-
Link.configure({
49
-
protocols: ['http', 'https'],
50
-
autolink: true,
51
-
}),
52
-
Mention.configure({
53
-
HTMLAttributes: {
54
-
class: 'mention',
46
+
const modeClass = useColorSchemeStyle(
47
+
'ProseMirror-light',
48
+
'ProseMirror-dark',
49
+
)
50
+
51
+
const editor = useEditor(
52
+
{
53
+
extensions: [
54
+
Document,
55
+
Link.configure({
56
+
protocols: ['http', 'https'],
57
+
autolink: true,
58
+
}),
59
+
Mention.configure({
60
+
HTMLAttributes: {
61
+
class: 'mention',
62
+
},
63
+
suggestion: createSuggestion({autocompleteView}),
64
+
}),
65
+
Paragraph,
66
+
Placeholder.configure({
67
+
placeholder,
68
+
}),
69
+
Text,
70
+
],
71
+
editorProps: {
72
+
attributes: {
73
+
class: modeClass,
55
74
},
56
-
suggestion: createSuggestion({autocompleteView}),
57
-
}),
58
-
Paragraph,
59
-
Placeholder.configure({
60
-
placeholder,
61
-
}),
62
-
Text,
63
-
],
64
-
content: richtext.text.toString(),
65
-
autofocus: true,
66
-
editable: true,
67
-
injectCSS: true,
68
-
onUpdate({editor: editorProp}) {
69
-
const json = editorProp.getJSON()
75
+
},
76
+
content: richtext.text.toString(),
77
+
autofocus: true,
78
+
editable: true,
79
+
injectCSS: true,
80
+
onUpdate({editor: editorProp}) {
81
+
const json = editorProp.getJSON()
70
82
71
-
const newRt = new RichText({text: editorJsonToText(json).trim()})
72
-
setRichText(newRt)
83
+
const newRt = new RichText({text: editorJsonToText(json).trim()})
84
+
setRichText(newRt)
73
85
74
-
const newSuggestedLinks = new Set(editorJsonToLinks(json))
75
-
if (!isEqual(newSuggestedLinks, suggestedLinks)) {
76
-
onSuggestedLinksChanged(newSuggestedLinks)
77
-
}
86
+
const newSuggestedLinks = new Set(editorJsonToLinks(json))
87
+
if (!isEqual(newSuggestedLinks, suggestedLinks)) {
88
+
onSuggestedLinksChanged(newSuggestedLinks)
89
+
}
90
+
},
78
91
},
79
-
})
92
+
[modeClass],
93
+
)
80
94
81
95
React.useImperativeHandle(ref, () => ({
82
96
focus: () => {}, // TODO
+2
-8
src/view/com/modals/EditProfile.tsx
+2
-8
src/view/com/modals/EditProfile.tsx
···
148
148
<Text style={[styles.label, pal.text]}>Display Name</Text>
149
149
<TextInput
150
150
testID="editProfileDisplayNameInput"
151
-
style={[styles.textInput, pal.text]}
151
+
style={[styles.textInput, pal.border, pal.text]}
152
152
placeholder="e.g. Alice Roberts"
153
153
placeholderTextColor={colors.gray4}
154
154
value={displayName}
···
159
159
<Text style={[styles.label, pal.text]}>Description</Text>
160
160
<TextInput
161
161
testID="editProfileDescriptionInput"
162
-
style={[styles.textArea, pal.text]}
162
+
style={[styles.textArea, pal.border, pal.text]}
163
163
placeholder="e.g. Artist, dog-lover, and memelord."
164
164
placeholderTextColor={colors.gray4}
165
165
keyboardAppearance={theme.colorScheme}
···
217
217
},
218
218
textInput: {
219
219
borderWidth: 1,
220
-
borderColor: colors.gray3,
221
220
borderRadius: 6,
222
221
paddingHorizontal: 14,
223
222
paddingVertical: 10,
224
223
fontSize: 16,
225
-
color: colors.black,
226
224
},
227
225
textArea: {
228
226
borderWidth: 1,
229
-
borderColor: colors.gray3,
230
227
borderRadius: 6,
231
228
paddingHorizontal: 12,
232
229
paddingTop: 10,
233
230
fontSize: 16,
234
-
color: colors.black,
235
231
height: 100,
236
232
textAlignVertical: 'top',
237
233
},
···
252
248
height: 84,
253
249
borderWidth: 2,
254
250
borderRadius: 42,
255
-
borderColor: colors.white,
256
-
backgroundColor: colors.white,
257
251
},
258
252
photos: {
259
253
marginBottom: 36,