Various fixes

- Fix user status dialog
  - Add label where missing
  - Move emoji picker inside input field (similar to talk)
  - Fix selecting an emoji
- Fix multiselect
- Fix button with confirmation action
- Fix some other unrelated dark theme issues
- Fix select2 focus
- Run npm lint:fix

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

1 files changed, 37 insertions, 15 deletions

diff --git a/core/css/server.css b/core/css/server.css
index 7c238be5f8a..47515ea332c 100644
--- a/core/css/server.css
+++ b/core/css/server.css
@@ -980,11 +980,14 @@ span.ui-icon {
 #header .header-right > div#contactsmenu > .menu .contact .top-action:not(button), #header .header-right > div#contactsmenu > .menu .contact .second-action:not(button), #header .header-right > div#contactsmenu > .menu .contact .other-actions:not(button) {
   padding: 14px;
 }
+#header .header-right > div#contactsmenu > .menu .contact .top-action img, #header .header-right > div#contactsmenu > .menu .contact .second-action img, #header .header-right > div#contactsmenu > .menu .contact .other-actions img {
+  filter: var(--background-invert-if-dark);
+}
 #header .header-right > div#contactsmenu > .menu .contact .top-action:hover, #header .header-right > div#contactsmenu > .menu .contact .top-action:active, #header .header-right > div#contactsmenu > .menu .contact .top-action:focus, #header .header-right > div#contactsmenu > .menu .contact .second-action:hover, #header .header-right > div#contactsmenu > .menu .contact .second-action:active, #header .header-right > div#contactsmenu > .menu .contact .second-action:focus, #header .header-right > div#contactsmenu > .menu .contact .other-actions:hover, #header .header-right > div#contactsmenu > .menu .contact .other-actions:active, #header .header-right > div#contactsmenu > .menu .contact .other-actions:focus {
   opacity: 1;
 }
 #header .header-right > div#contactsmenu > .menu .contact button.other-actions {
-  margin: 5px;
+  width: 44px;
 }
 #header .header-right > div#contactsmenu > .menu .contact button.other-actions:focus {
   border-color: transparent;
@@ -1245,6 +1248,10 @@ input, textarea, select, button, div[contenteditable=true], div[contenteditable=
   font-family: var(--font-face) !important;
 }
 
+.select2-container.select2-drop-above .select2-choice {
+  background-image: unset !important;
+}
+
 /* Simple selector to allow easy overriding */
 select,
 button:not(.button-vue),
@@ -1275,6 +1282,7 @@ button:not(.button-vue), .button,
   background-color: var(--color-main-background);
   color: var(--color-main-text);
   border: 1px solid var(--color-border-dark);
+  font-size: var(--default-font-size);
   outline: none;
   border-radius: var(--border-radius);
   cursor: text;
@@ -1487,7 +1495,7 @@ input[type=reset]:disabled {
   cursor: default;
 }
 
-input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input),
+input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(.select2-input):not(.action-input__input),
 select,
 div[contenteditable=true],
 textarea {
@@ -1503,7 +1511,7 @@ textarea {
   text-overflow: ellipsis;
   cursor: pointer;
 }
-input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(:disabled):hover, input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(:disabled):focus, input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(:disabled):active,
+input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(.select2-input):not(.action-input__input):not(:disabled):hover, input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(.select2-input):not(.action-input__input):not(:disabled):focus, input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(.select2-input):not(.action-input__input):not(:disabled):active,
 select:not(:disabled):hover,
 select:not(:disabled):focus,
 select:not(:disabled):active,
@@ -1515,13 +1523,18 @@ textarea:not(:disabled):focus,
 textarea:not(:disabled):active {
   border-color: var(--color-primary-element);
 }
-input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(:disabled):focus,
+input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(.select2-input):not(.action-input__input):not(:disabled):focus,
 select:not(:disabled):focus,
 div[contenteditable=true]:not(:disabled):focus,
 textarea:not(:disabled):focus {
   cursor: text;
 }
 
+.multiselect__input, .select2-input {
+  background-color: var(--color-main-background);
+  color: var(--color-main-text);
+}
+
 textarea, div[contenteditable=true] {
   padding: 12px;
   height: auto;
@@ -1582,9 +1595,10 @@ input[type=text], input[type=password], input[type=email] {
   /* only show confirm borders if input is not focused */
 }
 input[type=text] + .icon-confirm, input[type=password] + .icon-confirm, input[type=email] + .icon-confirm {
-  margin-left: -8px !important;
+  margin-left: -13px !important;
   border-left-color: transparent !important;
-  border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
+  border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0 !important;
+  border-width: 2px;
   background-clip: padding-box;
   /* Avoid background under border */
   background-color: var(--color-main-background) !important;
@@ -1808,11 +1822,14 @@ div.select2-container-multi .select2-choices, div.select2-container-multi.select
   background: var(--color-main-background);
   color: var(--color-text-lighter) !important;
   box-sizing: content-box;
-  border-radius: var(--border-radius);
-  border: 1px solid var(--color-border-dark);
+  border-radius: var(--border-radius-large);
+  border: 2px solid var(--color-border-dark);
   margin: 0;
-  padding: 2px 0;
-  min-height: auto;
+  padding: 6px;
+  min-height: 44px;
+}
+div.select2-container-multi .select2-choices:focus-within, div.select2-container-multi.select2-container-active .select2-choices:focus-within {
+  border-color: var(--color-primary);
 }
 div.select2-container-multi .select2-choices .select2-search-choice, div.select2-container-multi.select2-container-active .select2-choices .select2-search-choice {
   line-height: 20px;
@@ -1829,6 +1846,9 @@ div.select2-container-multi .select2-choices .select2-search-choice .select2-sea
 }
 div.select2-container-multi .select2-choices .select2-search-field input, div.select2-container-multi.select2-container-active .select2-choices .select2-search-field input {
   line-height: 20px;
+  min-height: 28px;
+  max-height: 28px;
+  color: var(--color-main-text);
 }
 div.select2-container-multi .select2-choices .select2-search-field input.select2-active, div.select2-container-multi.select2-container-active .select2-choices .select2-search-field input.select2-active {
   background: none !important;
@@ -1851,12 +1871,14 @@ div.select2-container a.select2-choice {
   background: var(--color-main-background);
   color: var(--color-text-lighter) !important;
   box-sizing: content-box;
-  border-radius: var(--border-radius);
-  border: 1px solid var(--color-border-dark);
+  border-radius: var(--border-radius-large);
+  border: 2px solid var(--color-border-dark);
   margin: 0;
-  padding: 2px 0;
-  padding-left: 6px;
-  min-height: auto;
+  padding: 6px 12px;
+  min-height: 44px;
+}
+div.select2-container a.select2-choice:focus-within {
+  border-color: var(--color-primary);
 }
 div.select2-container a.select2-choice .select2-search-choice {
   line-height: 20px;