ui changes

components/pages/brain_dump/MoveBrainDump.tsx

@@ -7,7 +7,7 @@ import {
   TextField,
   TouchableOpacity,
 } from "react-native-ui-lib";
-import { StyleSheet } from "react-native";
+import { Dimensions, StyleSheet } from "react-native";
 import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
 import { IBrainDump, useBrainDumpContext } from "@/contexts/DumpContext";
 import PenIcon from "@/assets/svgs/PenIcon";
@@ -28,6 +28,7 @@ const MoveBrainDump = (props: {
   const [description, setDescription] = useState<string>(
     props.item.description
   );
+  const { width } = Dimensions.get("screen");
 
   useEffect(() => {
     updateBrainDumpItem(props.item.id, { description: description });
@@ -37,20 +38,26 @@ const MoveBrainDump = (props: {
     <Dialog
       bottom={true}
       height={"90%"}
+      width={width}
       panDirection={PanningDirectionsEnum.DOWN}
       onDismiss={() => props.setIsVisible(false)}
       containerStyle={{
-        borderRadius: 10,
+        borderRadius: 15,
         backgroundColor: "white",
         width: "100%",
         alignSelf: "stretch",
-        padding: 0,
+        padding: 10,
         paddingTop: 3,
         margin: 0,
       }}
       visible={props.isVisible}
     >
-      <View row spread paddingH-10 paddingV-15>
+      <View center paddingT-8>
+        <TouchableOpacity onPress={() => props.setIsVisible(false)}>
+          <DropModalIcon />
+        </TouchableOpacity>
+      </View>
+      <View row spread paddingH-10 paddingB-15>
         <Button
           color="#05a8b6"
           style={styles.topBtn}
@@ -59,16 +66,10 @@ const MoveBrainDump = (props: {
             props.setIsVisible(false);
           }}
         />
-        <Button
-          style={styles.topBtn}
-          iconSource={() => <DropModalIcon />}
-          onPress={() => {
-            props.setIsVisible(false);
-          }}
-        />
         <View row>
           <Button
             style={styles.topBtn}
+            marginR-10
             iconSource={() => <PenIcon />}
             onPress={() => {
               console.log("selview");
@@ -87,16 +88,23 @@ const MoveBrainDump = (props: {
         </View>
       </View>
       <View centerH>
-        <Text text60R>{props.item.title} </Text>
+        <Text style={styles.title}>{props.item.title} </Text>
       </View>
       <View style={styles.divider} />
-      <View row marginL-10 gap-5>
-        <View paddingT-8>
+      <View row gap-5>
+        <View paddingT-8 marginR-5>
           <MenuIcon width={20} height={12} />
         </View>
         <TextField
           textAlignVertical="top"
           multiline
+          fieldStyle={{
+            width: "94%",
+          }}
+          style={{
+            fontFamily: "Manrope_400Regular",
+            fontSize: 14,
+          }}
           placeholder="Add description"
           numberOfLines={3}
           value={description}
@@ -106,7 +114,7 @@ const MoveBrainDump = (props: {
         />
       </View>
       <View style={styles.divider} />
-      <View gap-20 paddingH-10>
+      <View gap-20>
         <TouchableOpacity>
           <View row centerV>
             <NavToDosIcon
@@ -162,6 +170,7 @@ const styles = StyleSheet.create({
   topBtn: {
     backgroundColor: "white",
     color: "#05a8b6",
+    marginTop: -3,
   },
   rotateSwitch: {
     marginLeft: 35,
@@ -179,6 +188,10 @@ const styles = StyleSheet.create({
   optionsIcon: {
     marginRight: 10,
   },
+  title: {
+    fontSize: 22,
+    fontFamily: "Manrope_500Medium",
+  },
 });
 
 export default MoveBrainDump;