diff --git a/css/_atlaskit_overrides.scss b/css/_atlaskit_overrides.scss index 978bce62b0..24b76a57d3 100644 --- a/css/_atlaskit_overrides.scss +++ b/css/_atlaskit_overrides.scss @@ -114,3 +114,10 @@ } } } + +div.Tooltip { + color: #fff; + font-size: 12px; + line-height: 14px; + padding: 8px; +} diff --git a/css/_audio-preview.scss b/css/_audio-preview.scss index 1a2213d45d..9677af9a8b 100644 --- a/css/_audio-preview.scss +++ b/css/_audio-preview.scss @@ -1,26 +1,37 @@ .audio-preview { + display: inline-block; + &-content { - background: #2A3A4B; - font-size: 15px; + background: $menuBG; + border-radius: 3px; + font-size: 14px; line-height: 24px; max-height: 456px; overflow: auto; - width: 328px; + width: 300px; } &-header { color: #fff; + align-items: center; display: flex; - padding: 16px; + margin-top: 8px; + padding: 8px 16px; &-icon { - color: #A4B8D1; display: inline-block; + + svg { + fill: #fff; + } + } + + &--bordered { + border-bottom: 1px solid #4C4D50; } &-text { - font-weight: bold; - margin-left: 8px; + margin-left: 12px; } } @@ -29,19 +40,18 @@ color: #fff; cursor: pointer; display: flex; - padding: 12px 0; + padding: 8px 0; margin-left: 48px; &--selected { - background: #1C2025; + background: #131519; cursor: initial; margin-left: 0; - padding-left: 21px; + padding-left: 18px; } &-text { color: #fff; - font-size: 15px; display: inline-block; line-height: 24px; text-overflow: ellipsis; @@ -56,12 +66,13 @@ &:hover { .audio-preview-entry { - background: #3F4E5E; + background: #36383C; margin-left: 0; padding-left: 48px; &--selected { - padding-left: 21px; + padding-left: 18px; + background: #131519; } } @@ -74,6 +85,10 @@ } } + &:last-child { + padding-bottom: 8px; + } + .audio-preview-entry-text { max-width: 256px; } @@ -84,18 +99,19 @@ &:hover { .audio-preview-entry { - background: #3F4E5E; + background: #36383C; margin-left: 0; padding-left: 48px; &--selected { - padding-left: 21px; + background: #131519; + padding-left: 18px; } } } .audio-preview-entry-text { - max-width: 196px; + max-width: 178px; } } @@ -110,7 +126,7 @@ &--check { background: #31B76A; - margin-right: 13px; + margin-right: 16px; } &--exclamation { @@ -121,6 +137,11 @@ } } + &-hr { + border-top: 1px solid #4C4D50; + border-bottom: 0; + } + &-test-button { display: none; background: #FFF; @@ -129,18 +150,17 @@ color: #1C2025; cursor: pointer; font-weight: 600; - font-size: 15px; line-height: 24px; - padding: 4px 16px; + padding: 2px 16px; position: absolute; right: 16px; - top: 8px; + top: 5px; } &-meter-mic { position: absolute; right: 16px; - top: 18px; + top: 14px; } // Override @atlaskit/InlineDialog container which is made with styled components diff --git a/css/_drawer.scss b/css/_drawer.scss index f10c5375e8..7915a9e27c 100644 --- a/css/_drawer.scss +++ b/css/_drawer.scss @@ -24,12 +24,6 @@ height: 44px; cursor: pointer; - @media (hover: hover) and (pointer: fine) { - &:hover { - background-color: $overflowMenuItemHoverBG; - } - } - svg { fill: none; } @@ -67,13 +61,6 @@ align-items: center; } - @media (hover: hover) and (pointer: fine) { - &:hover { - background-color: $overflowMenuItemHoverBG; - color: $overflowMenuItemHoverColor; - } - } - &.unclickable { cursor: default; } @@ -88,42 +75,6 @@ } } - .beta-tag { - background: $overflowMenuItemColor; - border-radius: 2px; - color: $overflowMenuBG; - font-size: 11px; - font-weight: bold; - margin-left: 8px; - padding: 0 6px; - } - - .overflow-menu-item-icon { - margin-right: 16px; - - i { - display: inline; - font-size: 24px; - } - - @media (hover: hover) and (pointer: fine) { - i:hover { - background-color: initial; - } - } - - img { - max-width: 24px; - max-height: 24px; - } - - svg { - fill: #B8C7E0 !important; - height: 20px; - width: 20px; - } - } - .profile-text { max-width: 100%; text-overflow: ellipsis; diff --git a/css/_premeeting-screens.scss b/css/_premeeting-screens.scss index aedf068d94..328516b666 100644 --- a/css/_premeeting-screens.scss +++ b/css/_premeeting-screens.scss @@ -25,7 +25,7 @@ text { fill: black; font-size: 26px; - font-weight: 400; + font-weight: 400; } } @@ -197,14 +197,6 @@ &> div { margin: 0 12px; } - - .settings-button-small-icon { - right: -8px; - - &--hovered { - right: -10px; - } - } } } diff --git a/css/_responsive.scss b/css/_responsive.scss index ce323c956d..1ecb26ab5b 100644 --- a/css/_responsive.scss +++ b/css/_responsive.scss @@ -1,58 +1,3 @@ -@mixin small-button-size() { - .new-toolbox { - .toolbox-content { - .button-group-center, .button-group-left, .button-group-right { - .toolbox-button { - .toolbox-icon { - width: 28px; - height: 28px; - svg { - width: 18px; - height: 18px; - } - } - - &:nth-child(2) { - .toolbox-icon { - width: 30px; - height: 30px; - } - } - } - } - } - } -} - -@mixin very-small-button-size() { - .new-toolbox { - .toolbox-content { - .button-group-center, .button-group-left, .button-group-right { - .settings-button-small-icon { - display: none; - } - .toolbox-button { - .toolbox-icon { - width: 18px; - height: 18px; - svg { - width: 12px; - height: 12px; - } - } - - &:nth-child(2) { - .toolbox-icon { - width: 20px; - height: 20px; - } - } - } - } - } - } -} - @media only screen and (max-width: $verySmallScreen) { .welcome { display: block; @@ -122,21 +67,9 @@ } .desktop-browser { - @media only screen and (max-width: $smallScreen) { - @include small-button-size(); - } - - @media only screen and (max-width: $verySmallScreen) { - @include very-small-button-size(); - } - &.shift-right { - @media only screen and (max-width: $smallScreen + $sidebarWidth) { - @include small-button-size() - } @media only screen and (max-width: $verySmallScreen + $sidebarWidth) { - @include very-small-button-size(); #videoResolutionLabel { display: none; diff --git a/css/_settings-button.scss b/css/_settings-button.scss index 082b2ca8e9..f987f5a79c 100644 --- a/css/_settings-button.scss +++ b/css/_settings-button.scss @@ -1,84 +1,63 @@ -.settings-button { - &-container { - position: relative; +.settings-button-container { + position: relative; - .toolbox-icon { - align-items: center; - cursor: pointer; - display: flex; - background-color: #fff; - border-radius: 50%; - border: 1px solid #d1dbe8; - justify-content: center; - width: 38px; - height: 38px; - - &:hover { - background-color: #daebfa; - border: 1px solid #daebfa; - } - - &.toggled { - background: #2a3a4b; - border: 1px solid #5e6d7a; + .toolbox-icon { + align-items: center; + border-radius: 3px; + cursor: pointer; + display: flex; + justify-content: center; - svg { - fill: #fff; - } + &.disabled, .disabled & { + cursor: initial; + color: #929292; + background-color: #36383c; - &:hover { - background-color: #5e6d7a; - } + &:hover { + background-color: #36383c; } + } + } +} - &.disabled, .disabled & { - cursor: initial; - color: #fff; - background-color: #a4b8d1; +.settings-button-small-icon { + background: #36383C; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + border-radius: 3px; + cursor: pointer; + height: 18px; + position: absolute; + text-align: center; + top: 0; + right: -4; + width: 18px; + + &> svg { + fill: #fff; + margin-top: 5px; + } - &:hover { - background-color: #a4b8d1; - } - } + &--disabled { + background-color: #36383c; + cursor: default; - svg { - fill: #5e6d7a; - } + &> svg { + fill: #929292; } } - &-small-icon { - background: #FFF; - border: 1px solid rgba(0, 0, 0, 0.2); - border-radius: 50%; - bottom: 0; - box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25); - cursor: pointer; - height: 16px; - position: absolute; - text-align: center; - right: 4px; - width: 16px; + &--hovered { + background: #F2F3F4; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); &> svg { - fill: #5e6d7a; - margin-top: 5px; + fill: #000; } - &--disabled { - background-color: #a4b8d1; - cursor: default; - } - - &--hovered { - bottom: -1px; - height: 20px; - right: 2px; - width: 20px; - + &.settings-button-small-icon--disabled { &> svg { - margin-top: 6px; - } + fill: #929292; + } } } } diff --git a/css/_toolbars.scss b/css/_toolbars.scss index dc34a44c9d..c12b4544a9 100644 --- a/css/_toolbars.scss +++ b/css/_toolbars.scss @@ -33,9 +33,6 @@ &.visible { bottom: 0; - .toolbox-background { - bottom: 0px; - } } &.no-buttons { @@ -48,254 +45,218 @@ width: calc(100% - #{$sidebarWidth}); } } +} + +.toolbox-content { + align-items: center; + box-sizing: border-box; + display: flex; + margin-bottom: 16px; + position: relative; + z-index: $toolbarZ; + + .button-group-center, + .button-group-left, + .button-group-right { + display: flex; + width: 33%; + } + + .button-group-center { + justify-content: center; + } + + .button-group-right { + justify-content: flex-end; + } + + .toolbox-button-wth-dialog { + display: inline-block; + + &> div { + padding: 0; + } + } +} + +.toolbox-button { + color: $toolbarButtonColor; + cursor: pointer; + display: inline-block; + line-height: $newToolbarSize; + text-align: center; +} - .toolbox-background { - background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); - transition: bottom .3s ease-in; - height: 160px; - width: 100%; - bottom: -160px; +.toolbar-button-with-badge { + display: inline-block; + position: relative; + + .badge-round { + bottom: -5px; + font-size: 12px; + line-height: 20px; + min-width: 20px; pointer-events: none; position: absolute; - z-index: $toolbarBackgroundZ; + right: -5px; } +} - .toolbox-content { - box-sizing: border-box; - display: flex; - justify-content: space-between; - margin-left: auto; - margin-right: auto; - padding: 20px 16px; - position: relative; - width: 100%; - z-index: $toolbarZ; - - .button-group-center, - .button-group-left, - .button-group-right { - display: flex; - width: 33%; - } - .button-group-center { - justify-content: center; - - .toolbox-button { - - .toolbox-icon { - background-color: #fff; - border-radius: 50%; - border: 1px solid #d1dbe8; - margin: 0px 4px; - width: 38px; - height: 38px; - - @media (hover: hover) and (pointer: fine) { - &:hover { - background-color: #daebfa; - border: 1px solid #daebfa; - } - } - - &.toggled { - background: #2a3a4b; - border: 1px solid #5e6d7a; - - svg { - fill: #fff; - } - - @media (hover: hover) and (pointer: fine) { - &:hover { - background-color: #5e6d7a; - } - } - } - - &.disabled, .disabled & { - cursor: initial; - color: #fff; - background-color: #a4b8d1; - } - - svg { - fill: #5e6d7a; - } - } - - &:nth-child(2) { - .toolbox-icon { - background-color: $hangupColor; - border: 1px solid $hangupColor; - width: 40px; - height: 40px; - - @media (hover: hover) and (pointer: fine) { - &:hover { - background-color: $hangupColor; - } - } - - svg { - fill: #fff; - } - } - } - } +.toolbox-content-items { + background: #131519; + box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15); + border-radius: 6px; + margin: 0 auto; + padding: 6px; + text-align: center; + + >div { + margin-left: 6px; + + &:first-child { + margin-left: 0; } + } +} - .button-group-right { - justify-content: flex-end; +.overflow-menu { + font-size: 14px; + list-style-type: none; + padding: 8px 0; + background-color: $menuBG; + + .profile-text { + max-width: 150px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } +} + +.overflow-menu-item { + align-items: center; + color: $overflowMenuItemColor; + cursor: pointer; + display: flex; + font-size: 14px; + font-weight: 400; + height: 40px; + line-height: 24px; + padding: 8px 16px; + box-sizing: border-box; + + @media (hover: hover) and (pointer: fine) { + &:hover { + background: $overflowMenuItemBackground; } + } + + div { + display: flex; + flex-direction: row; + align-items: center; + } - .overflow-menu { - font-size: 1.2em; - list-style-type: none; - background-color: $overflowMenuBG; - /** - * Undo atlaskit padding by reducing margins. - */ - margin: -16px -24px; - padding: 4px 0; - - .overflow-menu-item { - align-items: center; - color: $overflowMenuItemColor; - cursor: pointer; - display: flex; - font-size: 14px; - height: 40px; - padding: 5px 12px; - box-sizing: border-box; - - div { - display: flex; - flex-direction: row; - align-items: center; - } - - @media (hover: hover) and (pointer: fine) { - &:hover { - background-color: $overflowMenuItemHoverBG; - color: $overflowMenuItemHoverColor; - } - } - - &.unclickable { - cursor: default; - } - @media (hover: hover) and (pointer: fine) { - &.unclickable:hover { - background: inherit; - } - } - &.disabled { - cursor: initial; - color: #3b475c; - } - } - - .beta-tag { - background: $overflowMenuItemColor; - border-radius: 2px; - color: $overflowMenuBG; - font-size: 11px; - font-weight: bold; - margin-left: 8px; - padding: 0 6px; - } - - .overflow-menu-item-icon { - margin-right: 16px; - - i { - display: inline; - font-size: 24px; - } - - @media (hover: hover) and (pointer: fine) { - i:hover { - background-color: initial; - } - } - - img { - max-width: 24px; - max-height: 24px; - } - - svg { - fill: #B8C7E0 !important; - height: 20px; - width: 20px; - } - } - - .profile-text { - max-width: 150px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } + &.unclickable { + cursor: default; + } + &.disabled { + cursor: initial; + color: #3b475c; + } + + @media (hover: hover) and (pointer: fine) { + &.unclickable:hover { + background: inherit; } + } +} + +.beta-tag { + background: #36383C; + border-radius: 3px; + color: #fff; + font-size: 12px; + margin-left: 8px; + padding: 0 4px; + text-transform: uppercase; +} + +.overflow-menu-item-icon { + margin-right: 16px; + + i { + display: inline; + font-size: 24px; + } - .toolbox-button { - color: $toolbarButtonColor; - cursor: pointer; - display: inline-block; - line-height: $newToolbarSize; - margin: 0 8px; - text-align: center; + @media (hover: hover) and (pointer: fine) { + i:hover { + background-color: initial; } + } + + img { + max-width: 24px; + max-height: 24px; + } + + svg { + fill: #fff; + height: 20px; + width: 20px; + } +} + + +.overflow-menu-hr { + border-top: 1px solid #4C4D50; + border-bottom: 0; + margin: 8px 0; +} - .toolbar-button-with-badge { - position: relative; - - .badge-round { - bottom: -5px; - font-size: 12px; - line-height: 20px; - min-width: 20px; - pointer-events: none; - position: absolute; - right: -5px; - } +.toolbox-icon { + display: flex; + border-radius: 3px; + flex-direction: column; + font-size: 24px; + height: $newToolbarSize; + justify-content: center; + width: $newToolbarSize; + + @media (hover: hover) and (pointer: fine) { + &:hover { + background: $newToolbarButtonHoverColor; } + } + + &.toggled { + background: $newToolbarButtonToggleColor; + } + + &.disabled { + cursor: initial !important; + background-color: #36383c !important; - .toolbox-button-wth-dialog { - display: inline-block; + svg { + fill: #929292 !important; } + } +} - .toolbox-icon { - display: flex; - border-radius: 5px; - flex-direction: column; - font-size: 24px; - height: $newToolbarSize; - justify-content: center; - width: $newToolbarSize; - - @media (hover: hover) and (pointer: fine) { - &:hover { - background: $newToolbarButtonHoverColor; - } - } - - &.toggled { - background: $newToolbarButtonHoverColor; - } - - &.disabled { - cursor: initial !important; - background-color: #a4b8d1 !important; - - svg { - fill: #fff !important; - } - } +.hangup-button { + background-color: $hangupColor; + + @media (hover: hover) and (pointer: fine) { + &:hover { + background-color: $hangupHoverColor; } } + + svg { + fill: #fff; + } } /** @@ -312,3 +273,18 @@ @include transition(all .3s ease-out); } + +/** + * Audio and video buttons do not have toggled state. + */ +.audio-preview, +.video-preview { + .toolbox-icon.toggled { + background: none; + + &:hover { + background: $newToolbarButtonHoverColor; + } + } + +} diff --git a/css/_variables.scss b/css/_variables.scss index e0dee8af47..2c90899ad5 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -4,7 +4,8 @@ * Style variables */ $baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif; -$hangupColor: #bf2117; +$hangupColor:#DD3849; +$hangupHoverColor: #F25363; $hangupFontSize: 2em; /** @@ -38,19 +39,19 @@ $presence-idle: rgb(172, 172, 172); * Toolbar */ $newToolbarBackgroundColor: rgba(22, 38, 55, 0.8); -$newToolbarButtonHoverColor: rgba(255, 255, 255, 0.15); -$newToolbarButtonToggleColor: rgba(255, 255, 255, 0.2); +$newToolbarButtonHoverColor: rgba(255, 255, 255, 0.2); +$newToolbarButtonToggleColor: rgba(255, 255, 255, 0.15); $AOTToolbarButtonHoverColor: rgba(14, 20, 35, 0.6); $AOTToolbarButtonToggleColor: rgba(14, 20, 35, 1); +$menuBG:#242528; $newToolbarFontSize: 24px; $newToolbarHangupFontSize: 32px; -$newToolbarSize: 40px; +$newToolbarSize: 48px; $newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px); $toolbarTitleFontSize: 19px; -$overflowMenuBG: initial; -$overflowMenuItemHoverBG: #313D52; -$overflowMenuItemHoverColor: #B8C7E0; -$overflowMenuItemColor: #B8C7E0; +$overflowMenuItemColor: #fff; +$overflowMenuItemBackground: #36383C; + /** * Video layout @@ -122,8 +123,8 @@ $zindex10: 10; $reloadZ: 20; $poweredByZ: 100; $ringingZ: 300; -$sideToolbarContainerZ: 300; -$toolbarZ: 350; +$sideToolbarContainerZ: 200; +$toolbarZ: 250; $drawerZ: 351; $tooltipsZ: 401; $dropdownMaskZ: 900; diff --git a/css/_video-preview.scss b/css/_video-preview.scss index fb8c6edd50..12fa0c3716 100644 --- a/css/_video-preview.scss +++ b/css/_video-preview.scss @@ -1,18 +1,20 @@ .video-preview { background: none; - max-height: 290px; + display: inline-block; + max-height: 344px; &-container { + background: $menuBG; overflow: auto; - padding: 16px; + padding: 8px; } &-entry { cursor: pointer; - height: 135px; - margin-bottom: 16px; + height: 168px; + margin-bottom: 8px; position: relative; - width: 240px; + width: 284px; &:last-child { margin-bottom: 0; @@ -20,13 +22,15 @@ &--selected { border: 3px solid #31B76A; + border-radius: 3px; cursor: default; - height: 129px; - width: 234px; + height: 162px; + width: 278px; } } &-video { + border-radius: 3px; height: 100%; object-fit: cover; width: 100%; @@ -50,16 +54,23 @@ } &-label { + bottom: 8px; color: #fff; - font-size: 13px; - line-height: 20px; overflow: hidden; - padding: 8px; position: absolute; - text-align: center; text-overflow: ellipsis; - width: 220px; + white-space: nowrap; + width: 100%; z-index: 2; + + &-text { + background-color: #131519; + border-radius: 3px; + font-size: 13px; + line-height: 20px; + padding: 2px 8px; + + } } // Override @atlaskit/InlineDialog container which is made with styled components diff --git a/css/_welcome_page.scss b/css/_welcome_page.scss index 2ab4cec421..1c1c17b74c 100644 --- a/css/_welcome_page.scss +++ b/css/_welcome_page.scss @@ -208,6 +208,11 @@ body.welcome-page { cursor: pointer; font-size: 32px; } + + .toolbox-icon { + height: 24px; + width: 24px; + } } .welcome-watermark { diff --git a/lang/main.json b/lang/main.json index 4155121e67..da250cff43 100644 --- a/lang/main.json +++ b/lang/main.json @@ -751,6 +751,7 @@ "videoblur": "Toggle video blur" }, "addPeople": "Add people to your call", + "audioSettings": "Audio settings", "audioOnlyOff": "Disable low bandwidth mode", "audioOnlyOn": "Enable low bandwidth mode", "audioRoute": "Select the sound device", @@ -809,6 +810,7 @@ "tileViewToggle": "Toggle tile view", "toggleCamera": "Toggle camera", "videomute": "Start / Stop camera", + "videoSettings": "Video settings", "startvideoblur": "Blur my background", "stopvideoblur": "Disable background blur" }, diff --git a/package.json b/package.json index 08e347b7c0..7865139dcd 100644 --- a/package.json +++ b/package.json @@ -48,11 +48,11 @@ "i18next": "17.0.6", "i18next-browser-languagedetector": "3.0.1", "i18next-xhr-backend": "3.0.0", - "jQuery-Impromptu": "github:trentrichardson/jQuery-Impromptu#v6.0.0", "jitsi-meet-logger": "github:jitsi/jitsi-meet-logger#v1.0.0", "jquery": "3.5.1", "jquery-contextmenu": "2.4.5", "jquery-i18next": "1.2.1", + "jQuery-Impromptu": "github:trentrichardson/jQuery-Impromptu#v6.0.0", "js-md5": "0.6.1", "jwt-decode": "2.2.0", "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#e60f09b18955deae2dd631dc842d026289d4a74f", @@ -148,7 +148,10 @@ "scripts": { "lint": "eslint . && flow", "postinstall": "jetify", - "validate": "npm ls" + "validate": "npm ls", + "start": "make dev", + "ios": "react-native run-ios", + "android": "react-native run-android" }, "browser": { "jQuery-Impromptu": "jQuery-Impromptu/src/jquery-impromptu.js" diff --git a/react/features/always-on-top/Toolbar.js b/react/features/always-on-top/Toolbar.js index 00c891233c..408b226f39 100644 --- a/react/features/always-on-top/Toolbar.js +++ b/react/features/always-on-top/Toolbar.js @@ -52,7 +52,7 @@ export default class Toolbar extends Component { onMouseOut = { onMouseOut } onMouseOver = { onMouseOver }> - + ); diff --git a/react/features/base/icons/components/Icon.js b/react/features/base/icons/components/Icon.js index c7878ac578..dde0accb07 100644 --- a/react/features/base/icons/components/Icon.js +++ b/react/features/base/icons/components/Icon.js @@ -44,7 +44,7 @@ type Props = { }; export const DEFAULT_COLOR = navigator.product === 'ReactNative' ? 'white' : undefined; -export const DEFAULT_SIZE = navigator.product === 'ReactNative' ? 36 : 24; +export const DEFAULT_SIZE = navigator.product === 'ReactNative' ? 36 : 22; /** * Implements an Icon component that takes a loaded SVG file as prop and renders it as an icon. diff --git a/react/features/base/icons/svg/blur-background.svg b/react/features/base/icons/svg/blur-background.svg index 80302df908..83e9e24076 100755 --- a/react/features/base/icons/svg/blur-background.svg +++ b/react/features/base/icons/svg/blur-background.svg @@ -1,16 +1,3 @@ - - -blur-background - - - - - - - - - - - - + + diff --git a/react/features/base/icons/svg/camera-empty-disabled.svg b/react/features/base/icons/svg/camera-empty-disabled.svg new file mode 100644 index 0000000000..918f4b89c3 --- /dev/null +++ b/react/features/base/icons/svg/camera-empty-disabled.svg @@ -0,0 +1,3 @@ + + + diff --git a/react/features/base/icons/svg/camera-empty.svg b/react/features/base/icons/svg/camera-empty.svg new file mode 100644 index 0000000000..611693229a --- /dev/null +++ b/react/features/base/icons/svg/camera-empty.svg @@ -0,0 +1,3 @@ + + + diff --git a/react/features/base/icons/svg/camera-take-picture.svg b/react/features/base/icons/svg/camera-take-picture.svg index b5299b4bdf..b473bfd55a 100755 --- a/react/features/base/icons/svg/camera-take-picture.svg +++ b/react/features/base/icons/svg/camera-take-picture.svg @@ -1,6 +1,3 @@ - - -camera-take-picture - - + + diff --git a/react/features/base/icons/svg/chat.svg b/react/features/base/icons/svg/chat.svg index 5804886e8b..e425d4b1ab 100755 --- a/react/features/base/icons/svg/chat.svg +++ b/react/features/base/icons/svg/chat.svg @@ -1,5 +1,3 @@ - - -chat - + + diff --git a/react/features/base/icons/svg/closed_caption.svg b/react/features/base/icons/svg/closed_caption.svg index 14b66b1849..74394691de 100755 --- a/react/features/base/icons/svg/closed_caption.svg +++ b/react/features/base/icons/svg/closed_caption.svg @@ -1,5 +1,3 @@ - - -closed_caption - + + diff --git a/react/features/base/icons/svg/code-block.svg b/react/features/base/icons/svg/code-block.svg index 5c5783b2d5..0b83df0126 100644 --- a/react/features/base/icons/svg/code-block.svg +++ b/react/features/base/icons/svg/code-block.svg @@ -1,4 +1,4 @@ - - + + diff --git a/react/features/base/icons/svg/document.svg b/react/features/base/icons/svg/document.svg new file mode 100644 index 0000000000..112225dacd --- /dev/null +++ b/react/features/base/icons/svg/document.svg @@ -0,0 +1,3 @@ + + + diff --git a/react/features/base/icons/svg/download.svg b/react/features/base/icons/svg/download.svg index 85113d98fe..2b1762aba9 100755 --- a/react/features/base/icons/svg/download.svg +++ b/react/features/base/icons/svg/download.svg @@ -1,3 +1,3 @@ - + diff --git a/react/features/base/icons/svg/exit-full-screen.svg b/react/features/base/icons/svg/exit-full-screen.svg index feb7cc4edd..bb702c37cb 100755 --- a/react/features/base/icons/svg/exit-full-screen.svg +++ b/react/features/base/icons/svg/exit-full-screen.svg @@ -1,5 +1,6 @@ - - -exit-full-screen - + + + + + diff --git a/react/features/base/icons/svg/feedback.svg b/react/features/base/icons/svg/feedback.svg index 46b15d1ee0..4c27dbecb5 100755 --- a/react/features/base/icons/svg/feedback.svg +++ b/react/features/base/icons/svg/feedback.svg @@ -1,5 +1,3 @@ - - -feedback - + + diff --git a/react/features/base/icons/svg/full-screen.svg b/react/features/base/icons/svg/full-screen.svg index e98e8d906a..4508eec85e 100755 --- a/react/features/base/icons/svg/full-screen.svg +++ b/react/features/base/icons/svg/full-screen.svg @@ -1,5 +1,3 @@ - - -full-screen - + + diff --git a/react/features/base/icons/svg/help.svg b/react/features/base/icons/svg/help.svg index 6320581532..e378c6391d 100644 --- a/react/features/base/icons/svg/help.svg +++ b/react/features/base/icons/svg/help.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/react/features/base/icons/svg/horizontal-points.svg b/react/features/base/icons/svg/horizontal-points.svg new file mode 100644 index 0000000000..810474a973 --- /dev/null +++ b/react/features/base/icons/svg/horizontal-points.svg @@ -0,0 +1,3 @@ + + + diff --git a/react/features/base/icons/svg/index.js b/react/features/base/icons/svg/index.js index 2ca7ed3bb3..9160ce8b92 100644 --- a/react/features/base/icons/svg/index.js +++ b/react/features/base/icons/svg/index.js @@ -18,6 +18,8 @@ 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 IconCameraEmpty } from './camera-empty.svg'; +export { default as IconCameraEmptyDisabled } from './camera-empty-disabled.svg'; export { default as IconCancelSelection } from './cancel.svg'; export { default as IconChat } from './chat.svg'; export { default as IconChatSend } from './send.svg'; @@ -35,6 +37,7 @@ export { default as IconDeviceBluetooth } from './bluetooth.svg'; export { default as IconDeviceEarpiece } from './phone-talk.svg'; export { default as IconDeviceHeadphone } from './headset.svg'; export { default as IconDeviceSpeaker } from './volume.svg'; +export { default as IconDeviceDocument } from './document.svg'; export { default as IconDominantSpeaker } from './dominant-speaker.svg'; export { default as IconDownload } from './download.svg'; export { default as IconDragHandle } from './drag-handle.svg'; @@ -50,10 +53,11 @@ export { default as IconFullScreen } from './full-screen.svg'; export { default as IconGoogle } from './google.svg'; export { default as IconHangup } from './hangup.svg'; export { default as IconHelp } from './help.svg'; +export { default as IconHorizontalPoints } from './horizontal-points.svg'; export { default as IconInfo } from './info.svg'; export { default as IconInviteMore } from './user-plus.svg'; export { default as IconKick } from './kick.svg'; -export { default as IconLiveStreaming } from './public.svg'; +export { default as IconLiveStreaming } from './live-streaming.svg'; export { default as IconMeetingLocked } from './meeting-locked.svg'; export { default as IconMeetingUnlocked } from './meeting-unlocked.svg'; export { default as IconMenu } from './menu.svg'; @@ -65,6 +69,7 @@ export { default as IconMeter } from './meter.svg'; export { default as IconMicDisabled } from './mic-disabled.svg'; export { default as IconMicrophone } from './microphone.svg'; export { default as IconMicrophoneEmpty } from './microphone-empty.svg'; +export { default as IconMicrophoneEmptySlash } from './microphone-empty-slash.svg'; export { default as IconModerator } from './star.svg'; export { default as IconMuteEveryone } from './mute-everyone.svg'; export { default as IconMuteEveryoneElse } from './mute-everyone-else.svg'; diff --git a/react/features/base/icons/svg/live-streaming.svg b/react/features/base/icons/svg/live-streaming.svg new file mode 100644 index 0000000000..d5a6ae7ef9 --- /dev/null +++ b/react/features/base/icons/svg/live-streaming.svg @@ -0,0 +1,3 @@ + + + diff --git a/react/features/base/icons/svg/microphone-empty-slash.svg b/react/features/base/icons/svg/microphone-empty-slash.svg new file mode 100644 index 0000000000..95f4b7afad --- /dev/null +++ b/react/features/base/icons/svg/microphone-empty-slash.svg @@ -0,0 +1,3 @@ + + + diff --git a/react/features/base/icons/svg/microphone-empty.svg b/react/features/base/icons/svg/microphone-empty.svg index 8bacff789c..a1eb3e480a 100644 --- a/react/features/base/icons/svg/microphone-empty.svg +++ b/react/features/base/icons/svg/microphone-empty.svg @@ -1,3 +1,3 @@ - - + + diff --git a/react/features/base/icons/svg/mute-everyone.svg b/react/features/base/icons/svg/mute-everyone.svg index e5458c8d3a..a5dcfa22d6 100644 --- a/react/features/base/icons/svg/mute-everyone.svg +++ b/react/features/base/icons/svg/mute-everyone.svg @@ -1,11 +1,4 @@ - - - - - - - - - - + + + diff --git a/react/features/base/icons/svg/presentation.svg b/react/features/base/icons/svg/presentation.svg index 7434101602..cf536d68eb 100755 --- a/react/features/base/icons/svg/presentation.svg +++ b/react/features/base/icons/svg/presentation.svg @@ -1,8 +1,3 @@ - - -presentation - - - - + + diff --git a/react/features/base/icons/svg/raised-hand.svg b/react/features/base/icons/svg/raised-hand.svg index 86f003db8a..0409bdec45 100755 --- a/react/features/base/icons/svg/raised-hand.svg +++ b/react/features/base/icons/svg/raised-hand.svg @@ -1,5 +1,3 @@ - - -raised-hand - + + diff --git a/react/features/base/icons/svg/settings.svg b/react/features/base/icons/svg/settings.svg index 301b6f1ebe..1474ef7349 100755 --- a/react/features/base/icons/svg/settings.svg +++ b/react/features/base/icons/svg/settings.svg @@ -1,5 +1,3 @@ - - -settings - + + diff --git a/react/features/base/icons/svg/share-desktop.svg b/react/features/base/icons/svg/share-desktop.svg index a495afc0c6..3450c0b19c 100755 --- a/react/features/base/icons/svg/share-desktop.svg +++ b/react/features/base/icons/svg/share-desktop.svg @@ -1,5 +1,3 @@ - - -share-desktop - + + diff --git a/react/features/base/icons/svg/tiles-many.svg b/react/features/base/icons/svg/tiles-many.svg index 8af02a24a6..ce8844ac17 100755 --- a/react/features/base/icons/svg/tiles-many.svg +++ b/react/features/base/icons/svg/tiles-many.svg @@ -1,5 +1,3 @@ - - -tiles-many - + + diff --git a/react/features/base/icons/svg/volume-empty.svg b/react/features/base/icons/svg/volume-empty.svg index 858aa7869e..b98c4332d7 100644 --- a/react/features/base/icons/svg/volume-empty.svg +++ b/react/features/base/icons/svg/volume-empty.svg @@ -1,3 +1,3 @@ - + diff --git a/react/features/base/premeeting/components/web/PreMeetingScreen.js b/react/features/base/premeeting/components/web/PreMeetingScreen.js index 9b79bbafcc..9823267723 100644 --- a/react/features/base/premeeting/components/web/PreMeetingScreen.js +++ b/react/features/base/premeeting/components/web/PreMeetingScreen.js @@ -110,8 +110,12 @@ export default class PreMeetingScreen extends PureComponent { )} { this.props.children }
- - +
+
+ + +
+
{ this.props.skipPrejoinButton } { this.props.footer } diff --git a/react/features/base/toolbox/components/AbstractAudioMuteButton.js b/react/features/base/toolbox/components/AbstractAudioMuteButton.js index 7c780cc077..4e0222ffd2 100644 --- a/react/features/base/toolbox/components/AbstractAudioMuteButton.js +++ b/react/features/base/toolbox/components/AbstractAudioMuteButton.js @@ -1,6 +1,6 @@ // @flow -import { IconMicDisabled, IconMicrophone } from '../../icons'; +import { IconMicrophoneEmpty, IconMicrophoneEmptySlash } from '../../icons'; import AbstractButton from './AbstractButton'; import type { Props } from './AbstractButton'; @@ -11,8 +11,8 @@ import type { Props } from './AbstractButton'; export default class AbstractAudioMuteButton extends AbstractButton { - icon = IconMicrophone; - toggledIcon = IconMicDisabled; + icon = IconMicrophoneEmpty; + toggledIcon = IconMicrophoneEmptySlash; /** * Handles clicking / pressing the button, and toggles the audio mute state diff --git a/react/features/base/toolbox/components/AbstractVideoMuteButton.js b/react/features/base/toolbox/components/AbstractVideoMuteButton.js index 15049ce80f..400de5b9f1 100644 --- a/react/features/base/toolbox/components/AbstractVideoMuteButton.js +++ b/react/features/base/toolbox/components/AbstractVideoMuteButton.js @@ -1,6 +1,6 @@ // @flow -import { IconCamera, IconCameraDisabled } from '../../icons'; +import { IconCameraEmpty, IconCameraEmptyDisabled } from '../../icons'; import AbstractButton from './AbstractButton'; import type { Props } from './AbstractButton'; @@ -11,8 +11,8 @@ import type { Props } from './AbstractButton'; export default class AbstractVideoMuteButton

extends AbstractButton { - icon = IconCamera; - toggledIcon = IconCameraDisabled; + icon = IconCameraEmpty; + toggledIcon = IconCameraEmptyDisabled; /** * Handles clicking / pressing the button, and toggles the video mute state diff --git a/react/features/base/toolbox/components/ToolboxButtonWithIcon.js b/react/features/base/toolbox/components/ToolboxButtonWithIcon.js index b16d2f1e1e..4c9e942723 100644 --- a/react/features/base/toolbox/components/ToolboxButtonWithIcon.js +++ b/react/features/base/toolbox/components/ToolboxButtonWithIcon.js @@ -3,6 +3,7 @@ import React, { Component } from 'react'; import { Icon } from '../../icons'; +import { Tooltip } from '../../tooltip'; type Props = { @@ -26,6 +27,11 @@ type Props = { */ onIconClick: Function, + /** + * The tooltip used for the icon. + */ + iconTooltip: string, + /** * Additional styles. */ @@ -99,6 +105,7 @@ export default class ToolboxButtonWithIcon extends Component { children, icon, iconDisabled, + iconTooltip, onIconClick, styles } = this.props; @@ -124,13 +131,18 @@ export default class ToolboxButtonWithIcon extends Component { className = 'settings-button-container' styles = { styles }> {children} +

- + + +
); diff --git a/react/features/blur/components/VideoBlurButton.js b/react/features/blur/components/VideoBlurButton.js index c2793506d0..acb223df6d 100644 --- a/react/features/blur/components/VideoBlurButton.js +++ b/react/features/blur/components/VideoBlurButton.js @@ -38,7 +38,6 @@ class VideoBlurButton extends AbstractButton { accessibilityLabel = 'toolbar.accessibilityLabel.videoblur'; icon = IconBlurBackground; label = 'toolbar.startvideoblur'; - tooltip = 'toolbar.startvideoblur'; toggledLabel = 'toolbar.stopvideoblur'; /** diff --git a/react/features/security/components/security-dialog/SecurityDialogButton.js b/react/features/security/components/security-dialog/SecurityDialogButton.js index 247cff1d09..251ed21e43 100644 --- a/react/features/security/components/security-dialog/SecurityDialogButton.js +++ b/react/features/security/components/security-dialog/SecurityDialogButton.js @@ -31,7 +31,6 @@ class SecurityDialogButton extends AbstractButton { icon = IconSecurityOff; label = 'toolbar.security'; toggledIcon = IconSecurityOn; - tooltip = 'toolbar.security'; /** * Handles clicking / pressing the button, and opens / closes the appropriate dialog. diff --git a/react/features/settings/components/web/SettingsButton.js b/react/features/settings/components/web/SettingsButton.js index 52ddf7fb54..4baca47b0b 100644 --- a/react/features/settings/components/web/SettingsButton.js +++ b/react/features/settings/components/web/SettingsButton.js @@ -31,7 +31,6 @@ class SettingsButton extends AbstractButton { accessibilityLabel = 'toolbar.accessibilityLabel.Settings'; icon = IconSettings; label = 'toolbar.Settings'; - tooltip = 'toolbar.Settings'; /** * Handles clicking / pressing the button, and opens the appropriate dialog. diff --git a/react/features/settings/components/web/audio/AudioSettingsContent.js b/react/features/settings/components/web/audio/AudioSettingsContent.js index ee7da52f06..a9e226a958 100644 --- a/react/features/settings/components/web/audio/AudioSettingsContent.js +++ b/react/features/settings/components/web/audio/AudioSettingsContent.js @@ -254,9 +254,13 @@ class AudioSettingsContent extends Component { this._renderMicrophoneEntry(data, i), )} { outputDevices.length > 0 && ( - ) + <> +
+ + + ) } {outputDevices.map((data, i) => this._renderSpeakerEntry(data, i), diff --git a/react/features/settings/components/web/audio/AudioSettingsHeader.js b/react/features/settings/components/web/audio/AudioSettingsHeader.js index 27abf4f7aa..d649dd9aed 100644 --- a/react/features/settings/components/web/audio/AudioSettingsHeader.js +++ b/react/features/settings/components/web/audio/AudioSettingsHeader.js @@ -30,7 +30,7 @@ export default function AudioSettingsHeader({ IconComponent, text }: Props) {
{ }
{text}
diff --git a/react/features/settings/components/web/video/VideoSettingsContent.js b/react/features/settings/components/web/video/VideoSettingsContent.js index cfd64cfc0f..4d4efec965 100644 --- a/react/features/settings/components/web/video/VideoSettingsContent.js +++ b/react/features/settings/components/web/video/VideoSettingsContent.js @@ -161,7 +161,9 @@ class VideoSettingsContent extends Component { return (
-
{label}
+
+ {label && {label}} +