From f1731dda40fee2d44c645d52b5f52ad8b4fd43dc Mon Sep 17 00:00:00 2001
From: maximo <maximo@nimiq.com>
Date: Thu, 7 Sep 2023 12:45:52 +0700
Subject: [PATCH] Renamed to LocationSocialBtn and added small animation

---
 src/components/elements/BasicInfo.vue         |  4 +--
 src/components/elements/Card.vue              | 29 +++++++++++++++++--
 ...apsButton.vue => LocationSocialButton.vue} |  0
 src/components/elements/MobileList.vue        |  2 +-
 4 files changed, 30 insertions(+), 5 deletions(-)
 rename src/components/elements/{GmapsButton.vue => LocationSocialButton.vue} (100%)

diff --git a/src/components/elements/BasicInfo.vue b/src/components/elements/BasicInfo.vue
index 05e4e8fe..04c0bcf7 100644
--- a/src/components/elements/BasicInfo.vue
+++ b/src/components/elements/BasicInfo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type PropType } from 'vue'
 import { type Location } from 'types'
-import GmapsButton from './GmapsButton.vue'
+import LocationSocialButton from './LocationSocialButton.vue'
 import StarFilledIcon from '@/components/icons/icon-star-filled.vue'
 import StarIcon from '@/components/icons/icon-star.vue'
 
@@ -37,7 +37,7 @@ defineProps({
       <template v-if="location.isAtm">{{ $t('ATM') }} (</template>{{ location.name }}<template v-if="location.isAtm">)</template>
     </h3>
 
-    <GmapsButton v-if="!location.photo && location.url && progress > 0.5" :location="location" class="mr-5 self-start -mt-2 -mb-2" />
+    <LocationSocialButton v-if="!location.photo && location.url && progress > 0.5" :location="location" class="self-start mr-5 -mt-2 -mb-2" />
 
     <template v-if="!location.isAtm">
       <span class="row-start-2 text-xs font-semibold first-letter:capitalize text-space/60 whitespace-nowrap">
diff --git a/src/components/elements/Card.vue b/src/components/elements/Card.vue
index e7f6a794..c67822d2 100644
--- a/src/components/elements/Card.vue
+++ b/src/components/elements/Card.vue
@@ -3,7 +3,7 @@ import { type PropType } from 'vue'
 import { useBreakpoints } from '@vueuse/core'
 import { screens } from 'tailwindcss-nimiq-theme'
 import { type Location } from 'types'
-import GmapsButton from './GmapsButton.vue'
+import LocationSocialButton from './LocationSocialButton.vue'
 import CryptoList from '@/components/atoms/CryptoList.vue'
 import BasicInfo from '@/components/elements/BasicInfo.vue'
 import CardBg from '@/components/elements/CardBg.vue'
@@ -73,7 +73,9 @@ function arrayEquals(arrA: string[], arrB: string[]): boolean {
       </transition>
     </div>
 
-    <GmapsButton v-if="location.photo && location.url && progress > 0.5" :location="location" class="absolute z-20 top-4 right-4" />
+    <transition name="scale">
+      <LocationSocialButton v-if="location.photo && location.url && progress > 0.5" :location="location" class="absolute z-20 top-4 right-4" />
+    </transition>
 
     <ProviderBanner
       v-if="progress > 0 && location.hasBottomBanner" :location="location"
@@ -83,3 +85,26 @@ function arrayEquals(arrA: string[], arrB: string[]): boolean {
     />
   </div>
 </template>
+
+<style scoped>
+.scale-enter-active {
+  animation: icon-in 200ms ease-out;
+}
+
+.scale-leave-active {
+  animation: icon-in 150ms ease-in reverse;
+  opacity: 0;
+}
+
+@keyframes icon-in {
+  0% {
+    transform: scale(0.75);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+</style>
diff --git a/src/components/elements/GmapsButton.vue b/src/components/elements/LocationSocialButton.vue
similarity index 100%
rename from src/components/elements/GmapsButton.vue
rename to src/components/elements/LocationSocialButton.vue
diff --git a/src/components/elements/MobileList.vue b/src/components/elements/MobileList.vue
index fd548d90..8bd8236b 100644
--- a/src/components/elements/MobileList.vue
+++ b/src/components/elements/MobileList.vue
@@ -111,7 +111,7 @@ watch(cards, (newCards, oldCards) => {
     >
       <SheetModal
         :max-height="location.photo ? 363 : 179" :initial-border-radius="8"
-        :initial-gap-to-screen="INITIAL_GAP_TO_SCREEN" class="relative w-full bg-white rounded-t-lg" :progress="progress"
+        :initial-gap-to-screen="INITIAL_GAP_TO_SCREEN" class="relative w-full rounded-t-lg" :progress="progress"
         @update:progress="progress = $event" @close-list="() => $emit('closeList')"
       >
         <template #dragger>