From cf59286aaa8095771c58b09ccb4a570136747fc4 Mon Sep 17 00:00:00 2001
From: Rexogamer <beartechtalks@gmail.com>
Date: Fri, 7 Feb 2025 22:31:58 +0000
Subject: [PATCH] feat: specify selection colour for inputs

---
 src/components/MessageBox.tsx                   | 6 +++---
 src/components/common/atoms/Input.tsx           | 3 +++
 src/components/common/atoms/InputWithButton.tsx | 3 +++
 src/components/sheets/ReportSheet.tsx           | 9 +++++----
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/MessageBox.tsx b/src/components/MessageBox.tsx
index 2fe8dcf6..16d066f9 100644
--- 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
index 9eb8661b..61fd34ed 100644
--- 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
index d9cbd8a5..b5581206 100644
--- 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
index de5d4ca4..91e4ab43 100644
--- 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) => {