From 0b80755fb8a968a162a3ea2b952142ed1dab9903 Mon Sep 17 00:00:00 2001 From: Kerry Date: Mon, 21 Mar 2022 17:43:43 +0100 Subject: [PATCH] extract reusable styled live beacon icon (#8103) * extract reusable styles live beacon icon Signed-off-by: Kerry Archibald * add secondary live lcation color Signed-off-by: Kerry Archibald --- res/css/_components.scss | 1 + .../views/beacon/_StyledLiveBeaconIcon.scss | 30 +++++++++++++++++++ .../components/views/location/_ShareType.scss | 11 ++----- res/themes/dark/css/_dark.scss | 1 + res/themes/legacy-dark/css/_legacy-dark.scss | 1 + .../legacy-light/css/_legacy-light.scss | 1 + res/themes/light/css/_light.scss | 1 + .../views/beacon/StyledLiveBeaconIcon.tsx | 28 +++++++++++++++++ src/components/views/location/ShareType.tsx | 4 +-- 9 files changed, 67 insertions(+), 11 deletions(-) create mode 100644 res/css/components/views/beacon/_StyledLiveBeaconIcon.scss create mode 100644 src/components/views/beacon/StyledLiveBeaconIcon.tsx diff --git a/res/css/_components.scss b/res/css/_components.scss index f982417917..f0d78df5bc 100644 --- a/res/css/_components.scss +++ b/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"; diff --git a/res/css/components/views/beacon/_StyledLiveBeaconIcon.scss b/res/css/components/views/beacon/_StyledLiveBeaconIcon.scss new file mode 100644 index 0000000000..2ff597efc3 --- /dev/null +++ b/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; +} diff --git a/res/css/components/views/location/_ShareType.scss b/res/css/components/views/location/_ShareType.scss index bf50ca7fde..458be106eb 100644 --- a/res/css/components/views/location/_ShareType.scss +++ b/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; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index d71cd3524e..ae881f2357 100644 --- a/res/themes/dark/css/_dark.scss +++ b/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 diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index 83f0e71db5..e14b6985ad 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/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! ***** diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 7ecf47d64d..fc9aeddff6 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/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! ***** diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 11777c0075..7019ef2c56 100644 --- a/res/themes/light/css/_light.scss +++ b/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 diff --git a/src/components/views/beacon/StyledLiveBeaconIcon.tsx b/src/components/views/beacon/StyledLiveBeaconIcon.tsx new file mode 100644 index 0000000000..1628b47edc --- /dev/null +++ b/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> = ({ className, ...props }) => + ; + +export default StyledLiveBeaconIcon; diff --git a/src/components/views/location/ShareType.tsx b/src/components/views/location/ShareType.tsx index 392cb56f0f..6f4ad2d264 100644 --- a/src/components/views/location/ShareType.tsx +++ b/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 = ({ { shareType === LocationShareType.Pin && } { shareType === LocationShareType.Live && - } + } { label } ;