From ae30d39b4d3ce9ab91d31c976a832d818b1d4c40 Mon Sep 17 00:00:00 2001
From: Mihai Uscat <mihai.uscat@8x8.com>
Date: Tue, 5 Nov 2019 14:02:39 +0200
Subject: [PATCH] feat(PromotionalFooter): Implement

---
 css/_promotional-footer.scss                  |  1 +
 css/_variables.scss                           | 35 +++++++++++++++
 css/deep-linking/_mobile.scss                 | 44 ++++++++++++++-----
 css/main.scss                                 |  1 +
 .../components/DeepLinkingMobilePage.web.js   |  2 +
 .../deep-linking/renderPromotionalFooter.js   |  9 ++++
 6 files changed, 81 insertions(+), 11 deletions(-)
 create mode 100644 css/_promotional-footer.scss
 create mode 100644 react/features/deep-linking/renderPromotionalFooter.js

diff --git a/css/_promotional-footer.scss b/css/_promotional-footer.scss
new file mode 100644
index 000000000..16aa95675
--- /dev/null
+++ b/css/_promotional-footer.scss
@@ -0,0 +1 @@
+/** Insert custom CSS for any additional content in the promotional footer **/
diff --git a/css/_variables.scss b/css/_variables.scss
index a8367c075..20645aca7 100644
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -220,4 +220,39 @@ $welcomePageButtonLineHeight: 35px;
  * Deep-linking page variables.
  */
 $deepLinkingMobileLogoHeight: 40px;
+
 $deepLinkingMobileHeaderBackground: #f1f2f5;
+
+$deepLinkingMobileLinkColor: inherit;
+$deepLinkingMobileTextFontSize: inherit;
+$deepLinkingMobileTextLineHeight: inherit;
+
+$deepLinkingDialInConferenceIdMargin: 10px 0 10px 0;
+$deepLinkingDialInConferenceIdPadding: inherit;
+$deepLinkingDialInConferenceIdBackgroundColor: inherit;
+$deepLinkingDialInConferenceIdBorderRadius: inherit;
+
+$deepLinkingDialInConferenceNameFontSize: inherit;
+$deepLinkingDialInConferenceNameLineHeight: inherit;
+$deepLinkingDialInConferenceNameMarginBottom: none;
+$deepLinkingDialInConferenceNameFontWeight: inherit;
+
+$deepLinkingDialInConferenceDescriptionFontSize: 0.8em;
+$deepLinkingDialInConferenceDescriptionLineHeight: inherit;
+$deepLinkingDialInConferenceDescriptionMarginBottom: none;
+
+$deepLinkingDialInConferencePinFontSize: inherit;
+$deepLinkingDialInConferencePinLineHeight: inherit;
+
+$depLinkingMobileHrefLineHeight: 2.2857142857142856em;
+$deepLinkingMobileHrefFontWeight: bolder;
+$deepLinkingMobileHrefFontSize: inherit;
+
+$deepLinkingMobileButtonHeight: 2.2857142857142856em;
+$deepLinkingMobileButtonLineHeight: 2.2857142857142856em;
+$deepLinkingMobileButtonMargin: 18px auto 10px;
+$deepLinkingMobileButtonWidth: auto;
+$deepLinkingMobileButtonFontWeight: bold;
+$deepLinkingMobileButtonFontSize: inherit;
+
+$primaryDeepLinkingMobileButtonBorderRadius: inherit;
diff --git a/css/deep-linking/_mobile.scss b/css/deep-linking/_mobile.scss
index ec120749d..bab9f9b8f 100644
--- a/css/deep-linking/_mobile.scss
+++ b/css/deep-linking/_mobile.scss
@@ -19,7 +19,8 @@
     }
 
     a {
-        text-decoration: none
+        text-decoration: none;
+        color: $deepLinkingMobileLinkColor;
     }
 
     &__body {
@@ -41,6 +42,8 @@
 
     &__text {
         font-weight: bolder;
+        font-size: $deepLinkingMobileTextFontSize;
+        line-height: $deepLinkingMobileTextLineHeight;
         padding: 10px 10px 0px 10px;
     }
 
@@ -65,11 +68,28 @@
         }
 
         .dial-in-conference-id {
-            margin: 10px 0 10px 0;
+            margin: $deepLinkingDialInConferenceIdMargin;
+            padding: $deepLinkingDialInConferenceIdPadding;
+            background-color: $deepLinkingDialInConferenceIdBackgroundColor;
+            border-radius: $deepLinkingDialInConferenceIdBorderRadius;
+        }
+
+        .dial-in-conference-name {
+            font-size: $deepLinkingDialInConferenceNameFontSize;
+            line-height: $deepLinkingDialInConferenceNameLineHeight;
+            margin-bottom: $deepLinkingDialInConferenceNameMarginBottom;
+            font-weight: $deepLinkingDialInConferenceNameFontWeight;
         }
 
         .dial-in-conference-description {
-            font-size: 0.8em;
+            font-size: $deepLinkingDialInConferenceDescriptionFontSize;
+            line-height: $deepLinkingDialInConferenceDescriptionLineHeight;
+            margin-bottom: $deepLinkingDialInConferenceDescriptionMarginBottom;
+        }
+
+        .dial-in-conference-pin {
+            font-size: $deepLinkingDialInConferencePinFontSize;
+            line-height: $deepLinkingDialInConferencePinLineHeight;
         }
 
         .toll-free-list {
@@ -88,25 +108,27 @@
 
     &__href {
         height: 2.2857142857142856em;
-        line-height: 2.2857142857142856em;
+        line-height: $depLinkingMobileHrefLineHeight;
         margin: 18px auto 20px;
         max-width: 300px;
         width: auto;
-        font-weight: bolder;
+        font-weight: $deepLinkingMobileHrefFontWeight;
+        font-size: $deepLinkingMobileHrefFontSize;
     }
 
     &__button {
         border: 0;
-        height: 2.2857142857142856em;
-        line-height: 2.2857142857142856em;
-        margin: 18px auto 10px;
+        height: $deepLinkingMobileButtonHeight;
+        line-height: $deepLinkingMobileButtonLineHeight;
+        margin: $deepLinkingMobileButtonMargin;
         padding: 0px 10px 0px 10px;
         max-width: 300px;
-        width: auto;
+        width: $deepLinkingMobileButtonWidth;
         @include border-radius(3px);
         background-color: $unsupportedBrowserButtonBgColor;
         color: #505F79;
-        font-weight: bold;
+        font-weight: $deepLinkingMobileButtonFontWeight;
+        font-size: $deepLinkingMobileButtonFontSize;
 
         &:active {
             background-color: $unsupportedBrowserButtonBgColor;
@@ -115,7 +137,7 @@
         &_primary {
             background-color: $primaryUnsupportedBrowserButtonBgColor;
             color: #FFFFFF;
-
+            border-radius: $primaryDeepLinkingMobileButtonBorderRadius;
             &:active {
                 background-color: $primaryUnsupportedBrowserButtonBgColor;
             }
diff --git a/css/main.scss b/css/main.scss
index aacfb2886..fd3bbe41a 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -84,5 +84,6 @@ $flagsImagePath: "../images/";
 @import 'third-party-branding/google';
 @import 'third-party-branding/microsoft';
 @import 'avatar';
+@import 'promotional-footer';
 
 /* Modules END */
diff --git a/react/features/deep-linking/components/DeepLinkingMobilePage.web.js b/react/features/deep-linking/components/DeepLinkingMobilePage.web.js
index 6f59e736e..eb51bd2f9 100644
--- a/react/features/deep-linking/components/DeepLinkingMobilePage.web.js
+++ b/react/features/deep-linking/components/DeepLinkingMobilePage.web.js
@@ -10,6 +10,7 @@ import { DialInSummary } from '../../invite';
 
 import { _TNS } from '../constants';
 import { generateDeepLinkingURL } from '../functions';
+import { renderPromotionalFooter } from '../renderPromotionalFooter';
 
 declare var interfaceConfig: Object;
 
@@ -130,6 +131,7 @@ class DeepLinkingMobilePage extends Component<Props> {
                         { t(`${_TNS}.openApp`) }
                         {/* </button> */}
                     </a>
+                    { renderPromotionalFooter() }
                     <DialInSummary
                         className = 'deep-linking-dial-in'
                         clickableNumbers = { true }
diff --git a/react/features/deep-linking/renderPromotionalFooter.js b/react/features/deep-linking/renderPromotionalFooter.js
new file mode 100644
index 000000000..733de78f4
--- /dev/null
+++ b/react/features/deep-linking/renderPromotionalFooter.js
@@ -0,0 +1,9 @@
+// @flow
+/**
+ * Method used in order to render a custom promotional footer.
+ *
+ * @returns {HTMLElement}
+ */
+export function renderPromotionalFooter() {
+    return null;
+}