UX: Presence indicator additions (#14)

Author: jordanvidrine

common/common.scss

@@ -5,21 +5,6 @@
 @import "header";
 @import "misc";
 
-// COMPONENTS
-.floating-search-input {
-  grid-column-start: 3;
-  @include breakpoint("medium") {
-    display: none;
-  }
-}
-
-.floating-search-input + .panel .header-dropdown-toggle.search-dropdown,
-.floating-search-input + .panel .search-menu {
-  @include breakpoint("medium") {
-    display: block;
-  }
-}
-
 .sidebar-theme-toggle__wrapper
   .sidebar-theme-toggle-dropdown.select-kit.is-expanded
   .select-kit-body {

scss/presence.scss

@@ -4,7 +4,7 @@
   height: 6px;
   box-shadow: 0px 0px 0px 2px var(--sidebar-color);
   border: 1px solid var(--dimmed-text);
-  border-radius: var(--d-border-radius);
+  border-radius: 100%;
   display: inline;
   position: absolute;
   bottom: 3px;
@@ -16,7 +16,7 @@
   .sidebar-section-link-prefix.image.active::before {
     box-shadow: 0px 0px 0px 2px var(--tertiary) !important;
     border: 1px solid #ffff !important;
-    border-radius: var(--d-border-radius);
+    border-radius: 100%;
     display: inline;
     position: absolute;
     bottom: 3px;
@@ -45,7 +45,7 @@
   .sidebar-section-link-prefix.image.active::before {
     box-shadow: 0px 0px 0px 2px var(--sidebar-color);
     border: 1px solid var(--sidebar-online);
-    border-radius: var(--d-border-radius);
+    border-radius: 100%;
     display: inline;
     position: absolute;
     bottom: 3px;
@@ -57,35 +57,66 @@
   }
 }
 
-.chat-message-avatar .chat-user-avatar .chat-user-avatar-container::before {
+.chat-message-avatar .chat-user-avatar .chat-user-avatar__container::before {
   content: "";
   width: 6px;
   height: 6px;
   border: 2px solid var(--primary-medium);
   box-shadow: 0px 0px 0px 2px var(--secondary);
-  border-radius: var(--d-border-radius);
+  border-radius: 100%;
   display: inline;
   position: absolute;
-  bottom: 0;
-  left: calc(32px - 4px);
+  bottom: -3px;
+  left: calc(30px - 6px);
+  background-color: var(--secondary);
+}
+
+.chat-channel-title__avatar
+  .chat-user-avatar
+  .chat-user-avatar__container::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border: 1px solid var(--primary-medium);
+  box-shadow: 0px 0px 0px 2px var(--secondary);
+  border-radius: 100%;
+  display: inline;
+  position: absolute;
+  bottom: 0px;
+  left: 19px;
   background-color: var(--secondary);
 }
 
 .chat-message-avatar
   .chat-user-avatar.is-online
-  .chat-user-avatar-container
+  .chat-user-avatar__container
   .avatar,
 .chat-channel-title__avatar
   .chat-user-avatar.is-online
-  .chat-user-avatar-container
-  .avatar {
+  .chat-user-avatar__container
+  .avatar,
+.chat-channel-title__avatar
+  .chat-user-avatar.is-online
+  .chat-user-avatar__container {
   box-shadow: none;
   border: none;
 }
 
+.chat-user-avatar__container .avatar {
+  padding: 0;
+  border: none;
+}
+
+.chat-channel-title__avatar
+  .chat-user-avatar.is-online
+  .chat-user-avatar__container::before {
+    border: 0px;
+    background-color: var(--success);
+}
+
 .chat-message-avatar
   .chat-user-avatar.is-online
-  .chat-user-avatar-container::before {
+  .chat-user-avatar__container::before {
   width: 8px;
   height: 8px;
   border: 2px solid var(--secondary);