improve button styling

Signed-off-by: Kerry Archibald <[email protected]>

Author: Kerry Archibald

res/css/_components.scss

@@ -7,6 +7,7 @@
 @import "./components/views/beacon/_BeaconStatus.scss";
 @import "./components/views/beacon/_LeftPanelLiveShareWarning.scss";
 @import "./components/views/beacon/_LiveTimeRemaining.scss";
+@import "./components/views/beacon/_OwnBeaconStatus.scss";
 @import "./components/views/beacon/_RoomLiveShareWarning.scss";
 @import "./components/views/beacon/_StyledLiveBeaconIcon.scss";
 @import "./components/views/location/_LiveDurationDropdown.scss";

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

@@ -56,17 +56,6 @@ limitations under the License.
     // TODO handle text-overflow
 }
 
-.mx_BeaconStatus_destructiveButton {
-    // override button link_inline styles
-    color: $alert !important;
-    font-weight: $font-semi-bold !important;
-    text-transform: uppercase;
-
-    // align to top to make room for timestamp
-    // in bubble view
-    align-self: start;
-}
-
 .mx_BeaconStatus_expiryTime {
     color: $secondary-content;
 }

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

@@ -0,0 +1,27 @@
+/*
+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_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button {
+    // align to top to make room for timestamp
+    // in bubble view
+    align-self: start;
+}
+
+.mx_OwnBeaconStatus_destructiveButton {
+    // override button link_inline styles
+    color: $alert !important;
+    font-weight: $font-semi-bold !important;
+}

src/components/views/beacon/OwnBeaconStatus.tsx

@@ -56,33 +56,33 @@ const OwnBeaconStatus: React.FC<Props & HTMLProps<HTMLDivElement>> = ({
         displayLiveTimeRemaining
         {...rest}
     >
-        {ownDisplayStatus === BeaconDisplayStatus.Active && <AccessibleButton
+        { ownDisplayStatus === BeaconDisplayStatus.Active && <AccessibleButton
             data-test-id='beacon-status-stop-beacon'
             kind='link'
             onClick={onStopSharing}
-            className='mx_BeaconStatus_destructiveButton'
+            className='mx_OwnBeaconStatus_button mx_OwnBeaconStatus_destructiveButton'
             disabled={stoppingInProgress}
         >
-            {_t('Stop')}
+            { _t('Stop') }
         </AccessibleButton>
         }
-        {hasWireError && <AccessibleButton
+        { hasWireError && <AccessibleButton
             data-test-id='beacon-status-reset-wire-error'
             kind='link'
             onClick={onResetWireError}
-            className='mx_BeaconStatus_destructiveButton'
+            className='mx_OwnBeaconStatus_button mx_OwnBeaconStatus_destructiveButton'
         >
-            {_t('Retry')}
+            { _t('Retry') }
         </AccessibleButton>
         }
-        {hasStopSharingError && <AccessibleButton
+        { hasStopSharingError && <AccessibleButton
             data-test-id='beacon-status-stop-beacon-retry'
             kind='link'
             onClick={onStopSharing}
-            className='mx_BeaconStatus_destructiveButton'
+            className='mx_OwnBeaconStatus_button mx_OwnBeaconStatus_destructiveButton'
         >
-            {_t('Retry')}
-        </AccessibleButton>}
+            { _t('Retry') }
+        </AccessibleButton> }
     </BeaconStatus>;
 };