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

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;
       }