Various style and positioning fixes

CHANGES.md

@@ -21,6 +21,7 @@
 - #3038: Message to self from other client is ignored
 - #3038: Support showing yourself in the MUC sidebar. Adds new config option `muc_show_self`.
 - #3100: fixed width `.box-flyout` breaks responsive design in embedded, mobile viewport mode.
+- #3038: Support showing yourself in the MUC sidebar. Adds new config option `muc_show_self`.
 - #3155: Some ad-hoc commands not working
 - #3155: Some adhoc commands aren't working
 - #3299: Registration fails when a password contains an &

src/plugins/roomslist/styles/roomsgroups.scss

@@ -14,6 +14,7 @@
 
         converse-rooms-list {
             display: block;
+            margin-bottom: 1em;
 
             svg {
                 fill: var(--muc-color);

src/plugins/rosterview/styles/roster.scss

@@ -46,21 +46,28 @@
 
             converse-roster-contact {
                 width: 100%;
+                margin: 0;
+                padding: 0;
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 display: flex;
                 justify-content: space-between;
 
-                .list-item-action {
-                    line-height: 2em;
-                }
-
-                &:hover {
+                .contact-actions {
                     .list-item-action {
-                        opacity: 1;
+                        line-height: 2em;
+                    }
+                    &:hover {
+                        .list-item-action {
+                            opacity: 1;
+                        }
+                    }
+                    converse-icon {
+                        padding-top: 0.5em;
                     }
                 }
+
             }
 
             .group-toggle {
@@ -77,11 +84,12 @@
                 }
             }
 
-            .current-xmpp-contact {
-                margin: 0.25em 0;
-            }
-
             .list-item {
+
+                .list-item-link {
+                    margin: 0;
+                }
+
                 &.requesting-xmpp-contact {
                     a {
                         line-height: var(--line-height);
@@ -89,8 +97,6 @@
                 }
 
                 .open-chat {
-                    margin: 0;
-                    padding: 0;
                     converse-icon.chat-status {
                         position: relative;
                         border: 2px solid var(--background-color);
@@ -108,8 +114,6 @@
                     }
 
                     .contact-name {
-                        padding: 0;
-                        margin: 0;
                         max-width: 85%;
                         float: none;
                         height: 100%;

src/plugins/rosterview/templates/requesting_contact.js

@@ -34,7 +34,7 @@ export default (el) => {
             ${num_unread ? html`<span class="msgs-indicator badge">${num_unread}</span>` : ''}
             <span class="contact-name ${num_unread ? 'unread-msgs' : ''}">${display_name}</span>
         </a>
-        <span>
+        <span class="contact-actions">
             <a
                 class="accept-xmpp-request list-item-action list-item-action--visible"
                 @click=${el.acceptRequest}

src/plugins/rosterview/templates/unsaved_contact.js

@@ -35,7 +35,7 @@ export default (el) => {
             ${num_unread ? html`<span class="msgs-indicator badge">${num_unread}</span>` : ''}
             <span class="contact-name ${num_unread ? 'unread-msgs' : ''}">${display_name}</span>
         </a>
-        <span>
+        <span class="contact-actions">
             <a
                 class="add-contact list-item-action"
                 @click="${(ev) => el.addContact(ev)}"

src/shared/styles/forms.scss

@@ -31,19 +31,6 @@
                 color: var(--text-color);
                 background-color: var(--background-color);
             }
-
-            &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-                color: var(--secondary-color);
-            }
-            &::-moz-placeholder { /* Firefox 19+ */
-                color: var(--secondary-color);
-            }
-            &:-ms-input-placeholder { /* IE 10+ */
-                color: var(--secondary-color);
-            }
-            &:-moz-placeholder { /* Firefox 18- */
-                color: var(--secondary-color);
-            }
             &::placeholder {
                 color: var(--secondary-color);
             }
@@ -55,12 +42,11 @@
 
         .btn-group {
             .clear-input {
-                margin-top: 0.5em;
-                margin-bottom : 0.5em;
-                position: absolute;
-                right: 0.2em;
                 cursor: pointer;
                 font-size: var(--font-size);
+                margin-top: 0.4em;
+                position: absolute;
+                right: 0.2em;
             }
         }