3 files changed, 30 insertions, 2 deletions

diff --git a/src/features/quickSwitch/Component.js b/src/features/quickSwitch/Component.js
index ddbdbe304..7b76553b2 100644
--- a/src/features/quickSwitch/Component.js
+++ b/src/features/quickSwitch/Component.js
@@ -32,7 +32,9 @@ const styles = theme => ({
   },
   services: {
     width: '100%',
+    maxHeight: '50vh',
     marginTop: 30,
+    overflow: 'scroll',
   },
   service: {
     background: theme.styleTypes.primary.contrast,
@@ -89,6 +91,8 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
 
   inputRef = createRef();
 
+  serviceElements = {};
+
   constructor(props) {
     super(props);
 
@@ -150,6 +154,13 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
         newSelected = 0;
       }
 
+      // Make sure new selection is visible
+      const serviceElement = this.serviceElements[newSelected];
+      if (serviceElement) {
+        serviceElement.scrollIntoViewIfNeeded(false);
+      }
+
+
       return {
         selected: newSelected,
       };
@@ -244,7 +255,7 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
     return (
       <Modal
         isOpen={isModalVisible}
-        className={classes.modal}
+        className={`${classes.modal} quick-switch`}
         shouldCloseOnOverlayClick
         close={this.close.bind(this)}
       >
@@ -260,9 +271,12 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
         <div className={classes.services}>
           { services.map((service, index) => (
             <div
-              className={`${classes.service} ${this.state.selected === index ? classes.activeService : ''}`}
+              className={`${classes.service} ${this.state.selected === index ? `${classes.activeService} active` : ''} service`}
               onClick={() => openService(index)}
               key={service.id}
+              ref={(el) => {
+                this.serviceElements[index] = el;
+              }}
             >
               <img
                 src={service.icon}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 784a04d3d..1e9ed5714 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -30,6 +30,7 @@ $mdi-font-path: '../node_modules/mdi/fonts';
 @import './content-tabs.scss';
 @import './invite.scss';
 @import './title-bar.scss';
+@import './quick-switch.scss';
 
 // form
 @import './input.scss';
diff --git a/src/styles/quick-switch.scss b/src/styles/quick-switch.scss
new file mode 100644
index 000000000..356123c4c
--- /dev/null
+++ b/src/styles/quick-switch.scss
@@ -0,0 +1,13 @@
+.theme__dark .quick-switch {
+  background: $dark-theme-gray-darkest;
+
+  .service {
+    background: $dark-theme-gray-dark;
+    color: $dark-theme-gray-lightest;
+    border: inherit;
+  }
+
+  .active {
+    background: $theme-brand-primary;
+  }
+}
\ No newline at end of file