feat: make the hangup button first

css/_mini_toolbox.scss

@@ -17,15 +17,6 @@
             cursor: initial;
         }
     }
-
-    .toolbox-button {
-        &:nth-child(2) {
-            svg {
-                fill: $hangupColor;
-            }
-        }
-    }
-
 }
 
 .always-on-top-toolbox {
@@ -43,6 +34,12 @@
             }
         }
 
+        &:nth-child(2) {
+            svg {
+                fill: $hangupColor;
+            }
+        }
+
         &:last-child {
             .toolbox-icon {
                 border-top-right-radius: 3px;
@@ -56,6 +53,12 @@
     flex-direction: column;
 
     .toolbox-button {
+        &:nth-child(1) {
+            svg {
+                fill: $hangupColor;
+            }
+        }
+
         .toolbox-icon {
             border-radius: 3px;
         }

react/features/filmstrip/components/web/Toolbar.js

@@ -40,12 +40,12 @@ class Toolbar extends Component<Props> {
             <div
                 className = 'filmstrip-toolbox'
                 id = 'new-toolbox'>
-                <AudioMuteButton
-                    tooltipPosition = 'left'
-                    visible = { this._shouldShowButton('microphone') } />
                 <HangupButton
                     tooltipPosition = 'left'
                     visible = { this._shouldShowButton('hangup') } />
+                <AudioMuteButton
+                    tooltipPosition = 'left'
+                    visible = { this._shouldShowButton('microphone') } />
                 <VideoMuteButton
                     tooltipPosition = 'left'
                     visible = { this._shouldShowButton('camera') } />