[MM-63430] UX polish

webapp/i18n/en.json

@@ -90,6 +90,7 @@
   "FoNl1e": "Check the <troubleShootingLink>troubleshooting section</troubleShootingLink> if the problem persists.",
   "FpgQ3M": "Avg Call Duration (minutes)",
   "G9EwJD": "Call recording quality",
+  "GNkXiL": "Switch to speaker view",
   "GSZYxc": "Call recordings",
   "Ga0yXg": "Call started",
   "GcvLBC": "Understood",
@@ -197,6 +198,7 @@
   "aVENjO": "By selecting <b>Try free for 30 days</b>, I agree to the <linkEvaluation>Mattermost Software Evaluation Agreement</linkEvaluation>, <linkPrivacy>Privacy Policy</linkPrivacy>, and receiving product emails.",
   "aaYQI7": "Enable IPv6 support (Experimental)",
   "aeJJMp": "Calls by Channel Type",
+  "aft1aI": "Switch to grid view",
   "axn5zT": "Here's the call recording. Transcription is processing and will be posted when ready.",
   "b2Wfwm": "Open in new window",
   "bBIj2W": "Recording has stopped. Processing…",

webapp/src/client.ts

@@ -39,12 +39,12 @@ export const DefaultVideoTrackOptions: MediaTrackConstraints = {
     frameRate: {
         ideal: 30,
     },
-    aspectRatio: {
-        ideal: 4 / 3,
-    },
     width: {
         ideal: 640,
     },
+    height: {
+        ideal: 360,
+    },
 };
 
 const rtcMonitorInterval = 10000;

webapp/src/components/avatar/avatar.tsx

@@ -14,6 +14,7 @@ type Props = {
     icon?: string;
     border?: boolean;
     borderGlowWidth?: number;
+    borderGlowColor?: string;
 };
 
 type Attrs = HTMLAttributes<HTMLElement>;
@@ -29,6 +30,7 @@ const Avatar = ({
     icon,
     border = true,
     borderGlowWidth = 0,
+    borderGlowColor = 'rgba(61, 184, 135, 0.56)',
     ...attrs
 }: Props & Attrs) => {
     if (text) {
@@ -40,6 +42,7 @@ const Avatar = ({
                 $fontSize={fontSize}
                 $border={border}
                 $borderGlowWidth={borderGlowWidth}
+                $borderGlowColor={borderGlowColor}
             />
         );
     }
@@ -52,6 +55,7 @@ const Avatar = ({
                 $fontSize={fontSize}
                 $border={border}
                 $borderGlowWidth={borderGlowWidth}
+                $borderGlowColor={borderGlowColor}
             >
                 <CompassIcon icon={icon}/>
             </ProfilePlain>
@@ -68,6 +72,7 @@ const Avatar = ({
             $fontSize={fontSize}
             $border={border}
             $borderGlowWidth={borderGlowWidth}
+            $borderGlowColor={borderGlowColor}
         />
     );
 };
@@ -77,6 +82,7 @@ interface ProfileProps {
     $fontSize: number;
     $border?: boolean;
     $borderGlowWidth: number;
+    $borderGlowColor: string;
 }
 
 const Profile = styled.div<ProfileProps>`
@@ -106,7 +112,7 @@ const Profile = styled.div<ProfileProps>`
         margin-left: -${({$size}) => $size * 0.25}px;
     }
 
-    box-shadow: ${({$borderGlowWidth}) => $borderGlowWidth > 0 ? `0px 0px 0px ${$borderGlowWidth}px rgba(61, 184, 135, 0.56)` : 'none'};
+    box-shadow: ${({$borderGlowWidth, $borderGlowColor}) => $borderGlowWidth > 0 ? `0px 0px 0px ${$borderGlowWidth}px ${$borderGlowColor}` : 'none'};
 `;
 
 const ProfilePlain = styled(Profile)`