revert: Warning container in call

src/script/components/calling/FullscreenVideoCall.tsx

@@ -74,7 +74,6 @@ import {CallingViewMode, CallState, MuteState} from '../../calling/CallState';
 import {Participant} from '../../calling/Participant';
 import type {Grid} from '../../calling/videoGridHandler';
 import type {Conversation} from '../../entity/Conversation';
-import {useWarnings} from '../../guards/useWarnings';
 import {ElectronDesktopCapturerSource, MediaDevicesHandler} from '../../media/MediaDevicesHandler';
 import {TeamState} from '../../team/TeamState';
 import {CallViewTab} from '../../view_model/CallingViewModel';
@@ -148,9 +147,6 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
   const [isConfirmCloseModalOpen, setIsConfirmCloseModalOpen] = useState<boolean>(false);
   const [showEmojisBar, setShowEmojisBar] = useState<boolean>(false);
   const [disabledEmojis, setDisabledEmojis] = useState<string[]>([]);
-
-  const {showSmallOffset, showLargeOffset} = useWarnings();
-
   const selfParticipant = call.getSelfParticipant();
   const {sharesScreen: selfSharesScreen, sharesCamera: selfSharesCamera} = useKoSubscribableChildren(selfParticipant, [
     'sharesScreen',
@@ -429,12 +425,7 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
   const isModerator = selfUser && roles[selfUser.id] === DefaultConversationRoleName.WIRE_ADMIN;
 
   return (
-    <div
-      className={cx('video-calling-wrapper', {
-        'app--small-offset': showSmallOffset,
-        'app--large-offset': showLargeOffset,
-      })}
-    >
+    <div className="video-calling-wrapper">
       <div id="video-calling" className="video-calling">
         <div css={videoTopBarStyles}>
           <div id="video-title" className="video-title">

src/script/page/AppMain.tsx

@@ -20,7 +20,6 @@
 import {FC, useEffect, useLayoutEffect} from 'react';
 
 import {amplify} from 'amplify';
-import cx from 'classnames';
 import {ErrorBoundary} from 'react-error-boundary';
 import {container} from 'tsyringe';
 
@@ -52,7 +51,6 @@ import {useAppState, ContentState} from './useAppState';
 import {CallingViewMode, CallState, DesktopScreenShareMenu} from '../calling/CallState';
 import {ConversationState} from '../conversation/ConversationState';
 import {User} from '../entity/User';
-import {useWarnings} from '../guards/useWarnings';
 import {useActiveWindow} from '../hooks/useActiveWindow';
 import {useInitializeRootFontSize} from '../hooks/useRootFontSize';
 import {App} from '../main/app';
@@ -95,8 +93,6 @@ export const AppMain: FC<AppMainProps> = ({
 
   useInitializeRootFontSize();
 
-  const {showSmallOffset, showLargeOffset} = useWarnings();
-
   if (!apiContext) {
     throw new Error('API Context has not been set');
   }
@@ -253,13 +249,7 @@ export const AppMain: FC<AppMainProps> = ({
         <ErrorBoundary FallbackComponent={ErrorFallback}>
           {Config.getConfig().FEATURE.ENABLE_DEBUG && <ConfigToolbar />}
           {!locked && (
-            <div
-              id="app"
-              className={cx('app', {
-                'app--small-offset': showSmallOffset,
-                'app--large-offset': showLargeOffset,
-              })}
-            >
+            <div id="app" className="app">
               {showLeftSidebar && (
                 <LeftSidebar
                   listViewModel={mainView.list}

src/script/view_model/WarningsContainer/WarningsContainer.tsx

@@ -17,34 +17,49 @@
  *
  */
 
+import React, {useEffect} from 'react';
+
 import cx from 'classnames';
 
 import {Runtime} from '@wireapp/commons';
 
 import * as Icon from 'Components/Icon';
 import {t} from 'Util/LocalizerUtil';
+import {afterRender} from 'Util/util';
 
 import {closeWarning, useWarningsState} from './WarningsState';
-import {CONFIG, TYPE as type} from './WarningsTypes';
+import {CONFIG, TYPE} from './WarningsTypes';
 
 import {Config} from '../../Config';
 
 interface WarningProps {
   onRefresh: () => void;
 }
 
-export const WarningsContainer = ({onRefresh}: WarningProps) => {
+const WarningsContainer: React.FC<WarningProps> = ({onRefresh}) => {
   const name = useWarningsState(state => state.name);
   const warnings = useWarningsState(state => state.warnings);
+  const type = TYPE;
   const visibleWarning = warnings[warnings.length - 1];
+  const warningDimmed = warnings.some(warning => CONFIG.DIMMED_MODES.includes(warning));
 
-  if (warnings.length === 0) {
-    return null;
-  }
+  useEffect(() => {
+    const visibleWarning = warnings[warnings.length - 1];
+    const isConnectivityRecovery = visibleWarning === TYPE.CONNECTIVITY_RECOVERY;
+    const hasOffset = warnings.length > 0 && !isConnectivityRecovery;
+    const isMiniMode = CONFIG.MINI_MODES.includes(visibleWarning);
 
-  const warningDimmed = warnings.some(warning => CONFIG.DIMMED_MODES.includes(warning));
+    const app = document.querySelector('#app');
+    if (app) {
+      app.classList.toggle('app--small-offset', hasOffset && isMiniMode);
+      app.classList.toggle('app--large-offset', hasOffset && !isMiniMode);
+    }
 
-  const {BRAND_NAME: brandName, URL} = Config.getConfig();
+    afterRender(() => window.dispatchEvent(new Event('resize')));
+  }, [warnings]);
+
+  const brandName = Config.getConfig().BRAND_NAME;
+  const URL = Config.getConfig().URL;
 
   const closeButton = (
     <button
@@ -55,6 +70,10 @@ export const WarningsContainer = ({onRefresh}: WarningProps) => {
     />
   );
 
+  if (warnings.length === 0) {
+    return null;
+  }
+
   return (
     <div className={cx('warning', {'warning-dimmed': warningDimmed})}>
       {visibleWarning === type.REQUEST_CAMERA && (
@@ -309,3 +328,5 @@ export const WarningsContainer = ({onRefresh}: WarningProps) => {
     </div>
   );
 };
+
+export {WarningsContainer};

src/style/foundation/video-calling.less

@@ -31,14 +31,6 @@
   width: 100vw;
   height: 100vh;
   background-color: var(--app-bg-secondary);
-
-  &.app--small-offset {
-    height: calc(100vh - 32px);
-  }
-
-  &.app--large-offset {
-    height: calc(100vh - 64px);
-  }
 }
 
 .video-calling {