Deeplinking (#2760)

* feat(Deeplinking): Implement for web.

* ref(unsupported_browser): Move the mobile version to deeplinking feature

* feat(deeplinking_mobile): Redesign.

* fix(deeplinking): Use interface.NATIVE_APP_NAME.

* feat(dial_in_summary): Add the PIN to the number link.

* fix(deep_linking): Handle use case when there isn't deep linking image.

* fix(deep_linking): css

* fix(deep_linking): deeplink -> "deep linking"

* fix(deeplinking_css): Remove position: fixed

* docs(deeplinking): Add comment for the openWebApp action.

css/unsupported-browser/_main.scss

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

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

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

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

@@ -1,89 +0,0 @@
-.unsupported-mobile-browser {
-    background-color: #fff;
-    height: 100vh;
-    overflow: auto;
-    position: relative;
-    width: 100vw;
-
-    a {
-        text-decoration: none
-    }
-
-    &__body {
-        color: $unsupportedBrowserTextColor;
-        margin: auto;
-        max-width: 40em;
-        padding: 35px 0 40px 0;
-        text-align: center;
-        width: 75%;
-
-        a:active {
-            text-decoration: none;
-        }
-    }
-
-    &__text,
-    .unsupported-dial-in  {
-        font-size: 1.2em;
-        line-height: em(29px, 21px);
-        margin-bottom: 0.65em;
-
-        &_small {
-            font-size: 1.5em;
-            margin-bottom: 1em;
-            margin-top: em(21, 18);
-
-            strong {
-                font-size: em(21, 18);
-            }
-        }
-    }
-
-    &__logo {
-        height: 108px;
-        width: 77px;
-    }
-
-    &__button {
-        border: 0;
-        height: 2.2857142857142856em;
-        line-height: 2.2857142857142856em;
-        margin: 18px auto 20px;
-        max-width: 300px;
-        width: auto;
-        @include border-radius(3px);
-        background-color: $unsupportedBrowserButtonBgColor;
-        color: #505F79;
-
-        &:active {
-            background-color: $unsupportedBrowserButtonBgColor;
-        }
-
-        &_primary {
-            background-color: $primaryUnsupportedBrowserButtonBgColor;
-            color: #FFFFFF;
-
-            &:active {
-                background-color: $primaryUnsupportedBrowserButtonBgColor;
-            }
-        }
-    }
-
-    .unsupported-dial-in {
-        display: none;
-
-        &.has-numbers {
-            align-items: center;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .dial-in-numbers-list {
-            color: $unsupportedBrowserTextColor;
-        }
-
-        .dial-in-numbers-body {
-            vertical-align: top;
-        }
-    }
-}