From 3dc887ba347d76abb7b7ddaaf26e5b00d4b3d4ef Mon Sep 17 00:00:00 2001
From: Sebastian Garcia <sgarcia710@outlook.com>
Date: Wed, 3 Mar 2021 06:26:35 -0500
Subject: [PATCH 1/2] Enabled touching drag gestures on mobile

---
 src/components/footer.js      |  4 ++-
 src/components/liquidswipe.js | 60 ++++++++++++++++++++---------------
 2 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/src/components/footer.js b/src/components/footer.js
index 32aed65..c957ec9 100644
--- a/src/components/footer.js
+++ b/src/components/footer.js
@@ -14,7 +14,9 @@ const Footer = ({ data, theme }) => {
         alignItems: "center",
         justifyContent: "center",
         position: "fixed",
-        bottom: "0px",
+        bottom: "0",
+        left: "0",
+        right: "0",
         display: "flex",
         flexDirection: "column",
         mb: [10, 20],
diff --git a/src/components/liquidswipe.js b/src/components/liquidswipe.js
index f1eb92c..cc4d38b 100644
--- a/src/components/liquidswipe.js
+++ b/src/components/liquidswipe.js
@@ -46,9 +46,12 @@ const StyledButton = styled(animated.button)`
   background: transparent;
   color: ${(props) => props.color};
   border: 1px solid ${(props) => props.color};
+  cursor: pointer;
+  touch-action: pan-y;
   &::focus {
     outline: 0;
   }
+  outline: none;
 `;
 
 const height = window.innerHeight;
@@ -119,39 +122,44 @@ const Page = ({ children, theme, index, setActive, gone = false }) => {
     }
   }, [gone]);
 
-  const bind = useDrag(({ down, movement: [mx], xy: [, my], vxvy: [vx] }) => {
-    if (!isGone) {
-      if (down && isMove) {
-        setDvalue({
-          d: getPath(my, mx + 60, 10),
-        });
-        setPos({
-          posX: mx + 20,
-          posY: my - 20,
-        });
-        if (mx > width / 2 || vx > 3) {
+  const bind = useDrag(
+    ({ down, movement: [mx], xy: [, my], vxvy: [vx] }) => {
+      if (!isGone) {
+        if (down && isMove) {
           setDvalue({
-            d: getPath(my, -50, w),
+            d: getPath(my, mx + 60, 10),
+          });
+          setPos({
+            posX: mx + 20,
+            posY: my - 20,
           });
-          setGone(true);
-          setTimeout(() => {
+          if (mx > width / 2 || vx > 3) {
             setDvalue({
-              d: getPath(my, 0, w),
+              d: getPath(my, -50, w),
             });
-            setActive(index);
-          }, 240);
+            setGone(true);
+            setTimeout(() => {
+              setDvalue({
+                d: getPath(my, 0, w),
+              });
+              setActive(index);
+            }, 240);
+          }
+        } else {
+          setDvalue({
+            d: getPath(height * 0.72, 48, 5),
+          });
+          setPos({
+            posX: 7,
+            posY: height * 0.72 - 20,
+          });
         }
-      } else {
-        setDvalue({
-          d: getPath(height * 0.72, 48, 5),
-        });
-        setPos({
-          posX: 7,
-          posY: height * 0.72 - 20,
-        });
       }
+    },
+    {
+      useTouch: width <= 414,
     }
-  });
+  );
   return (
     <PageContainer id={`pageContainer${index}`} {...bind()}>
       <StyledSVG version="1.1" id="blob" xmlns="http://www.w3.org/2000/svg">

From 19b1e3a12c2eade256d218c9ab7e8e79e7d891f6 Mon Sep 17 00:00:00 2001
From: Sebastian Garcia <sgarcia710@outlook.com>
Date: Wed, 3 Mar 2021 06:32:56 -0500
Subject: [PATCH 2/2] Revert prettier changes

---
 src/components/liquidswipe.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/liquidswipe.js b/src/components/liquidswipe.js
index cc4d38b..e0c9e04 100644
--- a/src/components/liquidswipe.js
+++ b/src/components/liquidswipe.js
@@ -156,9 +156,7 @@ const Page = ({ children, theme, index, setActive, gone = false }) => {
         }
       }
     },
-    {
-      useTouch: width <= 414,
-    }
+    { useTouch: width <= 813 }
   );
   return (
     <PageContainer id={`pageContainer${index}`} {...bind()}>