Enable flow for written code

css/_variables.scss

@@ -129,8 +129,13 @@ $linkFontColor: #489afe;
 $linkHoverFontColor: #287ade;
 
 /**
- * Landing
+ * Unsupported browser
  */
 $primaryUnsupportedBrowserButtonBgColor: #17a0db;
 $unsupportedBrowserButtonBgColor: #ff9a00;
 $unsupportedBrowserTextColor: #4a4a4a;
+$unsupportedBrowserTextSmallFontSize: 17px;
+$unsupportedBrowserTitleColor: #fff;
+$unsupportedBrowserTitleFontSize: 24px;
+$unsupportedDesktopBrowserTextColor: rgba(255, 255, 255, 0.7);
+$unsupportedDesktopBrowserTextFontSize: 21px;

css/unsupported-browser/_main.scss

@@ -1,3 +1,3 @@
 @import 'no-mobile-app';
 @import 'unsupported-desktop-browser';
-@import 'unsupported-mobile-browser';
+@import 'unsupported-mobile-browser';

css/unsupported-browser/_no-mobile-app.scss

@@ -1,21 +1,21 @@
 .no-mobile-app {
     margin: 30% auto 0;
-    width: auto;
     max-width: 25em;
     text-align: center;
+    width: auto;
 
     &__title {
-        padding-bottom: em(17, 24);
         border-bottom: 1px solid $auiBorderColor;
+        color: $unsupportedBrowserTitleColor;
         font-weight: 400;
         letter-spacing: 0.5px;
-        color: #fff;
+        padding-bottom: em(17, 24);
     }
 
     &__description {
-        margin-top: 1em;
-        font-size: 17px;
+        font-size: $unsupportedBrowserTextSmallFontSize;
         font-weight: 300;
         letter-spacing: 1px;
+        margin-top: 1em;
     }
-}
+}

css/unsupported-browser/_unsupported-desktop-browser.scss

@@ -5,22 +5,22 @@
     text-align: center;
 
     &__title {
-        color: #fff;
+        color: $unsupportedBrowserTitleColor;
         font-weight: 300;
-        font-size: 24px;
+        font-size: $unsupportedBrowserTitleFontSize;
         letter-spacing: 1px;
     }
 
     &__description {
-        margin-top: 16px;
-        color: rgba(255, 255, 255, 0.7);
+        color: $unsupportedDesktopBrowserTextColor;
+        font-size: $unsupportedDesktopBrowserTextFontSize;
         font-weight: 300;
-        font-size: 21px;
         letter-spacing: 1px;
+        margin-top: 16px;
 
         &_small {
             @extend .unsupported-desktop-browser__description;
-            font-size: 16px;
+            font-size: $unsupportedBrowserTextSmallFontSize;
         }
     }
 

react/features/base/util/interceptComponent.js

@@ -1,4 +1,4 @@
-/* global APP, interfaceConfig */
+/* @flow */
 
 import { Platform } from '../react';
 import {
@@ -8,6 +8,9 @@ import {
     UnsupportedMobileBrowser
 } from '../../unsupported-browser';
 
+declare var APP: Object;
+declare var interfaceConfig: Object;
+
 /**
  * Array of rules defining whether we should intercept component to render
  * or not.
@@ -56,11 +59,13 @@ const _RULES = [
  *
  * @param {Object|Function} stateOrGetState - Either Redux state object or
  * getState() function.
- * @param {ReactElement} currentComponent - Current route component to render.
+ * @param {ReactElement} component - Current route component to render.
  * @returns {ReactElement} If any of rules is satisfied returns intercepted
  * component.
  */
-export function interceptComponent(stateOrGetState, currentComponent) {
+export function interceptComponent(
+        stateOrGetState: Object,
+        component: ReactElement<*>) {
     let result;
     const state
         = typeof stateOrGetState === 'function'
@@ -74,5 +79,5 @@ export function interceptComponent(stateOrGetState, currentComponent) {
         }
     }
 
-    return result || currentComponent;
+    return result || component;
 }

react/features/conference/components/Conference.web.js

@@ -1,4 +1,4 @@
-/* global $, APP */
+/* @flow */
 
 import React, { Component } from 'react';
 import { connect as reactReduxConnect } from 'react-redux';
@@ -8,6 +8,9 @@ import { Watermarks } from '../../base/react';
 import { FeedbackButton } from '../../feedback';
 import { OverlayContainer } from '../../overlay';
 
+declare var $: Function;
+declare var APP: Object;
+
 /**
  * For legacy reasons, inline style for display none.
  *

react/features/unsupported-browser/components/NoMobileApp.js

@@ -1,8 +1,11 @@
-/* global interfaceConfig */
+/* @flow */
+
 import React, { Component } from 'react';
 
+declare var interfaceConfig: Object;
+
 /**
- * React component representing no mobile page.
+ * React component representing no mobile app page.
  *
  * @class NoMobileApp
  */
@@ -22,8 +25,8 @@ export default class NoMobileApp extends Component {
                     Video chat isn't available in the mobile apps
                 </h2>
                 <p className = { `${ns}__description` }>
-                    Please use { interfaceConfig.APP_NAME } on <br />
-                    Desktop top join calls.
+                    Video chat isn't available on mobile
+                    Desktop to join calls.
                 </p>
             </div>
         );

react/features/unsupported-browser/components/PluginRequiredBrowser.js

@@ -1,3 +1,5 @@
+/*  @flow */
+
 import React, { Component } from 'react';
 
 import { CHROME, CHROMIUM, FIREFOX } from './browserLinks';
@@ -16,6 +18,7 @@ export default class PluginRequiredBrowser extends Component {
      */
     render() {
         const ns = 'unsupported-desktop-browser';
+        const nsLink = `${ns}__link`;
 
         return (
             <div className = { ns }>
@@ -28,13 +31,13 @@ export default class PluginRequiredBrowser extends Component {
                     however, we strongly recommend that you do that using
                     the&nbsp;
                     <a
-                        className = { `${ns}__link` }
+                        className = { nsLink }
                         href = { CHROME }>Chrome</a>,&nbsp;
                     <a
-                        className = { `${ns}__link` }
+                        className = { nsLink }
                         href = { CHROMIUM }>Chromium</a> or&nbsp;
                     <a
-                        className = { `${ns}__link` }
+                        className = { nsLink }
                         href = { FIREFOX }>Firefox</a> browsers.
                 </p>
             </div>

react/features/unsupported-browser/components/UnsupportedDesktopBrowser.js

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React, { Component } from 'react';
 
 import { CHROME, FIREFOX, IE, SAFARI } from './browserLinks';
@@ -8,7 +10,6 @@ import { CHROME, FIREFOX, IE, SAFARI } from './browserLinks';
  * @class UnsupportedDesktopBrowser
  */
 export default class UnsupportedDesktopBrowser extends Component {
-
     /**
      * Renders the component.
      *
@@ -16,6 +17,7 @@ export default class UnsupportedDesktopBrowser extends Component {
      */
     render() {
         const ns = 'unsupported-desktop-browser';
+        const nsLink = `${ns}__link`;
 
         return (
             <div className = { ns }>
@@ -23,18 +25,18 @@ export default class UnsupportedDesktopBrowser extends Component {
                     It looks like you're using a browser we don't support.
                 </h2>
                 <p className = { `${ns}__description` }>
-                    Please try again with&nbsp;
+                    Please try again with the latest version of&nbsp;
                     <a
-                        className = { `${ns}__link` }
+                        className = { nsLink }
                         href = { CHROME } >Chrome</a>,&nbsp;
                     <a
-                        className = { `${ns}__link` }
+                        className = { nsLink }
                         href = { FIREFOX }>Firefox</a>,&nbsp;
                     <a
-                        className = { `${ns}__link` }
+                        className = { nsLink }
                         href = { SAFARI }>Safari</a> or&nbsp;
                     <a
-                        className = { `${ns}__link` }
+                        className = { nsLink }
                         href = { IE }>IE</a>.
                 </p>
             </div>

react/features/unsupported-browser/components/UnsupportedMobileBrowser.js

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -20,6 +22,8 @@ const _URLS = {
  * @class UnsupportedMobileBrowser
  */
 class UnsupportedMobileBrowser extends Component {
+    state: Object;
+
     /**
      * UnsupportedMobileBrowser component's property types.
      *