feat(Toolbar): Redesign web toolbar

css/_atlaskit_overrides.scss

@@ -114,3 +114,10 @@
         }
     }
 }
+
+div.Tooltip {
+    color: #fff;
+    font-size: 12px;
+    line-height: 14px;
+    padding: 8px;
+}

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

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;

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;
-            }
-        }
     }
 }
 

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;

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;
+           }
         }
     }
 }

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;
+        }
+    }
+
+}

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;

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

css/_welcome_page.scss

@@ -208,6 +208,11 @@ body.welcome-page {
             cursor: pointer;
             font-size: 32px;
         }
+
+        .toolbox-icon {
+            height: 24px;
+            width: 24px;
+        }
     }
 
     .welcome-watermark {

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"
     },

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"

react/features/always-on-top/Toolbar.js

@@ -52,7 +52,7 @@ export default class Toolbar extends Component<Props> {
                 onMouseOut = { onMouseOut }
                 onMouseOver = { onMouseOver }>
                 <AudioMuteButton />
-                <HangupButton />
+                <HangupButton customClass = 'hangup-button' />
                 <VideoMuteButton />
             </div>
         );

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.

react/features/base/icons/svg/blur-background.svg

@@ -1,16 +1,3 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>blur-background</title>
-<path fill="#a4b8d1" d="M14.667 12c0 1.473-1.194 2.667-2.667 2.667s-2.667-1.194-2.667-2.667c0-1.473 1.194-2.667 2.667-2.667s2.667 1.194 2.667 2.667z"></path>
-<path fill="#a4b8d1" d="M22.667 12c0 1.473-1.194 2.667-2.667 2.667s-2.667-1.194-2.667-2.667c0-1.473 1.194-2.667 2.667-2.667s2.667 1.194 2.667 2.667z"></path>
-<path fill="#a4b8d1" d="M14.667 20c0 1.473-1.194 2.667-2.667 2.667s-2.667-1.194-2.667-2.667c0-1.473 1.194-2.667 2.667-2.667s2.667 1.194 2.667 2.667z"></path>
-<path fill="#a4b8d1" d="M13.333 26.667c0 0.736-0.597 1.333-1.333 1.333s-1.333-0.597-1.333-1.333c0-0.736 0.597-1.333 1.333-1.333s1.333 0.597 1.333 1.333z"></path>
-<path fill="#a4b8d1" d="M21.333 26.667c0 0.736-0.597 1.333-1.333 1.333s-1.333-0.597-1.333-1.333c0-0.736 0.597-1.333 1.333-1.333s1.333 0.597 1.333 1.333z"></path>
-<path fill="#a4b8d1" d="M6.667 20c0 0.736-0.597 1.333-1.333 1.333s-1.333-0.597-1.333-1.333c0-0.736 0.597-1.333 1.333-1.333s1.333 0.597 1.333 1.333z"></path>
-<path fill="#a4b8d1" d="M6.667 12c0 0.736-0.597 1.333-1.333 1.333s-1.333-0.597-1.333-1.333c0-0.736 0.597-1.333 1.333-1.333s1.333 0.597 1.333 1.333z"></path>
-<path fill="#a4b8d1" d="M28 20c0 0.736-0.597 1.333-1.333 1.333s-1.333-0.597-1.333-1.333c0-0.736 0.597-1.333 1.333-1.333s1.333 0.597 1.333 1.333z"></path>
-<path fill="#a4b8d1" d="M28 12c0 0.736-0.597 1.333-1.333 1.333s-1.333-0.597-1.333-1.333c0-0.736 0.597-1.333 1.333-1.333s1.333 0.597 1.333 1.333z"></path>
-<path fill="#a4b8d1" d="M13.333 5.333c0 0.736-0.597 1.333-1.333 1.333s-1.333-0.597-1.333-1.333c0-0.736 0.597-1.333 1.333-1.333s1.333 0.597 1.333 1.333z"></path>
-<path fill="#a4b8d1" d="M21.333 5.333c0 0.736-0.597 1.333-1.333 1.333s-1.333-0.597-1.333-1.333c0-0.736 0.597-1.333 1.333-1.333s1.333 0.597 1.333 1.333z"></path>
-<path fill="#a4b8d1" d="M22.667 20c0 1.473-1.194 2.667-2.667 2.667s-2.667-1.194-2.667-2.667c0-1.473 1.194-2.667 2.667-2.667s2.667 1.194 2.667 2.667z"></path>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 4.58333C8.75626 4.58333 9.16667 4.17293 9.16667 3.66667C9.16667 3.16041 8.75626 2.75 8.25 2.75C7.74374 2.75 7.33333 3.16041 7.33333 3.66667C7.33333 4.17293 7.74374 4.58333 8.25 4.58333ZM8.25 10.0833C9.26252 10.0833 10.0833 9.26252 10.0833 8.25C10.0833 7.23748 9.26252 6.41667 8.25 6.41667C7.23748 6.41667 6.41667 7.23748 6.41667 8.25C6.41667 9.26252 7.23748 10.0833 8.25 10.0833ZM13.75 10.0833C14.7625 10.0833 15.5833 9.26252 15.5833 8.25C15.5833 7.23748 14.7625 6.41667 13.75 6.41667C12.7375 6.41667 11.9167 7.23748 11.9167 8.25C11.9167 9.26252 12.7375 10.0833 13.75 10.0833ZM10.0833 13.75C10.0833 14.7625 9.26252 15.5833 8.25 15.5833C7.23748 15.5833 6.41667 14.7625 6.41667 13.75C6.41667 12.7375 7.23748 11.9167 8.25 11.9167C9.26252 11.9167 10.0833 12.7375 10.0833 13.75ZM8.25 19.25C8.75626 19.25 9.16667 18.8396 9.16667 18.3333C9.16667 17.8271 8.75626 17.4167 8.25 17.4167C7.74374 17.4167 7.33333 17.8271 7.33333 18.3333C7.33333 18.8396 7.74374 19.25 8.25 19.25ZM14.6667 18.3333C14.6667 18.8396 14.2563 19.25 13.75 19.25C13.2437 19.25 12.8333 18.8396 12.8333 18.3333C12.8333 17.8271 13.2437 17.4167 13.75 17.4167C14.2563 17.4167 14.6667 17.8271 14.6667 18.3333ZM3.66667 14.6667C4.17293 14.6667 4.58333 14.2563 4.58333 13.75C4.58333 13.2437 4.17293 12.8333 3.66667 12.8333C3.16041 12.8333 2.75 13.2437 2.75 13.75C2.75 14.2563 3.16041 14.6667 3.66667 14.6667ZM4.58333 8.25C4.58333 8.75626 4.17293 9.16667 3.66667 9.16667C3.16041 9.16667 2.75 8.75626 2.75 8.25C2.75 7.74374 3.16041 7.33333 3.66667 7.33333C4.17293 7.33333 4.58333 7.74374 4.58333 8.25ZM18.3333 14.6667C18.8396 14.6667 19.25 14.2563 19.25 13.75C19.25 13.2437 18.8396 12.8333 18.3333 12.8333C17.8271 12.8333 17.4167 13.2437 17.4167 13.75C17.4167 14.2563 17.8271 14.6667 18.3333 14.6667ZM19.25 8.25C19.25 8.75626 18.8396 9.16667 18.3333 9.16667C17.8271 9.16667 17.4167 8.75626 17.4167 8.25C17.4167 7.74374 17.8271 7.33333 18.3333 7.33333C18.8396 7.33333 19.25 7.74374 19.25 8.25ZM14.6667 3.66667C14.6667 4.17293 14.2563 4.58333 13.75 4.58333C13.2437 4.58333 12.8333 4.17293 12.8333 3.66667C12.8333 3.16041 13.2437 2.75 13.75 2.75C14.2563 2.75 14.6667 3.16041 14.6667 3.66667ZM13.75 15.5833C14.7625 15.5833 15.5833 14.7625 15.5833 13.75C15.5833 12.7375 14.7625 11.9167 13.75 11.9167C12.7375 11.9167 11.9167 12.7375 11.9167 13.75C11.9167 14.7625 12.7375 15.5833 13.75 15.5833Z" fill="white"/>
 </svg>

react/features/base/icons/svg/camera-empty-disabled.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.84074 5.49992H6.81762L3.42398 2.10629C3.06002 1.74232 2.47001 1.74223 2.10617 2.10608C1.74232 2.46992 1.74241 3.05993 2.10638 3.42389L4.1824 5.49992H3.66668C2.65415 5.49992 1.83334 6.32073 1.83334 7.33325V14.6666C1.83334 15.6791 2.65415 16.4999 3.66668 16.4999H13.75C14.154 16.4999 14.5274 16.3693 14.8304 16.1479L18.576 19.8936C18.94 20.2575 19.53 20.2576 19.8939 19.8938C20.2577 19.5299 20.2576 18.9399 19.8936 18.5759L15.5833 14.2656V14.2425L13.75 12.4092V12.4323L8.65095 7.33325H8.67407L6.84074 5.49992ZM13.75 9.77398V9.16659V7.33325H11.3093L9.47595 5.49992H13.75C14.7625 5.49992 15.5833 6.32073 15.5833 7.33325V8.11897L18.7952 6.28361C19.2348 6.03243 19.7947 6.18515 20.0459 6.62471C20.125 6.76321 20.1667 6.91998 20.1667 7.0795V14.9203C20.1667 15.2643 19.9772 15.5641 19.6969 15.7209L15.9614 11.9853L18.3333 13.3408V8.65908L15.5833 10.2305V11.6073L13.75 9.77398ZM3.66668 7.33325H6.01574L13.3491 14.6666H3.66668V7.33325Z" />
+</svg>

react/features/base/icons/svg/camera-empty.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.75 5.5H3.66668C2.65415 5.5 1.83334 6.32081 1.83334 7.33333V14.6667C1.83334 15.6792 2.65415 16.5 3.66668 16.5H13.75C14.7625 16.5 15.5833 15.6792 15.5833 14.6667V13.881L18.7952 15.7163C18.9337 15.7955 19.0905 15.8371 19.25 15.8371C19.7563 15.8371 20.1667 15.4267 20.1667 14.9204V7.07958C20.1667 6.92006 20.125 6.76329 20.0459 6.62479C19.7947 6.18523 19.2348 6.03252 18.7952 6.28369L15.5833 8.11905V7.33333C15.5833 6.32081 14.7625 5.5 13.75 5.5ZM13.75 9.16667V12.8333V14.6667H3.66668V7.33333H13.75V9.16667ZM18.3333 13.3408L15.5833 11.7694V10.2306L18.3333 8.65916V13.3408Z" />
+</svg>

react/features/base/icons/svg/camera-take-picture.svg

@@ -1,6 +1,3 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>camera-take-picture</title>
-<path d="M22.667 16c0 3.682-2.985 6.667-6.667 6.667s-6.667-2.985-6.667-6.667c0-3.682 2.985-6.667 6.667-6.667s6.667 2.985 6.667 6.667z"></path>
-<path d="M16 24c4.418 0 8-3.582 8-8s-3.582-8-8-8v0c-4.418 0-8 3.582-8 8s3.582 8 8 8v0zM16 25.333c-5.155 0-9.333-4.179-9.333-9.333s4.179-9.333 9.333-9.333v0c5.155 0 9.333 4.179 9.333 9.333s-4.179 9.333-9.333 9.333v0z"></path>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 20.1666C5.93743 20.1666 1.83337 16.0626 1.83337 11C1.83337 5.93737 5.93743 1.83331 11 1.83331C16.0627 1.83331 20.1667 5.93737 20.1667 11C20.1667 16.0626 16.0627 20.1666 11 20.1666ZM11 18.3333C15.0501 18.3333 18.3334 15.0501 18.3334 11C18.3334 6.94989 15.0501 3.66665 11 3.66665C6.94995 3.66665 3.66671 6.94989 3.66671 11C3.66671 15.0501 6.94995 18.3333 11 18.3333ZM15.5834 11C15.5834 13.5313 13.5313 15.5833 11 15.5833C8.46874 15.5833 6.41671 13.5313 6.41671 11C6.41671 8.46867 8.46874 6.41665 11 6.41665C13.5313 6.41665 15.5834 8.46867 15.5834 11Z" fill="white"/>
 </svg>

react/features/base/icons/svg/chat.svg

@@ -1,5 +1,3 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>chat</title>
-<path d="M26.688 21.313v-16h-21.375v18.688l2.688-2.688h18.688zM26.688 2.688c1.438 0 2.625 1.188 2.625 2.625v16c0 1.438-1.188 2.688-2.625 2.688h-18.688l-5.313 5.313v-24c0-1.438 1.188-2.625 2.625-2.625h21.375z"></path>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5834 20.1959C16.0896 20.1959 16.5 19.7854 16.5 19.2792V14.6666H19.25C19.7563 14.6666 20.1667 14.2562 20.1667 13.75V2.74998C20.1667 2.24372 19.7563 1.83331 19.25 1.83331H2.75004C2.24378 1.83331 1.83337 2.24372 1.83337 2.74998V13.75C1.83337 14.2562 2.24378 14.6666 2.75004 14.6666H10.5927L14.8761 19.8623C15.0502 20.0735 15.3096 20.1959 15.5834 20.1959ZM3.66671 3.66665H18.3334V12.8333H14.6667V16.7262L11.4573 12.8333H3.66671V3.66665Z" fill="white"/>
 </svg>

react/features/base/icons/svg/closed_caption.svg

@@ -1,5 +1,3 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-<title>closed_caption</title>
-<path d="M18 11.016v-1.031c0-0.563-0.422-0.984-0.984-0.984h-3c-0.563 0-1.031 0.422-1.031 0.984v4.031c0 0.563 0.469 0.984 1.031 0.984h3c0.563 0 0.984-0.422 0.984-0.984v-1.031h-1.5v0.516h-2.016v-3h2.016v0.516h1.5zM11.016 11.016v-1.031c0-0.563-0.469-0.984-1.031-0.984h-3c-0.563 0-0.984 0.422-0.984 0.984v4.031c0 0.563 0.422 0.984 0.984 0.984h3c0.563 0 1.031-0.422 1.031-0.984v-1.031h-1.5v0.516h-2.016v-3h2.016v0.516h1.5zM18.984 3.984c1.078 0 2.016 0.938 2.016 2.016v12c0 1.078-0.938 2.016-2.016 2.016h-13.969c-1.125 0-2.016-0.938-2.016-2.016v-12c0-1.078 0.891-2.016 2.016-2.016h13.969z"></path>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.66671 3.66665H18.3334V18.3333H3.66671V3.66665ZM1.83337 3.66665C1.83337 2.65412 2.65419 1.83331 3.66671 1.83331H18.3334C19.3459 1.83331 20.1667 2.65412 20.1667 3.66665V18.3333C20.1667 19.3458 19.3459 20.1666 18.3334 20.1666H3.66671C2.65419 20.1666 1.83337 19.3458 1.83337 18.3333V3.66665ZM6.87046 13.9461C7.31535 14.1924 7.82776 14.3156 8.40771 14.3156C8.74932 14.3156 9.08298 14.2719 9.40871 14.1845C9.73443 14.0891 10.0204 13.962 10.2667 13.8031C10.4018 13.7237 10.4971 13.6363 10.5527 13.541C10.6163 13.4377 10.648 13.3185 10.648 13.1835C10.648 13.0166 10.6043 12.8776 10.517 12.7664C10.4296 12.6552 10.3223 12.5996 10.1952 12.5996C10.1078 12.5996 10.0204 12.6194 9.93304 12.6591C9.84565 12.6909 9.74237 12.7426 9.62321 12.8141C9.43254 12.9173 9.25776 13.0008 9.09887 13.0643C8.94793 13.1199 8.77315 13.1477 8.57454 13.1477C8.08198 13.1477 7.70065 12.9888 7.43054 12.6711C7.16837 12.3453 7.03729 11.8846 7.03729 11.2887C7.03729 10.685 7.16837 10.2242 7.43054 9.9064C7.70065 9.58067 8.08198 9.41781 8.57454 9.41781C8.7811 9.41781 8.96382 9.44959 9.12271 9.51315C9.2816 9.56876 9.44843 9.6482 9.62321 9.75148C9.71854 9.80709 9.81387 9.85476 9.90921 9.89448C10.0045 9.9342 10.0959 9.95406 10.1833 9.95406C10.3183 9.95406 10.4256 9.90242 10.505 9.79915C10.5924 9.68792 10.6361 9.54492 10.6361 9.37015C10.6361 9.11592 10.509 8.9054 10.2548 8.73856C10.0165 8.58762 9.7384 8.46845 9.42062 8.38106C9.11079 8.29367 8.80096 8.24998 8.49112 8.24998C7.90323 8.24998 7.38287 8.37709 6.93004 8.63131C6.47721 8.88554 6.12368 9.24701 5.86946 9.71573C5.62318 10.1765 5.50004 10.7088 5.50004 11.3126C5.50004 11.9163 5.61921 12.4446 5.85754 12.8975C6.09587 13.3503 6.43351 13.6999 6.87046 13.9461ZM12.6891 13.9461C13.134 14.1924 13.6464 14.3156 14.2264 14.3156C14.568 14.3156 14.9017 14.2719 15.2274 14.1845C15.5531 14.0891 15.8391 13.962 16.0854 13.8031C16.2204 13.7237 16.3158 13.6363 16.3714 13.541C16.4349 13.4377 16.4667 13.3185 16.4667 13.1835C16.4667 13.0166 16.423 12.8776 16.3356 12.7664C16.2483 12.6552 16.141 12.5996 16.0139 12.5996C15.9265 12.5996 15.8391 12.6194 15.7517 12.6591C15.6643 12.6909 15.5611 12.7426 15.4419 12.8141C15.2512 12.9173 15.0764 13.0008 14.9176 13.0643C14.7666 13.1199 14.5918 13.1477 14.3932 13.1477C13.9007 13.1477 13.5193 12.9888 13.2492 12.6711C12.9871 12.3453 12.856 11.8846 12.856 11.2887C12.856 10.685 12.9871 10.2242 13.2492 9.9064C13.5193 9.58067 13.9007 9.41781 14.3932 9.41781C14.5998 9.41781 14.7825 9.44959 14.9414 9.51315C15.1003 9.56876 15.2671 9.6482 15.4419 9.75148C15.5372 9.80709 15.6326 9.85476 15.7279 9.89448C15.8232 9.9342 15.9146 9.95406 16.002 9.95406C16.137 9.95406 16.2443 9.90242 16.3237 9.79915C16.4111 9.68792 16.4548 9.54492 16.4548 9.37015C16.4548 9.11592 16.3277 8.9054 16.0735 8.73856C15.8351 8.58762 15.5571 8.46845 15.2393 8.38106C14.9295 8.29367 14.6196 8.24998 14.3098 8.24998C13.7219 8.24998 13.2016 8.37709 12.7487 8.63131C12.2959 8.88554 11.9424 9.24701 11.6881 9.71573C11.4419 10.1765 11.3187 10.7088 11.3187 11.3126C11.3187 11.9163 11.4379 12.4446 11.6762 12.8975C11.9146 13.3503 12.2522 13.6999 12.6891 13.9461Z" fill="white"/>
 </svg>

react/features/base/icons/svg/code-block.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8716 7.70278C15.4611 7.33332 15.4278 6.70103 15.7972 6.29052C16.1667 5.88001 16.799 5.84673 17.2095 6.21619L22.4652 10.9212C22.9066 11.3184 22.9066 12.0105 22.4652 12.4077L17.2095 17.0394C16.799 17.4089 16.1667 17.3756 15.7972 16.9651C15.4278 16.5546 15.4611 15.9223 15.8716 15.5528L20.3014 11.6645L15.8716 7.70278Z" fill="#A4B8D1"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.4651 15.5531C8.87561 15.9225 8.90889 16.5548 8.53943 16.9653C8.16997 17.3759 7.53768 17.4091 7.12717 17.0397L1.87145 12.3347C1.43007 11.9375 1.43007 11.2454 1.87145 10.8481L7.12717 6.21644C7.53768 5.84698 8.16997 5.88026 8.53943 6.29077C8.90889 6.70128 8.87561 7.33357 8.4651 7.70302L4.03526 11.5914L8.4651 15.5531Z" fill="#A4B8D1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8716 7.70278C15.4611 7.33332 15.4278 6.70103 15.7972 6.29052C16.1667 5.88001 16.799 5.84673 17.2095 6.21619L22.4652 10.9212C22.9066 11.3184 22.9066 12.0105 22.4652 12.4077L17.2095 17.0394C16.799 17.4089 16.1667 17.3756 15.7972 16.9651C15.4278 16.5546 15.4611 15.9223 15.8716 15.5528L20.3014 11.6645L15.8716 7.70278Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.4651 15.5531C8.87561 15.9225 8.90889 16.5548 8.53943 16.9653C8.16997 17.3759 7.53768 17.4091 7.12717 17.0397L1.87145 12.3347C1.43007 11.9375 1.43007 11.2454 1.87145 10.8481L7.12717 6.21644C7.53768 5.84698 8.16997 5.88026 8.53943 6.29077C8.90889 6.70128 8.87561 7.33357 8.4651 7.70302L4.03526 11.5914L8.4651 15.5531Z" />
 </svg>

react/features/base/icons/svg/document.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.75 1.83331H14.2869C14.53 1.83331 14.7632 1.92989 14.9351 2.1018L18.0648 5.23149C18.2367 5.4034 18.3333 5.63656 18.3333 5.87968V19.25C18.3333 19.7562 17.9229 20.1666 17.4166 20.1666H4.58329C4.07703 20.1666 3.66663 19.7562 3.66663 19.25V2.74998C3.66663 2.24372 4.07703 1.83331 4.58329 1.83331H11.9166H13.75ZM11.9166 3.66665V6.41665C11.9166 7.42917 12.7374 8.24998 13.75 8.24998H16.5V18.3333H5.49996V3.66665H11.9166ZM16.5 6.41665H13.75V3.66665H13.9072L16.5 6.25937V6.41665ZM8.24996 14.6666C7.7437 14.6666 7.33329 15.0771 7.33329 15.5833C7.33329 16.0896 7.7437 16.5 8.24996 16.5H13.75C14.2562 16.5 14.6666 16.0896 14.6666 15.5833C14.6666 15.0771 14.2562 14.6666 13.75 14.6666H8.24996ZM7.33329 12.8333C7.33329 12.3271 7.7437 11.9166 8.24996 11.9166H13.75C14.2562 11.9166 14.6666 12.3271 14.6666 12.8333C14.6666 13.3396 14.2562 13.75 13.75 13.75H8.24996C7.7437 13.75 7.33329 13.3396 7.33329 12.8333ZM8.24996 9.16665C7.7437 9.16665 7.33329 9.57705 7.33329 10.0833C7.33329 10.5896 7.7437 11 8.24996 11H13.75C14.2562 11 14.6666 10.5896 14.6666 10.0833C14.6666 9.57705 14.2562 9.16665 13.75 9.16665H8.24996Z" fill="white"/>
+</svg>

react/features/base/icons/svg/download.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 13.3705V5C11 4.44772 11.4477 4 12 4C12.5523 4 13 4.44772 13 5V13.4667L15.631 10.5433C16.0005 10.1328 16.6328 10.0995 17.0433 10.469C17.4538 10.8384 17.4871 11.4707 17.1176 11.8812L12.1064 17.4492C12.0727 17.4867 12.0139 17.4867 11.9802 17.4492L6.96897 11.8812C6.59951 11.4707 6.63278 10.8384 7.04329 10.469C7.4538 10.0995 8.08609 10.1328 8.45555 10.5433L11 13.3705ZM20 15C20 14.4477 20.4477 14 21 14C21.5523 14 22 14.4477 22 15V21C22 21.5523 21.5523 22 21 22H3C2.96548 22 2.93137 21.9983 2.89776 21.9948C2.3935 21.9436 2 21.5178 2 21V15C2 14.4477 2.44772 14 3 14C3.55228 14 4 14.4477 4 15V20H20V15Z" fill="#A4B8D1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 13.3705V5C11 4.44772 11.4477 4 12 4C12.5523 4 13 4.44772 13 5V13.4667L15.631 10.5433C16.0005 10.1328 16.6328 10.0995 17.0433 10.469C17.4538 10.8384 17.4871 11.4707 17.1176 11.8812L12.1064 17.4492C12.0727 17.4867 12.0139 17.4867 11.9802 17.4492L6.96897 11.8812C6.59951 11.4707 6.63278 10.8384 7.04329 10.469C7.4538 10.0995 8.08609 10.1328 8.45555 10.5433L11 13.3705ZM20 15C20 14.4477 20.4477 14 21 14C21.5523 14 22 14.4477 22 15V21C22 21.5523 21.5523 22 21 22H3C2.96548 22 2.93137 21.9983 2.89776 21.9948C2.3935 21.9436 2 21.5178 2 21V15C2 14.4477 2.44772 14 3 14C3.55228 14 4 14.4477 4 15V20H20V15Z" />
 </svg>

react/features/base/icons/svg/exit-full-screen.svg

@@ -1,5 +1,6 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>exit-full-screen</title>
-<path d="M21.313 10.688h4v2.625h-6.625v-6.625h2.625v4zM18.688 25.313v-6.625h6.625v2.625h-4v4h-2.625zM10.688 10.688v-4h2.625v6.625h-6.625v-2.625h4zM6.688 21.313v-2.625h6.625v6.625h-2.625v-4h-4z"></path>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4166 8.24998L17.4166 10.0833L12.8333 10.0833C12.327 10.0833 11.9166 9.67291 11.9166 9.16665L11.9166 4.58331L13.75 4.58331L13.75 8.24998L17.4166 8.24998Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.58337 8.24998L4.58337 10.0833L9.16671 10.0833C9.67297 10.0833 10.0834 9.67291 10.0834 9.16665L10.0834 4.58331L8.25004 4.58331L8.25004 8.24998L4.58337 8.24998Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4166 13.75L17.4166 11.9167L12.8333 11.9167C12.327 11.9167 11.9166 12.3271 11.9166 12.8334L11.9166 17.4167L13.75 17.4167L13.75 13.75L17.4166 13.75Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.58337 13.75L4.58337 11.9167L9.16671 11.9167C9.67297 11.9167 10.0834 12.3271 10.0834 12.8334L10.0834 17.4167L8.25004 17.4167L8.25004 13.75L4.58337 13.75Z" fill="white"/>
 </svg>

react/features/base/icons/svg/feedback.svg

@@ -1,5 +1,3 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>feedback</title>
-<path d="M1.333 28h5.333v-16h-5.333v16zM30.667 13.333c0-1.467-1.2-2.667-2.667-2.667h-8.413l1.267-6.093 0.040-0.427c0-0.547-0.227-1.053-0.587-1.413l-1.413-1.4-8.773 8.787c-0.493 0.48-0.787 1.147-0.787 1.88v13.333c0 1.467 1.2 2.667 2.667 2.667h12c1.107 0 2.053-0.667 2.453-1.627l4.027-9.4c0.12-0.307 0.187-0.627 0.187-0.973v-2.547l-0.013-0.013 0.013-0.107z"></path>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.27842 7.06629L10.5284 2.11629C10.8187 1.94211 11.1814 1.94211 11.4717 2.11629L19.7217 7.06629C19.9978 7.23195 20.1667 7.53033 20.1667 7.85232V19.25C20.1667 19.7562 19.7563 20.1666 19.25 20.1666H2.75004C2.24378 20.1666 1.83337 19.7562 1.83337 19.25V7.85232C1.83337 7.53033 2.00231 7.23195 2.27842 7.06629ZM3.66671 10.0428V18.3333H18.3334V10.0428L11.5367 14.9514C11.2164 15.1828 10.7837 15.1828 10.4633 14.9514L3.66671 10.0428ZM4.11297 8.10358L11 13.0776L17.8871 8.10358L11 3.97133L4.11297 8.10358ZM9.05228 8.70755C8.62239 8.97492 8.05714 8.84317 7.78976 8.41327C7.52239 7.98337 7.65414 7.41812 8.08404 7.15075L10.5159 5.63825C10.813 5.45351 11.1892 5.45392 11.4859 5.63932L13.9127 7.15608C14.342 7.42439 14.4725 7.98993 14.2042 8.41924C13.9359 8.84855 13.3703 8.97906 12.941 8.71074L11.9167 8.07054V11C11.9167 11.5062 11.5063 11.9166 11 11.9166C10.4938 11.9166 10.0834 11.5062 10.0834 11V8.06626L9.05228 8.70755Z" fill="white"/>
 </svg>

react/features/base/icons/svg/full-screen.svg

@@ -1,5 +1,3 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>full-screen</title>
-<path d="M18.688 6.688h6.625v6.625h-2.625v-4h-4v-2.625zM22.688 22.688v-4h2.625v6.625h-6.625v-2.625h4zM6.688 13.313v-6.625h6.625v2.625h-4v4h-2.625zM9.313 18.688v4h4v2.625h-6.625v-6.625h2.625z"></path>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 2.75H3.66667C3.16041 2.75 2.75 3.16041 2.75 3.66667V8.25H4.58333V4.58333H8.25V2.75ZM13.75 4.58333V2.75H18.3333C18.8396 2.75 19.25 3.16041 19.25 3.66667V8.25H17.4167V4.58333H13.75ZM13.75 17.4167H17.4167V13.75H19.25V18.3333C19.25 18.8396 18.8396 19.25 18.3333 19.25H13.75V17.4167ZM4.58333 13.75V17.4167H8.25V19.25H3.66667C3.16041 19.25 2.75 18.8396 2.75 18.3333V13.75H4.58333Z" fill="white"/>
 </svg>

react/features/base/icons/svg/help.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18.3334C5.39765 18.3334 1.66669 14.6024 1.66669 10C1.66669 5.39765 5.39765 1.66669 10 1.66669C14.6024 1.66669 18.3334 5.39765 18.3334 10C18.3334 14.6024 14.6024 18.3334 10 18.3334ZM10 16.6667C13.6819 16.6667 16.6667 13.6819 16.6667 10C16.6667 6.31812 13.6819 3.33335 10 3.33335C6.31812 3.33335 3.33335 6.31812 3.33335 10C3.33335 13.6819 6.31812 16.6667 10 16.6667ZM9.24807 14.8926C9.44555 15.064 9.67667 15.1498 9.94143 15.1498C10.1975 15.1498 10.4232 15.063 10.6185 14.8893C10.8138 14.7157 10.9115 14.477 10.9115 14.1732C10.9115 13.8998 10.8182 13.6697 10.6315 13.4831C10.4449 13.2965 10.2149 13.2031 9.94143 13.2031C9.66365 13.2031 9.42928 13.2965 9.2383 13.4831C9.04733 13.6697 8.95184 13.8998 8.95184 14.1732C8.95184 14.4814 9.05058 14.7212 9.24807 14.8926ZM7.16148 6.76109C6.89672 7.18427 6.76434 7.60202 6.76434 8.01434C6.76434 8.214 6.84789 8.39954 7.01499 8.57098C7.1821 8.74243 7.38717 8.82815 7.63023 8.82815C8.04256 8.82815 8.3225 8.58292 8.47007 8.09247C8.62632 7.62372 8.81729 7.2689 9.04299 7.02802C9.26868 6.78713 9.62024 6.66669 10.0977 6.66669C10.5057 6.66669 10.8388 6.78604 11.097 7.02476C11.3553 7.26348 11.4844 7.55644 11.4844 7.90367C11.4844 8.08162 11.4421 8.24655 11.3574 8.39846C11.2728 8.55037 11.1686 8.68817 11.0449 8.81187C10.9212 8.93557 10.7205 9.11894 10.4427 9.362C10.1259 9.63978 9.87415 9.87958 9.68752 10.0814C9.50089 10.2832 9.35115 10.5176 9.2383 10.7845C9.12545 11.0515 9.06903 11.3672 9.06903 11.7318C9.06903 12.0226 9.14607 12.2418 9.30015 12.3893C9.45423 12.5369 9.64412 12.6107 9.86981 12.6107C10.3038 12.6107 10.5621 12.385 10.6446 11.9336C10.6923 11.7209 10.7281 11.5723 10.752 11.4877C10.7758 11.403 10.8095 11.3184 10.8529 11.2337C10.8963 11.1491 10.9625 11.0558 11.0515 10.9538C11.1404 10.8518 11.2587 10.7335 11.4063 10.599C11.9401 10.1215 12.3101 9.78192 12.5163 9.5801C12.7225 9.37827 12.9004 9.13848 13.0502 8.8607C13.1999 8.58292 13.2748 8.25957 13.2748 7.89065C13.2748 7.42189 13.1435 6.98787 12.8809 6.58856C12.6183 6.18925 12.2461 5.8735 11.7643 5.6413C11.2826 5.40909 10.727 5.29299 10.0977 5.29299C9.42059 5.29299 8.82815 5.43188 8.32033 5.70966C7.81252 5.98743 7.42624 6.33791 7.16148 6.76109Z" fill="white"/>
+</svg>

react/features/base/icons/svg/horizontal-points.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.41667 11C6.41667 12.0125 5.59586 12.8334 4.58333 12.8334C3.57081 12.8334 2.75 12.0125 2.75 11C2.75 9.9875 3.57081 9.16669 4.58333 9.16669C5.59586 9.16669 6.41667 9.9875 6.41667 11ZM11 12.8334C12.0125 12.8334 12.8333 12.0125 12.8333 11C12.8333 9.9875 12.0125 9.16669 11 9.16669C9.98748 9.16669 9.16667 9.9875 9.16667 11C9.16667 12.0125 9.98748 12.8334 11 12.8334ZM17.4167 12.8334C18.4292 12.8334 19.25 12.0125 19.25 11C19.25 9.9875 18.4292 9.16669 17.4167 9.16669C16.4041 9.16669 15.5833 9.9875 15.5833 11C15.5833 12.0125 16.4041 12.8334 17.4167 12.8334Z" fill="white"/>
+</svg>

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';

react/features/base/icons/svg/live-streaming.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 20.1666C5.93743 20.1666 1.83337 16.0626 1.83337 11C1.83337 5.93737 5.93743 1.83331 11 1.83331C16.0627 1.83331 20.1667 5.93737 20.1667 11C20.1667 16.0626 16.0627 20.1666 11 20.1666ZM11 18.3333C11.1961 18.3333 11.3903 18.3256 11.5824 18.3105C10.5501 17.4264 9.59313 16.3138 8.75825 15.0021C7.49738 15.1948 6.17459 15.1866 4.82269 14.9536C6.12637 16.9863 8.4059 18.3333 11 18.3333ZM10.6533 14.5474C11.6128 15.9231 12.7188 17.0044 13.8859 17.7437C14.1557 17.6281 14.4172 17.4967 14.6691 17.3508C14.6706 17.3303 14.6728 17.3097 14.6757 17.2891C14.9298 15.4814 14.8751 13.8467 14.5451 12.3479C13.4001 13.3267 12.0838 14.0737 10.6533 14.5474ZM13.9392 10.4127C12.7459 11.6082 11.287 12.4733 9.66815 12.9309C8.46905 10.6745 7.6302 7.85533 7.39828 4.61061C7.82671 4.36858 8.28191 4.1684 8.75833 4.01561C8.80512 4.05571 8.86081 4.10342 8.91909 4.15334C9.07324 4.28538 9.24549 4.43294 9.31893 4.49632C9.59915 4.73815 9.83649 4.94781 10.0699 5.16136C10.6639 5.70485 11.1866 6.23341 11.6714 6.79528C12.6385 7.9162 13.4037 9.11177 13.9392 10.4127ZM15.2335 8.82952C14.6633 7.68289 13.9328 6.60978 13.0594 5.59762C12.5235 4.9765 11.9513 4.39785 11.3074 3.80875C11.2561 3.76175 11.2046 3.71502 11.1527 3.6682C13.297 3.712 15.2153 4.6762 16.5286 6.18183C16.2018 7.14657 15.7642 8.03341 15.2335 8.82952ZM16.0362 10.823C16.502 12.3121 16.7196 13.9188 16.6584 15.6652C17.7048 14.3975 18.3334 12.7721 18.3334 11C18.3334 9.96873 18.1205 8.98721 17.7363 8.09693C17.275 9.09641 16.7022 10.0096 16.0362 10.823ZM3.91853 12.8686C5.24374 13.2472 6.54603 13.3714 7.78607 13.2697C6.75554 11.1791 6.01023 8.711 5.68385 5.94863C4.43382 7.26378 3.66671 9.0423 3.66671 11C3.66671 11.6534 3.75216 12.2868 3.9125 12.8897L3.91853 12.8686Z" fill="white"/>
+</svg>

react/features/base/icons/svg/microphone-empty-slash.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.33334 7.65098V10C6.33334 11.7111 7.50533 13.1484 9.09033 13.553C9.08572 13.5902 9.08334 13.6282 9.08334 13.6667V15.424C6.48211 14.9876 4.50001 12.7253 4.50001 10C4.50001 9.49378 4.0896 9.08337 3.58334 9.08337C3.07708 9.08337 2.66668 9.49378 2.66668 10C2.66668 13.7397 5.46589 16.8255 9.08334 17.2766V18.25C9.08334 18.7563 9.49375 19.1667 10 19.1667C10.5063 19.1667 10.9167 18.7563 10.9167 18.25V17.2766C12.2504 17.1103 13.4729 16.5859 14.4849 15.8025L17.576 18.8937C17.94 19.2576 18.53 19.2577 18.8939 18.8939C19.2577 18.53 19.2576 17.94 18.8936 17.5761L15.8025 14.4849C15.8059 14.4806 15.8092 14.4762 15.8126 14.4719L14.5016 13.1609C14.4984 13.1654 14.4952 13.1699 14.492 13.1744L13.1669 11.8493C13.1697 11.8444 13.1726 11.8396 13.1754 11.8347L11.7803 10.4396C11.7788 10.4458 11.7772 10.4519 11.7757 10.4581L8.16668 6.8491V6.82598L6.33334 4.99265V5.01577L2.42398 1.10641C2.06002 0.742445 1.47001 0.742351 1.10617 1.1062C0.74232 1.47004 0.742414 2.06005 1.10638 2.42401L6.33334 7.65098ZM8.16668 9.48431V10C8.16668 11.0126 8.98749 11.8334 10 11.8334C10.1582 11.8334 10.3116 11.8133 10.4581 11.7757L8.16668 9.48431ZM11.8493 13.1669C11.5591 13.3367 11.2436 13.4678 10.9097 13.553C10.9143 13.5902 10.9167 13.6282 10.9167 13.6667V15.424C11.7471 15.2847 12.5145 14.9592 13.1744 14.492L11.8493 13.1669ZM13.6667 9.69077L11.8333 7.85743V4.50004C11.8333 3.48752 11.0125 2.66671 10 2.66671C9.08511 2.66671 8.32673 3.33688 8.189 4.21309L6.75923 2.78332C7.37496 1.62336 8.59523 0.833374 10 0.833374C12.0251 0.833374 13.6667 2.475 13.6667 4.50004V9.69077ZM15.3317 11.3558L16.7787 12.8028C17.1361 11.9393 17.3333 10.9927 17.3333 10C17.3333 9.49378 16.9229 9.08337 16.4167 9.08337C15.9104 9.08337 15.5 9.49378 15.5 10C15.5 10.4679 15.4416 10.9221 15.3317 11.3558Z" />
+</svg>

react/features/base/icons/svg/microphone-empty.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16 6C16 3.79086 14.2091 2 12 2C9.79086 2 8 3.79086 8 6V12C8 13.8666 9.27853 15.4346 11.0076 15.8759C11.0026 15.9166 11 15.958 11 16V17.917C8.16229 17.441 6 14.973 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 16.0796 7.05369 19.446 11 19.9381V21C11 21.5523 11.4477 22 12 22C12.5523 22 13 21.5523 13 21V19.9381C16.9463 19.446 20 16.0796 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 14.973 15.8377 17.441 13 17.917V16C13 15.958 12.9974 15.9166 12.9924 15.8759C14.7215 15.4346 16 13.8666 16 12V6ZM12 4C10.8954 4 10 4.89543 10 6V12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12V6C14 4.89543 13.1046 4 12 4Z" fill="#A4B8D1"/>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 6C16 3.79086 14.2091 2 12 2C9.79086 2 8 3.79086 8 6V12C8 13.8666 9.27853 15.4346 11.0076 15.8759C11.0026 15.9166 11 15.958 11 16V17.917C8.16229 17.441 6 14.973 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 16.0796 7.05369 19.446 11 19.9381V21C11 21.5523 11.4477 22 12 22C12.5523 22 13 21.5523 13 21V19.9381C16.9463 19.446 20 16.0796 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 14.973 15.8377 17.441 13 17.917V16C13 15.958 12.9974 15.9166 12.9924 15.8759C14.7215 15.4346 16 13.8666 16 12V6ZM12 4C10.8954 4 10 4.89543 10 6V12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12V6C14 4.89543 13.1046 4 12 4Z" />
 </svg>

react/features/base/icons/svg/mute-everyone.svg

@@ -1,11 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6 13.078V15C6 16.3999 6.9589 17.5759 8.25572 17.907C8.25195 17.9374 8.25 17.9685 8.25 18V19.4378C6.12171 19.0807 4.5 17.2297 4.5 15C4.5 14.5858 4.16421 14.25 3.75 14.25C3.33579 14.25 3 14.5858 3 15C3 18.0597 5.29027 20.5845 8.25 20.9536V21.75C8.25 22.1642 8.58579 22.5 9 22.5C9.41421 22.5 9.75 22.1642 9.75 21.75V20.9536C10.8412 20.8175 11.8415 20.3884 12.6694 19.7475L15.1986 22.2766C15.4964 22.5744 15.9791 22.5745 16.2768 22.2768C16.5745 21.9791 16.5744 21.4964 16.2766 21.1986L13.7475 18.6694C13.7502 18.6659 13.753 18.6623 13.7557 18.6588L12.6831 17.5861C12.6805 17.5898 12.6779 17.5935 12.6753 17.5972L11.5911 16.513C11.5934 16.5091 11.5957 16.5051 11.598 16.5011L10.4566 15.3596C10.4554 15.3647 10.4541 15.3697 10.4528 15.3748L7.5 12.422V12.403L6 10.903V10.922L2.80143 7.72339C2.50364 7.4256 2.02091 7.42553 1.72322 7.72322C1.42553 8.02091 1.4256 8.50364 1.72339 8.80143L6 13.078ZM7.5 14.578V15C7.5 15.8284 8.17157 16.5 9 16.5C9.1294 16.5 9.25498 16.4836 9.37476 16.4528L7.5 14.578ZM10.513 17.5911C10.2756 17.73 10.0175 17.8372 9.74428 17.907C9.74805 17.9374 9.75 17.9685 9.75 18V19.4378C10.4295 19.3238 11.0573 19.0575 11.5972 18.6753L10.513 17.5911ZM12 14.747L10.5 13.247V10.5C10.5 9.67157 9.82843 9 9 9C8.25144 9 7.63095 9.54832 7.51827 10.2652L6.34845 9.09541C6.85223 8.14635 7.85064 7.5 9 7.5C10.6569 7.5 12 8.84315 12 10.5V14.747ZM13.3623 16.1092L14.5462 17.2932C14.8386 16.5867 15 15.8122 15 15C15 14.5858 14.6642 14.25 14.25 14.25C13.8358 14.25 13.5 14.5858 13.5 15C13.5 15.3828 13.4522 15.7544 13.3623 16.1092Z" fill="#A4B8D1"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16 4.71869V6C16 6.93329 16.6393 7.71727 17.5038 7.93797C17.5013 7.95829 17.5 7.97899 17.5 8V8.95852C16.0811 8.72048 15 7.4865 15 6C15 5.72386 14.7761 5.5 14.5 5.5C14.2239 5.5 14 5.72386 14 6C14 8.03981 15.5268 9.723 17.5 9.96905V10.5C17.5 10.7761 17.7239 11 18 11C18.2761 11 18.5 10.7761 18.5 10.5V9.96905C19.2275 9.87834 19.8943 9.59227 20.4463 9.16499L22.1324 10.8511C22.3309 11.0496 22.6527 11.0496 22.8512 10.8512C23.0496 10.6527 23.0496 10.3309 22.8511 10.1324L21.165 8.4463C21.1668 8.44393 21.1687 8.44155 21.1705 8.43918L20.4554 7.7241C20.4537 7.72656 20.4519 7.72903 20.4502 7.73149L19.7274 7.00869C19.7289 7.00603 19.7305 7.00338 19.732 7.00072L18.9711 6.23977C18.9702 6.24313 18.9694 6.24649 18.9685 6.24984L17 4.28131V4.26869L16 3.26869V3.28131L13.8676 1.14893C13.6691 0.950402 13.3473 0.950351 13.1488 1.14881C12.9504 1.34727 12.9504 1.6691 13.1489 1.86762L16 4.71869ZM17 5.71869V6C17 6.55228 17.4477 7 18 7C18.0863 7 18.17 6.98908 18.2498 6.96854L17 5.71869ZM19.0087 7.72738C18.8504 7.81999 18.6783 7.89148 18.4962 7.93797C18.4987 7.95829 18.5 7.97899 18.5 8V8.95852C18.953 8.88252 19.3715 8.70502 19.7315 8.45019L19.0087 7.72738ZM20 5.83131L19 4.83131V3C19 2.44772 18.5523 2 18 2C17.501 2 17.0873 2.36555 17.0122 2.84348L16.2323 2.06361C16.5682 1.4309 17.2338 1 18 1C19.1046 1 20 1.89543 20 3V5.83131ZM20.9082 6.73948L21.6975 7.52877C21.8924 7.05778 22 6.54145 22 6C22 5.72386 21.7761 5.5 21.5 5.5C21.2239 5.5 21 5.72386 21 6C21 6.25519 20.9681 6.50294 20.9082 6.73948Z" fill="#A4B8D1"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 11.9882V13.75C5.5 15.0333 6.37899 16.1113 7.56774 16.4147C7.56428 16.4427 7.5625 16.4711 7.5625 16.5V17.818C5.61157 17.4907 4.125 15.7939 4.125 13.75C4.125 13.3703 3.8172 13.0625 3.4375 13.0625C3.0578 13.0625 2.75 13.3703 2.75 13.75C2.75 16.5547 4.84941 18.8691 7.5625 19.2074V19.9375C7.5625 20.3172 7.8703 20.625 8.25 20.625C8.6297 20.625 8.9375 20.3172 8.9375 19.9375V19.2074C9.93779 19.0827 10.8547 18.6894 11.6137 18.1019L13.932 20.4202C14.205 20.6932 14.6475 20.6933 14.9204 20.4204C15.1933 20.1475 15.1932 19.705 14.9202 19.432L12.6019 17.1137C12.6044 17.1104 12.6069 17.1071 12.6094 17.1039L11.6262 16.1206C11.6238 16.124 11.6214 16.1274 11.619 16.1308L10.6251 15.1369C10.6273 15.1333 10.6294 15.1296 10.6315 15.126L9.58522 14.0797C9.58409 14.0843 9.58292 14.0889 9.58174 14.0935L6.875 11.3868V11.3695L5.5 9.99445V10.0118L2.56798 7.07978C2.29501 6.8068 1.8525 6.80673 1.57962 7.07962C1.30673 7.3525 1.3068 7.79501 1.57978 8.06798L5.5 11.9882ZM6.875 13.3632V13.75C6.875 14.5094 7.49061 15.125 8.25 15.125C8.36862 15.125 8.48373 15.11 8.59353 15.0817L6.875 13.3632ZM9.63694 16.1251C9.41934 16.2525 9.18267 16.3508 8.93226 16.4147C8.93572 16.4427 8.9375 16.4711 8.9375 16.5V17.818C9.56035 17.7135 10.1359 17.4694 10.6308 17.119L9.63694 16.1251ZM11 13.518L9.625 12.143V9.625C9.625 8.86561 9.00939 8.25 8.25 8.25C7.56382 8.25 6.99504 8.75263 6.89174 9.40979L5.81941 8.33746C6.28121 7.46749 7.19642 6.875 8.25 6.875C9.76878 6.875 11 8.10622 11 9.625V13.518ZM12.2487 14.7668L13.334 15.8521C13.6021 15.2044 13.75 14.4945 13.75 13.75C13.75 13.3703 13.4422 13.0625 13.0625 13.0625C12.6828 13.0625 12.375 13.3703 12.375 13.75C12.375 14.1009 12.3312 14.4415 12.2487 14.7668Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6666 4.32549V5.50002C14.6666 6.35554 15.2526 7.07419 16.0451 7.27649C16.0428 7.29512 16.0416 7.3141 16.0416 7.33335V8.212C14.741 7.9938 13.75 6.86264 13.75 5.50002C13.75 5.24689 13.5448 5.04169 13.2916 5.04169C13.0385 5.04169 12.8333 5.24689 12.8333 5.50002C12.8333 7.36985 14.2329 8.91277 16.0416 9.13832V9.62502C16.0416 9.87815 16.2468 10.0834 16.5 10.0834C16.7531 10.0834 16.9583 9.87815 16.9583 9.62502V9.13832C17.6252 9.05516 18.2364 8.79293 18.7424 8.40126L20.288 9.94684C20.47 10.1288 20.765 10.1289 20.9469 9.94694C21.1288 9.76502 21.1288 9.47001 20.9468 9.28803L19.4012 7.74246C19.4029 7.74029 19.4046 7.73811 19.4062 7.73594L18.7507 7.08044C18.7492 7.0827 18.7476 7.08496 18.746 7.08722L18.0834 6.42465C18.0848 6.42222 18.0862 6.41978 18.0876 6.41734L17.3901 5.71981C17.3893 5.72289 17.3886 5.72597 17.3878 5.72904L15.5833 3.92455V3.91299L14.6666 2.99632V3.00788L12.7119 1.0532C12.53 0.871222 12.235 0.871175 12.053 1.0531C11.8711 1.23502 11.8712 1.53003 12.0531 1.71201L14.6666 4.32549ZM15.5833 5.24216V5.50002C15.5833 6.00628 15.9937 6.41669 16.5 6.41669C16.579 6.41669 16.6558 6.40667 16.729 6.38785L15.5833 5.24216ZM17.4246 7.08345C17.2795 7.16835 17.1217 7.23388 16.9548 7.27649C16.9571 7.29512 16.9583 7.3141 16.9583 7.33335V8.212C17.3735 8.14233 17.7572 7.97962 18.0872 7.74602L17.4246 7.08345ZM18.3333 5.34538L17.4166 4.42872V2.75002C17.4166 2.24376 17.0062 1.83335 16.5 1.83335C16.0425 1.83335 15.6633 2.16844 15.5945 2.60655L14.8796 1.89166C15.1874 1.31168 15.7976 0.916687 16.5 0.916687C17.5125 0.916687 18.3333 1.7375 18.3333 2.75002V5.34538ZM19.1658 6.17788L19.8893 6.90139C20.068 6.46965 20.1666 5.99635 20.1666 5.50002C20.1666 5.24689 19.9614 5.04169 19.7083 5.04169C19.4552 5.04169 19.25 5.24689 19.25 5.50002C19.25 5.73394 19.2208 5.96104 19.1658 6.17788Z" fill="white"/>
 </svg>

react/features/base/icons/svg/presentation.svg

@@ -1,8 +1,3 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="34" height="32" viewBox="0 0 34 32">
-<title>presentation</title>
-<path d="M29.765 0.154h-25.584c-2.275 0-4.131 1.895-4.131 4.224v23.46c0 2.327 1.855 4.222 4.131 4.222h25.584c2.279 0 4.135-1.895 4.135-4.222v-23.46c0-2.329-1.856-4.224-4.135-4.224zM29.573 27.636h-25.192v-23.057h25.188l0.004 23.057z"></path>
-<path d="M21.43 8.921h6.778v17.711h-6.778v-17.711z"></path>
-<path d="M13.396 12.937h6.778v13.694h-6.778v-13.694z"></path>
-<path d="M5.386 16.954h6.755v9.677h-6.755v-9.677z"></path>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6666 3.66669C15.1143 3.66669 14.6666 4.1144 14.6666 4.66669V17.3334C14.6666 17.8856 15.1143 18.3334 15.6666 18.3334H17.3333C17.8856 18.3334 18.3333 17.8856 18.3333 17.3334V4.66669C18.3333 4.1144 17.8856 3.66669 17.3333 3.66669H15.6666ZM9.16663 10.1667C9.16663 9.6144 9.61434 9.16669 10.1666 9.16669H11.8333C12.3856 9.16669 12.8333 9.6144 12.8333 10.1667V17.3334C12.8333 17.8856 12.3856 18.3334 11.8333 18.3334H10.1666C9.61434 18.3334 9.16663 17.8856 9.16663 17.3334V10.1667ZM3.66663 15.6667C3.66663 15.1144 4.11434 14.6667 4.66663 14.6667H6.33329C6.88558 14.6667 7.33329 15.1144 7.33329 15.6667V17.3334C7.33329 17.8856 6.88558 18.3334 6.33329 18.3334H4.66663C4.11434 18.3334 3.66663 17.8856 3.66663 17.3334V15.6667Z" fill="white"/>
 </svg>

react/features/base/icons/svg/raised-hand.svg

@@ -1,5 +1,3 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>raised-hand</title>
-<path d="M30.688 7.313v19.375c0 2.938-2.438 5.313-5.375 5.313h-9.688c-1.438 0-2.813-0.563-3.813-1.563l-10.5-10.688s1.688-1.625 1.75-1.625c0.313-0.25 0.688-0.375 1.063-0.375 0.313 0 0.563 0.063 0.813 0.188 0.063 0 5.75 3.25 5.75 3.25v-15.875c0-1.125 0.875-2 2-2s2 0.875 2 2v9.375h1.313v-12.688c0-1.125 0.875-2 2-2s2 0.875 2 2v12.688h1.313v-11.375c0-1.125 0.875-2 2-2s2 0.875 2 2v11.375h1.375v-7.375c0-1.125 0.875-2 2-2s2 0.875 2 2z"></path>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9167 3.20834L11.9167 4.83334L11.9167 11L11.9167 11.9167C11.9167 12.4229 12.3271 12.8333 12.8333 12.8333C13.3396 12.8333 13.75 12.4229 13.75 11.9167V11V4.83334C13.75 4.73632 13.9183 4.58334 14.2083 4.58334C14.4984 4.58334 14.6667 4.73632 14.6667 4.83334L14.6667 6.875L14.6667 11.9167C14.6667 12.4229 15.0771 12.8333 15.5833 12.8333C16.0896 12.8333 16.5 12.4229 16.5 11.9167L16.5 6.875C16.5 6.62187 16.7052 6.41667 16.9583 6.41667C17.2115 6.41667 17.4167 6.62187 17.4167 6.875V13.788C17.1671 16.3395 14.9919 18.3333 12.375 18.3333C10.6569 18.3333 9.09297 17.4675 8.17032 16.0753L8.16703 16.0762L4.67206 10.8208C4.50437 10.5805 4.55476 10.2948 4.76211 10.1496C4.96947 10.0044 5.25526 10.0548 5.40045 10.2621L6.57295 12.015L6.57177 12.0158C6.85487 12.4355 7.42461 12.5463 7.84432 12.2632C8.09767 12.0923 8.23844 11.8169 8.24797 11.5332L8.25 11.5338V5.04167C8.25 4.78854 8.4552 4.58334 8.70833 4.58334C8.96124 4.58334 9.1663 4.78818 9.16667 5.041L9.16667 5.04167L9.16667 11L9.16667 11.9167C9.16667 12.4229 9.57707 12.8333 10.0833 12.8333C10.5896 12.8333 11 12.4229 11 11.9167V11V5.04167V3.20834C11 2.95521 11.2052 2.75001 11.4583 2.75001C11.7115 2.75001 11.9167 2.95521 11.9167 3.20834ZM19.2337 13.7686L19.25 13.7605V13.2917V6.875C19.25 5.60935 18.224 4.58334 16.9583 4.58334C16.7976 4.58334 16.6408 4.59988 16.4894 4.63136C16.3776 3.57554 15.399 2.75001 14.2083 2.75001C14.0384 2.75001 13.8729 2.76681 13.7135 2.7987C13.5204 1.72851 12.5842 0.916672 11.4583 0.916672C10.3309 0.916672 9.39356 1.73088 9.20233 2.80339C9.04323 2.76843 8.87793 2.75001 8.70833 2.75001C7.44268 2.75001 6.41667 3.77602 6.41667 5.04167V8.70352C5.64445 8.11321 4.54919 8.06056 3.71056 8.64778C2.67379 9.37373 2.42183 10.8027 3.14778 11.8395L6.44893 16.7791C7.64459 18.8065 9.85095 20.1667 12.375 20.1667C16.0117 20.1667 18.9888 17.3431 19.2337 13.7686Z" fill="white"/>
 </svg>

react/features/base/icons/svg/settings.svg

@@ -1,5 +1,3 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>settings</title>
-<path d="M16 20.688c2.563 0 4.688-2.125 4.688-4.688s-2.125-4.688-4.688-4.688-4.688 2.125-4.688 4.688 2.125 4.688 4.688 4.688zM25.938 17.313l2.813 2.188c0.25 0.188 0.313 0.563 0.125 0.875l-2.688 4.625c-0.188 0.313-0.5 0.375-0.813 0.25l-3.313-1.313c-0.688 0.5-1.438 1-2.25 1.313l-0.5 3.5c-0.063 0.313-0.313 0.563-0.625 0.563h-5.375c-0.313 0-0.563-0.25-0.625-0.563l-0.5-3.5c-0.813-0.313-1.563-0.75-2.25-1.313l-3.313 1.313c-0.313 0.125-0.625 0.063-0.813-0.25l-2.688-4.625c-0.188-0.313-0.125-0.688 0.125-0.875l2.813-2.188c-0.063-0.438-0.063-0.875-0.063-1.313s0-0.875 0.063-1.313l-2.813-2.188c-0.25-0.188-0.313-0.563-0.125-0.875l2.688-4.625c0.188-0.313 0.5-0.375 0.813-0.25l3.313 1.313c0.688-0.5 1.438-1 2.25-1.313l0.5-3.5c0.063-0.313 0.313-0.563 0.625-0.563h5.375c0.313 0 0.563 0.25 0.625 0.563l0.5 3.5c0.813 0.313 1.563 0.75 2.25 1.313l3.313-1.313c0.313-0.125 0.625-0.063 0.813 0.25l2.688 4.625c0.188 0.313 0.125 0.688-0.125 0.875l-2.813 2.188c0.063 0.438 0.063 0.875 0.063 1.313s0 0.875-0.063 1.313z"></path>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.00473 2.17027L8.4293 3.89657L7.79479 4.15939L6.16722 3.34561C5.46141 2.9927 4.60896 3.13103 4.05096 3.68903L3.68897 4.05103C3.13097 4.60902 2.99264 5.46147 3.34555 6.16728L4.16219 7.79134L3.89712 8.42916L2.17021 9.0048C1.42158 9.25434 0.916626 9.95493 0.916626 10.744V11.256C0.916626 12.0451 1.42158 12.7457 2.17021 12.9952L3.89651 13.5707L4.15933 14.2052L3.34555 15.8328C2.99264 16.5386 3.13097 17.391 3.68897 17.949L4.05096 18.311C4.60896 18.869 5.46141 19.0073 6.16722 18.6544L7.79128 17.8378L8.4291 18.1029L9.00473 19.8298C9.25428 20.5784 9.95487 21.0834 10.744 21.0834H11.2559C12.0451 21.0834 12.7456 20.5784 12.9952 19.8298L13.5706 18.1035L14.2051 17.8406L15.8327 18.6544C16.5385 19.0073 17.391 18.869 17.949 18.311L18.311 17.949C18.8689 17.391 19.0073 16.5386 18.6544 15.8328L17.8377 14.2087L18.1028 13.5709L19.8297 12.9952C20.5783 12.7457 21.0833 12.0451 21.0833 11.256V10.744C21.0833 9.95493 20.5783 9.25434 19.8297 9.0048L18.1036 8.43221L17.8404 7.79528L18.6544 6.16728C19.0073 5.46147 18.8689 4.60902 18.311 4.05103L17.949 3.68903C17.391 3.13103 16.5385 2.9927 15.8327 3.34561L14.2086 4.16225L13.5708 3.89718L12.9952 2.17027C12.7456 1.42164 12.0451 0.916687 11.2559 0.916687H10.744C9.95487 0.916687 9.25428 1.42164 9.00473 2.17027ZM7.72332 6.17339L9.90395 5.27014L10.744 2.75002H11.2559L12.0958 5.26952L14.2813 6.17779L16.6526 4.98539L17.0146 5.34739L15.8268 7.72295L16.7297 9.90805L19.25 10.7441V11.256L16.7305 12.0958L15.8222 14.2813L17.0146 16.6527L16.6526 17.0147L14.2766 15.8267L12.096 16.7299L11.2559 19.25H10.744L9.90415 16.7305L7.71864 15.8223L5.34733 17.0147L4.98533 16.6527L6.17332 14.2767L5.27008 12.096L2.74996 11.256V10.7441L5.26946 9.90421L6.17773 7.7187L4.98533 5.34739L5.34733 4.98539L7.72332 6.17339ZM11 15.5834C8.46865 15.5834 6.41663 13.5313 6.41663 11C6.41663 8.46872 8.46865 6.41669 11 6.41669C13.5313 6.41669 15.5833 8.46872 15.5833 11C15.5833 13.5313 13.5313 15.5834 11 15.5834ZM13.75 11C13.75 12.5188 12.5187 13.75 11 13.75C9.48118 13.75 8.24996 12.5188 8.24996 11C8.24996 9.48124 9.48118 8.25002 11 8.25002C12.5187 8.25002 13.75 9.48124 13.75 11Z" fill="white"/>
 </svg>

react/features/base/icons/svg/share-desktop.svg

@@ -1,5 +1,3 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>share-desktop</title>
-<path d="M28 22.688v-16h-24v16h24zM28 4c1.438 0 2.688 1.25 2.688 2.688l-0.063 16c0 1.438-1.188 2.625-2.625 2.625h-6.688v2.688h-10.625v-2.688h-6.688c-1.438 0-2.688-1.188-2.688-2.625v-16c0-1.438 1.25-2.688 2.688-2.688h24z"></path>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.66671 2.75H18.3334C19.3459 2.75 20.1667 3.57081 20.1667 4.58333V15.5833C20.1667 16.5959 19.3459 17.4167 18.3334 17.4167H15.5834C16.0896 17.4167 16.5 17.8271 16.5 18.3333C16.5 18.8396 16.0896 19.25 15.5834 19.25H6.41671C5.91045 19.25 5.50004 18.8396 5.50004 18.3333C5.50004 17.8271 5.91045 17.4167 6.41671 17.4167H3.66671C2.65419 17.4167 1.83337 16.5959 1.83337 15.5833V4.58333C1.83337 3.57081 2.65419 2.75 3.66671 2.75ZM3.66671 4.58333V15.5833H18.3334V4.58333H3.66671ZM11.9167 8.25C8.16671 8.25 6.41671 9.85417 6.41671 14.6667C8.41671 10.7708 11.9167 11 11.9167 11V12.274C11.9167 12.6941 12.4034 12.9269 12.7305 12.6633L16.017 10.0143C16.2654 9.81413 16.2654 9.43582 16.017 9.23568L12.7305 6.5867C12.4034 6.32307 11.9167 6.55589 11.9167 6.97599V8.25Z" fill="white"/>
 </svg>

react/features/base/icons/svg/tiles-many.svg

@@ -1,5 +1,3 @@
-<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-<title>tiles-many</title>
-<path d="M2.667 0h5.333c1.473 0 2.667 1.194 2.667 2.667v5.333c0 1.473-1.194 2.667-2.667 2.667h-5.333c-1.473 0-2.667-1.194-2.667-2.667v-5.333c0-1.473 1.194-2.667 2.667-2.667zM4 2.667c-0.736 0-1.333 0.597-1.333 1.333v2.667c0 0.736 0.597 1.333 1.333 1.333h2.667c0.736 0 1.333-0.597 1.333-1.333v-2.667c0-0.736-0.597-1.333-1.333-1.333h-2.667zM2.667 13.333h5.333c1.473 0 2.667 1.194 2.667 2.667v5.333c0 1.473-1.194 2.667-2.667 2.667h-5.333c-1.473 0-2.667-1.194-2.667-2.667v-5.333c0-1.473 1.194-2.667 2.667-2.667zM4 16c-0.736 0-1.333 0.597-1.333 1.333v2.667c0 0.736 0.597 1.333 1.333 1.333h2.667c0.736 0 1.333-0.597 1.333-1.333v-2.667c0-0.736-0.597-1.333-1.333-1.333h-2.667zM16 0h5.333c1.473 0 2.667 1.194 2.667 2.667v5.333c0 1.473-1.194 2.667-2.667 2.667h-5.333c-1.473 0-2.667-1.194-2.667-2.667v-5.333c0-1.473 1.194-2.667 2.667-2.667zM17.333 2.667c-0.736 0-1.333 0.597-1.333 1.333v2.667c0 0.736 0.597 1.333 1.333 1.333h2.667c0.736 0 1.333-0.597 1.333-1.333v-2.667c0-0.736-0.597-1.333-1.333-1.333h-2.667zM16 13.333h5.333c1.473 0 2.667 1.194 2.667 2.667v5.333c0 1.473-1.194 2.667-2.667 2.667h-5.333c-1.473 0-2.667-1.194-2.667-2.667v-5.333c0-1.473 1.194-2.667 2.667-2.667zM17.333 16c-0.736 0-1.333 0.597-1.333 1.333v2.667c0 0.736 0.597 1.333 1.333 1.333h2.667c0.736 0 1.333-0.597 1.333-1.333v-2.667c0-0.736-0.597-1.333-1.333-1.333h-2.667z"></path>
+<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.86667 8.24998V3.66665H8.45V8.24998H3.86667ZM2.03333 2.74998C2.03333 2.24372 2.44374 1.83331 2.95 1.83331H9.36667C9.87293 1.83331 10.2833 2.24372 10.2833 2.74998V9.16665C10.2833 9.67291 9.87293 10.0833 9.36667 10.0833H2.95C2.44374 10.0833 2.03333 9.67291 2.03333 9.16665V2.74998ZM13.95 8.24998V3.66665H18.5333V8.24998H13.95ZM12.1167 2.74998C12.1167 2.24372 12.5271 1.83331 13.0333 1.83331H19.45C19.9563 1.83331 20.3667 2.24372 20.3667 2.74998V9.16665C20.3667 9.67291 19.9563 10.0833 19.45 10.0833H13.0333C12.5271 10.0833 12.1167 9.67291 12.1167 9.16665V2.74998ZM3.86667 13.75V18.3333H8.45V13.75H3.86667ZM2.95 11.9166C2.44374 11.9166 2.03333 12.3271 2.03333 12.8333V19.25C2.03333 19.7562 2.44374 20.1666 2.95 20.1666H9.36667C9.87293 20.1666 10.2833 19.7562 10.2833 19.25V12.8333C10.2833 12.3271 9.87293 11.9166 9.36667 11.9166H2.95ZM13.95 18.3333V13.75H18.5333V18.3333H13.95ZM12.1167 12.8333C12.1167 12.3271 12.5271 11.9166 13.0333 11.9166H19.45C19.9563 11.9166 20.3667 12.3271 20.3667 12.8333V19.25C20.3667 19.7562 19.9563 20.1666 19.45 20.1666H13.0333C12.5271 20.1666 12.1167 19.7562 12.1167 19.25V12.8333Z" fill="white"/>
 </svg>

react/features/base/icons/svg/volume-empty.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1799 3.68341L6 8H3C2.44772 8 2 8.44771 2 9V15C2 15.5523 2.44772 16 3 16H6L11.1799 20.3166C11.2698 20.3915 11.383 20.4325 11.5 20.4325C11.7761 20.4325 12 20.2086 12 19.9325V4.06752C12 3.95055 11.959 3.83728 11.8841 3.74743C11.7073 3.53529 11.392 3.50662 11.1799 3.68341ZM4 10H6.7241L10 7.27008V16.7299L6.7241 14H4V10ZM14 8C16.2091 8 18 9.79086 18 12C18 14.2091 16.2091 16 14 16V14C15.1046 14 16 13.1046 16 12C16 10.8954 15.1046 10 14 10V8ZM14 4C18.4183 4 22 7.58172 22 12C22 16.4183 18.4183 20 14 20V18C17.3137 18 20 15.3137 20 12C20 8.68629 17.3137 6 14 6V4Z" fill="#A4B8D1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1799 3.68341L6 8H3C2.44772 8 2 8.44771 2 9V15C2 15.5523 2.44772 16 3 16H6L11.1799 20.3166C11.2698 20.3915 11.383 20.4325 11.5 20.4325C11.7761 20.4325 12 20.2086 12 19.9325V4.06752C12 3.95055 11.959 3.83728 11.8841 3.74743C11.7073 3.53529 11.392 3.50662 11.1799 3.68341ZM4 10H6.7241L10 7.27008V16.7299L6.7241 14H4V10ZM14 8C16.2091 8 18 9.79086 18 12C18 14.2091 16.2091 16 14 16V14C15.1046 14 16 13.1046 16 12C16 10.8954 15.1046 10 14 10V8ZM14 4C18.4183 4 22 7.58172 22 12C22 16.4183 18.4183 20 14 20V18C17.3137 18 20 15.3137 20 12C20 8.68629 17.3137 6 14 6V4Z" />
 </svg>

react/features/base/premeeting/components/web/PreMeetingScreen.js

@@ -110,8 +110,12 @@ export default class PreMeetingScreen extends PureComponent<Props> {
                     )}
                     { this.props.children }
                     <div className = 'media-btn-container'>
-                        <AudioSettingsButton visible = { true } />
-                        <VideoSettingsButton visible = { true } />
+                        <div className = 'toolbox-content'>
+                            <div className = 'toolbox-content-items'>
+                                <AudioSettingsButton visible = { true } />
+                                <VideoSettingsButton visible = { true } />
+                            </div>
+                        </div>
                     </div>
                     { this.props.skipPrejoinButton }
                     { this.props.footer }

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<P: Props, S: *>
     extends AbstractButton<P, S> {
 
-    icon = IconMicrophone;
-    toggledIcon = IconMicDisabled;
+    icon = IconMicrophoneEmpty;
+    toggledIcon = IconMicrophoneEmptySlash;
 
     /**
      * Handles clicking / pressing the button, and toggles the audio mute state

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<P : Props, S : *>
     extends AbstractButton<P, S> {
 
-    icon = IconCamera;
-    toggledIcon = IconCameraDisabled;
+    icon = IconCameraEmpty;
+    toggledIcon = IconCameraEmptyDisabled;
 
     /**
      * Handles clicking / pressing the button, and toggles the video mute state

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<Props, State> {
             children,
             icon,
             iconDisabled,
+            iconTooltip,
             onIconClick,
             styles
         } = this.props;
@@ -124,13 +131,18 @@ export default class ToolboxButtonWithIcon extends Component<Props, State> {
                 className = 'settings-button-container'
                 styles = { styles }>
                 {children}
+
                 <div
                     onMouseEnter = { this._onMouseEnter }
                     onMouseLeave = { this._onMouseLeave }>
-                    <Icon
-                        { ...iconProps }
-                        size = { size }
-                        src = { icon } />
+                    <Tooltip
+                        content = { iconTooltip }
+                        position = 'top'>
+                        <Icon
+                            { ...iconProps }
+                            size = { size }
+                            src = { icon } />
+                    </Tooltip>
                 </div>
             </div>
         );

react/features/blur/components/VideoBlurButton.js

@@ -38,7 +38,6 @@ class VideoBlurButton extends AbstractButton<Props, *> {
     accessibilityLabel = 'toolbar.accessibilityLabel.videoblur';
     icon = IconBlurBackground;
     label = 'toolbar.startvideoblur';
-    tooltip = 'toolbar.startvideoblur';
     toggledLabel = 'toolbar.stopvideoblur';
 
     /**

react/features/security/components/security-dialog/SecurityDialogButton.js

@@ -31,7 +31,6 @@ class SecurityDialogButton extends AbstractButton<Props, *> {
     icon = IconSecurityOff;
     label = 'toolbar.security';
     toggledIcon = IconSecurityOn;
-    tooltip = 'toolbar.security';
 
     /**
      * Handles clicking / pressing the button, and opens / closes the appropriate dialog.

react/features/settings/components/web/SettingsButton.js

@@ -31,7 +31,6 @@ class SettingsButton extends AbstractButton<Props, *> {
     accessibilityLabel = 'toolbar.accessibilityLabel.Settings';
     icon = IconSettings;
     label = 'toolbar.Settings';
-    tooltip = 'toolbar.Settings';
 
     /**
      * Handles clicking / pressing the button, and opens the appropriate dialog.

react/features/settings/components/web/audio/AudioSettingsContent.js

@@ -254,9 +254,13 @@ class AudioSettingsContent extends Component<Props, State> {
                         this._renderMicrophoneEntry(data, i),
                     )}
                     { outputDevices.length > 0 && (
-                        <AudioSettingsHeader
-                            IconComponent = { IconVolumeEmpty }
-                            text = { t('settings.speakers') } />)
+                        <>
+                            <hr className = 'audio-preview-hr' />
+                            <AudioSettingsHeader
+                                IconComponent = { IconVolumeEmpty }
+                                text = { t('settings.speakers') } />
+                        </>
+                    )
                     }
                     {outputDevices.map((data, i) =>
                         this._renderSpeakerEntry(data, i),

react/features/settings/components/web/audio/AudioSettingsHeader.js

@@ -30,7 +30,7 @@ export default function AudioSettingsHeader({ IconComponent, text }: Props) {
         <div className = 'audio-preview-header'>
             <div className = 'audio-preview-header-icon'>
                 { <Icon
-                    size = { 24 }
+                    size = { 20 }
                     src = { IconComponent } />}
             </div>
             <div className = 'audio-preview-header-text'>{text}</div>

react/features/settings/components/web/video/VideoSettingsContent.js

@@ -161,7 +161,9 @@ class VideoSettingsContent extends Component<Props, State> {
 
         return (
             <div { ...props }>
-                <div className = 'video-preview-label'>{label}</div>
+                <div className = 'video-preview-label'>
+                    {label && <span className = 'video-preview-label-text'>{label}</span>}
+                </div>
                 <div className = 'video-preview-overlay' />
                 <Video
                     className = { videoClassName }

react/features/toolbox/components/MuteEveryoneButton.js

@@ -35,7 +35,6 @@ class MuteEveryoneButton extends AbstractButton<Props, *> {
     accessibilityLabel = 'toolbar.accessibilityLabel.muteEveryone';
     icon = IconMuteEveryone;
     label = 'toolbar.muteEveryone';
-    tooltip = 'toolbar.muteEveryone';
 
     /**
      * Handles clicking / pressing the button, and opens a confirmation dialog.

react/features/toolbox/components/web/AudioSettingsButton.js

@@ -3,6 +3,7 @@
 import React, { Component } from 'react';
 
 import { isMobileBrowser } from '../../../base/environment/utils';
+import { translate } from '../../../base/i18n';
 import { IconArrowDown } from '../../../base/icons';
 import JitsiMeetJS from '../../../base/lib-jitsi-meet/_';
 import { connect } from '../../../base/redux';
@@ -28,6 +29,11 @@ type Props = {
      */
     isDisabled: boolean,
 
+    /**
+     * Used for translation.
+     */
+    t: Function,
+
     /**
      * Flag controlling the visibility of the button.
      * AudioSettings popup is disabled on mobile browsers.
@@ -48,7 +54,7 @@ class AudioSettingsButton extends Component<Props> {
      * @inheritdoc
      */
     render() {
-        const { hasPermissions, isDisabled, onAudioOptionsClick, visible } = this.props;
+        const { hasPermissions, isDisabled, onAudioOptionsClick, t, visible } = this.props;
         const settingsDisabled = !hasPermissions
             || isDisabled
             || !JitsiMeetJS.mediaDevices.isMultipleAudioInputSupported();
@@ -58,6 +64,7 @@ class AudioSettingsButton extends Component<Props> {
                 <ToolboxButtonWithIcon
                     icon = { IconArrowDown }
                     iconDisabled = { settingsDisabled }
+                    iconTooltip = { t('toolbar.audioSettings') }
                     onIconClick = { onAudioOptionsClick }>
                     <AudioMuteButton />
                 </ToolboxButtonWithIcon>
@@ -86,7 +93,7 @@ const mapDispatchToProps = {
     onAudioOptionsClick: toggleAudioSettings
 };
 
-export default connect(
+export default translate(connect(
     mapStateToProps,
     mapDispatchToProps,
-)(AudioSettingsButton);
+)(AudioSettingsButton));

react/features/toolbox/components/web/OverflowMenuButton.js

@@ -5,7 +5,7 @@ import React, { Component } from 'react';
 
 import { createToolbarEvent, sendAnalytics } from '../../../analytics';
 import { translate } from '../../../base/i18n';
-import { IconMenuThumb } from '../../../base/icons';
+import { IconHorizontalPoints } from '../../../base/icons';
 import { connect } from '../../../base/redux';
 
 import Drawer from './Drawer';
@@ -116,7 +116,7 @@ class OverflowMenuButton extends Component<Props> {
             <ToolbarButton
                 accessibilityLabel =
                     { t('toolbar.accessibilityLabel.moreActions') }
-                icon = { IconMenuThumb }
+                icon = { IconHorizontalPoints }
                 onClick = { this._onToggleDialogVisibility }
                 toggled = { isOpen }
                 tooltip = { t('toolbar.moreActions') } />

react/features/toolbox/components/web/Toolbox.js

@@ -9,16 +9,15 @@ import {
     sendAnalytics
 } from '../../../analytics';
 import { openDialog, toggleDialog } from '../../../base/dialog';
-import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n';
 import {
     IconChat,
     IconCodeBlock,
+    IconDeviceDocument,
     IconExitFullScreen,
     IconFeedback,
     IconFullScreen,
     IconInviteMore,
-    IconOpenInNew,
     IconPresentation,
     IconRaisedHand,
     IconRec,
@@ -42,10 +41,7 @@ import { SharedDocumentButton } from '../../../etherpad';
 import { openFeedbackDialog } from '../../../feedback';
 import { beginAddPeople } from '../../../invite';
 import { openKeyboardShortcutsDialog } from '../../../keyboard-shortcuts';
-import {
-    LocalRecordingButton,
-    LocalRecordingInfoDialog
-} from '../../../local-recording';
+import { LocalRecordingInfoDialog } from '../../../local-recording';
 import {
     LiveStreamButton,
     RecordButton
@@ -76,12 +72,11 @@ import {
     setToolbarHovered,
     setToolboxVisible
 } from '../../actions';
-import { isToolboxVisible } from '../../functions';
+import { getToolbarAdditionalButtons, isToolboxVisible } from '../../functions';
 import DownloadButton from '../DownloadButton';
 import HangupButton from '../HangupButton';
 import HelpButton from '../HelpButton';
 import MuteEveryoneButton from '../MuteEveryoneButton';
-import MuteEveryonesVideoButton from '../MuteEveryonesVideoButton';
 
 import AudioSettingsButton from './AudioSettingsButton';
 import OverflowMenuButton from './OverflowMenuButton';
@@ -374,12 +369,23 @@ class Toolbox extends Component<Props, State> {
                 onFocus = { this._onTabIn }
                 onMouseOut = { this._onMouseOut }
                 onMouseOver = { this._onMouseOver }>
-                <div className = 'toolbox-background' />
                 { this._renderToolboxContent() }
             </div>
         );
     }
 
+    /**
+     * Closes the overflow menu if opened.
+     *
+     * @private
+     * @returns {void}
+     */
+    _closeOverflowMenuIfOpen() {
+        const { dispatch, _overflowMenuVisible } = this.props;
+
+        _overflowMenuVisible && dispatch(setOverflowMenuVisible(false));
+    }
+
     /**
      * Callback invoked to display {@code FeedbackDialog}.
      *
@@ -809,7 +815,7 @@ class Toolbox extends Component<Props, State> {
             {
                 enable: !this.props._chatOpen
             }));
-
+        this._closeOverflowMenuIfOpen();
         this._doToggleChat();
     }
 
@@ -828,7 +834,7 @@ class Toolbox extends Component<Props, State> {
                 {
                     enable: !this.props._fullScreen
                 }));
-
+        this._closeOverflowMenuIfOpen();
         this._doToggleFullScreen();
     }
 
@@ -883,6 +889,7 @@ class Toolbox extends Component<Props, State> {
             ACTION_SHORTCUT_TRIGGERED,
             { enable: !this.props._screensharing }));
 
+        this._closeOverflowMenuIfOpen();
         this._doToggleScreenshare();
     }
 
@@ -906,67 +913,16 @@ class Toolbox extends Component<Props, State> {
      *
      * @returns {boolean}
      */
-    _isDesktopSharingButtonVisible() {
+    _showDesktopSharingButton() {
         const {
             _desktopSharingEnabled,
             _desktopSharingDisabledTooltipKey
         } = this.props;
 
-        return _desktopSharingEnabled || _desktopSharingDisabledTooltipKey;
-    }
-
-    /**
-     * Renders a button for toggleing screen sharing.
-     *
-     * @private
-     * @param {boolean} isInOverflowMenu - True if the button is moved to the
-     * overflow menu.
-     * @returns {ReactElement|null}
-     */
-    _renderDesktopSharingButton(isInOverflowMenu = false) {
-        const {
-            _desktopSharingEnabled,
-            _desktopSharingDisabledTooltipKey,
-            _screensharing,
-            t
-        } = this.props;
-
-        if (!this._isDesktopSharingButtonVisible()) {
-            return null;
-        }
-
-        if (isInOverflowMenu) {
-            return (
-                <OverflowMenuItem
-                    accessibilityLabel
-                        = { t('toolbar.accessibilityLabel.shareYourScreen') }
-                    disabled = { _desktopSharingEnabled }
-                    icon = { IconShareDesktop }
-                    iconId = 'share-desktop'
-                    key = 'desktop'
-                    onClick = { this._onToolbarToggleScreenshare }
-                    text = {
-                        t(`toolbar.${
-                            _screensharing
-                                ? 'stopScreenSharing' : 'startScreenSharing'}`
-                        )
-                    } />
-            );
-        }
-
-        const tooltip = t(
-            _desktopSharingEnabled
-                ? 'dialog.shareYourScreen' : _desktopSharingDisabledTooltipKey);
-
         return (
-            <ToolbarButton
-                accessibilityLabel
-                    = { t('toolbar.accessibilityLabel.shareYourScreen') }
-                disabled = { !_desktopSharingEnabled }
-                icon = { IconShareDesktop }
-                onClick = { this._onToolbarToggleScreenshare }
-                toggled = { _screensharing }
-                tooltip = { tooltip } />
+            (_desktopSharingEnabled
+            || _desktopSharingDisabledTooltipKey)
+            && this._shouldShowButton('desktop')
         );
     }
 
@@ -992,9 +948,10 @@ class Toolbox extends Component<Props, State> {
      * Renders the list elements of the overflow menu.
      *
      * @private
-     * @returns {Array<ReactElement>}
+     * @param {Array<React$Element>} additionalButtons - Additional buttons to be displayed.
+     * @returns {Array<React$Element>}
      */
-    _renderOverflowMenuContent() {
+    _renderOverflowMenuContent(additionalButtons: Array<React$Element<any>>) {
         const {
             _feedbackConfigured,
             _fullScreen,
@@ -1002,11 +959,9 @@ class Toolbox extends Component<Props, State> {
             t
         } = this.props;
 
-        return [
-            this._isProfileVisible()
-                && <OverflowMenuProfileItem
-                    key = 'profile'
-                    onClick = { this._onToolbarToggleProfile } />,
+        const group1 = [
+            ...additionalButtons,
+
             this._shouldShowButton('videoquality')
                 && <OverflowMenuVideoQualityItem
                     key = 'videoquality'
@@ -1018,14 +973,36 @@ class Toolbox extends Component<Props, State> {
                     key = 'fullscreen'
                     onClick = { this._onToolbarToggleFullScreen }
                     text = { _fullScreen ? t('toolbar.exitFullScreen') : t('toolbar.enterFullScreen') } />,
-            this._shouldShowButton('livestreaming')
-                && <LiveStreamButton
-                    key = 'livestreaming'
-                    showLabel = { true } />,
+            this._shouldShowButton('security')
+            && <SecurityDialogButton
+                key = 'security'
+                showLabel = { true } />,
+            this._shouldShowButton('closedcaptions')
+            && <ClosedCaptionButton
+                key = 'closed-captions'
+                showLabel = { true } />,
             this._shouldShowButton('recording')
                 && <RecordButton
                     key = 'record'
                     showLabel = { true } />,
+            this._shouldShowButton('localrecording')
+                && <OverflowMenuItem
+                    accessibilityLabel = { t('toolbar.accessibilityLabel.localRecording') }
+                    icon = { IconRec }
+                    key = 'localrecording'
+                    onClick = { this._onToolbarOpenLocalRecordingInfoDialog }
+                    text = { t('localRecording.dialogTitle') } />,
+            this._shouldShowButton('mute-everyone')
+                && <MuteEveryoneButton
+                    key = 'mute-everyone'
+                    showLabel = { true } />,
+            this._shouldShowButton('livestreaming')
+                && <LiveStreamButton
+                    key = 'livestreaming'
+                    showLabel = { true } />
+        ];
+
+        const group2 = [
             this._shouldShowButton('sharedvideo')
                 && <SharedVideoButton
                     key = 'sharedvideo'
@@ -1039,25 +1016,49 @@ class Toolbox extends Component<Props, State> {
                     key = 'videobackgroundblur'
                     showLabel = { true }
                     visible = { !_screensharing && checkBlurSupport() } />,
-            this._shouldShowButton('settings')
-                && <SettingsButton
-                    key = 'settings'
-                    showLabel = { true } />,
-            this._shouldShowButton('mute-everyone')
-                && <MuteEveryoneButton
-                    key = 'mute-everyone'
-                    showLabel = { true } />,
-            this._shouldShowButton('mute-video-everyone')
-                && <MuteEveryonesVideoButton
-                    key = 'mute-video-everyone'
-                    showLabel = { true } />,
             this._shouldShowButton('stats')
                 && <OverflowMenuItem
                     accessibilityLabel = { t('toolbar.accessibilityLabel.speakerStats') }
                     icon = { IconPresentation }
                     key = 'stats'
                     onClick = { this._onToolbarOpenSpeakerStats }
-                    text = { t('toolbar.speakerStats') } />,
+                    text = { t('toolbar.speakerStats') } />
+        ];
+
+
+        return [
+            this._isProfileVisible()
+                && <OverflowMenuProfileItem
+                    key = 'profile'
+                    onClick = { this._onToolbarToggleProfile } />,
+            this._isProfileVisible()
+                && <hr
+                    className = 'overflow-menu-hr'
+                    key = 'hr1' />,
+
+            ...group1,
+            group1.some(Boolean)
+            && <hr
+                className = 'overflow-menu-hr'
+                key = 'hr2' />,
+
+            ...group2,
+            group2.some(Boolean)
+            && <hr
+                className = 'overflow-menu-hr'
+                key = 'hr3' />,
+
+            this._shouldShowButton('settings')
+                && <SettingsButton
+                    key = 'settings'
+                    showLabel = { true } />,
+            this._shouldShowButton('shortcuts')
+                && <OverflowMenuItem
+                    accessibilityLabel = { t('toolbar.accessibilityLabel.shortcuts') }
+                    icon = { IconDeviceDocument }
+                    key = 'shortcuts'
+                    onClick = { this._onToolbarOpenKeyboardShortcuts }
+                    text = { t('toolbar.shortcuts') } />,
             this._isEmbedMeetingVisible()
                 && <OverflowMenuItem
                     accessibilityLabel = { t('toolbar.accessibilityLabel.embedMeeting') }
@@ -1073,13 +1074,6 @@ class Toolbox extends Component<Props, State> {
                     key = 'feedback'
                     onClick = { this._onToolbarOpenFeedback }
                     text = { t('toolbar.feedback') } />,
-            this._shouldShowButton('shortcuts')
-                && <OverflowMenuItem
-                    accessibilityLabel = { t('toolbar.accessibilityLabel.shortcuts') }
-                    icon = { IconOpenInNew }
-                    key = 'shortcuts'
-                    onClick = { this._onToolbarOpenKeyboardShortcuts }
-                    text = { t('toolbar.shortcuts') } />,
             this._shouldShowButton('download')
                 && <DownloadButton
                     key = 'download'
@@ -1092,67 +1086,104 @@ class Toolbox extends Component<Props, State> {
     }
 
     /**
-     * Renders a list of buttons that are moved to the overflow menu.
+     * Returns the buttons to be displayed in main or the oveflow menu.
      *
-     * @private
-     * @param {Array<string>} movedButtons - The names of the buttons to be
-     * moved.
-     * @returns {Array<ReactElement>}
+     * @param {Set} buttons - A set containing the buttons to be displayed
+     * in the toolbar beside the main audio/video & hanugup.
+     * @returns {Object}
      */
-    _renderMovedButtons(movedButtons) {
+    _getAdditionalButtons(buttons) {
         const {
             _chatOpen,
+            _desktopSharingEnabled,
+            _desktopSharingDisabledTooltipKey,
             _raisedHand,
+            _screensharing,
             t
         } = this.props;
 
-        return movedButtons.map(buttonName => {
-            switch (buttonName) {
-            case 'desktop':
-                return this._renderDesktopSharingButton(true);
-            case 'raisehand':
-                return (
-                    <OverflowMenuItem
-                        accessibilityLabel =
-                            { t('toolbar.accessibilityLabel.raiseHand') }
-                        icon = { IconRaisedHand }
-                        key = 'raisedHand'
-                        onClick = { this._onToolbarToggleRaiseHand }
-                        text = {
-                            t(`toolbar.${
-                                _raisedHand
-                                    ? 'lowerYourHand' : 'raiseYourHand'}`
-                            )
-                        } />
-                );
-            case 'chat':
-                return (
-                    <OverflowMenuItem
-                        accessibilityLabel =
-                            { t('toolbar.accessibilityLabel.chat') }
+        const overflowMenuAdditionalButtons = [];
+        const mainMenuAdditionalButtons = [];
+
+        if (this._showDesktopSharingButton()) {
+            buttons.has('desktop')
+                ? mainMenuAdditionalButtons.push(<ToolbarButton
+                    accessibilityLabel = { t('toolbar.accessibilityLabel.shareYourScreen') }
+                    disabled = { !_desktopSharingEnabled }
+                    icon = { IconShareDesktop }
+                    key = 'desktop'
+                    onClick = { this._onToolbarToggleScreenshare }
+                    toggled = { _screensharing }
+                    tooltip = { t(_desktopSharingEnabled
+                        ? 'dialog.shareYourScreen' : _desktopSharingDisabledTooltipKey) } />)
+                : overflowMenuAdditionalButtons.push(<OverflowMenuItem
+                    accessibilityLabel = { t('toolbar.accessibilityLabel.shareYourScreen') }
+                    icon = { IconShareDesktop }
+                    iconId = 'share-desktop'
+                    key = 'desktop'
+                    onClick = { this._onToolbarToggleScreenshare }
+                    text = { t(`toolbar.${_screensharing ? 'stopScreenSharing' : 'startScreenSharing'}`) } />);
+        }
+
+        if (this._shouldShowButton('chat')) {
+            buttons.has('chat')
+                ? mainMenuAdditionalButtons.push(<div className = 'toolbar-button-with-badge'>
+                    <ToolbarButton
+                        accessibilityLabel = { t('toolbar.accessibilityLabel.chat') }
                         icon = { IconChat }
                         key = 'chat'
                         onClick = { this._onToolbarToggleChat }
-                        text = {
-                            t(`toolbar.${
-                                _chatOpen ? 'closeChat' : 'openChat'}`
-                            )
-                        } />
-                );
-            case 'closedcaptions':
-                return (
-                    <ClosedCaptionButton
-                        key = 'closed-captions'
-                        showLabel = { true } />
-                );
-            case 'security':
-                return (
-                    <SecurityDialogButton
-                        key = 'security'
-                        showLabel = { true } />
-                );
-            case 'invite':
-                return (
+                        toggled = { _chatOpen }
+                        tooltip = { t('toolbar.chat') } />
+                    <ChatCounter />
+                </div>) : overflowMenuAdditionalButtons.push(<OverflowMenuItem
+                    accessibilityLabel = { t('toolbar.accessibilityLabel.chat') }
+                    icon = { IconChat }
+                    key = 'chat'
+                    onClick = { this._onToolbarToggleChat }
+                    text = { t(`toolbar.${_chatOpen ? 'closeChat' : 'openChat'}`) } />);
+        }
+
+        if (this._shouldShowButton('raisehand')) {
+            buttons.has('raisehand')
+                ? mainMenuAdditionalButtons.push(<ToolbarButton
+                    accessibilityLabel = { t('toolbar.accessibilityLabel.raiseHand') }
+                    icon = { IconRaisedHand }
+                    key = 'raisehand'
+                    onClick = { this._onToolbarToggleRaiseHand }
+                    toggled = { _raisedHand }
+                    tooltip = { t(`toolbar.${_raisedHand ? 'lowerYourHand' : 'raiseYourHand'}`) } />)
+                : overflowMenuAdditionalButtons.push(<OverflowMenuItem
+                    accessibilityLabel = { t('toolbar.accessibilityLabel.raiseHand') }
+                    icon = { IconRaisedHand }
+                    key = 'raisehand'
+                    onClick = { this._onToolbarToggleRaiseHand }
+                    text = { t(`toolbar.${_raisedHand ? 'lowerYourHand' : 'raiseYourHand'}`) } />);
+        }
+
+        if (this._shouldShowButton('tileview')) {
+            buttons.has('tileview')
+                ? mainMenuAdditionalButtons.push(
+                    <TileViewButton
+                        key = 'tileview'
+                        showLabel = { false }
+                        visible = { true } />)
+                : overflowMenuAdditionalButtons.push(
+                    <TileViewButton
+                        key = 'tileview'
+                        showLabel = { true } />);
+        }
+
+        if (this._shouldShowButton('invite')) {
+            buttons.has('invite')
+                ? mainMenuAdditionalButtons.push(
+                    <ToolbarButton
+                        accessibilityLabel = { t('toolbar.accessibilityLabel.invite') }
+                        icon = { IconInviteMore }
+                        key = 'invite'
+                        onClick = { this._onToolbarOpenInvite }
+                        tooltip = { t('toolbar.invite') } />)
+                : overflowMenuAdditionalButtons.push(
                     <OverflowMenuItem
                         accessibilityLabel = { t('toolbar.accessibilityLabel.invite') }
                         icon = { IconInviteMore }
@@ -1160,21 +1191,12 @@ class Toolbox extends Component<Props, State> {
                         onClick = { this._onToolbarOpenInvite }
                         text = { t('toolbar.invite') } />
                 );
-            case 'tileview':
-                return <TileViewButton showLabel = { true } />;
-            case 'localrecording':
-                return (
-                    <OverflowMenuItem
-                        accessibilityLabel = { t('toolbar.accessibilityLabel.localRecording') }
-                        icon = { IconRec }
-                        key = 'localrecording'
-                        onClick = { this._onToolbarOpenLocalRecordingInfoDialog }
-                        text = { t('localRecording.dialogTitle') } />
-                );
-            default:
-                return null;
-            }
-        });
+        }
+
+        return {
+            mainMenuAdditionalButtons,
+            overflowMenuAdditionalButtons
+        };
     }
 
     /**
@@ -1206,170 +1228,45 @@ class Toolbox extends Component<Props, State> {
     /**
      * Renders the toolbox content.
      *
-     * @returns {Array<ReactElement>}
+     * @returns {ReactElement}
      */
     _renderToolboxContent() {
         const {
-            _chatOpen,
             _overflowMenuVisible,
-            _raisedHand,
             t
         } = this.props;
-        const overflowMenuContent = this._renderOverflowMenuContent();
-        const overflowHasItems = overflowMenuContent.some(item => Boolean(item));
-        const toolbarAccLabel = 'toolbar.accessibilityLabel.moreActionsMenu';
-        const buttonsLeft = [];
-        const buttonsRight = [];
-
-        const smallThreshold = 700;
-        const verySmallThreshold = 500;
-
-        let minSpaceBetweenButtons = 48;
-        let widthPlusPaddingOfButton = 56;
-
-        if (this.state.windowWidth <= verySmallThreshold && !isMobileBrowser()) {
-            minSpaceBetweenButtons = 26;
-            widthPlusPaddingOfButton = 28;
-        } else if (this.state.windowWidth <= smallThreshold && !isMobileBrowser()) {
-            minSpaceBetweenButtons = 36;
-            widthPlusPaddingOfButton = 40;
-        }
-
-        const maxNumberOfButtonsPerGroup = Math.floor(
-            (
-                this.state.windowWidth
-                    - 168 // the width of the central group by design
-                    - minSpaceBetweenButtons // the minimum space between the button groups
-            )
-            / widthPlusPaddingOfButton // the width + padding of a button
-            / 2 // divide by the number of groups(left and right group)
-        );
-
-        if (this._shouldShowButton('chat')) {
-            buttonsLeft.push('chat');
-        }
-        if (this._shouldShowButton('desktop')
-                && this._isDesktopSharingButtonVisible()) {
-            buttonsLeft.push('desktop');
-        }
-        if (this._shouldShowButton('raisehand')) {
-            buttonsLeft.push('raisehand');
-        }
-        if (this._shouldShowButton('closedcaptions')) {
-            buttonsLeft.push('closedcaptions');
-        }
-        if (overflowHasItems) {
-            buttonsRight.push('overflowmenu');
-        }
-        if (this._shouldShowButton('invite')) {
-            buttonsRight.push('invite');
-        }
-        if (this._shouldShowButton('security') || this._shouldShowButton('info')) {
-            buttonsRight.push('security');
-        }
 
-        if (this._shouldShowButton('tileview')) {
-            buttonsRight.push('tileview');
-        }
-        if (this._shouldShowButton('localrecording')) {
-            buttonsRight.push('localrecording');
-        }
-
-        const movedButtons = [];
-
-        if (buttonsLeft.length > maxNumberOfButtonsPerGroup) {
-            movedButtons.push(...buttonsLeft.splice(
-                maxNumberOfButtonsPerGroup,
-                buttonsLeft.length - maxNumberOfButtonsPerGroup));
-            if (buttonsRight.indexOf('overflowmenu') === -1) {
-                buttonsRight.unshift('overflowmenu');
-            }
-        }
-
-        if (buttonsRight.length > maxNumberOfButtonsPerGroup) {
-            if (buttonsRight.indexOf('overflowmenu') === -1) {
-                buttonsRight.unshift('overflowmenu');
-            }
-
-            let numberOfButtons = maxNumberOfButtonsPerGroup;
-
-            // make sure the more button will be displayed when we move buttons.
-            if (numberOfButtons === 0) {
-                numberOfButtons++;
-            }
-
-            movedButtons.push(...buttonsRight.splice(
-                numberOfButtons,
-                buttonsRight.length - numberOfButtons));
+        const buttonSet = getToolbarAdditionalButtons(this.state.windowWidth);
+        const toolbarAccLabel = 'toolbar.accessibilityLabel.moreActionsMenu';
+        const showOverflowMenuButton = buttonSet.has('overflow');
+        let overflowMenuAdditionalButtons = [];
+        let mainMenuAdditionalButtons = [];
 
+        if (showOverflowMenuButton) {
+            ({ overflowMenuAdditionalButtons, mainMenuAdditionalButtons } = this._getAdditionalButtons(buttonSet));
         }
 
-        overflowMenuContent.splice(
-            1, 0, ...this._renderMovedButtons(movedButtons));
-
         return (
             <div className = 'toolbox-content'>
-                <div className = 'button-group-left'>
-                    { buttonsLeft.indexOf('chat') !== -1
-                        && <div className = 'toolbar-button-with-badge'>
-                            <ToolbarButton
-                                accessibilityLabel = { t('toolbar.accessibilityLabel.chat') }
-                                icon = { IconChat }
-                                onClick = { this._onToolbarToggleChat }
-                                toggled = { _chatOpen }
-                                tooltip = { t('toolbar.chat') } />
-                            <ChatCounter />
-                        </div> }
-                    { buttonsLeft.indexOf('desktop') !== -1
-                        && this._renderDesktopSharingButton() }
-                    { buttonsLeft.indexOf('raisehand') !== -1
-                        && <ToolbarButton
-                            accessibilityLabel = { t('toolbar.accessibilityLabel.raiseHand') }
-                            icon = { IconRaisedHand }
-                            onClick = { this._onToolbarToggleRaiseHand }
-                            toggled = { _raisedHand }
-                            tooltip = { t('toolbar.raiseHand') } /> }
-                    {
-                        buttonsLeft.indexOf('closedcaptions') !== -1
-                            && <ClosedCaptionButton />
-                    }
-                </div>
-                <div className = 'button-group-center'>
+                <div className = 'toolbox-content-items'>
                     { this._renderAudioButton() }
+                    { this._renderVideoButton() }
+                    { mainMenuAdditionalButtons }
+                    { showOverflowMenuButton && <OverflowMenuButton
+                        isOpen = { _overflowMenuVisible }
+                        onVisibilityChange = { this._onSetOverflowVisible }>
+                        <ul
+                            aria-label = { t(toolbarAccLabel) }
+                            className = 'overflow-menu'>
+                            { this._renderOverflowMenuContent(overflowMenuAdditionalButtons) }
+                        </ul>
+                    </OverflowMenuButton>}
                     <HangupButton
+                        customClass = 'hangup-button'
                         visible = { this._shouldShowButton('hangup') } />
-                    { this._renderVideoButton() }
-                </div>
-                <div className = 'button-group-right'>
-                    { buttonsRight.indexOf('localrecording') !== -1
-                        && <LocalRecordingButton
-                            onClick = {
-                                this._onToolbarOpenLocalRecordingInfoDialog
-                            } />
-                    }
-                    { buttonsRight.indexOf('tileview') !== -1
-                        && <TileViewButton /> }
-                    { buttonsRight.indexOf('invite') !== -1
-                        && <ToolbarButton
-                            accessibilityLabel =
-                                { t('toolbar.accessibilityLabel.invite') }
-                            icon = { IconInviteMore }
-                            onClick = { this._onToolbarOpenInvite }
-                            tooltip = { t('toolbar.invite') } /> }
-                    { buttonsRight.indexOf('security') !== -1
-                        && <SecurityDialogButton customClass = 'security-toolbar-button' /> }
-                    { buttonsRight.indexOf('overflowmenu') !== -1
-                        && <OverflowMenuButton
-                            isOpen = { _overflowMenuVisible }
-                            onVisibilityChange = { this._onSetOverflowVisible }>
-                            <ul
-                                aria-label = { t(toolbarAccLabel) }
-                                className = 'overflow-menu'>
-                                { overflowMenuContent }
-                            </ul>
-                        </OverflowMenuButton> }
                 </div>
-            </div>);
+            </div>
+        );
     }
 
     _shouldShowButton: (string) => boolean;

react/features/toolbox/components/web/VideoSettingsButton.js

@@ -3,6 +3,7 @@
 import React, { Component } from 'react';
 
 import { isMobileBrowser } from '../../../base/environment/utils';
+import { translate } from '../../../base/i18n';
 import { IconArrowDown } from '../../../base/icons';
 import { connect } from '../../../base/redux';
 import { ToolboxButtonWithIcon } from '../../../base/toolbox/components';
@@ -39,7 +40,12 @@ type Props = {
      * as mobile devices do not support capture of more than one
      * camera at a time.
      */
-    visible: boolean
+    visible: boolean,
+
+    /**
+     * Used for translation
+     */
+    t: Function
 };
 
 /**
@@ -66,13 +72,14 @@ class VideoSettingsButton extends Component<Props> {
      * @inheritdoc
      */
     render() {
-        const { onVideoOptionsClick, visible } = this.props;
+        const { onVideoOptionsClick, t, visible } = this.props;
 
         return visible ? (
             <VideoSettingsPopup>
                 <ToolboxButtonWithIcon
                     icon = { IconArrowDown }
                     iconDisabled = { this._isIconDisabled() }
+                    iconTooltip = { t('toolbar.videoSettings') }
                     onIconClick = { onVideoOptionsClick }>
                     <VideoMuteButton />
                 </ToolboxButtonWithIcon>
@@ -102,7 +109,7 @@ const mapDispatchToProps = {
     onVideoOptionsClick: toggleVideoSettings
 };
 
-export default connect(
+export default translate(connect(
     mapStateToProps,
     mapDispatchToProps,
-)(VideoSettingsButton);
+)(VideoSettingsButton));

react/features/toolbox/functions.web.js

@@ -4,6 +4,39 @@ import { hasAvailableDevices } from '../base/devices';
 
 declare var interfaceConfig: Object;
 
+const WIDTH = {
+    MEDIUM: 500,
+    SMALL: 390,
+    VERY_SMALL: 332,
+    NARROW: 224
+};
+
+/**
+ * Returns a set of button names to be displayed in the toolbox, based on the screen width.
+ *
+ * @param {number} width - The width of the screen.
+ * @returns {Set} The button set.
+ */
+export function getToolbarAdditionalButtons(width: number): Set<string> {
+    if (width <= WIDTH.MEDIUM) {
+        if (width <= WIDTH.SMALL) {
+            if (width <= WIDTH.VERY_SMALL) {
+                if (width <= WIDTH.NARROW) {
+                    return new Set();
+                }
+
+                return new Set([ 'overflow' ]);
+            }
+
+            return new Set([ 'chat', 'tileview', 'overflow' ]);
+        }
+
+        return new Set([ 'chat', 'raisehand', 'tileview', 'overflow' ]);
+    }
+
+    return new Set([ 'desktop', 'chat', 'raisehand', 'tileview', 'invite', 'overflow' ]);
+}
+
 /**
  * Helper for getting the height of the toolbox.
  *