PLT-3077 Add group messaging (#5489)

* Implement server changes for group messaging

* Majority of client-side implementation

* Some server updates

* Added new React multiselect component

* Fix style issues

* Add custom renderer for options

* Fix model test

* Update ENTER functionality for multiselect control

* Remove buttons from multiselect UI control

* Updating group messaging UI (#5524)

* Move filter controls up a component level

* Scroll with arrow keys

* Updating mobile layout for multiselect (#5534)

* Fix race condition when backspacing quickly

* Hidden or new GMs show up for regular messages

* Add overriding of number remaining text

* Add UI filtering for team if config setting set

* Add icon to channel switcher and class prop to status icon

* Minor updates per feedback

* Improving group messaging UI (#5563)

* UX changes per feedback

* Update email for group messages

* UI fixes for group messaging (#5587)

* Fix missing localization string

* Add maximum users message when adding members to GM

* Fix input clearing on Android

* Updating group messaging UI (#5603)

* Updating UI for group messaging (#5604)

1 files changed, 59 insertions, 0 deletions

diff --git a/webapp/sass/components/_multi-select.scss b/webapp/sass/components/_multi-select.scss
new file mode 100644
index 000000000..a33116aa4
--- /dev/null
+++ b/webapp/sass/components/_multi-select.scss
@@ -0,0 +1,59 @@
+@charset 'UTF-8';
+
+.multi-select__container {
+    display: table;
+    padding: 0 15px;
+    width: 100%;
+
+    .Select {
+        display: table-cell;
+        padding-right: 15px;
+        vertical-align: top;
+        width: 100%;
+    }
+
+    .btn {
+        display: table-cell;
+        height: 36px;
+        min-width: 60px;
+        vertical-align: top;
+    }
+
+    .Select-control {
+        border-radius: 1px;
+    }
+
+    .Select-value {
+        white-space: nowrap;
+    }
+
+    .Select-value-label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+.multi-select__help {
+    padding: 10px 15px 0;
+
+    > div:not(.multi-select__note),
+    > span {
+        @include opacity(.6);
+    }
+}
+
+.multi-select__note {
+    @include border-radius(3px);
+    display: table;
+    margin-top: 5px;
+    padding: 8px 13px;
+    width: 100%;
+
+    > div {
+        display: table-cell;
+
+        &.note__icon {
+            width: 15px;
+        }
+    }
+}