style: changed modals to be neater

Vali-98 · Aug 23, 2024 · e57db32 · e57db32
1 parent b70a1ce
commit e57db32
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 53 deletions.
diff --git a/app/components/CharacterMenu/CharacterNewMenu.tsx b/app/components/CharacterMenu/CharacterNewMenu.tsx
@@ -70,8 +70,9 @@ const CharacterNewMenu: React.FC<CharacterNewMenuProps> = ({
         <View style={styles.headerButtonContainer}>
             <TextBoxModal
                 booleans={[showNewChar, setShowNewChar]}
-                title="[Creating Character]  Enter Name Below"
+                title="Create New Character"
                 onConfirm={handleCreateCharacter}
+                placeholder="Name..."
             />
 
             <TextBoxModal

diff --git a/app/components/ChatMenu/ChatWindow/EditorModal.tsx b/app/components/ChatMenu/ChatWindow/EditorModal.tsx
@@ -1,7 +1,7 @@
-import { ColorId } from 'app/constants/Style'
 import { MaterialIcons } from '@expo/vector-icons'
 import { Chats, Style } from '@globals'
-import { useState } from 'react'
+import { ColorId } from 'app/constants/Style'
+import { ReactElement, useState } from 'react'
 import {
     GestureResponderEvent,
     Modal,
@@ -16,12 +16,21 @@ import { useShallow } from 'zustand/react/shallow'
 type EditorButtonProps = {
     name: 'delete' | 'check' | 'close'
     color: ColorId
+    label: string
     onPress: () => void
 }
 
-const EditorButton = ({ name, onPress, color }: EditorButtonProps) => (
+const EditorButton = ({ name, onPress, label, color }: EditorButtonProps) => (
     <TouchableOpacity style={styles.editButton} onPress={onPress}>
-        <MaterialIcons name={name} size={32} color={Style.getColor(color)} />
+        <MaterialIcons name={name} size={24} color={Style.getColor(color)} />
+        <Text
+            style={{
+                color: Style.getColor('primary-text2'),
+                fontSize: 16,
+                paddingLeft: 8,
+            }}>
+            {label}
+        </Text>
     </TouchableOpacity>
 )
 
@@ -34,10 +43,13 @@ type EditorProps = {
 
 type FadeScreenProps = {
     handleOverlayClick: (e: GestureResponderEvent) => void
+    children: ReactElement
 }
-const FadeScreen: React.FC<FadeScreenProps> = ({ handleOverlayClick }) => {
+const FadeScreen: React.FC<FadeScreenProps> = ({ handleOverlayClick, children }) => {
     return (
-        <TouchableOpacity activeOpacity={1} onPress={handleOverlayClick} style={styles.absolute} />
+        <TouchableOpacity activeOpacity={1} onPress={handleOverlayClick} style={styles.absolute}>
+            {children}
+        </TouchableOpacity>
     )
 }
 
@@ -80,35 +92,42 @@ const EditorModal: React.FC<EditorProps> = ({ id, isLastMessage, setEditMode, ed
                 transparent
                 onRequestClose={handleClose}
                 style={{ flex: 1 }}>
-                <FadeScreen handleOverlayClick={handleOverlayClick} />
-                <View style={{ flex: 1 }} />
-                <View style={styles.topText}>
-                    <Text style={styles.nameText}>{message?.name}</Text>
-                    <Text style={styles.timeText}>
-                        {message?.swipes[message.swipe_id].send_date.toLocaleTimeString()}
-                    </Text>
-                </View>
-                <View style={styles.editorContainer}>
-                    <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
-                        <EditorButton
-                            name="delete"
-                            onPress={handleDeleteMessage}
-                            color="destructive-brand"
-                        />
+                <FadeScreen handleOverlayClick={handleOverlayClick}>
+                    <View style={styles.editorContainer}>
+                        <View style={styles.topText}>
+                            <Text style={styles.nameText}>{message?.name}</Text>
+                            <Text style={styles.timeText}>
+                                {message?.swipes[message.swipe_id].send_date.toLocaleTimeString()}
+                            </Text>
+                        </View>
                         <TextInput
                             style={styles.messageInput}
                             value={placeholderText}
                             onChangeText={setPlaceholderText}
                             textBreakStrategy="simple"
                             multiline
                         />
-                        <EditorButton
-                            name="check"
-                            onPress={handleEditMessage}
-                            color="primary-text1"
-                        />
+                        <View
+                            style={{
+                                flexDirection: 'row',
+                                justifyContent: 'space-between',
+                            }}>
+                            <EditorButton
+                                name="delete"
+                                label="Delete"
+                                onPress={handleDeleteMessage}
+                                color="destructive-brand"
+                            />
+
+                            <EditorButton
+                                name="check"
+                                label="Confirm"
+                                onPress={handleEditMessage}
+                                color="primary-text1"
+                            />
+                        </View>
                     </View>
-                </View>
+                </FadeScreen>
             </Modal>
         </View>
     )
@@ -118,22 +137,22 @@ export default EditorModal
 
 const styles = StyleSheet.create({
     absolute: {
-        position: 'absolute',
-        width: '100%',
         height: '100%',
+        justifyContent: 'flex-end',
         backgroundColor: 'rgba(0, 0, 0, 0.5)',
     },
 
     editorContainer: {
         backgroundColor: Style.getColor('primary-surface2'),
-        paddingTop: 4,
-        maxHeight: '70%',
+        flexShrink: 1,
         paddingVertical: 12,
+        paddingHorizontal: 16,
     },
 
     topText: {
         flexDirection: 'row',
-        padding: 8,
+        paddingTop: 12,
+        marginBottom: 8,
         alignItems: 'flex-end',
         shadowColor: Style.getColor('primary-shadow'),
         backgroundColor: Style.getColor('primary-surface2'),
@@ -144,7 +163,7 @@ const styles = StyleSheet.create({
     nameText: {
         color: Style.getColor('primary-text1'),
         fontSize: 18,
-        marginLeft: 40,
+        marginLeft: 24,
     },
 
     timeText: {
@@ -154,18 +173,24 @@ const styles = StyleSheet.create({
     },
 
     editButton: {
-        padding: 4,
-        paddingVertical: 12,
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingLeft: 16,
+        paddingVertical: 8,
+        width: 128,
+        marginTop: 8,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: Style.getColor('primary-surface4'),
     },
 
     messageInput: {
         color: Style.getColor('primary-text1'),
         backgroundColor: Style.getColor('primary-surface1'),
         borderColor: Style.getColor('primary-brand'),
-        borderWidth: 1,
-        minHeight: 32,
         borderRadius: 8,
+        borderWidth: 1,
         padding: 8,
-        flex: 1,
+        flexShrink: 1,
     },
 })
diff --git a/app/components/Endpoint/Horde.tsx b/app/components/Endpoint/Horde.tsx
@@ -193,6 +193,7 @@ const Horde = () => {
             <View>
                 {hordeModels?.map((item, index) => (
                     <HordeItem
+                        key={item.name}
                         item={item}
                         unSelect={() => {
                             const models = hordeModels

diff --git a/app/components/TextBoxModal.tsx b/app/components/TextBoxModal.tsx
@@ -18,13 +18,15 @@ type TextBoxModalProps = {
     onConfirm: (text: string) => void
     title?: string
     showPaste?: boolean
+    placeholder?: string
 }
 
 const TextBoxModal: React.FC<TextBoxModalProps> = ({
     booleans: [showModal, setShowModal],
     onConfirm = (text) => {},
     title = 'Enter Name',
     showPaste = false,
+    placeholder = '',
 }) => {
     const [text, setText] = useState('')
 
@@ -35,30 +37,36 @@ const TextBoxModal: React.FC<TextBoxModalProps> = ({
     const handleOverlayClick = (e: GestureResponderEvent) => {
         if (e.target === e.currentTarget) setShowModal(false)
     }
+
+    const handleClose = () => {
+        setShowModal(false)
+    }
+
     return (
         <Modal
             visible={showModal}
-            onRequestClose={() => {
-                setShowModal(false)
-            }}
+            style={{ flex: 1 }}
             transparent
-            statusBarTranslucent={Platform.OS === 'android'}
-            animationType="fade"
-            onDismiss={() => {
-                setShowModal(false)
-            }}>
+            onRequestClose={handleClose}
+            animationType="fade">
             <TouchableOpacity
                 activeOpacity={1}
                 onPress={handleOverlayClick}
                 style={{
-                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
                     flex: 1,
+                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
                     justifyContent: 'center',
                 }}>
                 <View style={styles.modalview}>
                     <Text style={styles.title}>{title}</Text>
                     <View style={styles.inputContainer}>
-                        <TextInput style={styles.input} value={text} onChangeText={setText} />
+                        <TextInput
+                            style={styles.input}
+                            value={text}
+                            onChangeText={setText}
+                            placeholder={placeholder}
+                            placeholderTextColor={Style.getColor('primary-text3')}
+                        />
                         {showPaste && !text && (
                             <TouchableOpacity
                                 style={styles.inputButton}
@@ -105,9 +113,11 @@ const styles = StyleSheet.create({
 
     modalview: {
         margin: 20,
-        backgroundColor: Style.getColor('primary-surface1'),
+        backgroundColor: Style.getColor('primary-surface2'),
         borderRadius: 20,
-        padding: 35,
+        paddingHorizontal: 32,
+        paddingTop: 30,
+        paddingBottom: 20,
         alignItems: 'center',
         shadowColor: '#000',
         shadowOffset: {
@@ -145,8 +155,7 @@ const styles = StyleSheet.create({
     inputContainer: {
         flexDirection: 'row',
         alignItems: 'center',
-        borderColor: Style.getColor('primary-surface4'),
-        borderWidth: 1,
+        backgroundColor: Style.getColor('primary-surface1'),
         borderRadius: 8,
         marginBottom: 8,
     },