chore(welcome-page) Welcome page redesign (#12717)

css/_base.scss

@@ -126,6 +126,12 @@ form {
     background-size: contain;
 }
 
+.leftwatermarknomargin {
+    background-position: center left;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
 .rightwatermark {
     right: 32px;
     top: 32px;

css/_variables.scss

@@ -170,8 +170,9 @@ $welcomePageHeaderPaddingBottom: 0px;
 $welcomePageHeaderTitleMaxWidth: initial;
 $welcomePageHeaderTextAlign: center;
 
+$welcomePageHeaderContainerMarginTop: 104px;
 $welcomePageHeaderContainerDisplay: flex;
-$welcomePageHeaderContainerMargin: 104px 32px 0 32px;
+$welcomePageHeaderContainerMargin: $welcomePageHeaderContainerMarginTop auto 0;
 
 $welcomePageHeaderTextTitleMarginBottom: 0;
 $welcomePageHeaderTextTitleFontSize: 42px;

css/_welcome_page.scss

@@ -29,6 +29,16 @@ body.welcome-page {
             flex-direction: column;
             margin: $welcomePageHeaderContainerMargin;
             z-index: $zindex2;
+            align-items: center;
+            position: relative;
+            max-width: 688px;
+        }
+
+        .header-watermark-container {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            margin-top: calc(20px - #{$welcomePageHeaderContainerMarginTop});
         }
 
         .header-text-title {
@@ -123,16 +133,11 @@ body.welcome-page {
             max-width: calc(100% - 40px);
             padding: 16px 0 39px 0;
             width: $welcomePageEnterRoomWidth;
+            text-align: center;
 
-            p {
+            a {
-                color: $welcomePageDescriptionColor;
+                color: inherit;
-                float: left;
+                font-weight: 600;
-                text-align: $welcomePageHeaderTextAlign;
-
-                a {
-                    color: inherit;
-                    font-weight: 600;
-                }
             }
         }
     }
@@ -200,8 +205,8 @@ body.welcome-page {
         color: $welcomePageDescriptionColor;
         padding: 4px;
         position: absolute;
-        top: 32px;
+        top: calc(35px - #{$welcomePageHeaderContainerMarginTop});
-        right: 32px;
+        right: 0;
         z-index: $zindex2;
 
         * {
@@ -224,6 +229,11 @@ body.welcome-page {
             width: $welcomePageWatermarkWidth;
             height: $welcomePageWatermarkHeight;
         }
+
+        .watermark.leftwatermarknomargin {
+            width: $welcomePageWatermarkWidth;
+            height: $welcomePageWatermarkHeight;
+        }
     }
 
     &.without-content {
@@ -242,10 +252,17 @@ body.welcome-page {
         padding-top: 40px;
     }
 
-    .welcome-card-row {
+    .welcome-card-column {
         display: flex;
         justify-content: center;
-        padding: 0 32px;
+        flex-direction: column;
+        align-items: center;
+        max-width: 688px;
+        margin: auto;
+
+        > div {
+            margin-bottom: 16px;
+        }
     }
 
     .welcome-card-text {
@@ -253,7 +270,7 @@ body.welcome-page {
     }
 
     .welcome-card {
-        width: 49%;
+        width: 100%;
         border-radius: 8px;
 
         &--dark {
@@ -268,10 +285,6 @@ body.welcome-page {
         &--grey {
             background: #F2F3F4;
         }
-
-        &--shadow {
-            box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.15);
-        }
     }
 
     .welcome-footer {

lang/main.json

@@ -1362,6 +1362,7 @@
         "recentList": "Recent",
         "recentListDelete": "Delete entry",
         "recentListEmpty": "Your recent list is currently empty. Chat with your team and you will find all your recent meetings here.",
+        "recentMeetings": "Your recent meetings",
         "reducedUIText": "Welcome to {{app}}!",
         "roomNameAllowedChars": "Meeting name should not contain any of these characters: ?, &, :, ', \", %, #.",
         "roomname": "Enter room name",
@@ -1370,6 +1371,7 @@
         "settings": "Settings",
         "startMeeting": "Start meeting",
         "terms": "Terms",
-        "title": "Secure, fully featured, and completely free video conferencing"
+        "title": "Secure, fully featured, and completely free video conferencing",
+        "upcomingMeetings": "Your upcoming meetings"
     }
 }

react/features/base/react/components/web/Watermarks.js

@@ -38,6 +38,11 @@ type Props = {
      */
     _showJitsiWatermark: boolean,
 
+    /**
+     * Whether the watermark should have a `top` and `left` value.
+     */
+    noMargins: boolean;
+
     /**
      * The default value for the Jitsi logo URL.
      */
@@ -160,7 +165,9 @@ class Watermarks extends Component<Props, State> {
             _logoUrl,
             _showJitsiWatermark
         } = this.props;
-        const { t } = this.props;
+        const { noMargins, t } = this.props;
+        const className = `watermark ${noMargins ? 'leftwatermarknomargin' : 'leftwatermark'}`;
+
         let reactElement = null;
 
         if (_showJitsiWatermark) {
@@ -172,14 +179,14 @@ class Watermarks extends Component<Props, State> {
             };
 
             reactElement = (<div
-                className = 'watermark leftwatermark'
+                className = { className }
                 style = { style } />);
 
             if (_logoLink) {
                 reactElement = (
                     <a
                         aria-label = { t('jitsiHome', { logo: interfaceConfig.APP_NAME }) }
-                        className = 'watermark leftwatermark'
+                        className = { className }
                         href = { _logoLink }
                         target = '_new'>
                         { reactElement }

react/features/welcome/components/WelcomePage.web.js

@@ -184,24 +184,27 @@ class WelcomePage extends AbstractWelcomePage {
             <div
                 className = { `welcome ${contentClassName} ${footerClassName}` }
                 id = 'welcome_page'>
-                <div className = 'welcome-watermark'>
-                    <Watermarks defaultJitsiLogoURL = { DEFAULT_WELCOME_PAGE_LOGO_URL } />
-                </div>
-
                 <div className = 'header'>
-                    <div className = 'welcome-page-settings'>
-                        <SettingsButton
-                            defaultTab = { SETTINGS_TABS.CALENDAR }
-                            isDisplayedOnWelcomePage = { true } />
-                        { showAdditionalToolbarContent
-                            ? <div
-                                className = 'settings-toolbar-content'
-                                ref = { this._setAdditionalToolbarContentRef } />
-                            : null
-                        }
-                    </div>
                     <div className = 'header-image' />
                     <div className = 'header-container'>
+                        <div className = 'header-watermark-container'>
+                            <div className = 'welcome-watermark'>
+                                <Watermarks
+                                    defaultJitsiLogoURL = { DEFAULT_WELCOME_PAGE_LOGO_URL }
+                                    noMargins = { true } />
+                            </div>
+                        </div>
+                        <div className = 'welcome-page-settings'>
+                            <SettingsButton
+                                defaultTab = { SETTINGS_TABS.CALENDAR }
+                                isDisplayedOnWelcomePage = { true } />
+                            { showAdditionalToolbarContent
+                                ? <div
+                                    className = 'settings-toolbar-content'
+                                    ref = { this._setAdditionalToolbarContentRef } />
+                                : null
+                            }
+                        </div>
                         <h1 className = 'header-text-title'>
                             { t('welcomepage.headerTitle') }
                         </h1>
@@ -246,18 +249,16 @@ class WelcomePage extends AbstractWelcomePage {
 
                         { _moderatedRoomServiceUrl && (
                             <div id = 'moderated-meetings'>
-                                <p>
+                                {
-                                    {
+                                    translateToHTML(
-                                        translateToHTML(
+                                    t, 'welcomepage.moderatedMessage', { url: _moderatedRoomServiceUrl })
-                                        t, 'welcomepage.moderatedMessage', { url: _moderatedRoomServiceUrl })
+                                }
-                                    }
-                                </p>
                             </div>)}
                     </div>
                 </div>
 
                 <div className = 'welcome-cards-container'>
-                    <div className = 'welcome-card-row'>
+                    <div className = 'welcome-card-column'>
                         <div className = 'welcome-tabs welcome-card welcome-card--blue'>
                             { this._renderTabs() }
                         </div>
@@ -404,14 +405,14 @@ class WelcomePage extends AbstractWelcomePage {
 
         if (_calendarEnabled) {
             tabs.push({
-                label: t('welcomepage.calendar'),
+                label: t('welcomepage.upcomingMeetings'),
                 content: <CalendarList />
             });
         }
 
         if (_recentListEnabled) {
             tabs.push({
-                label: t('welcomepage.recentList'),
+                label: t('welcomepage.recentMeetings'),
                 content: <RecentList />
             });
         }