modal suggestion list styling

src/common/components/suggestion-list/_index.scss

@@ -102,4 +102,70 @@
       }
     }
   }
+
+  .modal-suggestion-list {
+    display: block;
+    left: 0;
+    top: 100%;
+    width: 100%;
+    box-shadow: $box-shadow;
+    z-index: 100;
+    border-radius: $border-radius;
+    min-width: 200px;
+
+    @include themify(day) {
+      background: $white;
+    }
+
+    @include themify(night) {
+      background: lighten($dark-six, 5);
+    }
+
+    .list-header {
+      padding: 8px 20px;
+      font-weight: 500;
+      background: $dark-sky-blue;
+      color: $white;
+      border-top-left-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+    }
+
+    .list-body {
+      max-height: 200px;
+      overflow-x: auto;
+
+      .list-item {
+        padding: 8px 20px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+
+        &:last-child {
+          border-bottom-left-radius: $border-radius;
+          border-bottom-right-radius: $border-radius;
+        }
+
+        @include themify(day) {
+          color: $warm-grey;
+
+          &:hover,
+          &:focus {
+            background: lighten($dark-sky-blue, 10);
+            color: $white;
+          }
+        }
+
+        @include themify(night) {
+          color: $silver;
+
+          &:hover,
+          &:focus {
+            background: $metallic-blue;
+            color: $white;
+          }
+        }
+      }
+    }
+  }
 }

src/common/components/suggestion-list/index.tsx

@@ -207,7 +207,7 @@ export default class SuggestionList extends Component<Props> {
           <ClickAwayListener onClickAway={() => this.setState({ showList: false })}>
             {showList && modeItems && modeItems?.length > 0 ? modeItemsUI : <></>}
             {showList && !modeItems && items.length > 0 ? (
-              <div className="suggestion-list">
+              <div className="modal-suggestion-list">
                 {header && <div className="list-header">{header}</div>}
                 <div className="list-body">
                   {items.map((x, i) => {