diff --git a/css/_base.scss b/css/_base.scss index f0d2ae7eb..08483f461 100644 --- a/css/_base.scss +++ b/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; diff --git a/css/_variables.scss b/css/_variables.scss index 75c8f269a..b186e851a 100644 --- a/css/_variables.scss +++ b/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; diff --git a/css/_welcome_page.scss b/css/_welcome_page.scss index f5cc63604..f938460c9 100644 --- a/css/_welcome_page.scss +++ b/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 { - color: $welcomePageDescriptionColor; - float: left; - text-align: $welcomePageHeaderTextAlign; - - a { - color: inherit; - font-weight: 600; - } + a { + color: inherit; + font-weight: 600; } } } @@ -200,8 +205,8 @@ body.welcome-page { color: $welcomePageDescriptionColor; padding: 4px; position: absolute; - top: 32px; - right: 32px; + top: calc(35px - #{$welcomePageHeaderContainerMarginTop}); + 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 { diff --git a/lang/main.json b/lang/main.json index f3172725d..f19aa8ab6 100644 --- a/lang/main.json +++ b/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" } } diff --git a/react/features/base/react/components/web/Watermarks.js b/react/features/base/react/components/web/Watermarks.js index 054112386..84e9b2381 100644 --- a/react/features/base/react/components/web/Watermarks.js +++ b/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 { _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 { }; reactElement = (
); if (_logoLink) { reactElement = ( { reactElement } diff --git a/react/features/welcome/components/WelcomePage.web.js b/react/features/welcome/components/WelcomePage.web.js index 16fea1897..abc5710f0 100644 --- a/react/features/welcome/components/WelcomePage.web.js +++ b/react/features/welcome/components/WelcomePage.web.js @@ -184,24 +184,27 @@ class WelcomePage extends AbstractWelcomePage {
-
- -
-
-
- - { showAdditionalToolbarContent - ?
- : null - } -
+
+
+ +
+
+
+ + { showAdditionalToolbarContent + ?
+ : null + } +

{ t('welcomepage.headerTitle') }

@@ -246,18 +249,16 @@ class WelcomePage extends AbstractWelcomePage { { _moderatedRoomServiceUrl && (
-

- { - translateToHTML( - t, 'welcomepage.moderatedMessage', { url: _moderatedRoomServiceUrl }) - } -

+ { + translateToHTML( + t, 'welcomepage.moderatedMessage', { url: _moderatedRoomServiceUrl }) + }
)}
-
+
{ this._renderTabs() }
@@ -403,14 +404,14 @@ class WelcomePage extends AbstractWelcomePage { if (_calendarEnabled) { tabs.push({ - label: t('welcomepage.calendar'), + label: t('welcomepage.upcomingMeetings'), content: }); } if (_recentListEnabled) { tabs.push({ - label: t('welcomepage.recentList'), + label: t('welcomepage.recentMeetings'), content: }); }