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 darkmodezio/stable
parent
5caa6a5e08
commit
f917c426a0
|
@ -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,
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue