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
zio/stable
Paul Frazee 2023-04-13 16:10:27 -07:00 committed by GitHub
parent 5caa6a5e08
commit f917c426a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 51 additions and 40 deletions

View File

@ -297,7 +297,7 @@ export const darkTheme: Theme = {
textLight: colors.gray3, textLight: colors.gray3,
textInverted: colors.black, textInverted: colors.black,
link: colors.blue3, link: colors.blue3,
border: colors.black, border: colors.gray7,
borderDark: colors.gray6, borderDark: colors.gray6,
icon: colors.gray4, icon: colors.gray4,

View File

@ -11,6 +11,7 @@ import {Text} from '@tiptap/extension-text'
import isEqual from 'lodash.isequal' import isEqual from 'lodash.isequal'
import {UserAutocompleteModel} from 'state/models/discovery/user-autocomplete' import {UserAutocompleteModel} from 'state/models/discovery/user-autocomplete'
import {createSuggestion} from './web/Autocomplete' import {createSuggestion} from './web/Autocomplete'
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
export interface TextInputRef { export interface TextInputRef {
focus: () => void focus: () => void
@ -42,41 +43,54 @@ export const TextInput = React.forwardRef(
TextInputProps, TextInputProps,
ref, ref,
) => { ) => {
const editor = useEditor({ const modeClass = useColorSchemeStyle(
extensions: [ 'ProseMirror-light',
Document, 'ProseMirror-dark',
Link.configure({ )
protocols: ['http', 'https'],
autolink: true, const editor = useEditor(
}), {
Mention.configure({ extensions: [
HTMLAttributes: { Document,
class: 'mention', Link.configure({
protocols: ['http', 'https'],
autolink: true,
}),
Mention.configure({
HTMLAttributes: {
class: 'mention',
},
suggestion: createSuggestion({autocompleteView}),
}),
Paragraph,
Placeholder.configure({
placeholder,
}),
Text,
],
editorProps: {
attributes: {
class: modeClass,
}, },
suggestion: createSuggestion({autocompleteView}), },
}), content: richtext.text.toString(),
Paragraph, autofocus: true,
Placeholder.configure({ editable: true,
placeholder, injectCSS: true,
}), onUpdate({editor: editorProp}) {
Text, const json = editorProp.getJSON()
],
content: richtext.text.toString(),
autofocus: true,
editable: true,
injectCSS: true,
onUpdate({editor: editorProp}) {
const json = editorProp.getJSON()
const newRt = new RichText({text: editorJsonToText(json).trim()}) const newRt = new RichText({text: editorJsonToText(json).trim()})
setRichText(newRt) setRichText(newRt)
const newSuggestedLinks = new Set(editorJsonToLinks(json)) const newSuggestedLinks = new Set(editorJsonToLinks(json))
if (!isEqual(newSuggestedLinks, suggestedLinks)) { if (!isEqual(newSuggestedLinks, suggestedLinks)) {
onSuggestedLinksChanged(newSuggestedLinks) onSuggestedLinksChanged(newSuggestedLinks)
} }
},
}, },
}) [modeClass],
)
React.useImperativeHandle(ref, () => ({ React.useImperativeHandle(ref, () => ({
focus: () => {}, // TODO focus: () => {}, // TODO

View File

@ -148,7 +148,7 @@ export function Component({
<Text style={[styles.label, pal.text]}>Display Name</Text> <Text style={[styles.label, pal.text]}>Display Name</Text>
<TextInput <TextInput
testID="editProfileDisplayNameInput" testID="editProfileDisplayNameInput"
style={[styles.textInput, pal.text]} style={[styles.textInput, pal.border, pal.text]}
placeholder="e.g. Alice Roberts" placeholder="e.g. Alice Roberts"
placeholderTextColor={colors.gray4} placeholderTextColor={colors.gray4}
value={displayName} value={displayName}
@ -159,7 +159,7 @@ export function Component({
<Text style={[styles.label, pal.text]}>Description</Text> <Text style={[styles.label, pal.text]}>Description</Text>
<TextInput <TextInput
testID="editProfileDescriptionInput" testID="editProfileDescriptionInput"
style={[styles.textArea, pal.text]} style={[styles.textArea, pal.border, pal.text]}
placeholder="e.g. Artist, dog-lover, and memelord." placeholder="e.g. Artist, dog-lover, and memelord."
placeholderTextColor={colors.gray4} placeholderTextColor={colors.gray4}
keyboardAppearance={theme.colorScheme} keyboardAppearance={theme.colorScheme}
@ -217,21 +217,17 @@ const styles = StyleSheet.create({
}, },
textInput: { textInput: {
borderWidth: 1, borderWidth: 1,
borderColor: colors.gray3,
borderRadius: 6, borderRadius: 6,
paddingHorizontal: 14, paddingHorizontal: 14,
paddingVertical: 10, paddingVertical: 10,
fontSize: 16, fontSize: 16,
color: colors.black,
}, },
textArea: { textArea: {
borderWidth: 1, borderWidth: 1,
borderColor: colors.gray3,
borderRadius: 6, borderRadius: 6,
paddingHorizontal: 12, paddingHorizontal: 12,
paddingTop: 10, paddingTop: 10,
fontSize: 16, fontSize: 16,
color: colors.black,
height: 100, height: 100,
textAlignVertical: 'top', textAlignVertical: 'top',
}, },
@ -252,8 +248,6 @@ const styles = StyleSheet.create({
height: 84, height: 84,
borderWidth: 2, borderWidth: 2,
borderRadius: 42, borderRadius: 42,
borderColor: colors.white,
backgroundColor: colors.white,
}, },
photos: { photos: {
marginBottom: 36, marginBottom: 36,

View File

@ -82,6 +82,9 @@
font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
min-height: 140px; min-height: 140px;
} }
.ProseMirror-dark {
color: white;
}
.ProseMirror p { .ProseMirror p {
margin: 0; margin: 0;
} }