refactor(sidebar): refactor styles and improve visibility of quickcha…

…t button (#4096)

* refactor(sidebar): refactor styles and move component to better spot

* fix: use rem instead of pixels

* fix: remove bad index as key

assets/styles/base.less

@@ -287,6 +287,7 @@ button {
   border: none;
   cursor: pointer;
   background: transparent;
+  display: flex;
   &:extend(.font-primary);
 }
 .button {

assets/styles/framework/ui.less

@@ -1,6 +1,7 @@
 // Navigation
-@slimbar-width: 72px;
-@sidebar-width: 312px;
+@slimbar-width: 4.5rem;
+@sidebar-width: 19.5rem;
+@sidebar-controls-height: 7.5rem;
 @sidebar-size-mobile: 100vw;
 @servers-size: 60px;
 @toolbar-height: 75px;

components/views/navigation/sidebar/Sidebar.html

@@ -1,4 +1,4 @@
-<div id="sidebar">
+<div class="sidebar">
   <div class="sidebar-inner">
     <div class="sidebar-search">
       <UiComingSoon
@@ -51,8 +51,10 @@
       </InteractablesButton>
     </div>
     <div class="quick-toggle" v-tooltip.top="$t('pages.chat.new_chat')">
-      <plus-circle-icon size="1x" @click="toggleModal" />
-      <FriendsQuick
+      <button @click="toggleModal">
+        <plus-icon size="1.4x" />
+      </button>
+      <SidebarQuick
         v-if="isQuickchatVisible"
         v-click-outside="toggleModal"
         @toggle="toggleModal"

components/views/navigation/sidebar/Sidebar.less

@@ -1,37 +1,34 @@
-@sidebar-inner-offset: 175px;
+@sidebar-gradient: linear-gradient(
+    163.91deg,
+    rgba(48, 52, 71, 0.5) 0%,
+    rgba(42, 54, 75, 0) 100%
+  ),
+  linear-gradient(163.91deg, rgba(28, 39, 58, 0.9) 0%, rgba(0, 0, 0, 0.09) 100%),
+  linear-gradient(
+    359.95deg,
+    rgba(36, 40, 57, 0.9) 0.04%,
+    rgba(34, 44, 63, 0) 99.95%
+  ),
+  @darker;
 
-#sidebar {
+.sidebar {
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
   position: relative;
   width: @sidebar-width;
   margin: @normal-spacing 0;
   flex-shrink: 0;
 
   .sidebar-inner {
-    &:extend(.round-corners);
-    box-shadow: @ui-shadow;
-    max-height: calc(@app-height - @sidebar-inner-offset);
     display: flex;
     flex-direction: column;
-    padding: @normal-spacing;
     gap: @normal-spacing;
-    background: linear-gradient(
-        163.91deg,
-        rgba(48, 52, 71, 0.5) 0%,
-        rgba(42, 54, 75, 0) 100%
-      ),
-      linear-gradient(
-        163.91deg,
-        rgba(28, 39, 58, 0.9) 0%,
-        rgba(0, 0, 0, 0.09) 100%
-      ),
-      linear-gradient(
-        359.95deg,
-        rgba(36, 40, 57, 0.9) 0.04%,
-        rgba(34, 44, 63, 0) 99.95%
-      ),
-      #121216;
+    padding: @normal-spacing;
+    box-shadow: @ui-shadow;
+    max-height: calc(100% - @sidebar-controls-height);
+    &:extend(.round-corners);
+    background: @sidebar-gradient;
 
     .sidebar-search {
       display: flex;
@@ -50,12 +47,15 @@
     }
 
     .quick-toggle {
-      display: flex;
       align-self: flex-end;
-      padding-left: @light-spacing;
       position: relative;
-      svg {
-        cursor: pointer;
+      button {
+        align-items: center;
+        justify-content: center;
+        height: 32px;
+        width: 32px;
+        border-radius: 50%;
+        background-color: @foreground-alt;
       }
     }
 
@@ -70,11 +70,15 @@
   }
 
   .controls {
-    &:extend(.background-semitransparent-light);
-    &:extend(.round-corners);
-    padding: @light-spacing @normal-spacing @normal-spacing @normal-spacing;
+    display: flex;
+    flex-direction: column;
+    gap: @normal-spacing;
+    height: @sidebar-controls-height;
+    padding: @normal-spacing;
     box-shadow: @ui-shadow;
-    margin-top: auto;
+    flex-shrink: 0;
+    &:extend(.round-corners);
+    background: @sidebar-gradient;
   }
 
   .label {

components/views/navigation/sidebar/Sidebar.vue

@@ -3,28 +3,16 @@
 <script lang="ts">
 import Vue from 'vue'
 import { mapState } from 'vuex'
-import {
-  UsersIcon,
-  UserPlusIcon,
-  PlusIcon,
-  PlusCircleIcon,
-  FolderIcon,
-  MessageSquareIcon,
-  MenuIcon,
-} from 'satellite-lucide-icons'
+import { UsersIcon, PlusIcon, FolderIcon } from 'satellite-lucide-icons'
 
 import { RootState } from '~/types/store/store'
 import iridium from '~/libraries/Iridium/IridiumManager'
 import type { FriendRequest } from '~/libraries/Iridium/friends/types'
 export default Vue.extend({
   components: {
     UsersIcon,
-    UserPlusIcon,
     PlusIcon,
-    PlusCircleIcon,
     FolderIcon,
-    MessageSquareIcon,
-    MenuIcon,
   },
   data() {
     return {

components/views/navigation/sidebar/controls/Controls.html

@@ -1,4 +1,4 @@
-<div id="controls">
+<div class="call-controls">
   <InteractablesButton
     :type="audioMuted ? 'danger' : 'dark'"
     size="small"
@@ -9,12 +9,8 @@
     :loading="isLoading"
     loadingText=""
   >
-    <mic-off-icon
-      data-cy="sidebar-mic-muted"
-      v-if="audioMuted"
-      size="1x"
-    ></mic-off-icon>
-    <mic-icon data-cy="sidebar-mic-unmuted" v-else size="1x"></mic-icon>
+    <mic-off-icon data-cy="sidebar-mic-muted" v-if="audioMuted" size="1x" />
+    <mic-icon data-cy="sidebar-mic-unmuted" v-else size="1x" />
   </InteractablesButton>
   <InteractablesButton
     :type="audio.deafened ? 'danger' : 'dark'"
@@ -28,12 +24,8 @@
       data-cy="sidebar-audio-deafened"
       v-if="audio.deafened"
       size="1x"
-    ></headphones-off-icon>
-    <headphones-icon
-      data-cy="sidebar-audio-not-deafened"
-      v-else
-      size="1x"
-    ></headphones-icon>
+    />
+    <headphones-icon data-cy="sidebar-audio-not-deafened" v-else size="1x" />
   </InteractablesButton>
   <InteractablesButton
     v-if="inCall"
@@ -45,11 +37,7 @@
     :loading="isLoading"
     loadingText=""
   >
-    <video-off-icon
-      data-cy="sidebar-video-muted"
-      v-if="videoMuted"
-      size="1x"
-    ></video-off-icon>
-    <video-icon data-cy="sidebar-video-unmuted" v-else size="1x"></video-icon>
+    <video-off-icon data-cy="sidebar-video-muted" v-if="videoMuted" size="1x" />
+    <video-icon data-cy="sidebar-video-unmuted" v-else size="1x"/ >
   </InteractablesButton>
 </div>

components/views/navigation/sidebar/controls/Controls.less

@@ -1,13 +1,7 @@
-#controls {
+.call-controls {
   display: flex;
-  flex-direction: row;
-  padding: 0.25rem 0;
-  margin: @light-spacing 0;
-
-  .button {
-    flex: 1;
-    &:nth-child(2) {
-      margin: 0 0.25rem;
-    }
+  gap: @light-spacing;
+  button {
+    flex-grow: 1;
   }
 }

components/views/navigation/sidebar/list/item/Item.less

@@ -16,7 +16,7 @@
   }
 
   &.selected {
-    &:extend(.background-semitransparent-lighter);
+    background-color: #2e303d;
   }
 
   &:hover {

components/views/navigation/toolbar/Toolbar.less

@@ -71,44 +71,7 @@
   }
 }
 
-@media only screen and (max-width: @mobile-breakpoint) {
-  #toolbar {
-    min-width: @viewport-width;
-    padding-right: @normal-spacing;
-    min-height: @toolbar-height;
-    padding-top: @light-spacing;
-
-    .circle-container {
-      order: 1;
-      margin-left: 24px;
-      height: auto;
-    }
-
-    .controls {
-      background: none;
-      box-shadow: unset;
-      .control-button {
-        padding: 2px;
-        width: 24px;
-        min-width: 24px;
-        height: 24px;
-        margin-left: 24px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-      .control-icon {
-        display: block;
-        margin: 0;
-        width: 18px;
-        height: 18px;
-      }
-    }
-  }
-}
-
 /* Only for Safari to fix lack resolution of svgs */
-
 @media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) {
     #toolbar .controls svg {