diff --git a/css/_meetings_list.scss b/css/_meetings_list.scss index 6ffb71615..2555d6ba6 100644 --- a/css/_meetings_list.scss +++ b/css/_meetings_list.scss @@ -7,9 +7,8 @@ display: flex; flex-direction: column; position: relative; - width: 100%; - height: 100%; overflow: auto; + width: 100%; .meetings-list-empty { text-align: center; @@ -20,11 +19,34 @@ flex-direction: column; .description { - font-size: 16px; - padding: 20px; + color: #2f3237; + font-size: 14px; + line-height: 18px; + margin-bottom: 16px; + max-width: 436px; } } + .meetings-list-empty-image { + text-align: center; + margin: 24px 0 20px 0; + } + + .meetings-list-empty-button { + align-items: center; + color: #0163FF; + cursor: pointer; + display: flex; + font-size: 14px; + line-height: 18px; + margin: 24px 0 32px 0; + } + + .meetings-list-empty-icon { + display: inline-block; + margin-right: 8px; + } + .button { background: #0074E0; border-radius: 4px; @@ -32,7 +54,7 @@ display: flex; justify-content: center; align-items: center; - padding: 5px 10px; + padding: 8px; cursor: pointer; } @@ -43,12 +65,13 @@ } .item { - background: rgba(255,255,255,0.50); + background: #fff; box-sizing: border-box; + border-radius: 4px; display: inline-flex; - margin-top: 5px; - min-height: 92px; - width: 100%; + margin: 4px 4px 0 4px; + min-height: 60px; + width: calc(100% - 8px); word-break: break-word; display: flex; flex-direction: row; @@ -61,37 +84,41 @@ .left-column { display: flex; flex-direction: column; - width: 140px; flex-grow: 0; - padding-left: 30px; - padding-top: 25px; - - .date { - font-weight: bold; - padding-bottom: 5px; - } + padding-left: 16px; + padding-top: 13px; } .right-column { display: flex; flex-direction: column; flex-grow: 1; - padding-left: 30px; - padding-top: 25px; - - .title { - font-size: 16px; - font-weight: bold; - padding-bottom: 5px; - } + padding-left: 16px; + padding-top: 13px; + position: relative; } + .title { + font-size: 12px; + font-weight: 600; + line-height: 16px; + padding-bottom: 4px; + } + + .subtitle { + color: #5E6D7A; + font-weight: normal; + font-size: 12px; + line-height: 16px; + } + + .actions { display: flex; align-items: center; justify-content: center; flex-grow: 0; - padding-right: 30px; + margin-right: 16px; } &.with-click-handler { @@ -99,7 +126,7 @@ } &.with-click-handler:hover { - background-color: #75A7E7; + background-color: #c7ddff; } .add-button { @@ -120,4 +147,20 @@ display: block } } + + .delete-meeting { + display: none; + margin-right: 16px; + position: absolute; + + &> svg { + fill: #0074e0; + } + } + + .item:hover { + .delete-meeting { + display: block; + } + } } diff --git a/css/_responsive.scss b/css/_responsive.scss index 01fd767b0..2e917d3af 100644 --- a/css/_responsive.scss +++ b/css/_responsive.scss @@ -30,6 +30,67 @@ } @media only screen and (max-width: $verySmallScreen) { + .welcome { + #enter_room { + position: relative; + height: 42px; + + .welcome-page-button { + font-size: 16px; + left: 0; + position: absolute; + top: 68px; + text-align: center; + width: 100%; + } + } + + .header { + background: #06345E; + background-image: linear-gradient(180deg, rgba(8, 110, 202, 0.8) 0%, rgba(8, 110, 202, 0) 100%); + + #enter_room { + .enter-room-input-container { + padding-right: 0; + } + + .warning-without-link, + .warning-with-link { + top: 120px; + } + } + } + + .welcome-tabs { + display: none; + } + + .header-text-title { + text-align: center; + } + + .welcome-cards-container { + padding: 0; + } + + &.without-content { + .header { + height: 100%; + } + } + + #moderated-meetings { + display: none; + } + + .welcome-footer-row-block { + display: block; + } + .welcome-badge { + margin-right: 16px; + } + } + #videoResolutionLabel { display: none; } diff --git a/css/_variables.scss b/css/_variables.scss index e20787aba..44ea96863 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -161,71 +161,47 @@ $unsupportedDesktopBrowserTextFontSize: 21px; /** * The size of the default watermark. */ -$watermarkWidth: 186px; -$watermarkHeight: 74px; +$watermarkWidth: 71px; +$watermarkHeight: 32px; -$welcomePageWatermarkWidth: 186px; -$welcomePageWatermarkHeight: 74px; +$welcomePageWatermarkWidth: 71px; +$welcomePageWatermarkHeight: 32px; /** * Welcome page variables. */ $welcomePageDescriptionColor: #fff; $welcomePageFontFamily: inherit; -$welcomePageBackground: linear-gradient(-90deg, #1251AE 0%, #0074FF 50%, #1251AE 100%); +$welcomePageBackground: none; $welcomePageTitleColor: #fff; -$welcomePageHeaderBackground: none; -$welcomePageHeaderBackgroundSmall: none; +$welcomePageHeaderBackground: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('/images/welcome-background.png'); $welcomePageHeaderBackgroundPosition: none; $welcomePageHeaderBackgroundRepeat: none; -$welcomePageHeaderBackgroundSize: none; +$welcomePageHeaderBackgroundSize: cover; $welcomePageHeaderPaddingBottom: 0px; -$welcomePageHeaderMinHeight: fit-content; +$welcomePageHeaderTitleMaxWidth: initial; +$welcomePageHeaderTextAlign: center; -$welcomePageHeaderTextMarginTop: 35px; -$welcomePageHeaderTextMarginBottom: 35px; -$welcomePageHeaderTextDisplay: flex; -$welcomePageHeaderTextWidth: 650px; +$welcomePageHeaderContainerDisplay: flex; +$welcomePageHeaderContainerMargin: 146px 32px 0 32px; -$welcomePageHeaderTextTitleMarginBottom: 16px; -$welcomePageHeaderTextTitleFontSize: 2.5rem; -$welcomePageHeaderTextTitleFontWeight: 500; -$welcomePageHeaderTextTitleLineHeight: 1.18; +$welcomePageHeaderTextTitleMarginBottom: 0; +$welcomePageHeaderTextTitleFontSize: 42px; +$welcomePageHeaderTextTitleFontWeight: normal; +$welcomePageHeaderTextTitleLineHeight: 50px; $welcomePageHeaderTextTitleOpacity: 1; -$welcomePageHeaderTextDescriptionDisplay: inherit; -$welcomePageHeaderTextDescriptionFontSize: 1rem; -$welcomePageHeaderTextDescriptionFontWeight: 400; -$welcomePageHeaderTextDescriptionLineHeight: 24px; -$welcomePageHeaderTextDescriptionMarginBottom: 20px; -$welcomePageHeaderTextDescriptionAlignSelf: inherit; - $welcomePageEnterRoomDisplay: flex; -$welcomePageEnterRoomWidth: 680px; -$welcomePageEnterRoomPadding: 25px 30px; -$welcomePageEnterRoomBorderRadius: 0px; - -$welcomePageEnterRoomInputContainerPadding: 0 8px 5px 0px; -$welcomePageEnterRoomInputContainerBorderWidth: 0px 0px 2px 0px; -$welcomePageEnterRoomInputContainerBorderStyle: solid; -$welcomePageEnterRoomInputContainerBorderImage: linear-gradient(to right, #dee1e6, #fff) 1; - -$welcomePageEnterRoomTitleDisplay: inherit; +$welcomePageEnterRoomWidth: calc(100% - 32px); +$welcomePageEnterRoomPadding: 4px; +$welcomePageEnterRoomMargin: 0 auto; $welcomePageTabContainerDisplay: flex; $welcomePageTabContentDisplay: inherit; $welcomePageTabButtonsDisplay: flex; $welcomePageTabDisplay: block; -$welcomePageButtonWidth: 51px; -$welcomePageButtonMinWidth: inherit; -$welcomePageButtonFontSize: 14px; -$welcomePageButtonHeight: 35px; -$welcomePageButtonFontWeight: inherit; -$welcomePageButtonBorderRadius: 4px; -$welcomePageButtonLineHeight: 35px; - /** * Deep-linking page variables. */ diff --git a/css/_welcome_page.scss b/css/_welcome_page.scss index a1171aa1e..68c57e705 100644 --- a/css/_welcome_page.scss +++ b/css/_welcome_page.scss @@ -5,6 +5,7 @@ body.welcome-page { .welcome { background-image: $welcomePageBackground; + background-color: #fff; display: flex; flex-direction: column; font-family: $welcomePageFontFamily; @@ -18,21 +19,15 @@ body.welcome-page { background-repeat: $welcomePageHeaderBackgroundRepeat; background-size: $welcomePageHeaderBackgroundSize; padding-bottom: $welcomePageHeaderPaddingBottom; - align-items: center; - display: flex; - flex-direction: column; - min-height: $welcomePageHeaderMinHeight; + background-color: #002637; + height: 480px; overflow: hidden; position: relative; - text-align: center; - .header-text { - display: $welcomePageHeaderTextDisplay; + .header-container { + display: $welcomePageHeaderContainerDisplay; flex-direction: column; - margin-top: $watermarkHeight + $welcomePageHeaderTextMarginTop; - margin-bottom: $welcomePageHeaderTextMarginBottom; - max-width: calc(100% - 40px); - width: $welcomePageHeaderTextWidth; + margin: $welcomePageHeaderContainerMargin; z-index: $zindex2; } @@ -42,50 +37,52 @@ body.welcome-page { font-weight: $welcomePageHeaderTextTitleFontWeight; line-height: $welcomePageHeaderTextTitleLineHeight; margin-bottom: $welcomePageHeaderTextTitleMarginBottom; + max-width: $welcomePageHeaderTitleMaxWidth; opacity: $welcomePageHeaderTextTitleOpacity; + text-align: $welcomePageHeaderTextAlign; } - .header-text-description { - display: $welcomePageHeaderTextDescriptionDisplay; - color: $welcomePageDescriptionColor; - font-size: $welcomePageHeaderTextDescriptionFontSize; - font-weight: $welcomePageHeaderTextDescriptionFontWeight; - line-height: $welcomePageHeaderTextDescriptionLineHeight; - margin-bottom: $welcomePageHeaderTextDescriptionMarginBottom; - align-self: $welcomePageHeaderTextDescriptionAlignSelf; + .header-text-subtitle { + color: #fff; + font-size: 20px; + font-weight: 600; + line-height: 26px; + margin: 16px 0 32px 0; + text-align: $welcomePageHeaderTextAlign; + } #enter_room { display: $welcomePageEnterRoomDisplay; align-items: center; - max-width: calc(100% - 40px); + max-width: 480px; width: $welcomePageEnterRoomWidth; z-index: $zindex2; background-color: #fff; padding: $welcomePageEnterRoomPadding; - border-radius: $welcomePageEnterRoomBorderRadius; + border-radius: 4px; + margin: $welcomePageEnterRoomMargin; .enter-room-input-container { - width: 100%; - padding: $welcomePageEnterRoomInputContainerPadding; text-align: left; color: #253858; + flex-grow: 1; height: fit-content; - - .enter-room-title { - display: $welcomePageEnterRoomTitleDisplay; - font-size: 18px; - font-weight: bold; - padding-bottom: 5px; - } + padding-right: 4px; + position: relative; .enter-room-input { - border-width: $welcomePageEnterRoomInputContainerBorderWidth; - border-style: $welcomePageEnterRoomInputContainerBorderStyle; - border-image: $welcomePageEnterRoomInputContainerBorderImage; + border: 0; + background: #fff; display: inline-block; + height: 50px; width: 100%; font-size: 14px; + padding-left: 10px; + + &:focus { + outline: auto 2px #005fcc; + } } .insecure-room-name-warning { @@ -109,16 +106,28 @@ body.welcome-page { } } + .warning-without-link { + position: absolute; + top: 44px; + left: -10px; + } + + .warning-with-link { + position: absolute; + top: 84px; + } + } #moderated-meetings { max-width: calc(100% - 40px); padding: 16px 0 39px 0; + margin: $welcomePageEnterRoomMargin; width: $welcomePageEnterRoomWidth; p { color: $welcomePageDescriptionColor; - text-align: left; + text-align: $welcomePageHeaderTextAlign; a { color: inherit; @@ -126,76 +135,70 @@ body.welcome-page { } } } + } - .tab-container { - font-size: 16px; + .tab-container { + font-size: 16px; + position: relative; + text-align: left; + display: $welcomePageTabContainerDisplay; + flex-direction: column; + + .tab-content{ + display: $welcomePageTabContentDisplay; + height: 250px; + margin: 5px 0px; + overflow: hidden; + flex-grow: 1; position: relative; - text-align: left; - min-height: 354px; - width: 710px; - background: #75A7E7; - display: $welcomePageTabContainerDisplay; - flex-direction: column; + } - .tab-content{ - display: $welcomePageTabContentDisplay; - margin: 5px 0px; - overflow: hidden; + .tab-buttons { + background-color: #c7ddff; + border-radius: 6px; + color: #0163FF; + font-size: 14px; + line-height: 18px; + margin: 4px; + display: $welcomePageTabButtonsDisplay; + + .tab { + background-color: #c7ddff; + border-radius: 7px; + cursor: pointer; + display: $welcomePageTabDisplay; flex-grow: 1; - position: relative; + margin: 2px; + padding: 7px 0; + text-align: center; - > * { - position: absolute; + &.selected { + background-color: #FFF; } } - .tab-buttons { - font-size: 18px; - color: #FFFFFF; - display: $welcomePageTabButtonsDisplay; - flex-grow: 0; - flex-direction: row; - min-height: 54px; - width: 100%; - - .tab { - display: $welcomePageTabDisplay; - text-align: center; - background: rgba(9,30,66,0.37); - height: 55px; - line-height: 54px; - flex-grow: 1; - cursor: pointer; - - &.selected, &:hover { - background: rgba(9,30,66,0.71); - } - - &:last-child { - margin-left: 1px; - } - } - } } } .welcome-page-button { - width: $welcomePageButtonWidth; - min-width: $welcomePageButtonMinWidth; - height: $welcomePageButtonHeight; - font-size: $welcomePageButtonFontSize; - font-weight: $welcomePageButtonFontWeight; + border: 0; + font-size: 14px; background: #0074E0; - border-radius: $welcomePageButtonBorderRadius; + border-radius: 3px; color: #FFFFFF; - text-align: center; - vertical-align: middle; - line-height: $welcomePageButtonLineHeight; cursor: pointer; + padding: 16px 20px; + + &:focus-within { + outline: auto 2px #022e61; + } } .welcome-page-settings { + background: rgba(255, 255, 255, 0.38); + border-radius: 3px; color: $welcomePageDescriptionColor; + padding: 4px; position: absolute; top: 32px; right: 32px; @@ -217,4 +220,83 @@ body.welcome-page { height: $welcomePageWatermarkHeight; } } + + &.without-content { + .welcome-card { + min-width: 500px; + } + } + + .welcome-cards-container { + color:#131519; + padding-top: 40px; + } + + .welcome-card-row { + display: flex; + justify-content: center; + padding: 0 32px; + } + + .welcome-card-text { + padding: 32px; + } + + .welcome-card { + width: 49%; + border-radius: 8px; + + &--dark { + background: #444447; + color: #fff; + } + + &--blue { + background: #D5E5FF; + } + + &--grey { + background: #F2F3F4; + } + + &--shadow { + box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.15); + } + } + + .welcome-footer { + background: #131519; + color: #fff; + margin-top: 40px; + position: relative; + } + + .welcome-footer-centered { + max-width: 688px; + margin: 0 auto; + } + + .welcome-footer-padded { + padding: 0px 16px; + } + + .welcome-footer-row-block { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid #424447; + + &:last-child { + border-bottom: none; + } + } + + .welcome-footer--row-1 { + padding: 40px 0 24px 0; + } + + .welcome-footer-row-1-text { + max-width: 200px; + margin-right: 16px; + } } diff --git a/images/app-store-badge.png b/images/app-store-badge.png new file mode 100644 index 000000000..c774c29f4 Binary files /dev/null and b/images/app-store-badge.png differ diff --git a/images/calendar.svg b/images/calendar.svg new file mode 100644 index 000000000..133f2dd24 --- /dev/null +++ b/images/calendar.svg @@ -0,0 +1,21 @@ + diff --git a/images/f-droid-badge.png b/images/f-droid-badge.png new file mode 100644 index 000000000..6efa1c2f8 Binary files /dev/null and b/images/f-droid-badge.png differ diff --git a/images/google-play-badge.png b/images/google-play-badge.png new file mode 100644 index 000000000..d34533767 Binary files /dev/null and b/images/google-play-badge.png differ diff --git a/images/watermark.png b/images/watermark.png deleted file mode 100644 index 6fa553d3b..000000000 Binary files a/images/watermark.png and /dev/null differ diff --git a/images/watermark.svg b/images/watermark.svg new file mode 100644 index 000000000..7286107ca --- /dev/null +++ b/images/watermark.svg @@ -0,0 +1,8 @@ + diff --git a/images/welcome-background.png b/images/welcome-background.png new file mode 100644 index 000000000..8509333b5 Binary files /dev/null and b/images/welcome-background.png differ diff --git a/index.html b/index.html index 60a6e9c06..dc51bed1c 100644 --- a/index.html +++ b/index.html @@ -182,6 +182,7 @@ +
diff --git a/interface_config.js b/interface_config.js index 45358fc0b..994710884 100644 --- a/interface_config.js +++ b/interface_config.js @@ -46,9 +46,9 @@ var interfaceConfig = { DEFAULT_BACKGROUND: '#474747', DEFAULT_LOCAL_DISPLAY_NAME: 'me', - DEFAULT_LOGO_URL: 'images/watermark.png', + DEFAULT_LOGO_URL: 'images/watermark.svg', DEFAULT_REMOTE_DISPLAY_NAME: 'Fellow Jitster', - DEFAULT_WELCOME_PAGE_LOGO_URL: 'images/watermark.png', + DEFAULT_WELCOME_PAGE_LOGO_URL: 'images/watermark.svg', DISABLE_DOMINANT_SPEAKER_INDICATOR: false, @@ -86,7 +86,9 @@ var interfaceConfig = { */ DISABLE_VIDEO_BACKGROUND: false, - DISPLAY_WELCOME_PAGE_CONTENT: true, + DISPLAY_WELCOME_FOOTER: true, + DISPLAY_WELCOME_PAGE_ADDITIONAL_CARD: false, + DISPLAY_WELCOME_PAGE_CONTENT: false, DISPLAY_WELCOME_PAGE_TOOLBAR_ADDITIONAL_CONTENT: false, ENABLE_DIAL_OUT: true, @@ -136,6 +138,21 @@ var interfaceConfig = { */ MOBILE_APP_PROMO: true, + /** + * Specify custom URL for downloading android mobile app. + */ + MOBILE_DOWNLOAD_LINK_ANDROID: 'https://play.google.com/store/apps/details?id=org.jitsi.meet', + + /** + * Specify custom URL for downloading f droid app. + */ + MOBILE_DOWNLOAD_LINK_F_DROID: 'https://f-droid.org/en/packages/org.jitsi.meet/', + + /** + * Specify URL for downloading ios mobile app. + */ + MOBILE_DOWNLOAD_LINK_IOS: 'https://itunes.apple.com/us/app/jitsi-meet/id1165103905', + NATIVE_APP_NAME: 'Jitsi Meet', // Names of browsers which should show a warning stating the current browser @@ -234,16 +251,6 @@ var interfaceConfig = { */ // TILE_VIEW_MAX_COLUMNS: 5, - /** - * Specify custom URL for downloading android mobile app. - */ - // MOBILE_DOWNLOAD_LINK_ANDROID: 'https://play.google.com/store/apps/details?id=org.jitsi.meet', - - /** - * Specify URL for downloading ios mobile app. - */ - // MOBILE_DOWNLOAD_LINK_IOS: 'https://itunes.apple.com/us/app/jitsi-meet/id1165103905', - /** * Specify Firebase dynamic link properties for the mobile apps. */ diff --git a/lang/main.json b/lang/main.json index 5edc53050..bc1f95d25 100644 --- a/lang/main.json +++ b/lang/main.json @@ -878,6 +878,8 @@ "goSmall": "GO", "info": "Dial-in info", "join": "CREATE / JOIN", + "jitsiMeet": "Jitsi Meet", + "jitsiOnMobile": "Jitsi on mobile – download our apps and start a meeting from anywhere", "moderatedMessage": "Or book a meeting URL in advance where you are the only moderator.", "privacy": "Privacy", "recentList": "Recent", @@ -888,6 +890,8 @@ "roomname": "Enter room name", "roomnameHint": "Enter the name or URL of the room you want to join. You may make a name up, just let the people you are meeting know it so that they enter the same name.", "sendFeedback": "Send feedback", + "secureMeetings": "Secure and high quality meetings", + "startMeeting": "Start meeting", "terms": "Terms", "title": "Secure, fully featured, and completely free video conferencing" }, diff --git a/react/features/base/icons/svg/calendar-plus.svg b/react/features/base/icons/svg/calendar-plus.svg new file mode 100644 index 000000000..f330390b4 --- /dev/null +++ b/react/features/base/icons/svg/calendar-plus.svg @@ -0,0 +1,3 @@ + diff --git a/react/features/base/icons/svg/index.js b/react/features/base/icons/svg/index.js index 402b5fd16..32caea7ca 100644 --- a/react/features/base/icons/svg/index.js +++ b/react/features/base/icons/svg/index.js @@ -11,6 +11,7 @@ export { default as IconAudioOnly } from './visibility.svg'; export { default as IconAudioOnlyOff } from './visibility-off.svg'; export { default as IconAudioRoute } from './volume.svg'; export { default as IconBlurBackground } from './blur-background.svg'; +export { default as IconPlusCalendar } from './calendar-plus.svg'; export { default as IconCamera } from './camera.svg'; export { default as IconCameraDisabled } from './camera-disabled.svg'; export { default as IconCancelSelection } from './cancel.svg'; diff --git a/react/features/base/react/components/web/MeetingsList.js b/react/features/base/react/components/web/MeetingsList.js index 1474328e2..80d9fd8de 100644 --- a/react/features/base/react/components/web/MeetingsList.js +++ b/react/features/base/react/components/web/MeetingsList.js @@ -6,6 +6,7 @@ import { getLocalizedDateFormatter, getLocalizedDurationFormatter } from '../../../i18n'; +import { Icon, IconTrash } from '../../../icons'; import Container from './Container'; import Text from './Text'; @@ -38,9 +39,9 @@ type Props = { meetings: Array