From 81fbbe17ab6be78eec24f5b1e7feefc0abf858c7 Mon Sep 17 00:00:00 2001
From: ezwelty <ethan.welty@gmail.com>
Date: Wed, 27 Nov 2024 13:26:22 +0100
Subject: [PATCH] Flip element vertically rather than overriding rotation

---
 src/components/map/GeolocationDot.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/map/GeolocationDot.js b/src/components/map/GeolocationDot.js
index 33124e84..f836a098 100644
--- a/src/components/map/GeolocationDot.js
+++ b/src/components/map/GeolocationDot.js
@@ -11,17 +11,17 @@ import {
 
 const Heading = styled.div`
   position: absolute;
-  top: 0;
+  bottom: 0;
   left: -35px;
-  transform-origin: top center;
-  transform: rotate(${({ heading }) => -heading}deg);
+  transform-origin: bottom center;
+  transform: rotate(${({ heading }) => heading}deg);
 
   height: 55px;
   width: 70px;
-  clip-path: polygon(35% 0%, 65% 0%, 100% 100%, 0% 100%);
+  clip-path: polygon(35% 100%, 65% 100%, 100% 0%, 0% 0%);
   // Fix gradient in Safari: https://css-tricks.com/thing-know-gradients-transparent-black/
   background: linear-gradient(
-    to bottom,
+    to top,
     ${({ theme }) => theme.orange},
     ${({ theme }) => rgba(theme.orange, 0)}
   );