From b476faf01c6d74aca1990c3b2e3e860e0078e828 Mon Sep 17 00:00:00 2001
From: Joe McGrath <33670767+josephmcg@users.noreply.github.com>
Date: Fri, 29 Jul 2022 15:06:14 +0900
Subject: [PATCH] refactor(sidebar): refactor styles and improve visibility of
 quickchat 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                       |  1 +
 assets/styles/framework/ui.less               |  5 +-
 .../views/navigation/sidebar/Sidebar.html     |  8 ++-
 .../views/navigation/sidebar/Sidebar.less     | 64 ++++++++++---------
 .../views/navigation/sidebar/Sidebar.vue      | 14 +---
 .../navigation/sidebar/controls/Controls.html | 26 ++------
 .../navigation/sidebar/controls/Controls.less | 14 ++--
 .../navigation/sidebar/list/item/Item.less    |  2 +-
 .../sidebar}/quick/Quick.html                 |  0
 .../sidebar}/quick/Quick.less                 |  0
 .../sidebar}/quick/Quick.vue                  |  0
 .../views/navigation/toolbar/Toolbar.less     | 37 -----------
 12 files changed, 56 insertions(+), 115 deletions(-)
 rename components/views/{friends => navigation/sidebar}/quick/Quick.html (100%)
 rename components/views/{friends => navigation/sidebar}/quick/Quick.less (100%)
 rename components/views/{friends => navigation/sidebar}/quick/Quick.vue (100%)

diff --git a/assets/styles/base.less b/assets/styles/base.less
index d78b89b8c5..417680e54a 100644
--- a/assets/styles/base.less
+++ b/assets/styles/base.less
@@ -287,6 +287,7 @@ button {
   border: none;
   cursor: pointer;
   background: transparent;
+  display: flex;
   &:extend(.font-primary);
 }
 .button {
diff --git a/assets/styles/framework/ui.less b/assets/styles/framework/ui.less
index 22cb7ec972..8a9c3c25c5 100644
--- a/assets/styles/framework/ui.less
+++ b/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;
diff --git a/components/views/navigation/sidebar/Sidebar.html b/components/views/navigation/sidebar/Sidebar.html
index 50b212243d..076ee929b7 100644
--- a/components/views/navigation/sidebar/Sidebar.html
+++ b/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"
diff --git a/components/views/navigation/sidebar/Sidebar.less b/components/views/navigation/sidebar/Sidebar.less
index 99cb2a56e0..44be839989 100644
--- a/components/views/navigation/sidebar/Sidebar.less
+++ b/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 {
diff --git a/components/views/navigation/sidebar/Sidebar.vue b/components/views/navigation/sidebar/Sidebar.vue
index db5c4bc139..29c9c5fbb9 100644
--- a/components/views/navigation/sidebar/Sidebar.vue
+++ b/components/views/navigation/sidebar/Sidebar.vue
@@ -3,15 +3,7 @@
 <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'
@@ -19,12 +11,8 @@ import type { FriendRequest } from '~/libraries/Iridium/friends/types'
 export default Vue.extend({
   components: {
     UsersIcon,
-    UserPlusIcon,
     PlusIcon,
-    PlusCircleIcon,
     FolderIcon,
-    MessageSquareIcon,
-    MenuIcon,
   },
   data() {
     return {
diff --git a/components/views/navigation/sidebar/controls/Controls.html b/components/views/navigation/sidebar/controls/Controls.html
index ae08e5c254..8966818a19 100644
--- a/components/views/navigation/sidebar/controls/Controls.html
+++ b/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>
diff --git a/components/views/navigation/sidebar/controls/Controls.less b/components/views/navigation/sidebar/controls/Controls.less
index 3519b71ae8..c3759e7b07 100644
--- a/components/views/navigation/sidebar/controls/Controls.less
+++ b/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;
   }
 }
diff --git a/components/views/navigation/sidebar/list/item/Item.less b/components/views/navigation/sidebar/list/item/Item.less
index c82e1790b9..2bf3757a2a 100644
--- a/components/views/navigation/sidebar/list/item/Item.less
+++ b/components/views/navigation/sidebar/list/item/Item.less
@@ -16,7 +16,7 @@
   }
 
   &.selected {
-    &:extend(.background-semitransparent-lighter);
+    background-color: #2e303d;
   }
 
   &:hover {
diff --git a/components/views/friends/quick/Quick.html b/components/views/navigation/sidebar/quick/Quick.html
similarity index 100%
rename from components/views/friends/quick/Quick.html
rename to components/views/navigation/sidebar/quick/Quick.html
diff --git a/components/views/friends/quick/Quick.less b/components/views/navigation/sidebar/quick/Quick.less
similarity index 100%
rename from components/views/friends/quick/Quick.less
rename to components/views/navigation/sidebar/quick/Quick.less
diff --git a/components/views/friends/quick/Quick.vue b/components/views/navigation/sidebar/quick/Quick.vue
similarity index 100%
rename from components/views/friends/quick/Quick.vue
rename to components/views/navigation/sidebar/quick/Quick.vue
diff --git a/components/views/navigation/toolbar/Toolbar.less b/components/views/navigation/toolbar/Toolbar.less
index 58421bda51..ff5ad501aa 100644
--- a/components/views/navigation/toolbar/Toolbar.less
+++ b/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 {