[MM-57263] Tweaks to expanded view (#715)

* Tweaks to expanded view

* Update e2e snapshots

* Update translations

* More tweaks

* Fancy border

* Update e2e snapshots

webapp/i18n/en.json

@@ -90,6 +90,7 @@
   "S2W9y3": "You're recording",
   "SmSeXX": "Do you want to leave and join a call with {users}?",
   "Ssxh83": "Unable to find a valid audio input device. Try plugging in an audio input device.",
+  "TAIiAz": "Click to stop",
   "TDaF6J": "Dismiss",
   "TdTXXf": "Learn more",
   "Tg9Lia": "Calls is not currently enabled",

webapp/src/components/badge.tsx

@@ -1,12 +1,14 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {useIntl} from 'react-intl';
 import styled, {css} from 'styled-components';
 
 export type Props = {
     id: string,
     text: string,
     textSize: number,
+    lineHeight?: number,
     icon: React.ReactNode,
+    hoverIcon?: React.ReactNode,
     gap: number,
     iconFill?: string,
     bgColor?: string,
@@ -17,21 +19,36 @@ export type Props = {
 }
 
 export function Badge(props: Props) {
+    const [hoverState, setHoverState] = useState(false);
+
+    const toggleHover = () => {
+        setHoverState(!hoverState);
+    };
+
     return (
         <Container
+            onMouseEnter={toggleHover}
+            onMouseLeave={toggleHover}
             data-testid={props.id}
             $bgColor={props.bgColor}
             $size={props.textSize}
+            $lineHeight={props.lineHeight || props.textSize}
             $margin={props.margin}
             $padding={props.padding}
             $color={props.color}
         >
             {props.loading &&
                 <Spinner $size={props.textSize}/>
             }
-            {!props.loading &&
+
+            {!props.loading && !hoverState &&
                 <Icon $fill={props.iconFill}>{props.icon}</Icon>
             }
+
+            {!props.loading && hoverState &&
+                <Icon $fill={props.iconFill}>{props.hoverIcon || props.icon}</Icon>
+            }
+
             <Text $gap={props.gap}>{props.text}</Text>
         </Container>
     );
@@ -40,6 +57,7 @@ export function Badge(props: Props) {
 type ContainerProps = {
     $bgColor?: string,
     $size: number,
+    $lineHeight: number,
     $margin?: string,
     $padding?: string,
     $color?: string,
@@ -54,7 +72,7 @@ const Container = styled.div<ContainerProps>`
     margin: ${({$margin}) => $margin || 0};
     padding: ${({$padding}) => $padding || 0};
     font-size: ${({$size}) => $size}px;
-    line-height: ${({$size}) => $size}px;
+    line-height: ${({$lineHeight}) => $lineHeight}px;
     color: ${({$color}) => $color || 'currentColor'};
 `;