diff options
| -rw-r--r-- | src/lib/themes.ts | 2 | ||||
| -rw-r--r-- | src/view/com/composer/text-input/TextInput.web.tsx | 76 | ||||
| -rw-r--r-- | src/view/com/modals/EditProfile.tsx | 10 | ||||
| -rw-r--r-- | web/index.html | 3 |
4 files changed, 51 insertions, 40 deletions
diff --git a/src/lib/themes.ts b/src/lib/themes.ts index d7043ad2d..76d4fbf2f 100644 --- a/src/lib/themes.ts +++ b/src/lib/themes.ts @@ -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, diff --git a/src/view/com/composer/text-input/TextInput.web.tsx b/src/view/com/composer/text-input/TextInput.web.tsx index 68d0d10ce..ba628a3f7 100644 --- a/src/view/com/composer/text-input/TextInput.web.tsx +++ b/src/view/com/composer/text-input/TextInput.web.tsx @@ -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 diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx index 4fbf7070b..e6ef765af 100644 --- a/src/view/com/modals/EditProfile.tsx +++ b/src/view/com/modals/EditProfile.tsx @@ -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, diff --git a/web/index.html b/web/index.html index 35ade49c1..b1b9d51dd 100644 --- a/web/index.html +++ b/web/index.html @@ -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; } |