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

…1115)
jitsi · Mar 15, 2022 · 2dad816 · 2dad816
1 parent 985b371
commit 2dad816
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 89 deletions.
diff --git a/css/premeeting/_connection-status.scss b/css/premeeting/_connection-status.scss
diff --git a/css/premeeting/_main.scss b/css/premeeting/_main.scss
@@ -1,4 +1,3 @@
-@import 'connection-status';
 @import 'lobby';
 @import 'premeeting-screens';
 @import 'prejoin';

diff --git a/css/premeeting/_premeeting-screens.scss b/css/premeeting/_premeeting-screens.scss
@@ -161,24 +161,13 @@
             height: auto;
             margin: 0 auto;
         }
-
-        .con-status {
-            margin: 24px auto;
-            position: fixed;
-            top: 0;
-            width: $prejoinDefaultContentWidth;
-        }
     }
 
     // mobile phone landscape
     @media (max-height: 420px) {
         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;

diff --git a/react/features/base/premeeting/components/web/ConnectionStatus.js b/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'

diff --git a/react/features/base/ui/components/variables.js b/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';