UX: adjust styles for sidebar, chat

Author: awesomerobot

.prettierrc

@@ -0,0 +1 @@
+{}

common/common.scss

@@ -7,6 +7,8 @@
 @import "topic";
 @import "categories";
 @import "select-kit";
+@import "sidebar";
+@import "chat";
 
 // global
 .alert.alert-info {
@@ -24,6 +26,8 @@
 .group-form-bio,
 .user-preferences .warning,
 .select-kit.multi-select .multi-select-header,
+.dc-filter-input-container,
+.channel-members-view__search-input-container,
 input[type="text"],
 input[type="password"],
 input[type="datetime"],
@@ -64,7 +68,9 @@ input[type="color"] {
 .user-badges .btn,
 .signup-cta.alert.alert-info .btn:not(.btn-primary),
 .widget-button.btn.popup-menu-button.toggle-admin-menu.keyboard-target-admin-menu.no-text.btn-icon,
-.widget-button.btn.popup-menu-button.toggle-admin-menu.no-text.btn-icon {
+.widget-button.btn.popup-menu-button.toggle-admin-menu.no-text.btn-icon,
+.new-channel-btn,
+.topic-notifications-options .dropdown-select-box-header {
   @include btn(
     $text-color: $secondary,
     $bg-color: $night,
@@ -80,7 +86,7 @@ input[type="color"] {
     top: 3px;
   }
   padding: 0.75em 1em;
-  border-radius: 25px/19px;
+  border-radius: 25px;
   box-shadow: 0 4px 0 0 $dark_night;
 }
 
@@ -99,13 +105,13 @@ input[type="color"] {
     top: 3px;
   }
   padding: 0.75em 1em;
-  border-radius: 25px/19px;
+  border-radius: 25px;
   box-shadow: 0 4px 0 0 darken($love, 25%);
 }
 
 .btn-danger {
   padding: 0.75em 1em;
-  border-radius: 25px/19px;
+  border-radius: 25px;
   box-shadow: 0 4px 0 0 darken($love, 25%);
   transition: top 0.25s;
 
@@ -190,6 +196,10 @@ input[type="color"] {
   margin-right: 0.25em;
 }
 
+.timeline-footer-controls {
+  flex-wrap: nowrap;
+}
+
 #show-tag-info {
   font-size: 1.05em;
 }
@@ -570,6 +580,16 @@ div.menu-links-header .menu-links-row button:not(.active):hover {
   border-bottom: 1px solid var(--highlight-medium);
 }
 
+.search-container .search-header {
+  padding-top: 2em;
+  padding-bottom: 2em;
+  @include border-radius-large;
+}
+
+#search-type-header {
+  height: 100%;
+}
+
 .search-advanced-title {
   margin: 0;
 }

scss/chat.scss

@@ -0,0 +1,15 @@
+.chat-browse-view,
+.chat-tabs {
+  .nav-pills > li > a {
+    color: $water;
+  }
+}
+
+.has-full-page-chat:not(.discourse-sidebar) .full-page-chat,
+.full-page-chat .chat-full-page-header {
+  border: none;
+}
+
+.full-page-chat .chat-full-page-header {
+  background: transparent;
+}

scss/composer.scss

@@ -138,6 +138,10 @@
     padding: 0 1em;
     margin-bottom: 8px;
   }
+
+  .mini-tag-chooser .select-kit-header {
+    border-color: $mud;
+  }
 }
 
 .open .grippie {
@@ -163,13 +167,16 @@
   .select-kit.dropdown-select-box.composer-actions .select-kit-header {
     background: $night;
     border-color: $night;
-    border-radius: 25px/19px;
+    border-radius: 25px;
     box-shadow: 0 4px 0 0 $dark_night;
     .d-icon {
       color: $secondary;
       opacity: 1;
     }
   }
+  .composer-controls .d-icon {
+    color: var(--secondary);
+  }
 }
 
 .d-editor-button-bar {

scss/header.scss

@@ -138,6 +138,44 @@ div.menu-links-header .menu-links-row li a.active {
   }
 }
 
+.user-menu.revamped {
+  .bottom-tabs,
+  .menu-tabs-container {
+    border: none;
+  }
+  .menu-tabs-container {
+    padding-right: 0.75em;
+    margin-left: 0.75em;
+    padding-bottom: 0.75em;
+  }
+  .quick-access-panel {
+    padding-right: 0;
+    li:first-child {
+      border-radius: 20px 20px 0 0;
+    }
+  }
+  .tabs-list .btn {
+    border-radius: 20px;
+    margin-bottom: 0.25em;
+    .d-icon {
+      color: $sand;
+    }
+    &.active .d-icon {
+      color: $sky;
+    }
+    &:hover {
+      background: $light_gold;
+      .d-icon {
+        color: $sky;
+      }
+    }
+  }
+
+  .tabs-list .btn .badge-notification {
+    background: $water;
+  }
+}
+
 .menu-panel .d-icon {
   color: $primary-medium;
 }

scss/sidebar.scss

@@ -0,0 +1,50 @@
+.header-sidebar-toggle button {
+  border-radius: 100px;
+  padding: 0.5em;
+
+  .d-icon {
+    color: var(--secondary);
+  }
+
+  &:focus,
+  &:hover {
+    .d-icon {
+      color: var(--primary-medium) !important;
+    }
+  }
+}
+
+.sidebar-wrapper {
+  --d-sidebar-highlight-color: #{$light_gold};
+  margin: 1.5em 0 1.5em 10px;
+
+  background: transparent;
+  top: calc(var(--header-offset) + 1.5em);
+  @include border-radius-large;
+
+  .has-sidebar-page & {
+    box-shadow: 0 4px 0 1px $mud;
+    border: 1px solid $mud;
+  }
+}
+
+.sidebar-footer-wrapper .sidebar-footer-container {
+  border-color: transparent;
+}
+
+.sidebar-section-link-wrapper .sidebar-section-link.active {
+  background: $light_gold;
+}
+
+.sidebar-section-link-wrapper .sidebar-section-link:focus,
+.sidebar-section-link-wrapper .sidebar-section-link:hover {
+  background: $sand;
+}
+
+.sidebar-footer-wrapper .sidebar-footer-container::before {
+  background: linear-gradient(
+    to bottom,
+    rgba(var(--secondary-low-rgb), 0),
+    rgba(var(--secondary-low-rgb), 1)
+  );
+}

scss/topic.scss

@@ -357,7 +357,6 @@ pre > code,
 
 nav.post-controls .post-admin-menu,
 .topic-admin-popup-menu {
-  background: $sky;
   border: none;
   box-shadow: none;
   @include border-radius-small;