feat: specify selection colour for inputs

upryzing · Feb 7, 2025 · cf59286 · cf59286
1 parent 1bd90f8
commit cf59286
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/src/components/MessageBox.tsx b/src/components/MessageBox.tsx
@@ -1,5 +1,5 @@
 import {useContext, useState} from 'react';
-import {Platform, Pressable, StyleSheet, TextInput, View} from 'react-native';
+import {Platform, Pressable, StyleSheet, View} from 'react-native';
 import {useTranslation} from 'react-i18next';
 import {observer} from 'mobx-react-lite';
 
@@ -14,7 +14,7 @@ import {app, setFunction} from '@clerotri/Generic';
 import {client} from '@clerotri/lib/client';
 import {styles} from '@clerotri/Theme';
 import {DocumentPicker} from '@clerotri/crossplat/DocumentPicker';
-import {Avatar, Text, Username} from '@clerotri/components/common/atoms';
+import {Avatar, Input, Text, Username} from '@clerotri/components/common/atoms';
 import {USER_IDS} from '@clerotri/lib/consts';
 import {storage} from '@clerotri/lib/storage';
 import {commonValues, Theme, ThemeContext} from '@clerotri/lib/themes';
@@ -228,7 +228,7 @@ export const MessageBox = observer((props: MessageBoxProps) => {
             />
           </Pressable>
         ) : null}
-        <TextInput
+        <Input
           multiline
           placeholderTextColor={currentTheme.foregroundSecondary}
           style={{

diff --git a/src/components/common/atoms/Input.tsx b/src/components/common/atoms/Input.tsx
@@ -17,6 +17,9 @@ export function Input(props: InputProps) {
         props.isLoginInput ? localStyles.loginInput : localStyles.input,
         props.style,
       ]}
+      cursorColor={currentTheme.accentColor}
+      selectionHandleColor={currentTheme.accentColor}
+      selectionColor={`${currentTheme.accentColor}60`}
       {...props}
     />
   );

diff --git a/src/components/common/atoms/InputWithButton.tsx b/src/components/common/atoms/InputWithButton.tsx
@@ -46,6 +46,9 @@ export function InputWithButton({
         onChangeText={v => {
           setValue(v);
         }}
+        cursorColor={currentTheme.accentColor}
+        selectionHandleColor={currentTheme.accentColor}
+        selectionColor={`${currentTheme.accentColor}60`}
         placeholder={placeholder}
         style={[
           localStyles.iwbInput,

diff --git a/src/components/sheets/ReportSheet.tsx b/src/components/sheets/ReportSheet.tsx
@@ -1,5 +1,5 @@
 import {useContext, useMemo, useRef, useState} from 'react';
-import {ScrollView, StyleSheet, TextInput, View} from 'react-native';
+import {ScrollView, StyleSheet, View} from 'react-native';
 import {observer} from 'mobx-react-lite';
 
 import type BottomSheetCore from '@gorhom/bottom-sheet';
@@ -11,6 +11,7 @@ import {client} from '@clerotri/lib/client';
 import {
   Avatar,
   Button,
+  Input,
   Text,
   Username,
 } from '@clerotri/components/common/atoms';
@@ -345,7 +346,7 @@ export const ReportSheet = observer(() => {
             {reason.reason && !status.status && (
               <>
                 <Text>You can add more context to your report here.</Text>
-                <TextInput
+                <Input
                   style={localStyles.input}
                   value={additionalContext}
                   onChangeText={(c: string) => {
@@ -387,7 +388,7 @@ export const ReportSheet = observer(() => {
             {reason.reason && !status.status && (
               <>
                 <Text>You can add more context to your report here.</Text>
-                <TextInput
+                <Input
                   style={localStyles.input}
                   value={additionalContext}
                   onChangeText={(c: string) => {
@@ -425,7 +426,7 @@ export const ReportSheet = observer(() => {
             {reason.reason && !status.status && (
               <>
                 <Text>You can add more context to your report here.</Text>
-                <TextInput
+                <Input
                   style={localStyles.input}
                   value={additionalContext}
                   onChangeText={(c: string) => {