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,
|
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,
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue