fix: click on close on promocard

mrzmyr · Dec 20, 2022 · 4f9dcd2 · 4f9dcd2
1 parent 044364c
commit 4f9dcd2
Showing 1 changed file with 53 additions and 65 deletions.
diff --git a/src/components/PromoCard.tsx b/src/components/PromoCard.tsx
@@ -1,7 +1,6 @@
 import useColors from "@/hooks/useColors"
 import useHaptics from "@/hooks/useHaptics"
 import { useSettings } from "@/hooks/useSettings"
-import { Motion } from "@legendapp/motion"
 import { Pressable, Text, View } from "react-native"
 import { X } from "react-native-feather"
 import Indicator from "./Indicator"
@@ -34,75 +33,64 @@ export const PromoCard = ({
   if (hasActionDone(slug)) return null
 
   return (
-    <Motion.View
-      initial={{ height: 0, opacity: 0 }}
-      animate={{ height: 140, opacity: 1 }}
-      transition={{
-        type: "spring",
-        damping: 20,
-        stiffness: 400,
-      }}
-      style={{
-        overflow: "hidden",
-      }}
+    <Pressable
+      style={({ pressed }) => [{
+        backgroundColor: colors.promoCardBackground,
+        borderRadius: 12,
+        overflow: 'hidden',
+        paddingVertical: 16,
+        paddingHorizontal: 16,
+        opacity: pressed ? 0.8 : 1,
+        minHeight: 140,
+        borderColor: colors.promoCardBorder,
+        borderWidth: 1,
+      }]}
+      onPress={_onPress}
     >
+      <Indicator
+        style={{
+          position: 'absolute',
+          left: 16,
+          top: 16,
+        }}
+        colorName="purple"
+      >
+        {subtitle}
+      </Indicator>
       <Pressable
-        style={({ pressed }) => [{
-          backgroundColor: colors.promoCardBackground,
-          borderRadius: 12,
-          overflow: 'hidden',
-          paddingVertical: 16,
-          paddingHorizontal: 16,
-          opacity: pressed ? 0.8 : 1,
-          minHeight: 140,
-          borderColor: colors.promoCardBorder,
-          borderWidth: 1,
-        }]}
-        onPress={_onPress}
+        style={{
+          position: 'absolute',
+          height: 48,
+          width: 48,
+          right: 4,
+          top: 4,
+          justifyContent: 'center',
+          alignItems: 'center',
+          zIndex: 1,
+        }}
+        onPress={onClose}
       >
-        <Indicator
-          style={{
-            position: 'absolute',
-            left: 16,
-            top: 16,
-          }}
-          colorName="purple"
-        >
-          {subtitle}
-        </Indicator>
-        <Pressable
-          style={{
-            padding: 4,
-            borderRadius: 100,
-            width: 32,
-            position: 'absolute',
-            right: 12,
-            top: 12,
-          }}
-          onPress={onClose}
-        >
-          <X stroke={colors.promoCardText} width={24} height={24} />
-        </Pressable>
-        <View
+        <X stroke={colors.promoCardText} width={24} height={24} />
+      </Pressable>
+      <View
+        style={{
+          flexDirection: 'column',
+          flex: 1,
+          justifyContent: 'flex-end',
+        }}
+      >
+        <Text
           style={{
-            flexDirection: 'column',
-            flex: 1,
-            justifyContent: 'flex-end',
+            fontSize: 20,
+            fontWeight: 'bold',
+            color: colors.promoCardText,
+            marginTop: 8,
+            lineHeight: 26,
           }}
         >
-          <Text
-            style={{
-              fontSize: 20,
-              fontWeight: 'bold',
-              color: colors.promoCardText,
-              marginTop: 8,
-              lineHeight: 26,
-            }}
-          >
-            {title}
-          </Text>
-        </View>
-      </Pressable>
-    </Motion.View>
+          {title}
+        </Text>
+      </View>
+    </Pressable>
   )
 }