extract reusable styled live beacon icon (#8103)

* extract reusable styles live beacon icon

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add secondary live lcation color

Signed-off-by: Kerry Archibald <kerrya@element.io>

res/css/_components.scss

@@ -5,6 +5,7 @@
 @import "./_font-weights.scss";
 @import "./_spacing.scss";
 @import "./components/views/beacon/_LeftPanelLiveShareWarning.scss";
+@import "./components/views/beacon/_StyledLiveBeaconIcon.scss";
 @import "./components/views/location/_LiveDurationDropdown.scss";
 @import "./components/views/location/_LocationShareMenu.scss";
 @import "./components/views/location/_MapError.scss";

res/css/components/views/beacon/_StyledLiveBeaconIcon.scss

@@ -0,0 +1,30 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_StyledLiveBeaconIcon {
+    flex-grow: 0;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 50%;
+
+    background-color: $location-live-color;
+    border-color: $location-live-secondary-color;
+    padding: 2px;
+    // colors icon
+    color: white;
+}

res/css/components/views/location/_ShareType.scss

@@ -83,19 +83,12 @@ limitations under the License.
     border-style: solid;
     border-radius: 50%;
 
+    // Live is styled by StyledLiveBeaconIcon
+
     &.Own {
         border-color: $accent;
     }
 
-    &.Live {
-        background-color: $location-live-color;
-        // 20% brightness $location-live-color
-        border-color: #deddfd;
-        padding: 2px;
-        // colors icon
-        color: white;
-    }
-
     &.Pin {
         border-color: $accent;
         background-color: $accent;

res/themes/dark/css/_dark.scss

@@ -185,6 +185,7 @@ $video-feed-secondary-background: $system;
 // Location sharing
 // ********************
 $location-live-color: #5c56f5;
+$location-live-secondary-color: #deddfd;
 // ********************
 
 // Location sharing

res/themes/legacy-dark/css/_legacy-dark.scss

@@ -192,6 +192,7 @@ $eventbubble-reply-color: #C1C6CD;
 // ********************
 $location-marker-color: #ffffff;
 $location-live-color: #5c56f5;
+$location-live-secondary-color: #deddfd;
 // ********************
 
 // ***** Mixins! *****

res/themes/legacy-light/css/_legacy-light.scss

@@ -288,6 +288,7 @@ $groupFilterPanel-divider-color: $tertiary-content;
 // ********************
 $location-marker-color: #ffffff;
 $location-live-color: #5c56f5;
+$location-live-secondary-color: #deddfd;
 // ********************
 
 // ***** Mixins! *****

res/themes/light/css/_light.scss

@@ -302,6 +302,7 @@ $copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
 // ********************
 $location-marker-color: #ffffff;
 $location-live-color: #5c56f5;
+$location-live-secondary-color: #deddfd;
 // ********************
 
 // Mixins

src/components/views/beacon/StyledLiveBeaconIcon.tsx

@@ -0,0 +1,28 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import classNames from 'classnames';
+
+import { Icon as LiveLocationIcon } from '../../../../res/img/location/live-location.svg';
+
+const StyledLiveBeaconIcon: React.FC<React.SVGProps<SVGSVGElement>> = ({ className, ...props }) =>
+    <LiveLocationIcon
+        {...props}
+        className={classNames('mx_StyledLiveBeaconIcon', className)}
+    />;
+
+export default StyledLiveBeaconIcon;

src/components/views/location/ShareType.tsx

@@ -23,8 +23,8 @@ import BaseAvatar from '../avatars/BaseAvatar';
 import AccessibleButton from '../elements/AccessibleButton';
 import Heading from '../typography/Heading';
 import { Icon as LocationIcon } from '../../../../res/img/element-icons/location.svg';
-import { Icon as LiveLocationIcon } from '../../../../res/img/location/live-location.svg';
 import { LocationShareType } from './shareLocation';
+import StyledLiveBeaconIcon from '../beacon/StyledLiveBeaconIcon';
 
 const UserAvatar = () => {
     const matrixClient = useContext(MatrixClientContext);
@@ -59,7 +59,7 @@ const ShareTypeOption: React.FC<ShareTypeOptionProps> = ({
     { shareType === LocationShareType.Pin &&
             <LocationIcon className={`mx_ShareType_option-icon ${LocationShareType.Pin}`} /> }
     { shareType === LocationShareType.Live &&
-            <LiveLocationIcon className={`mx_ShareType_option-icon ${LocationShareType.Live}`} /> }
+            <StyledLiveBeaconIcon className={`mx_ShareType_option-icon ${LocationShareType.Live}`} /> }
 
     { label }
 </AccessibleButton>;