From 9102af6b07b7c70f06f51c0a2e9e838a99e0af21 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Mon, 3 Apr 2023 16:19:22 -0500
Subject: More darkmode fixes (#381)

* Update confirm modal to use theming system (close #347)

* Add dark mode styles to serverinput modal

* Fix lint
---
 src/view/com/modals/Confirm.tsx     | 45 ++++++++++++++++++++-----------------
 src/view/com/modals/ServerInput.tsx | 19 ++++++++--------
 2 files changed, 35 insertions(+), 29 deletions(-)

(limited to 'src')

diff --git a/src/view/com/modals/Confirm.tsx b/src/view/com/modals/Confirm.tsx
index 2bfcf4118..63877fe5d 100644
--- a/src/view/com/modals/Confirm.tsx
+++ b/src/view/com/modals/Confirm.tsx
@@ -5,14 +5,14 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
 import {Text} from '../util/text/Text'
 import {useStores} from 'state/index'
-import {s, colors, gradients} from 'lib/styles'
+import {s, colors} from 'lib/styles'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {cleanError} from 'lib/strings/errors'
+import {usePalette} from 'lib/hooks/usePalette'
 
-export const snapPoints = ['50%']
+export const snapPoints = [300]
 
 export function Component({
   title,
@@ -23,6 +23,7 @@ export function Component({
   message: string | (() => JSX.Element)
   onPressConfirm: () => void | Promise<void>
 }) {
+  const pal = usePalette('default')
   const store = useStores()
   const [isProcessing, setIsProcessing] = useState<boolean>(false)
   const [error, setError] = useState<string>('')
@@ -39,10 +40,14 @@ export function Component({
     }
   }
   return (
-    <View testID="confirmModal" style={[s.flex1, s.pl10, s.pr10]}>
-      <Text style={styles.title}>{title}</Text>
+    <View testID="confirmModal" style={[pal.view, styles.container]}>
+      <Text type="title-xl" style={[pal.text, styles.title]}>
+        {title}
+      </Text>
       {typeof message === 'string' ? (
-        <Text style={styles.description}>{message}</Text>
+        <Text type="xl" style={[pal.textLight, styles.description]}>
+          {message}
+        </Text>
       ) : (
         message()
       )}
@@ -51,19 +56,17 @@ export function Component({
           <ErrorMessage message={error} />
         </View>
       ) : undefined}
+      <View style={s.flex1} />
       {isProcessing ? (
         <View style={[styles.btn, s.mt10]}>
           <ActivityIndicator />
         </View>
       ) : (
-        <TouchableOpacity testID="confirmBtn" style={s.mt10} onPress={onPress}>
-          <LinearGradient
-            colors={[gradients.blueLight.start, gradients.blueLight.end]}
-            start={{x: 0, y: 0}}
-            end={{x: 1, y: 1}}
-            style={[styles.btn]}>
-            <Text style={[s.white, s.bold, s.f18]}>Confirm</Text>
-          </LinearGradient>
+        <TouchableOpacity
+          testID="confirmBtn"
+          onPress={onPress}
+          style={[styles.btn]}>
+          <Text style={[s.white, s.bold, s.f18]}>Confirm</Text>
         </TouchableOpacity>
       )}
     </View>
@@ -71,26 +74,28 @@ export function Component({
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 10,
+    paddingBottom: 60,
+  },
   title: {
     textAlign: 'center',
-    fontWeight: 'bold',
-    fontSize: 24,
     marginBottom: 12,
   },
   description: {
     textAlign: 'center',
-    fontSize: 17,
     paddingHorizontal: 22,
-    color: colors.gray5,
     marginBottom: 10,
   },
   btn: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    width: '100%',
     borderRadius: 32,
     padding: 14,
-    backgroundColor: colors.gray1,
+    marginTop: 22,
+    marginHorizontal: 44,
+    backgroundColor: colors.blue3,
   },
 })
diff --git a/src/view/com/modals/ServerInput.tsx b/src/view/com/modals/ServerInput.tsx
index 1d352cec9..078abbf64 100644
--- a/src/view/com/modals/ServerInput.tsx
+++ b/src/view/com/modals/ServerInput.tsx
@@ -8,6 +8,7 @@ import {ScrollView, TextInput} from './util'
 import {Text} from '../util/text/Text'
 import {useStores} from 'state/index'
 import {s, colors} from 'lib/styles'
+import {usePalette} from 'lib/hooks/usePalette'
 import {useTheme} from 'lib/ThemeContext'
 import {LOCAL_DEV_SERVICE, STAGING_SERVICE, PROD_SERVICE} from 'state/index'
 import {LOGIN_INCLUDE_DEV_SERVERS} from 'lib/build-flags'
@@ -16,6 +17,7 @@ export const snapPoints = ['80%']
 
 export function Component({onSelect}: {onSelect: (url: string) => void}) {
   const theme = useTheme()
+  const pal = usePalette('default')
   const store = useStores()
   const [customUrl, setCustomUrl] = useState<string>('')
 
@@ -28,8 +30,10 @@ export function Component({onSelect}: {onSelect: (url: string) => void}) {
   }
 
   return (
-    <View style={s.flex1} testID="serverInputModal">
-      <Text style={[s.textCenter, s.bold, s.f18]}>Choose Service</Text>
+    <View style={[pal.view, s.flex1]} testID="serverInputModal">
+      <Text type="2xl-bold" style={[pal.text, s.textCenter]}>
+        Choose Service
+      </Text>
       <ScrollView style={styles.inner}>
         <View style={styles.group}>
           {LOGIN_INCLUDE_DEV_SERVERS ? (
@@ -66,11 +70,11 @@ export function Component({onSelect}: {onSelect: (url: string) => void}) {
           </TouchableOpacity>
         </View>
         <View style={styles.group}>
-          <Text style={styles.label}>Other service</Text>
+          <Text style={[pal.text, styles.label]}>Other service</Text>
           <View style={s.flexRow}>
             <TextInput
               testID="customServerTextInput"
-              style={styles.textInput}
+              style={[pal.borderDark, pal.text, styles.textInput]}
               placeholder="e.g. https://bsky.app"
               placeholderTextColor={colors.gray4}
               autoCapitalize="none"
@@ -82,11 +86,11 @@ export function Component({onSelect}: {onSelect: (url: string) => void}) {
             />
             <TouchableOpacity
               testID="customServerSelectBtn"
-              style={styles.textInputBtn}
+              style={[pal.borderDark, pal.text, styles.textInputBtn]}
               onPress={() => doSelect(customUrl)}>
               <FontAwesomeIcon
                 icon="check"
-                style={[s.black as FontAwesomeIconStyle, styles.checkIcon]}
+                style={[pal.text as FontAwesomeIconStyle, styles.checkIcon]}
                 size={18}
               />
             </TouchableOpacity>
@@ -112,18 +116,15 @@ const styles = StyleSheet.create({
   textInput: {
     flex: 1,
     borderWidth: 1,
-    borderColor: colors.gray3,
     borderTopLeftRadius: 6,
     borderBottomLeftRadius: 6,
     paddingHorizontal: 14,
     paddingVertical: 12,
     fontSize: 16,
-    color: colors.black,
   },
   textInputBtn: {
     borderWidth: 1,
     borderLeftWidth: 0,
-    borderColor: colors.gray3,
     borderTopRightRadius: 6,
     borderBottomRightRadius: 6,
     paddingHorizontal: 14,
-- 
cgit 1.4.1