From dbf2f35c73f6e9b1de2410ac9032292446bc5efa Mon Sep 17 00:00:00 2001
From: maximo <maximo@nimiq.com>
Date: Mon, 2 Oct 2023 17:32:45 +0700
Subject: [PATCH] Added white border

---
 shared/geo-utils.ts                                |  5 -----
 src/components/DesktopView.vue                     |  4 ++--
 src/components/atoms/Modal.vue                     |  2 ++
 src/components/cards/cryptocity/CryptocityCard.vue |  2 +-
 src/components/elements/Controls.vue               |  6 +++---
 src/components/elements/DesktopList.story.vue      |  2 +-
 src/components/elements/FilterModal.vue            |  2 +-
 src/components/elements/TheMapInstance.vue         |  6 +++---
 src/components/markers/CryptocityMarker.vue        |  5 +++--
 src/stores/map.ts                                  | 12 +-----------
 supabase/functions/compute-markers/index.ts        |  7 -------
 tailwind.config.js                                 |  1 +
 12 files changed, 18 insertions(+), 36 deletions(-)

diff --git a/shared/geo-utils.ts b/shared/geo-utils.ts
index ccd5397e..5b21e91d 100644
--- a/shared/geo-utils.ts
+++ b/shared/geo-utils.ts
@@ -86,11 +86,6 @@ export function euclideanDistance({ lat: y1, lng: x1 }: Point, { lat: y2, lng: x
   return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)
 }
 
-// TODO MAybe useless funciton
-export function distanceInPx({ lat: y1, lng: x1 }: Point, { lat: y2, lng: x2 }: Point, { lngInPx, latInPx }: { lngInPx: number; latInPx: number }) {
-  return Math.sqrt(((x2 - x1) * lngInPx) ** 2 + ((y2 - y1) * latInPx) ** 2)
-}
-
 export const cryptocitiesCentroids: Record<Cryptocity, Point & { city: Cryptocity }> = {
   [Cryptocity.SanJose]: { lat: 9.935, lng: -84.102, city: Cryptocity.SanJose },
 }
diff --git a/src/components/DesktopView.vue b/src/components/DesktopView.vue
index f0cd202a..26c999b7 100644
--- a/src/components/DesktopView.vue
+++ b/src/components/DesktopView.vue
@@ -27,11 +27,11 @@ const openSuggestions = ref(false)
   <aside class="absolute flex flex-col max-w-xs bottom-6 top-6 left-6 h-max pointer-events-none [&>*]:pointer-events-auto">
     <!-- This element if for the shadow in the header. We cannot use a normal shadow because the use of mask-image restrict us of using shadows -->
     <div class="absolute inset-0 shadow rounded-2xl pointer-events-none h-[calc(64px+(88px*var(--search-box-hint)))]" />
-    <div class="duration-75 bg-white shadow-header transition-border-radius" :class="openSuggestions && !isListShown ? 'rounded-t-2xl' : 'rounded-2xl'" style="mask-image: linear-gradient(white, white);">
+    <div class="duration-75 bg-white border border-[#e9e9ed] shadow-header transition-border-radius" :class="openSuggestions && !isListShown ? 'rounded-t-2xl' : 'rounded-2xl'" style="mask-image: linear-gradient(white, white);">
       <InteractionBar @open="openSuggestions = $event" />
       <DesktopList :singles="singlesInView" :clusters="clustersInView" :list-is-shown="isListShown" />
     </div>
-    <Button bg-color="white" class="mt-6 shadow" @click="isListShown = !isListShown">
+    <Button bg-color="white" class="mt-6 shadow border border-[#e9e9ed]" @click="isListShown = !isListShown">
       <template #icon><IconChevronDown :class="{ 'rotate-180': isListShown }" class="w-2.5 transition-transform delay-500" /></template>
       <template #label>{{ $t(isListShown ? 'Hide list' : 'Show list') }}</template>
     </Button>
diff --git a/src/components/atoms/Modal.vue b/src/components/atoms/Modal.vue
index fabad383..eb7fb12e 100644
--- a/src/components/atoms/Modal.vue
+++ b/src/components/atoms/Modal.vue
@@ -37,10 +37,12 @@ const separator = h('hr', { class: 'w-full h-px my-8 bg-space/10' })
           <slot name="title" />
         </DialogTitle>
         <DialogDescription v-if="hasSlot('description')" as="div" class="[&>*:not(hr)]:px-6 [&>*:not(hr)]:md:px-10 text-base text-space/60">
+          <!-- eslint-disable-next-line vue/attribute-hyphenation -->
           <slot name="description" :Separator="separator" />
         </DialogDescription>
 
         <div v-if="hasSlot('content')" class="[&>*:not(hr)]:px-6 [&>*:not(hr)]:md:px-10">
+          <!-- eslint-disable-next-line vue/attribute-hyphenation -->
           <slot name="content" :Separator="separator" />
         </div>
 
diff --git a/src/components/cards/cryptocity/CryptocityCard.vue b/src/components/cards/cryptocity/CryptocityCard.vue
index a9fc33b0..063b30c5 100644
--- a/src/components/cards/cryptocity/CryptocityCard.vue
+++ b/src/components/cards/cryptocity/CryptocityCard.vue
@@ -17,7 +17,7 @@ defineEmits({ close: () => true })
 
 <template>
   <div
-    class="p-6 transition-all duration-300 bg-white shadow cursor-default rounded-t-md desktop:rounded-md ring-white/20 ring-1 ring-offset-1 ring-offset-white/10 desktop:max-w-xs"
+    class="p-6 transition-all duration-300 bg-white shadow cursor-default rounded-t-md desktop:rounded-md border border-[#e9e9ed] desktop:max-w-xs"
     @pointerdown.capture.stop.prevent
     @dblclick.capture.stop.prevent
   >
diff --git a/src/components/elements/Controls.vue b/src/components/elements/Controls.vue
index d4ddab8c..e0c6a65b 100644
--- a/src/components/elements/Controls.vue
+++ b/src/components/elements/Controls.vue
@@ -55,7 +55,7 @@ async function setBrowserPosition() {
       :open="cryptocityCardOpen"
       @update:open="$router.push({ query: { ...$route.query, cryptocity: $event ? cryptocityControl.name : undefined } })"
     >
-      <PopoverTrigger class="animate-scale !w-8 !h-8 shadow bg-white rounded-full p-1.5" data-cryptocity-card :aria-label="$t('Information about this Cryptocity')"><CryptocityIcon /></PopoverTrigger>
+      <PopoverTrigger class="border border-[#e9e9ed] animate-scale !w-8 !h-8 shadow bg-white rounded-full p-1.5" data-cryptocity-card :aria-label="$t('Information about this Cryptocity')"><CryptocityIcon /></PopoverTrigger>
       <PopoverPortal>
         <PopoverContent
           align="end" side="bottom" :side-offset="-32" class="max-desktop:-mb-[72px] max-desktop:w-screen will-change-[transform,opacity] animate-slideUpAndFade"
@@ -68,7 +68,7 @@ async function setBrowserPosition() {
 
     <Button
       v-if="browserPositionIsSupported"
-      class="!w-8 !h-8 shadow"
+      class="!w-8 !h-8 shadow border border-[#e9e9ed]"
       :disabled="geolocatingUserBrowser" bg-color="white" :aria-label="$t('Show your location')"
       :title="$t('Show your location')"
       @click="setBrowserPosition"
@@ -78,7 +78,7 @@ async function setBrowserPosition() {
       </template>
     </Button>
 
-    <div class="flex flex-col bg-white rounded-full shadow max-desktop:hidden">
+    <div class="flex flex-col bg-white rounded-full shadow max-desktop:hidden border border-[#e9e9ed]">
       <Button bg-color="white" class="!w-8 !h-8 rounded-b-0" @click="useMap().increaseZoom">
         <template #icon>
           <PlusIcon class="w-5" />
diff --git a/src/components/elements/DesktopList.story.vue b/src/components/elements/DesktopList.story.vue
index 4b0adaf5..9147a479 100644
--- a/src/components/elements/DesktopList.story.vue
+++ b/src/components/elements/DesktopList.story.vue
@@ -24,7 +24,7 @@ const listIsShown = ref(true)
             <InteractionBar />
             <DesktopList :singles="Object.values(locations)" :clusters="[]" :list-is-shown="listIsShown" />
           </div>
-          <Button bg-color="white" class="mt-6" @click="listIsShown = !listIsShown">
+          <Button bg-color="white" class="mt-6 border border-[#e9e9ed]" @click="listIsShown = !listIsShown">
             <template #icon>
               <IconChevronDown :class="{ 'rotate-180': listIsShown }" class="transition-transform delay-500" />
             </template>
diff --git a/src/components/elements/FilterModal.vue b/src/components/elements/FilterModal.vue
index 5845cf70..d19d22bf 100644
--- a/src/components/elements/FilterModal.vue
+++ b/src/components/elements/FilterModal.vue
@@ -66,7 +66,7 @@ function applyFilters() {
 <template>
   <Modal @close="closeModal({ shouldClearFilters: false })">
     <template #trigger>
-      <Button bg-color="white" class="max-desktop:px-0" v-bind="$attrs">
+      <Button bg-color="white" class="max-desktop:px-0 border border-[#e9e9ed]" v-bind="$attrs">
         <template #icon>
           <FilterIcon class="w-4 text-space" />
         </template>
diff --git a/src/components/elements/TheMapInstance.vue b/src/components/elements/TheMapInstance.vue
index 3b8fbe1e..c7ab9e19 100644
--- a/src/components/elements/TheMapInstance.vue
+++ b/src/components/elements/TheMapInstance.vue
@@ -55,9 +55,9 @@ const isDark = useDark()
       :class="isDark ? 'bg-space' : 'bg-white'"
     >
       <img :src="`logo-horizontal-${isDark ? 'dark' : 'light'}.svg`" loading="eager" :alt="$t('Crypto Map logo')" class="animate-fade">
-      <i18n-t class="absolute inset-x-0 w-screen px-4 text-xs md:text-center bottom-4 text-white/50" tag="div" keypath="This site is protected by reCAPTCHA and the Google {privacyPolicy} and {termsOfService} apply.">
-        <template #privacyPolicy><a href="https://policies.google.com/privacy" target="_blank" rel="noopener" class="underline text-white/60">{{ $t('Privacy Policy') }}</a></template>
-        <template #termsOfService><a href="https://policies.google.com/terms" target="_blank" rel="noopener" class="underline text-white/60">{{ $t('Terms of Service') }}</a></template>
+      <i18n-t class="absolute inset-x-0 w-screen px-4 text-xs md:text-center bottom-4 text-space/80 dark:text-white/50" tag="div" keypath="This site is protected by reCAPTCHA and the Google {privacyPolicy} and {termsOfService} apply.">
+        <template #privacyPolicy><a href="https://policies.google.com/privacy" target="_blank" rel="noopener" class="underline text-space/80 dark:text-white/60">{{ $t('Privacy Policy') }}</a></template>
+        <template #termsOfService><a href="https://policies.google.com/terms" target="_blank" rel="noopener" class="underline text-space/80 dark:text-white/60">{{ $t('Terms of Service') }}</a></template>
       </i18n-t>
     </div>
   </transition>
diff --git a/src/components/markers/CryptocityMarker.vue b/src/components/markers/CryptocityMarker.vue
index e7d489b5..5b6a1bac 100644
--- a/src/components/markers/CryptocityMarker.vue
+++ b/src/components/markers/CryptocityMarker.vue
@@ -23,7 +23,8 @@ const { setPosition } = useMap()
 const router = useRouter()
 const route = useRoute()
 
-function onCryptocityClick({ lat, lng, name, showCardAtZoom }: CryptocityData) {
+function onCryptocityClick() {
+  const { lat, lng, name, showCardAtZoom } = cryptocity.value as CryptocityData
   const cardTrigger = (document.querySelector('[data-cryptocity-card]') as HTMLElement)
   if (cardTrigger)
     cardTrigger.click()
@@ -35,7 +36,7 @@ function onCryptocityClick({ lat, lng, name, showCardAtZoom }: CryptocityData) {
 <template>
   <div
     class="grid p-1 bg-white rounded-full shadow cursor-pointer group/city clickable-sm aspect-square place-content-center"
-    @click="onCryptocityClick(cryptocity)"
+    @click="onCryptocityClick()"
   >
     <div class="absolute inset-0 duration-400 transition-[background-color] rounded-full group-hover/city:bg-space/[0.06] group-focus-visible/city:bg-space/[0.06]" />
     <CryptocityIcon class="w-full" />
diff --git a/src/stores/map.ts b/src/stores/map.ts
index f52c2ab0..5d6a3a7f 100644
--- a/src/stores/map.ts
+++ b/src/stores/map.ts
@@ -1,4 +1,4 @@
-import { useDebounceFn, useWindowSize } from '@vueuse/core'
+import { useDebounceFn } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import type { BoundingBox, EstimatedMapPosition, MapPosition, Point } from 'types'
 import { computed, ref, shallowRef, watch } from 'vue'
@@ -13,8 +13,6 @@ export const useMap = defineStore('map', () => {
   const center = ref(map.value?.getCenter()?.toJSON() as Point | undefined)
   const zoom = ref(map.value?.getZoom() ?? 3)
   const boundingBox = ref<BoundingBox>()
-  const lngInPx = ref(0) // TODO Remove this?
-  const latInPx = ref(0)
 
   const router = useRouter()
   const route = useRoute()
@@ -38,8 +36,6 @@ export const useMap = defineStore('map', () => {
     return { swLat, swLng, neLat, neLng }
   }
 
-  const { height, width } = useWindowSize()
-
   function onBoundsChanged() {
     const bounds = map.value?.getBounds()
     if (!bounds)
@@ -48,9 +44,6 @@ export const useMap = defineStore('map', () => {
     const { neLat, neLng, swLat, swLng } = boundsToBox(bounds)
     boundingBox.value = { neLat, neLng, swLat, swLng }
 
-    latInPx.value = height.value / (neLat - swLat)
-    lngInPx.value = width.value / (neLng - swLng)
-
     updateRouteDebouncer()
 
     // If we don't have the item in the memoized map, we need to update the clusters
@@ -125,8 +118,5 @@ export const useMap = defineStore('map', () => {
     decreaseZoom,
 
     goToPlaceId,
-
-    latInPx,
-    lngInPx,
   }
 })
diff --git a/supabase/functions/compute-markers/index.ts b/supabase/functions/compute-markers/index.ts
index 1ab96dde..539f2dca 100644
--- a/supabase/functions/compute-markers/index.ts
+++ b/supabase/functions/compute-markers/index.ts
@@ -9,13 +9,6 @@ import type { BoundingBox } from '../../../types/index.ts'
 import { cryptocitiesCentroids } from '../../../shared/index.ts'
 import { euclideanDistance } from '../../../shared/geo-utils.ts'
 
-// DB_AUTH_EMAIL="jeff@nimiq.com"
-// DB_AUTH_PASSWORD="Cr-UN#=zZ##a2!F"
-// MIN_ZOOM=3
-// MAX_ZOOM=14
-// SUPABASE_URL=https://mycbdmurjytbdahjljoh.supabase.co
-// SUPABASE_ANON_KEY=
-
 async function cluster() {
   const url = Deno.env.get('SUPABASE_URL')
   const apikey = Deno.env.get('SUPABASE_ANON_KEY')
diff --git a/tailwind.config.js b/tailwind.config.js
index ad5ff94a..13f26dcc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,6 +5,7 @@ export const DESKTOP_LAYOUT = 'md'
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
   preflight: false,
   content: [
     './index.html',