refactor(premeeting): use jss instead of sass in ConnectionStatus (#11115)

css/premeeting/_connection-status.scss

@@ -1,71 +0,0 @@
-.con-status {
-    border-radius: 6px;
-    color: #fff;
-    font-size: 12px;
-    letter-spacing: 0.16px;
-    line-height: 16px;
-    position: absolute;
-    width: 100%;
-
-    &-header {
-        background-color: rgba(0, 0, 0, 0.7);
-        align-items: center;
-        display: flex;
-        padding: 14px 16px;
-    }
-
-    &-circle {
-        border-radius: 50%;
-        display: inline-block;
-        padding: 4px;
-        margin-right: 16px;
-    }
-
-    &--good {
-        background: #31B76A;
-    }
-
-    &--poor {
-        background: #E12D2D;
-    }
-
-    &--non-optimal {
-        background: #E39623;
-    }
-
-    &-arrow {
-        margin-left: auto;
-        transition: background-color 0.16s ease-out;
-
-        &--up {
-            transform: rotate(180deg);
-        }
-
-        &>svg {
-            cursor: pointer;
-        }
-
-        &:hover {
-            background-color: rgba(1,1,1, 0.1);
-        }
-    }
-
-    &-text {
-        text-align: center;
-    }
-
-    &-details {
-        background-color: rgba(0, 0, 0, 0.7);
-        border-top: 1px solid #5E6D7A;
-        padding: 16px;
-        transition: opacity 0.16s ease-out;
-
-        &-visible {
-            opacity: 1;
-        }
-
-        &-hidden {
-            opacity: 0;
-        }
-    }
-}

css/premeeting/_main.scss

@@ -1,4 +1,3 @@
-@import 'connection-status';
 @import 'lobby';
 @import 'premeeting-screens';
 @import 'prejoin';

css/premeeting/_premeeting-screens.scss

@@ -161,13 +161,6 @@
             height: auto;
             margin: 0 auto;
         }
-
-        .con-status {
-            margin: 24px auto;
-            position: fixed;
-            top: 0;
-            width: $prejoinDefaultContentWidth;
-        }
     }
 
     // mobile phone landscape
@@ -175,10 +168,6 @@
         div.content {
             padding: 16px 16px 0 16px;
         }
-
-        .con-status {
-            display: none;
-        }
     }
 
     @media (max-width: 400px) {
@@ -198,11 +187,6 @@
             }
         }
 
-        .con-status {
-            margin: 0;
-            width: 100%;
-        }
-
         .device-status-error {
             border-radius: 0;
             margin: 0 -16px;

react/features/base/premeeting/components/web/ConnectionStatus.js

@@ -1,10 +1,12 @@
 // @flow
 
+import { makeStyles } from '@material-ui/styles';
 import React, { useCallback, useState } from 'react';
 
 import { translate } from '../../../i18n';
 import { Icon, IconArrowDownSmall, IconWifi1Bar, IconWifi2Bars, IconWifi3Bars } from '../../../icons';
 import { connect } from '../../../redux';
+import { PREJOIN_DEFAULT_CONTENT_WIDTH } from '../../../ui/components/variables';
 import { CONNECTION_TYPE } from '../../constants';
 import { getConnectionData } from '../../functions';
 
@@ -26,6 +28,99 @@ type Props = {
     t: Function
 }
 
+const useStyles = makeStyles(theme => {
+    return {
+        connectionStatus: {
+            borderRadius: '6px',
+            color: '#fff',
+            fontSize: '12px',
+            letterSpacing: '0.16px',
+            lineHeight: '16px',
+            position: 'absolute',
+            width: '100%',
+
+            [theme.breakpoints.down('400')]: {
+                margin: 0,
+                width: '100%'
+            },
+
+            [theme.breakpoints.down('720')]: {
+                margin: `${theme.spacing(4)} auto`,
+                position: 'fixed',
+                top: 0,
+                width: PREJOIN_DEFAULT_CONTENT_WIDTH
+            },
+
+            // mobile phone landscape
+            '@media (max-height: 420px)': {
+                display: 'none'
+            },
+
+            '& .con-status-header': {
+                backgroundColor: 'rgba(0, 0, 0, 0.7)',
+                alignItems: 'center',
+                display: 'flex',
+                padding: '14px 16px'
+            },
+
+            '& .con-status-circle': {
+                borderRadius: '50%',
+                display: 'inline-block',
+                padding: theme.spacing(1),
+                marginRight: theme.spacing(3)
+            },
+
+            '& .con-status--good': {
+                background: '#31B76A'
+            },
+
+            '& .con-status--poor': {
+                background: '#E12D2D'
+            },
+
+            '& .con-status--non-optimal': {
+                background: '#E39623'
+            },
+
+            '& .con-status-arrow': {
+                marginLeft: 'auto',
+                transition: 'background-color 0.16s ease-out'
+            },
+
+            '& .con-status-arrow--up': {
+                transform: 'rotate(180deg)'
+            },
+
+            '& .con-status-arrow > svg': {
+                cursor: 'pointer'
+            },
+
+            '& .con-status-arrow:hover': {
+                backgroundColor: 'rgba(1, 1, 1, 0.1)'
+            },
+
+            '& .con-status-text': {
+                textAlign: 'center'
+            },
+
+            '& .con-status-details': {
+                backgroundColor: 'rgba(0, 0, 0, 0.7)',
+                borderTop: '1px solid #5E6D7A',
+                padding: theme.spacing(3),
+                transition: 'opacity 0.16s ease-out'
+            },
+
+            '& .con-status-details-visible': {
+                opacity: 1
+            },
+
+            '& .con-status-details-hidden': {
+                opacity: 0
+            }
+        }
+    };
+});
+
 const CONNECTION_TYPE_MAP = {
     [CONNECTION_TYPE.POOR]: {
         connectionClass: 'con-status--poor',
@@ -51,6 +146,8 @@ const CONNECTION_TYPE_MAP = {
  * @returns {ReactElement}
  */
 function ConnectionStatus({ connectionDetails, t, connectionType }: Props) {
+    const classes = useStyles();
+
     if (connectionType === CONNECTION_TYPE.NONE) {
         return null;
     }
@@ -78,7 +175,7 @@ function ConnectionStatus({ connectionDetails, t, connectionType }: Props) {
     }, [ showDetails, toggleDetails ]);
 
     return (
-        <div className = 'con-status'>
+        <div className = { classes.connectionStatus }>
             <div
                 aria-level = { 1 }
                 className = 'con-status-header'

react/features/base/ui/components/variables.js

@@ -0,0 +1,6 @@
+/**
+ * Prejoin / premeeting screen.
+ */
+
+// Maps SCSS variable $prejoinDefaultContentWidth
+export const PREJOIN_DEFAULT_CONTENT_WIDTH = '336px';