fixed issue with discard track modal, using already created bottom sh…

…eet modal, and fixed padding in discription input

src/frontend/screens/MapScreen/track/SaveTrackScreen.tsx

@@ -1,6 +1,5 @@
-import React, {useRef, useState} from 'react';
+import React, {useState} from 'react';
 import {SafeAreaView, ScrollView, StyleSheet, View} from 'react-native';
-import {BottomSheetModal} from '@gorhom/bottom-sheet';
 import {SaveTrackHeader} from './saveTrack/SaveTrackHeader';
 import {DiscardTrackModal} from './saveTrack/DiscardTrackModal';
 import {BottomSheet} from '../../../sharedComponents/BottomSheet/BottomSheet';
@@ -11,6 +10,7 @@ import {defineMessages, useIntl} from 'react-intl';
 import {Text} from '../../../sharedComponents/Text';
 import {TrackDescriptionField} from './saveTrack/TrackDescriptionField';
 import {NavigationProp} from '@react-navigation/native';
+import {useBottomSheetModal} from '../../../sharedComponents/BottomSheetModal';
 
 const m = defineMessages({
   newTitle: {
@@ -35,7 +35,9 @@ export const SaveTrackScreen: React.FC<{navigation: NavigationProp<any>}> = ({
 }) => {
   const {formatMessage: t} = useIntl();
   const [description, setDescription] = useState('');
-  const bottomSheetRef = useRef<BottomSheetModal>(null);
+  const {sheetRef, isOpen, openSheet} = useBottomSheetModal({
+    openOnMount: false,
+  });
 
   const handleCameraPress = React.useCallback(() => {
     navigation.navigate('AddPhoto');
@@ -55,10 +57,7 @@ export const SaveTrackScreen: React.FC<{navigation: NavigationProp<any>}> = ({
   ];
   return (
     <SafeAreaView style={styles.container}>
-      <SaveTrackHeader
-        bottomSheetRef={bottomSheetRef}
-        description={description}
-      />
+      <SaveTrackHeader openSheet={openSheet} description={description} />
       <ScrollView
         style={styles.container}
         contentContainerStyle={styles.scrollViewContent}>
@@ -70,7 +69,7 @@ export const SaveTrackScreen: React.FC<{navigation: NavigationProp<any>}> = ({
           description={description}
           setDescription={setDescription}
         />
-        <DiscardTrackModal bottomSheetRef={bottomSheetRef} />
+        <DiscardTrackModal bottomSheetRef={sheetRef} isOpen={isOpen} />
       </ScrollView>
       <BottomSheet items={bottomSheetItems} />
     </SafeAreaView>

src/frontend/screens/MapScreen/track/saveTrack/DiscardTrackModal.tsx

@@ -1,24 +1,20 @@
-import React, {FC, useCallback} from 'react';
-import {
-  BottomSheetBackdrop,
-  BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from '@gorhom/bottom-sheet';
+import React, {FC} from 'react';
 import {BottomSheetModalMethods} from '@gorhom/bottom-sheet/lib/typescript/types';
-import {StyleSheet, View} from 'react-native';
-import {Text} from '../../../../sharedComponents/Text';
-import {Button} from '../../../../sharedComponents/Button';
+import {StyleSheet} from 'react-native';
 import {defineMessages, useIntl} from 'react-intl';
 import ErrorIcon from '../../../../images/Error.svg';
-import {COMAPEO_BLUE, MAGENTA, WHITE} from '../../../../lib/styles';
 import {useNavigationFromHomeTabs} from '../../../../hooks/useNavigationWithTypes';
-import DiscardIcon from '../../../../images/delete.svg';
 import {useCurrentTrackStore} from '../../../../hooks/tracks/useCurrentTrackStore';
 import {TabName} from '../../../../Navigation/types';
+import DiscardIcon from '../../../../images/delete.svg';
+import {
+  BottomSheetContent,
+  BottomSheetModal,
+} from '../../../../sharedComponents/BottomSheetModal';
 
 export interface DiscardTrackModal {
   bottomSheetRef: React.RefObject<BottomSheetModalMethods>;
+  isOpen: boolean;
 }
 
 const m = defineMessages({
@@ -40,7 +36,10 @@ const m = defineMessages({
   },
 });
 
-export const DiscardTrackModal: FC<DiscardTrackModal> = ({bottomSheetRef}) => {
+export const DiscardTrackModal: FC<DiscardTrackModal> = ({
+  bottomSheetRef,
+  isOpen,
+}) => {
   const {formatMessage} = useIntl();
   const navigation = useNavigationFromHomeTabs();
   const clearCurrentTrack = useCurrentTrackStore(
@@ -56,93 +55,32 @@ export const DiscardTrackModal: FC<DiscardTrackModal> = ({bottomSheetRef}) => {
     bottomSheetRef.current?.close();
   };
 
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
   return (
-    <BottomSheetModal
-      style={styles.modal}
-      ref={bottomSheetRef}
-      enableDynamicSizing
-      enableDismissOnClose
-      enableContentPanningGesture={false}
-      enableHandlePanningGesture={false}
-      backdropComponent={renderBackdrop}
-      handleComponent={() => null}>
-      <BottomSheetView>
-        <View style={styles.wrapper}>
-          <ErrorIcon width={60} height={60} style={styles.image} />
-          <Text style={styles.title}>{formatMessage(m.discardTrackTitle)}</Text>
-          <Text style={styles.description}>
-            {formatMessage(m.discardTrackDescription)}
-          </Text>
-          <Button
-            fullWidth
-            onPress={handleDiscard}
-            style={styles.discardButton}>
-            <View style={styles.discardButtonWrapper}>
-              <DiscardIcon />
-              <Text style={[styles.buttonText, styles.discardButtonText]}>
-                {formatMessage(m.discardTrackDiscardButton)}
-              </Text>
-            </View>
-          </Button>
-          <Button
-            fullWidth
-            onPress={handleContinue}
-            style={styles.defaultButton}>
-            <Text style={[styles.buttonText, styles.defaultButtonText]}>
-              {formatMessage(m.discardTrackDefaultButton)}
-            </Text>
-          </Button>
-        </View>
-      </BottomSheetView>
+    <BottomSheetModal ref={bottomSheetRef} isOpen={isOpen}>
+      <BottomSheetContent
+        loading={false}
+        buttonConfigs={[
+          {
+            variation: 'filled',
+            dangerous: true,
+            onPress: handleDiscard,
+            text: formatMessage(m.discardTrackDiscardButton),
+            icon: <DiscardIcon />,
+          },
+          {
+            onPress: handleContinue,
+            text: formatMessage(m.discardTrackDefaultButton),
+            variation: 'outlined',
+          },
+        ]}
+        title={formatMessage(m.discardTrackTitle)}
+        description={formatMessage(m.discardTrackDescription)}
+        icon={<ErrorIcon width={60} height={60} style={styles.image} />}
+      />
     </BottomSheetModal>
   );
 };
 
 export const styles = StyleSheet.create({
-  modal: {borderBottomLeftRadius: 0, borderBottomRightRadius: 0},
-  wrapper: {
-    paddingTop: 30,
-    paddingHorizontal: 40,
-    paddingBottom: 20,
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'center',
-  },
   image: {marginBottom: 15},
-  title: {fontSize: 24, fontWeight: 'bold', textAlign: 'center'},
-  description: {fontSize: 16, textAlign: 'center', marginVertical: 10},
-  discardButton: {
-    backgroundColor: MAGENTA,
-    marginBottom: 20,
-  },
-  discardButtonWrapper: {
-    flexDirection: 'row',
-  },
-  discardButtonText: {
-    marginLeft: 10,
-    color: WHITE,
-  },
-  buttonText: {
-    fontWeight: '700',
-    fontSize: 16,
-  },
-  defaultButtonText: {
-    color: COMAPEO_BLUE,
-  },
-  defaultButton: {
-    borderWidth: 1.5,
-    borderColor: '#CCCCD6',
-    backgroundColor: 'transparent',
-  },
 });

src/frontend/screens/MapScreen/track/saveTrack/SaveTrackHeader.tsx

@@ -2,7 +2,6 @@ import React, {FC} from 'react';
 import {View, Image, StyleSheet, Pressable} from 'react-native';
 import {Text} from '../../../../sharedComponents/Text';
 import Close from '../../../../images/close.svg';
-import {BottomSheetModalMethods} from '@gorhom/bottom-sheet/lib/typescript/types';
 import {useCreateTrack} from '../../../../hooks/server/track';
 import {useCurrentTrackStore} from '../../../../hooks/tracks/useCurrentTrackStore';
 import {DateTime} from 'luxon';
@@ -19,12 +18,12 @@ const m = defineMessages({
 });
 
 export interface SaveTrackHeader {
-  bottomSheetRef: React.RefObject<BottomSheetModalMethods>;
+  openSheet: () => void;
   description: string;
 }
 
 export const SaveTrackHeader: FC<SaveTrackHeader> = ({
-  bottomSheetRef,
+  openSheet,
   description,
 }) => {
   const saveTrack = useCreateTrack();
@@ -67,9 +66,7 @@ export const SaveTrackHeader: FC<SaveTrackHeader> = ({
   return (
     <View style={styles.container}>
       <View style={styles.closeWrapper}>
-        <Pressable
-          hitSlop={10}
-          onPress={() => bottomSheetRef.current?.present()}>
+        <Pressable hitSlop={10} onPress={openSheet}>
           <Close style={styles.closeIcon} />
         </Pressable>
         <Text style={styles.text}>{t(m.trackEditScreenTitle)}</Text>

src/frontend/screens/MapScreen/track/saveTrack/TrackDescriptionField.tsx

@@ -41,7 +41,6 @@ const styles = StyleSheet.create({
     flex: 1,
     minHeight: 100,
     fontSize: 20,
-    paddingHorizontal: 20,
     color: 'black',
     alignItems: 'flex-start',
     justifyContent: 'flex-start',