From 36adba101caf58afd280e6eedad003b38165be4f Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Tue, 1 Mar 2022 09:53:28 +0100
Subject: [PATCH] fix color of location share caret (#7917)

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 res/css/views/location/_LocationPicker.scss     | 17 ++++++++++++++++-
 res/css/views/messages/_MLocationBody.scss      | 17 ++++++++++++++++-
 .../views/location/LocationPicker.tsx           |  5 +----
 src/components/views/messages/MLocationBody.tsx |  5 +----
 4 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/res/css/views/location/_LocationPicker.scss b/res/css/views/location/_LocationPicker.scss
index 125b33994c..cc0830e7cd 100644
--- a/res/css/views/location/_LocationPicker.scss
+++ b/res/css/views/location/_LocationPicker.scss
@@ -58,7 +58,22 @@ limitations under the License.
         .mx_MLocationBody_pointer {
             position: absolute;
             bottom: -3px;
-            left: 12px;
+            left: 11px;
+            width: 9px;
+            height: 5px;
+
+            &::before {
+                mask-image: url('$(res)/img/location/pointer.svg');
+                mask-position: center;
+                mask-repeat: no-repeat;
+                mask-size: 9px;
+                content: '';
+                display: inline-block;
+                width: 9px;
+                height: 5px;
+                position: absolute;
+                background-color: $accent;
+            }
         }
     }
 
diff --git a/res/css/views/messages/_MLocationBody.scss b/res/css/views/messages/_MLocationBody.scss
index 071c953424..de2a330522 100644
--- a/res/css/views/messages/_MLocationBody.scss
+++ b/res/css/views/messages/_MLocationBody.scss
@@ -38,7 +38,22 @@ limitations under the License.
     .mx_MLocationBody_pointer {
         position: absolute;
         bottom: -3px;
-        left: 12px;
+        left: 11px;
+        width: 9px;
+        height: 5px;
+
+        &::before {
+            mask-image: url('$(res)/img/location/pointer.svg');
+            mask-position: center;
+            mask-repeat: no-repeat;
+            mask-size: 9px;
+            content: '';
+            display: inline-block;
+            width: 9px;
+            height: 5px;
+            position: absolute;
+            background-color: $accent;
+        }
     }
 
     .mx_MLocationBody_markerContents {
diff --git a/src/components/views/location/LocationPicker.tsx b/src/components/views/location/LocationPicker.tsx
index b6be4e10c8..131dbf6ad0 100644
--- a/src/components/views/location/LocationPicker.tsx
+++ b/src/components/views/location/LocationPicker.tsx
@@ -197,11 +197,8 @@ class LocationPicker extends React.Component<IProps, IState> {
                             viewUserOnClick={false}
                         />
                     </div>
-                    <img
+                    <div
                         className="mx_MLocationBody_pointer"
-                        src={require("../../../../res/img/location/pointer.svg")}
-                        width="9"
-                        height="5"
                     />
                 </div>
             </div>
diff --git a/src/components/views/messages/MLocationBody.tsx b/src/components/views/messages/MLocationBody.tsx
index 6c329d2c50..5d58822bfb 100644
--- a/src/components/views/messages/MLocationBody.tsx
+++ b/src/components/views/messages/MLocationBody.tsx
@@ -188,11 +188,8 @@ export function LocationBodyContent(props: ILocationBodyContentProps):
             <div className="mx_MLocationBody_markerBorder">
                 { markerContents }
             </div>
-            <img
+            <div
                 className="mx_MLocationBody_pointer"
-                src={require("../../../../res/img/location/pointer.svg")}
-                width="9"
-                height="5"
             />
         </div>
         {