refactor(slimbar): improve styles and markup (#3826)

assets/styles/base.less

@@ -201,7 +201,10 @@ a.link {
 
 // Buttons
 button {
+  padding: 0;
+  border: none;
   cursor: pointer;
+  background: transparent;
   &:extend(.font-primary);
 }
 .button {

components/views/navigation/slimbar/Slimbar.html

@@ -1,87 +1,22 @@
-<div :id="horizontal ? 'servers-horizontal-list' : 'servers-vertical-list'">
-  <div
-    v-if="horizontal"
-    class="circle-group"
-    @click="toggleModal(ModalWindows.CALL_TO_ACTION)"
+<div class="slimbar hidden-scroll">
+  <UiCircle
+    class="sat-icon"
+    type="icon"
+    :size="40"
+    @click="$router.push('/chat/direct')"
   >
-    <UiCircle type="icon" :size="40">
-      <plus-icon size="0.75x" />
-    </UiCircle>
-  </div>
-
-  <div
-    v-on:click="$router.push('/chat/direct')"
-    class="circle-group"
-    v-if="horizontal"
-  >
-    <UiCircle type="icon" :size="40">
-      <satellite-icon size="0.75x" />
-    </UiCircle>
-  </div>
+    <satellite-icon size="0.75x" />
+  </UiCircle>
 
-  <div id="list-container-vertical" v-else>
-    <div v-on:click="$router.push('/chat/direct')" class="circle-group">
-      <UiCircle type="icon" :size="40">
-        <satellite-icon size="0.75x" />
-      </UiCircle>
-    </div>
-
-    <UiHorizontalRule
-      class="horizontal-rule-padding"
-      v-if="friendsWithUnreadMessages.length && friendsDS !== DataStateType.Loading"
-    />
-
-    <div class="slimbar-spinner" v-if="friendsDS === DataStateType.Loading">
-      <UiLoadersSpinner :spinning="true" />
-    </div>
+  <UiHorizontalRule
+    v-if="friendsWithUnreadMessages.length && friendsDS !== DataStateType.Loading"
+  />
 
-    <UiSimpleScroll scrollMode="vertical" scrollShow="scroll" v-else>
-      <div class="unreads" v-for="user in friendsWithUnreadMessages">
-        <Unread
-          :key="user.address"
-          :user="user"
-          :active="$route.params.address === user.address"
-        />
-      </div>
-
-      <UiHorizontalRule />
-
-      <UiComingSoon :tooltipText="$t('coming_soon.communities')">
-        <div
-          class="server"
-          v-for="server in servers"
-          v-on:click="$router.push('/server/chat')"
-        >
-          <UiCircle
-            type="random"
-            :size="40"
-            :seed="server.address"
-            :name="server.name"
-          />
-        </div>
-      </UiComingSoon>
-    </UiSimpleScroll>
-    <div
-      class="circle-group"
-      v-tooltip.right="$t('servers.new_server')"
-      @click="toggleModal(ModalWindows.CALL_TO_ACTION)"
-    >
-      <UiCircle type="icon" :size="40">
-        <plus-icon size="0.75x" />
-      </UiCircle>
-    </div>
-    <div
-      class="circle-group"
-      data-cy="settings"
-      v-tooltip.right="$t('pages.settings.settings')"
-      v-on:click="$store.commit('ui/toggleSettings', { show: true })"
-    >
-      <UiCircle type="icon" :size="40">
-        <settings-icon size="0.75x" />
-      </UiCircle>
-    </div>
+  <div class="slimbar-spinner" v-if="friendsDS === DataStateType.Loading">
+    <UiLoadersSpinner :spinning="true" />
   </div>
-  <div id="list-container" v-else>
+
+  <template v-else>
     <div class="unreads" v-for="user in friendsWithUnreadMessages">
       <Unread
         :key="user.address"
@@ -90,25 +25,36 @@
       />
     </div>
 
-    <UiVerticalRule v-if="servers.length > 0" />
+    <UiHorizontalRule />
 
-    <UiComingSoon
-      :tooltipText="$t('coming_soon.communities')"
-      :horizontal="horizontal"
-      :tooltipPosition="'bottom'"
-    >
-      <div
-        class="server"
-        v-for="server in servers"
-        v-on:click="$router.push('/server/chat')"
-      >
+    <UiComingSoon :tooltipText="$t('coming_soon.communities')">
+      <div class="circle-group">
         <UiCircle
+          v-for="server in servers"
+          :key="server.address"
           type="random"
           :size="40"
           :seed="server.address"
           :name="server.name"
+          @click="$router.push('/server/chat')"
         />
       </div>
     </UiComingSoon>
+  </template>
+  <UiHorizontalRule />
+  <div class="circle-group">
+    <button
+      v-tooltip.right="$t('servers.new_server')"
+      @click="toggleModal(ModalWindows.CALL_TO_ACTION)"
+    >
+      <plus-icon size="1.8x" />
+    </button>
+    <button
+      data-cy="settings"
+      v-tooltip.right="$t('pages.settings.settings')"
+      @click="$store.commit('ui/toggleSettings', { show: true })"
+    >
+      <settings-icon size="1.8x" />
+    </button>
   </div>
 </div>

components/views/navigation/slimbar/Slimbar.less

@@ -1,139 +1,46 @@
-#servers-vertical-list {
-  height: @full;
-  width: @slimbar-size;
-  min-width: @slimbar-size;
+.slimbar {
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
-  pointer-events: none;
-  box-sizing: border-box;
+  height: @full;
+  padding: @light-spacing;
+  overflow-y: scroll;
   transition: @transition-all;
   &:extend(.third-layer);
+}
 
-  .circle-group {
-    margin: @normal-spacing 0;
-    &:extend(.font-primary);
-    bottom: 0rem;
-    // position: absolute;
-    margin-bottom: 0.7rem;
-
-    &:extend(.first-layer);
-    width: 50px;
-    pointer-events: auto;
-  }
-  .circle-group:nth-child(1) {
-    fill: @secondary-text;
-    margin: unset;
-    margin-bottom: unset;
-  }
-
-  .circle {
-    margin: @xlight-spacing 0;
-    &:extend(.first-layer);
-  }
-
-  .unreads {
-    position: relative;
-    .unread {
-      padding: @xlight-spacing 0;
-    }
-  }
-
-  .server,
-  .unreads {
-    // width: 50px;
-
-    &:extend(.first-layer);
-  }
+.sat-icon {
+  fill: @secondary-text;
+  flex-shrink: 0;
+}
 
-  #list-container-vertical {
+.circle-group {
+  display: flex;
+  flex-direction: column;
+  gap: @light-spacing;
+  &:extend(.font-primary);
+  align-items: center;
+  button {
     display: flex;
-    flex-direction: column;
-    height: @full;
-    pointer-events: auto;
-    box-sizing: border-box;
-    padding-left: @light-spacing;
-    padding-top: @normal-spacing;
-
-    #simple-scrollbar {
-      height: auto;
-    }
-  }
-  #list-container {
-    height: fit-content;
-    position: relative;
-    pointer-events: auto;
-  }
-
-  .slimbar-spinner {
-    width: 40px;
     height: 40px;
-    margin-top: 24px;
-    display: flex;
+    width: 40px;
     align-items: center;
     justify-content: center;
-    text-align: center;
-  }
-
-  .horizontal-rule-padding {
-    margin-right: @scroll-bar-size * 2;
   }
 }
 
-#servers-horizontal-list {
-  .circle-group {
-    margin: 0 @normal-spacing;
-    &:extend(.font-primary);
-    bottom: 0rem;
-
-    &:extend(.first-layer);
-    width: 50px;
-    pointer-events: auto;
-  }
-  .circle-group:nth-child(1) {
-    fill: @secondary-text;
-    margin: unset;
-    margin-bottom: unset;
-  }
-
-  .circle {
-    margin: 0 @light-spacing;
+.unreads {
+  position: relative;
+  .unread {
+    padding: @xlight-spacing 0;
   }
+}
 
-  .servers {
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    #list-container {
-      display: inline-flex;
-      align-items: center;
-    }
-    .circle {
-      position: relative;
-    }
-    display: inline-flex;
-    align-items: center;
-    overflow-y: hidden;
-    overflow-x: scroll;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-
-  .unreads {
-    position: relative;
-    .unread {
-      margin: 0 @light-spacing;
-    }
-  }
-
-  .server,
-  .unreads {
-    // width: 50px;
-
-    &:extend(.first-layer);
-  }
-  display: inline-flex;
-  height: 50px;
-  margin-bottom: @normal-spacing;
-  padding: 0 @normal-spacing;
+.slimbar-spinner {
+  width: 40px;
+  height: 40px;
+  margin-top: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
 }

components/views/navigation/slimbar/Slimbar.vue

@@ -25,10 +25,6 @@ export default Vue.extend({
     Unread,
   },
   props: {
-    horizontal: {
-      type: Boolean,
-      default: false,
-    },
     servers: {
       type: Array,
       default() {