Move converse-dropdown styles in separate file

And add some tweaks

src/plugins/chatview/styles/chatbox.scss

@@ -191,15 +191,6 @@
             }
         }
 
-        .dropdown { /* status dropdown styles */
-            background-color: var(--light-background-color);
-            dd {
-                margin: 0;
-                padding: 0;
-                position: relative;
-            }
-        }
-
         .dragresize {
             background: transparent;
             border: 0;

src/plugins/chatview/styles/index.scss

@@ -69,12 +69,6 @@
             .chatbox-title--no-desc {
                 padding: 0.5rem 0.75rem;
             }
-            converse-dropdown {
-                .btn--standalone {
-                    padding: 0 0.2em;
-                    margin: 0 0 0 0.5em;
-                }
-            }
         }
     }
 }

src/shared/components/dropdown.js

@@ -5,6 +5,8 @@ import { html } from 'lit';
 import { until } from 'lit/directives/until.js';
 import DropdownBase from 'shared/components/dropdownbase.js';
 
+import './styles/dropdown.scss';
+
 
 export default class Dropdown extends DropdownBase {
 

src/shared/components/styles/dropdown.scss

@@ -0,0 +1,40 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+
+.conversejs {
+    @import "bootstrap/scss/dropdown";
+    converse-dropdown {
+	&.dropup {
+	    &.dropup--left {
+		.dropdown-menu {
+		    right: 100%;
+		    left: auto;
+		}
+	    }
+	}
+
+	.btn--standalone {
+	    padding: 0 0.2em;
+	    margin: 0;
+	}
+	.dropdown-menu {
+	    margin-top: -0.2em !important;
+	}
+
+	.dropdown-item {
+	    padding: 0.5rem 1rem;
+	    .fa {
+		width: 1.25em;
+		margin-right: 0.75rem;
+	    }
+	    &:active, &.selected {
+		color: white !important;
+		background-color: var(--list-item-open-color);
+		.fa {
+		    color: white !important;
+		}
+	    }
+	}
+    }
+}

src/shared/styles/_core.scss

@@ -10,15 +10,6 @@
     direction: ltr;
     z-index: 1031; // One more than bootstrap navbar
 
-    .dropup {
-        &.dropup--left {
-            .dropdown-menu {
-                right: 100%;
-                left: auto;
-            }
-        }
-    }
-
     textarea:disabled {
         background-color: #EEE !important;
     }
@@ -121,21 +112,6 @@
         }
     }
 
-    .dropdown-item {
-      padding: 0.5rem 1rem;
-      .fa {
-        width: 1.25em;
-        margin-right: 0.75rem;
-      }
-      &:active, &.selected {
-        color: white !important;
-        background-color: var(--list-item-open-color);
-        .fa {
-          color: white !important;
-        }
-      }
-    }
-
     .popover {
         position: fixed;
     }

src/shared/styles/buttons.scss

@@ -13,11 +13,12 @@
                 color: var(--button-text-color);
                 margin-right: 0.5em;
                 &.only-icon {
-                margin-right: 0;
+                    margin-right: 0;
                 }
             }
         }
         converse-icon {
+            display: inline-block;
             margin-right: 0;
         }
     }