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,
textInverted: colors.black,
link: colors.blue3,
border: colors.black,
border: colors.gray7,
borderDark: colors.gray6,
icon: colors.gray4,

View File

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

View File

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

View File

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