From a5327654cd8dd06be67dfd98b8b4b27ca635982c Mon Sep 17 00:00:00 2001
From: vraimondi04 <vincent837869@gmail.com>
Date: Sun, 25 Aug 2024 18:42:19 -0700
Subject: [PATCH 1/9] small updates to image styling

---
 components/create/details.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/components/create/details.tsx b/components/create/details.tsx
index 96cebfe..1a31a1c 100644
--- a/components/create/details.tsx
+++ b/components/create/details.tsx
@@ -79,6 +79,7 @@ const Details = ({
     });
 
     if (response.canceled || !response.assets) {
+      // setImages([]);
       return;
     }
 
@@ -148,20 +149,22 @@ const Details = ({
             <Tag text={tag} color={colors[index]} key={index} />
           ))}
         </View>
-        <View className="flex flex-row flex-wrap gap-2 items-center">
+        <View className="flex flex-row flex-wrap gap-2 items-center justify-between">
+          <Icon size={28} name="Camera" />
           <Pressable
             onPress={handlePromptImage}
-            className="flex flex-row items-center gap-2"
+            className="flex flex-row items-center gap-2 rounded-full border border-[#EFEFEF]"
           >
-            <Text>Upload image + </Text>
+            <Text className="text-center text-xl px-24 py-2">Upload Photos </Text>
           </Pressable>
-
+        </View>
+        <View className="flex flex-row gap-2">
           {images.map((image) => {
             return (
               <Image
                 key={image.uri}
                 source={{ uri: image.uri }}
-                style={{ width: 40, height: 40, borderRadius: 8 }}
+                style={{ width: 140, height: 140, borderRadius: 8 }}
                 contentFit="cover"
                 alt="Selected Image"
               />

From 353884a3fc90f024e6ed2dd5bb2fa02485288626 Mon Sep 17 00:00:00 2001
From: vraimondi04 <vincent837869@gmail.com>
Date: Sun, 25 Aug 2024 18:50:04 -0700
Subject: [PATCH 2/9] run prettier

---
 components/create/details.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/create/details.tsx b/components/create/details.tsx
index 1a31a1c..9c70cea 100644
--- a/components/create/details.tsx
+++ b/components/create/details.tsx
@@ -155,7 +155,9 @@ const Details = ({
             onPress={handlePromptImage}
             className="flex flex-row items-center gap-2 rounded-full border border-[#EFEFEF]"
           >
-            <Text className="text-center text-xl px-24 py-2">Upload Photos </Text>
+            <Text className="text-center text-xl px-24 py-2">
+              Upload Photos
+            </Text>
           </Pressable>
         </View>
         <View className="flex flex-row gap-2">

From e7722ee59a6884eea873f12a387b43140877b850 Mon Sep 17 00:00:00 2001
From: vraimondi04 <vincent837869@gmail.com>
Date: Sun, 25 Aug 2024 20:41:54 -0700
Subject: [PATCH 3/9] Remove Images functionality

---
 components/create/details.tsx | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/components/create/details.tsx b/components/create/details.tsx
index 9c70cea..983f1ae 100644
--- a/components/create/details.tsx
+++ b/components/create/details.tsx
@@ -1,12 +1,13 @@
 import Tag from "@/components/global/tag";
 import Beat from "@/components/global/beat";
-import { View, Text, TextInput, Pressable } from "react-native";
+import { View, Text, TextInput, Pressable, ImageBackground } from "react-native";
 import { useEffect, useState } from "react";
 import { beat } from "@/types";
 import { Image } from "expo-image";
 import * as Location from "expo-location";
 import * as ImagePicker from "expo-image-picker";
 import Icon from "../Icon";
+import { ScrollView } from "react-native-gesture-handler";
 
 const colors = [
   "bg-beatdrop-tag-orange",
@@ -79,7 +80,6 @@ const Details = ({
     });
 
     if (response.canceled || !response.assets) {
-      // setImages([]);
       return;
     }
 
@@ -88,6 +88,12 @@ const Details = ({
     setImages(allImages);
   };
 
+  const handleRemoveImage = async (selectedImage: ImagePicker.ImagePickerAsset) => {
+    const newImages = images.filter(function(image, index) { return image.uri !== selectedImage.uri });
+
+    setImages(newImages);
+  }
+
   return (
     <View className="w-full">
       <View className="p-3 h-full w-full gap-4">
@@ -160,19 +166,24 @@ const Details = ({
             </Text>
           </Pressable>
         </View>
-        <View className="flex flex-row gap-2">
+        <ScrollView horizontal contentContainerStyle={{ columnGap: 8 }}>
           {images.map((image) => {
             return (
-              <Image
-                key={image.uri}
-                source={{ uri: image.uri }}
-                style={{ width: 140, height: 140, borderRadius: 8 }}
-                contentFit="cover"
-                alt="Selected Image"
-              />
+              <View>
+                <ImageBackground
+                  key={image.uri}
+                  source={{ uri: image.uri }}
+                  style={{ width: 140, height: 140, borderRadius: 8, overflow: "hidden" }}
+                  alt="Selected Image"
+                >
+                <Pressable onPress={() => handleRemoveImage(image)} className="absolute top-1 right-1 rounded-full bg-black">
+                  <Icon size={28} name="Close_SM" color={'#EFEFEF'}></Icon>
+                </Pressable>
+                </ImageBackground>
+              </View>
             );
           })}
-        </View>
+        </ScrollView>
       </View>
 
       <Pressable className="bg-beatdrop-primary py-4 rounded-full w-full absolute bottom-4">

From 78802430e7d78a2f4842528bff5507e5592dfb45 Mon Sep 17 00:00:00 2001
From: vraimondi04 <vincent837869@gmail.com>
Date: Sun, 25 Aug 2024 20:42:35 -0700
Subject: [PATCH 4/9] run prettier

---
 components/create/details.tsx | 34 ++++++++++++++++++++++++++--------
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/components/create/details.tsx b/components/create/details.tsx
index 983f1ae..edebbd4 100644
--- a/components/create/details.tsx
+++ b/components/create/details.tsx
@@ -1,6 +1,12 @@
 import Tag from "@/components/global/tag";
 import Beat from "@/components/global/beat";
-import { View, Text, TextInput, Pressable, ImageBackground } from "react-native";
+import {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  ImageBackground,
+} from "react-native";
 import { useEffect, useState } from "react";
 import { beat } from "@/types";
 import { Image } from "expo-image";
@@ -88,11 +94,15 @@ const Details = ({
     setImages(allImages);
   };
 
-  const handleRemoveImage = async (selectedImage: ImagePicker.ImagePickerAsset) => {
-    const newImages = images.filter(function(image, index) { return image.uri !== selectedImage.uri });
+  const handleRemoveImage = async (
+    selectedImage: ImagePicker.ImagePickerAsset,
+  ) => {
+    const newImages = images.filter(function (image, index) {
+      return image.uri !== selectedImage.uri;
+    });
 
     setImages(newImages);
-  }
+  };
 
   return (
     <View className="w-full">
@@ -173,12 +183,20 @@ const Details = ({
                 <ImageBackground
                   key={image.uri}
                   source={{ uri: image.uri }}
-                  style={{ width: 140, height: 140, borderRadius: 8, overflow: "hidden" }}
+                  style={{
+                    width: 140,
+                    height: 140,
+                    borderRadius: 8,
+                    overflow: "hidden",
+                  }}
                   alt="Selected Image"
                 >
-                <Pressable onPress={() => handleRemoveImage(image)} className="absolute top-1 right-1 rounded-full bg-black">
-                  <Icon size={28} name="Close_SM" color={'#EFEFEF'}></Icon>
-                </Pressable>
+                  <Pressable
+                    onPress={() => handleRemoveImage(image)}
+                    className="absolute top-1 right-1 rounded-full bg-black"
+                  >
+                    <Icon size={28} name="Close_SM" color={"#EFEFEF"}></Icon>
+                  </Pressable>
                 </ImageBackground>
               </View>
             );

From a19e88ee8f2b399341c465ecc5e9ceb2d6549484 Mon Sep 17 00:00:00 2001
From: Vincent Raimondi <vraim001@ucr.edu>
Date: Mon, 2 Sep 2024 21:14:50 -0700
Subject: [PATCH 5/9] resolve comments

---
 components/create/details.tsx | 22 +++++-----------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/components/create/details.tsx b/components/create/details.tsx
index edebbd4..ba3c88d 100644
--- a/components/create/details.tsx
+++ b/components/create/details.tsx
@@ -94,12 +94,10 @@ const Details = ({
     setImages(allImages);
   };
 
-  const handleRemoveImage = async (
+  const handleRemoveImage = (
     selectedImage: ImagePicker.ImagePickerAsset,
   ) => {
-    const newImages = images.filter(function (image, index) {
-      return image.uri !== selectedImage.uri;
-    });
+    const newImages = images.filter((image) => image.uri !== selectedImage.uri);
 
     setImages(newImages);
   };
@@ -177,18 +175,10 @@ const Details = ({
           </Pressable>
         </View>
         <ScrollView horizontal contentContainerStyle={{ columnGap: 8 }}>
-          {images.map((image) => {
-            return (
-              <View>
-                <ImageBackground
+          {images.map((image) => (
+                <ImageBackground className="w-40 h-40 rounded-lg overflow-hidden"
                   key={image.uri}
                   source={{ uri: image.uri }}
-                  style={{
-                    width: 140,
-                    height: 140,
-                    borderRadius: 8,
-                    overflow: "hidden",
-                  }}
                   alt="Selected Image"
                 >
                   <Pressable
@@ -198,9 +188,7 @@ const Details = ({
                     <Icon size={28} name="Close_SM" color={"#EFEFEF"}></Icon>
                   </Pressable>
                 </ImageBackground>
-              </View>
-            );
-          })}
+          ))}
         </ScrollView>
       </View>
 

From d48d84bcb66317e29f58d1112cf8e665c6f1b729 Mon Sep 17 00:00:00 2001
From: Vincent Raimondi <vraim001@ucr.edu>
Date: Mon, 2 Sep 2024 21:16:58 -0700
Subject: [PATCH 6/9] resolve comments

---
 components/create/details.tsx | 29 ++++++++++++++---------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/components/create/details.tsx b/components/create/details.tsx
index ba3c88d..5076e4e 100644
--- a/components/create/details.tsx
+++ b/components/create/details.tsx
@@ -94,9 +94,7 @@ const Details = ({
     setImages(allImages);
   };
 
-  const handleRemoveImage = (
-    selectedImage: ImagePicker.ImagePickerAsset,
-  ) => {
+  const handleRemoveImage = (selectedImage: ImagePicker.ImagePickerAsset) => {
     const newImages = images.filter((image) => image.uri !== selectedImage.uri);
 
     setImages(newImages);
@@ -176,18 +174,19 @@ const Details = ({
         </View>
         <ScrollView horizontal contentContainerStyle={{ columnGap: 8 }}>
           {images.map((image) => (
-                <ImageBackground className="w-40 h-40 rounded-lg overflow-hidden"
-                  key={image.uri}
-                  source={{ uri: image.uri }}
-                  alt="Selected Image"
-                >
-                  <Pressable
-                    onPress={() => handleRemoveImage(image)}
-                    className="absolute top-1 right-1 rounded-full bg-black"
-                  >
-                    <Icon size={28} name="Close_SM" color={"#EFEFEF"}></Icon>
-                  </Pressable>
-                </ImageBackground>
+            <ImageBackground
+              className="w-40 h-40 rounded-lg overflow-hidden"
+              key={image.uri}
+              source={{ uri: image.uri }}
+              alt="Selected Image"
+            >
+              <Pressable
+                onPress={() => handleRemoveImage(image)}
+                className="absolute top-1 right-1 rounded-full bg-black"
+              >
+                <Icon size={28} name="Close_SM" color={"#EFEFEF"}></Icon>
+              </Pressable>
+            </ImageBackground>
           ))}
         </ScrollView>
       </View>

From 0f69e6eaee7c1505cf5ac6fadd83f6316bcab3f4 Mon Sep 17 00:00:00 2001
From: Vincent Raimondi <vraim001@ucr.edu>
Date: Tue, 3 Sep 2024 20:10:38 -0700
Subject: [PATCH 7/9] updates to images + icon

---
 components/create/details.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/create/details.tsx b/components/create/details.tsx
index 5ded7f9..88e5885 100644
--- a/components/create/details.tsx
+++ b/components/create/details.tsx
@@ -212,14 +212,14 @@ const Details = ({
             <ImageBackground
               className="w-40 h-40 rounded-lg overflow-hidden"
               key={image.uri}
-              source={{ uri: image.uri }}
+              source={image}
               alt="Selected Image"
             >
               <Pressable
                 onPress={() => handleRemoveImage(image)}
                 className="absolute top-1 right-1 rounded-full bg-black"
               >
-                <Icon size={28} name="Close_SM" color={"#EFEFEF"}></Icon>
+                <Icon size={28} name="Close_SM" color="white"></Icon>
               </Pressable>
             </ImageBackground>
           ))}

From a58fde54deaa76a8c311654de193e2f575a0501c Mon Sep 17 00:00:00 2001
From: Vincent Raimondi <vraim001@ucr.edu>
Date: Tue, 3 Sep 2024 22:47:36 -0700
Subject: [PATCH 8/9] Added custom width for images

---
 components/create/details.tsx | 4 ++--
 tailwind.config.js            | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/create/details.tsx b/components/create/details.tsx
index 88e5885..78364f7 100644
--- a/components/create/details.tsx
+++ b/components/create/details.tsx
@@ -207,10 +207,10 @@ const Details = ({
             </Text>
           </Pressable>
         </View>
-        <ScrollView horizontal contentContainerStyle={{ columnGap: 8 }}>
+        <ScrollView horizontal>
           {images.map((image) => (
             <ImageBackground
-              className="w-40 h-40 rounded-lg overflow-hidden"
+              className=" w-screen-2/5 h-2/3 mr-3 rounded-lg overflow-hidden"
               key={image.uri}
               source={image}
               alt="Selected Image"
diff --git a/tailwind.config.js b/tailwind.config.js
index bc98c67..7adebb0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -23,6 +23,9 @@ module.exports = {
           },
         },
       },
+      width: {
+        'screen-2/5': '40vw'
+      },
     },
   },
   plugins: [],

From 7a9a1f7bb86575593bc0296e7ca33107ccd8170a Mon Sep 17 00:00:00 2001
From: Vincent Raimondi <vraim001@ucr.edu>
Date: Tue, 3 Sep 2024 22:48:11 -0700
Subject: [PATCH 9/9] run prettier

---
 tailwind.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 7adebb0..f945fc2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -24,7 +24,7 @@ module.exports = {
         },
       },
       width: {
-        'screen-2/5': '40vw'
+        "screen-2/5": "40vw",
       },
     },
   },