Skip to content

Commit

Permalink
Fix arrow color in card when the bg is not gradient
Browse files Browse the repository at this point in the history
  • Loading branch information
Albermonte committed Aug 31, 2023
1 parent e77029c commit 157ee28
Showing 1 changed file with 3 additions and 2 deletions.
5 changes: 3 additions & 2 deletions src/components/elements/MapMarkers.vue
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,12 @@ const isMobile = smaller(DESKTOP_LAYOUT)
const { selectedUuid: initialUuid } = useLocations()
const { selectedUuid } = storeToRefs(useLocations())
// Needed when bg color is a gradient
function extractColorFromBg(bg: string) {
const regex = /#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})/g
// TODO: Find a way to know if the arrow is on the left or right side and use the correct color
const colors = bg.match(regex) || []
return colors
return colors[colors.length - 1]
}
</script>

Expand Down Expand Up @@ -118,7 +119,7 @@ function extractColorFromBg(bg: string) {
<PopoverPortal>
<PopoverContent side="right" :side-offset="5" class="rounded-lg shadow">
<Card :location="location" :progress="1" class="max-w-xs" />
<PopoverArrow class="w-4 h-2" :style="`fill: ${location.isAtm ? extractColorFromBg(location.bg)[1] : 'white'}`" />
<PopoverArrow class="w-4 h-2" :style="`fill: ${location.isAtm ? extractColorFromBg(location.bg) : 'white'}`" />

<!-- TODO Once this is fixed https://github.com/radix-vue/radix-vue/issues/353 use custom arrow -->
<!-- <PopoverArrow as-child>
Expand Down

0 comments on commit 157ee28

Please sign in to comment.