Login signup UI swapped

package.json

@@ -100,6 +100,7 @@
     "patch-package": "^8.0.0",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^3.2.5",
+    "simplify-geojson": "^1.0.5",
     "typescript": "^5.3.3"
   },
   "lint-staged": {

packages/app/components/feed/FeedCard.tsx

@@ -244,16 +244,15 @@ export default function Card({
                       }}
                     >
                       <RLink
-                        href={`/profile/${
-                          type === 'pack' ? owner_id : owner_id
-                        }`}
-                        style={{ textDecoration: 'none' }}
-                      >
-                        <RText color={currentTheme.colors.textColor}>
-                          View{' '}
-                          {owner?.username ? '@' + owner?.username : 'Owner'}
-                        </RText>
-                      </RLink>
+                      href={`/profile/${
+                        type === 'pack' ? owner?.id : owner_id
+                      }`}
+                      style={{ textDecoration: 'none' }}
+                    >
+                      <RText color={currentTheme.colors.textColor}>
+                        View {owner?.username ? '@' + owner?.username : 'Owner'}
+                      </RText>
+                    </RLink>
                       <View
                         style={{
                           flexDirection: 'row',

packages/app/components/map/MapButtonsOverlay.tsx

@@ -77,7 +77,7 @@ const MapButtonsOverlay = ({
             <Entypo name="resize-full-screen" size={21} color="grey" />
           </TouchableOpacity>
 
-          <TouchableOpacity
+          {/* <TouchableOpacity
             style={[
               styles.headerBtnView,
               {
@@ -91,7 +91,7 @@ const MapButtonsOverlay = ({
             onPress={navigateToMaps}
           >
             <FontAwesome5 name="directions" size={21} color="grey" />
-          </TouchableOpacity>
+          </TouchableOpacity> */}
         </>
       ) : (
         // Fullscreen map

packages/app/components/map/MapContainer.web.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { View, Platform } from 'react-native';
 
-import WebMap from './WebMap';
+import WebMap from './WebMap.web';
 import { isObjectEmpty } from '../../utils/isObjectEmpty';
 import { defaultShape } from '../../utils/mapFunctions';
 import useCustomStyles from 'app/hooks/useCustomStyles';

packages/app/components/map/useMapPreview.tsx

@@ -7,6 +7,7 @@ import {
 } from '../../utils/mapFunctions';
 import { api } from '../../constants/api';
 import { useState, useEffect } from 'react';
+import simplify from 'simplify-geojson';
 
 interface Feature {
   [key: string]: any;
@@ -76,11 +77,13 @@ const useMapPreviewData = (shape, processedShape) => {
         imageShape.features.push(feature);
       }
     });
-
+
+
     const urlEncodedImageShapeGeoJSON = encodeURIComponent(
       JSON.stringify(imageShape, null, 0),
     );
 
+
     let bounds = getShapeSourceBounds(shape);
     if (Array.isArray(bounds[0]) && Array.isArray(bounds[1])) {
       bounds = [bounds[0].concat(bounds[1])];
@@ -97,8 +100,8 @@ const useMapPreviewData = (shape, processedShape) => {
       uri: isPoint(shape)
         ? `${mapPreviewEndpoint}/pin-s+db4848(${lng},${lat})/${lng},${lat},8.63,0/900x400`
         : `${mapPreviewEndpoint}/geojson(${urlEncodedImageShapeGeoJSON})/[${bounds.join(
-            ',',
-          )}]/900x400?padding=50,30,30,30`,
+          ',',
+        )}]/900x400?padding=50,30,30,30`,
     };
 
     setMapPreviewData(data);

packages/app/components/pack_table/EditPackItemModal.tsx

@@ -34,14 +34,15 @@ export const EditPackItemModal: React.FC<EditPackItemModalProps> = ({
     : null;
 
   return (
+
     <BaseModal
       title={'Edit Item'}
       isOpen={isOpen}
       onClose={onClose}
       footerComponent={undefined}
       footerButtons={footerButtons}
       triggerComponent={triggerComponent}
-      showTrigger={showTrigger !== undefined ? showTrigger : true}
+      showTrigger={!!triggerComponent}
     >
       {ModalContent && <ModalContent />}
     </BaseModal>

packages/app/components/pack_table/Table.tsx

@@ -56,6 +56,7 @@ export const TableContainer = ({
     setRefetch,
     copy,
   });
+
   const headerRow = ['Item Name', 'Weight', 'Quantity', ''];
   let flexArr = [2, 1, 1, 1];
   const { deletePackItem } = useDeletePackItem();

packages/app/components/pack_table/TableItem.tsx

@@ -70,10 +70,12 @@ const TableItem = ({
 
   let rowData = [
     <RText px={8}>{name}</RText>,
+
     <RText px={0}>{${formatNumber(weight)} ${unit}}</RText>,
     <RText px={0}>{quantity}</RText>,
   ];
   if (hasPermissions) {
+
     if (
       Platform.OS === 'android' ||
       Platform.OS === 'ios' ||
@@ -106,6 +108,7 @@ const TableItem = ({
         isOpen={activeModal === 'delete'}
         onClose={closeModal}
       />
+      ,
       <Row data={rowData} style={styles.row} flexArr={flexArr} />
     </>
   );

packages/app/components/trip/TripCards/TripMapCard.tsx

@@ -1,5 +1,5 @@
 import { RStack, RText } from '@packrat/ui';
-import MapContainer from 'app/components/map/MapContainer';
+import MapContainer from 'app/components/map/MapContainer.web';
 import useTheme from 'app/hooks/useTheme';
 import { TripCardBase } from './TripCardBase';
 import { FontAwesome5 } from '@expo/vector-icons';

packages/app/components/trip/TripCards/TripPlaceCard.tsx

@@ -33,7 +33,7 @@ const TripPlaceCard = ({
   return (
     <TripCardBase icon={icon} title={title}>
       <RStack style={{ width: '80%' }}>
-        <Carousel iconColor={isDark ? '#fff' : '#000'}>
+        <Carousel itemWidth={'5'} iconColor={isDark ? '#fff' : '#000'}>
           {data?.map((item) => {
             return (
               <RCard

packages/app/hooks/destination/useCurrentDestination.ts

@@ -21,6 +21,6 @@ export const useCurrentDestination = () => {
 
     return parseCoordinates(currentDestination);
   }, [currentDestination]);
-
+  
   return { currentDestination, latLng, isError, isLoading };
 };

packages/app/hooks/trails/index.ts

@@ -11,7 +11,7 @@ function useTrails({ latLng, selectedSearch, radius = 1000 }) {
   //   lon,
   //   radius,
   //   selectedSearch,
-  // }); // Assumed to be a valid hook from tRPC.
+  // }); //Assumed to be a valid hook from tRPC.
   const { lat, lon } = latLng;
   const isEnabled = Boolean(lat && lon);
   // SWAP FOR TRPC react query

packages/app/screens/LoginScreen.tsx

@@ -17,6 +17,7 @@ import { NODE_ENV } from '@packrat/config';
 import useTheme from '../hooks/useTheme';
 import { useGoogleAuth, useLogin } from 'app/auth/hooks';
 import { userSignIn as userSignInSchema } from '@packrat/validations';
+import { SignInScreen } from '@packrat/ui/src/Bento/forms/layouts';
 
 const RText: any = OriginalRText;
 const RHeading: any = OriginalRHeading;
@@ -52,145 +53,10 @@ export default function Login() {
               paddingTop: 32,
               paddingBottom: 32,
               width: '90%',
-              maxWidth: 290,
+              maxWidth: 400,
             }}
           >
-            <RHeading
-              fontSize={32}
-              color={
-                currentTheme.colors.background === '#0284c7'
-                  ? currentTheme.colors.black
-                  : 'white'
-              }
-              fontWeight="semibold"
-            >
-              Welcome
-            </RHeading>
-            <RHeading
-              color="grey"
-              fontWeight="medium"
-              fontSize={14}
-              style={{ marginTop: 8 }}
-            >
-              Sign in to continue!
-            </RHeading>
-
-            <Form
-              validationSchema={userSignInSchema}
-              style={{ marginTop: 16, gap: 8 }}
-            >
-              <FormInput
-                label="Email ID"
-                keyboardType="email-address"
-                name="email"
-              />
-              <FormInput label="Password" secureTextEntry name="password" />
-
-              <SubmitButton
-                style={{ marginTop: 16, backgroundColor: 'mediumpurple' }}
-                onSubmit={handleLogin}
-              >
-                Sign in
-              </SubmitButton>
-            </Form>
-            <RStack
-              style={{
-                marginTop: 16,
-                flexDirection: 'row',
-                justifyContent: 'center',
-                gap: 4,
-              }}
-            >
-              <RText fontSize={14} color="grey">
-                I'm a new user.
-              </RText>
-              <RLink href="/register">
-                <RText
-                  style={{
-                    color: '#818cf8',
-                    fontWeight: 400,
-                    fontSize: 12,
-                  }}
-                >
-                  Sign Up
-                </RText>
-              </RLink>
-            </RStack>
-
-            <RStack style={{ flexDirection: 'row', justifyContent: 'center' }}>
-              <RLink href="/password-reset">
-                <RText
-                  style={{
-                    color: '#818cf8',
-                    fontWeight: 400,
-                    fontSize: 12,
-                  }}
-                >
-                  Reset Password?
-                </RText>
-              </RLink>
-            </RStack>
-            {/* Google Login starts */}
-            <RStack
-              style={{
-                marginTop: 8,
-                flexDirection: 'row',
-                justifyContent: 'center',
-              }}
-            >
-              <RText color="grey" fontWeight="medium" fontSize={14}>
-                Or
-              </RText>
-            </RStack>
-
-            {/* Google Login */}
-            {enableGoogleLogin && (
-              <RStack
-                style={{
-                  marginTop: 8,
-                  flexDirection: 'row',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                }}
-              >
-                <RIconButton
-                  disabled={!isGoogleSignInReady}
-                  onPress={async () => await promptAsync()}
-                  backgroundColor="red"
-                  style={{ width: '100%', color: 'white' }}
-                  icon={
-                    <FontAwesome
-                      name="google"
-                      size={16}
-                      color={currentTheme.colors.white}
-                    />
-                  }
-                >
-                  Sign in with Google
-                </RIconButton>
-              </RStack>
-            )}
-
-            {/* Demo Login for Development start */}
-            {NODE_ENV !== 'production' && (
-              <RStack
-                style={{
-                  marginTop: 8,
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                }}
-              >
-                <RButton
-                  style={{ width: '100%' }}
-                  disabled={!isGoogleSignInReady}
-                  onPress={() => handleLogin(demoUser)}
-                  backgroundColor="purple"
-                >
-                  Demo User
-                </RButton>
-              </RStack>
-            )}
-            {/* Demo Login for Development end */}
+            <SignInScreen mode="signin"/>
           </View>
         </RStack>
       </RStack>