fix: split component and change layout spacing

TERITORI · Feb 26, 2024 · 5f88ea2 · 5f88ea2
1 parent d2874f4
commit 5f88ea2
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 94 deletions.
diff --git a/packages/components/modals/ModalBase.tsx b/packages/components/modals/ModalBase.tsx
@@ -190,7 +190,7 @@ const ModalBase: React.FC<ModalBaseProps> = ({
                         borderRadius: 20,
                         alignItems: "center",
                         justifyContent: "center",
-                        marginRight: 12,
+                        marginRight: layout.spacing_x1_5,
                       }}
                       onPress={onBackPress}
                     >

diff --git a/...lFeed/NewsFeed/MapComponent/Component.tsx → ...d/NewsFeed/MapComponent/AddressSearch.tsx b/...lFeed/NewsFeed/MapComponent/Component.tsx → ...d/NewsFeed/MapComponent/AddressSearch.tsx
@@ -7,30 +7,19 @@ import {
   ViewStyle,
 } from "react-native";
 
-import chevronLeft from "../../../../../assets/icons/chevron-left.svg";
-import close from "../../../../../assets/icons/close.svg";
 import location from "../../../../../assets/icons/location.svg";
 import {
   neutral77,
-  neutralA3,
   primaryColor,
   secondaryColor,
 } from "../../../../utils/style/colors";
-import {
-  fontMedium16,
-  fontSemibold13,
-  fontSemibold16,
-} from "../../../../utils/style/fonts";
+import { fontSemibold13 } from "../../../../utils/style/fonts";
 import { BrandText } from "../../../BrandText";
 import { SVG } from "../../../SVG";
 import { TextInputCustom } from "../../../inputs/TextInputCustom";
 import { TextInputOutsideLabel } from "../../../inputs/TextInputOutsideLabel";
-import { SpacerRow } from "../../../spacer";
-let typingTimeout: NodeJS.Timeout | undefined;
 
-interface TMapHeaderProps {
-  onClose: () => void;
-}
+let typingTimeout: NodeJS.Timeout | undefined;
 
 interface TAddressSearchProps {
   addressPlaceHolder: any;
@@ -40,35 +29,6 @@ interface TAddressSearchProps {
   setAddressPlaceHolder: any;
 }
 
-interface TDescriptionInputProps {
-  description: any;
-  setDescription: any;
-}
-
-export const MapHeader: React.FC<TMapHeaderProps> = ({ onClose }) => {
-  return (
-    <View style={[header]}>
-      <View style={[headerText]}>
-        <View style={[button32]}>
-          <SVG
-            source={chevronLeft}
-            height={24}
-            width={24}
-            color={secondaryColor}
-          />
-        </View>
-        <BrandText style={[fontSemibold16]}>Add location</BrandText>
-        <SpacerRow size={2} />
-        <BrandText style={[fontMedium16, { color: neutralA3 }]}>2/2</BrandText>
-      </View>
-
-      <TouchableOpacity style={[button32]} onPress={onClose}>
-        <SVG source={close} height={24} width={24} color={secondaryColor} />
-      </TouchableOpacity>
-    </View>
-  );
-};
-
 export const AddressSearch: React.FC<TAddressSearchProps> = ({
   addressPlaceHolder,
   address,
@@ -171,50 +131,6 @@ export const AddressSearch: React.FC<TAddressSearchProps> = ({
   );
 };
 
-export const DescriptionInput: React.FC<TDescriptionInputProps> = ({
-  description,
-  setDescription,
-}) => {
-  return (
-    <>
-      <TextInputOutsideLabel label="Describe for people that will find this track on map" />
-      <TextInputCustom
-        noBrokenCorners
-        label=""
-        hideLabel
-        name="description"
-        placeHolder="Description"
-        multiline
-        numberOfLines={4}
-        onChangeText={setDescription}
-        value={description}
-      />
-    </>
-  );
-};
-
-// MapHeader styles
-const header: ViewStyle = {
-  flexDirection: "row",
-  alignItems: "center",
-  justifyContent: "space-between",
-  width: "100%",
-  paddingVertical: 20,
-};
-
-const headerText: ViewStyle = {
-  flexDirection: "row",
-  alignItems: "center",
-  justifyContent: "center",
-};
-
-const button32: ViewStyle = {
-  height: 32,
-  width: 32,
-  alignItems: "center",
-  justifyContent: "center",
-};
-
 // AddressSearch
 const locationContainer: ViewStyle = {
   flexDirection: "column",

diff --git a/packages/components/socialFeed/NewsFeed/MapComponent/MapDescriptionInput.tsx b/packages/components/socialFeed/NewsFeed/MapComponent/MapDescriptionInput.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+import { TextInputCustom } from "../../../inputs/TextInputCustom";
+import { TextInputOutsideLabel } from "../../../inputs/TextInputOutsideLabel";
+
+interface TDescriptionInputProps {
+  description: any;
+  setDescription: any;
+}
+
+export const MapDescriptionInput: React.FC<TDescriptionInputProps> = ({
+  description,
+  setDescription,
+}) => {
+  return (
+    <>
+      <TextInputOutsideLabel label="Describe for people that will find this track on map" />
+      <TextInputCustom
+        noBrokenCorners
+        label=""
+        hideLabel
+        name="description"
+        placeHolder="Description"
+        multiline
+        numberOfLines={4}
+        onChangeText={setDescription}
+        value={description}
+      />
+    </>
+  );
+};
diff --git a/packages/components/socialFeed/NewsFeed/MapComponent/MapHeader.tsx b/packages/components/socialFeed/NewsFeed/MapComponent/MapHeader.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import { TouchableOpacity, View, ViewStyle } from "react-native";
+
+import chevronLeft from "../../../../../assets/icons/chevron-left.svg";
+import close from "../../../../../assets/icons/close.svg";
+import { neutralA3, secondaryColor } from "../../../../utils/style/colors";
+import { fontMedium16, fontSemibold16 } from "../../../../utils/style/fonts";
+import { BrandText } from "../../../BrandText";
+import { SVG } from "../../../SVG";
+import { SpacerRow } from "../../../spacer";
+
+interface TMapHeaderProps {
+  onClose: () => void;
+}
+
+export const MapHeader: React.FC<TMapHeaderProps> = ({ onClose }) => {
+  return (
+    <View style={[header]}>
+      <View style={[headerText]}>
+        <View style={[button32]}>
+          <SVG
+            source={chevronLeft}
+            height={24}
+            width={24}
+            color={secondaryColor}
+          />
+        </View>
+        <BrandText style={[fontSemibold16]}>Add location</BrandText>
+        <SpacerRow size={2} />
+        <BrandText style={[fontMedium16, { color: neutralA3 }]}>2/2</BrandText>
+      </View>
+
+      <TouchableOpacity style={[button32]} onPress={onClose}>
+        <SVG source={close} height={24} width={24} color={secondaryColor} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+// MapHeader styles
+const header: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: "100%",
+  paddingVertical: 20,
+};
+
+const headerText: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "center",
+};
+
+const button32: ViewStyle = {
+  height: 32,
+  width: 32,
+  alignItems: "center",
+  justifyContent: "center",
+};
diff --git a/packages/components/socialFeed/NewsFeed/MapModal.tsx b/packages/components/socialFeed/NewsFeed/MapModal.tsx
@@ -1,11 +1,9 @@
 import React, { Suspense, lazy, useState } from "react";
 import { Platform, View, ViewStyle } from "react-native";
 
-import {
-  AddressSearch,
-  DescriptionInput,
-  MapHeader,
-} from "./MapComponent/Component";
+import { AddressSearch } from "./MapComponent/AddressSearch";
+import { MapDescriptionInput } from "./MapComponent/MapDescriptionInput";
+import { MapHeader } from "./MapComponent/MapHeader";
 import {
   neutral17,
   primaryColor,
@@ -74,7 +72,7 @@ export const MapModal: React.FC<TMapModalProps> = ({
 
         <SpacerColumn size={2} />
 
-        <DescriptionInput
+        <MapDescriptionInput
           description={description}
           setDescription={setDescription}
         />

diff --git a/packages/components/socialFeed/NewsFeed/NewsFeedInput.tsx b/packages/components/socialFeed/NewsFeed/NewsFeedInput.tsx
@@ -22,7 +22,6 @@ import FlexRow from "../../FlexRow";
 import { IconBox } from "../../IconBox";
 import { OmniLink } from "../../OmniLink";
 import { SVG } from "../../SVG";
-import { PrimaryBox } from "../../boxes/PrimaryBox";
 import { PrimaryButton } from "../../buttons/PrimaryButton";
 import { SecondaryButtonOutline } from "../../buttons/SecondaryButtonOutline";
 import { FileUploader } from "../../fileUploader";