Remove border radius from chat (#22437)

* add border-radius-large variable

* UX: replace chat border-radius with variable

app/assets/stylesheets/common/foundation/base.scss

@@ -7,6 +7,7 @@
   --topic-body-width-padding: #{$topic-body-width-padding};
   --topic-avatar-width: #{$topic-avatar-width};
   --d-border-radius: initial;
+  --d-border-radius-large: initial;
   --d-nav-pill-border-radius: var(--d-border-radius);
   --d-button-border-radius: var(--d-border-radius);
   --d-input-border-radius: var(--d-border-radius);

plugins/chat/assets/stylesheets/common/chat-channel-card.scss

@@ -4,7 +4,7 @@
   position: relative;
   padding: 1.25rem;
   background-color: var(--primary-very-low);
-  border-radius: 5px;
+  border-radius: var(--d-border-radius-large);
   min-height: 0;
   min-width: 0;
   border-left: 5px solid transparent;

plugins/chat/assets/stylesheets/common/chat-channel-preview-card.scss

@@ -33,7 +33,7 @@
   &__join-channel-btn {
     font-size: var(--font-up-2);
     border: 1px solid transparent;
-    border-radius: 0.25rem;
+    border-radius: var(--d-button-border-radius);
     line-height: normal;
     box-sizing: border-box;
     padding: 0.5em 0.65em;

plugins/chat/assets/stylesheets/common/chat-composer-upload.scss

@@ -5,7 +5,7 @@
   border: 1px solid var(--primary-low-mid);
   margin-right: 0.5em;
   position: relative;
-  border-radius: 5px;
+  border-radius: var(--d-border-radius);
   box-sizing: border-box;
 
   &--image:not(.chat-composer-upload--in-progress) {
@@ -56,7 +56,7 @@
     .preview-img {
       object-position: center;
       object-fit: cover;
-      border-radius: 5px;
+      border-radius: var(--d-border-radius);
     }
   }
 
@@ -95,7 +95,7 @@
 
     .extension-pill {
       background: var(--primary-low);
-      border-radius: 5px;
+      border-radius: var(--d-border-radius);
       font-size: var(--font-down-2-rem);
       padding: 0.1em 0.4em;
     }

plugins/chat/assets/stylesheets/common/chat-composer.scss

@@ -44,7 +44,7 @@
     width: 100%;
     flex-direction: row;
     border: 1px solid var(--primary-low);
-    border-radius: 10px;
+    border-radius: var(--d-border-radius-large);
     background-color: var(--secondary);
     min-height: 50px;
     overflow: hidden;

plugins/chat/assets/stylesheets/common/chat-drawer.scss

@@ -143,7 +143,7 @@ a.chat-drawer-header__title {
   &:hover {
     .chat-drawer-header__top-line {
       background: var(--primary-low);
-      border-radius: 5px;
+      border-radius: var(--d-border-radius);
     }
   }
 }
@@ -151,7 +151,7 @@ a.chat-drawer-header__title {
 .chat-drawer-header {
   box-sizing: border-box;
   border-bottom: solid 1px var(--primary-low);
-  border-radius: 8px 8px 0 0;
+  border-radius: var(--d-border-radius-large) var(--d-border-radius-large) 0 0;
   background: var(--primary-very-low);
   width: 100%;
   display: flex;

plugins/chat/assets/stylesheets/common/chat-emoji-picker.scss

@@ -17,7 +17,7 @@
     &:hover,
     &:focus {
       background: var(--primary-very-low);
-      border-radius: 5px;
+      border-radius: var(--d-border-radius);
       transform: scale(1.25);
     }
   }
@@ -139,7 +139,7 @@
     background: none;
     margin-right: 0.5rem;
     border: 0;
-    border-radius: 5px;
+    border-radius: var(--d-border-radius);
 
     .d-icon {
       visibility: hidden;

plugins/chat/assets/stylesheets/common/chat-message-actions.scss

@@ -15,7 +15,6 @@
 }
 
 .chat-message-actions {
-  border-radius: 0.25em;
   background-color: var(--secondary);
   display: flex;
   box-shadow: 0 0.75px 0px rgba(0, 0, 0, 0.15);
@@ -81,7 +80,6 @@
       border-right: 1px solid var(--primary-300);
       border-top: 1px solid var(--primary-300);
       border-bottom: 1px solid var(--primary-300);
-      border-radius: 0 0.25em 0.25em 0;
     }
   }
 
@@ -90,7 +88,6 @@
       background: none;
       border: 1px solid var(--primary-300);
       border-left-color: transparent;
-      border-radius: 0 0.25em 0.25em 0;
       padding: 0.5em 0;
       width: 2.5em;
       transition: background 0.2s, border-color 0.2s;

plugins/chat/assets/stylesheets/common/chat-message-info.scss

@@ -25,7 +25,7 @@
   text-transform: uppercase;
   padding: 0.25em;
   background: var(--primary-low);
-  border-radius: 3px;
+  border-radius: var(--d-border-radius);
   font-size: var(--font-down-2);
 
   & + .chat-message-info__date {

plugins/chat/assets/stylesheets/common/chat-message-separator.scss

@@ -66,7 +66,7 @@
       &.is-force-pinned {
         .chat-message-separator__text {
           border: 1px solid var(--primary-200);
-          border-radius: 4px;
+          border-radius: var(--d-border-radius);
           color: var(--primary-800);
           background: var(--primary-50);
 
@@ -104,7 +104,7 @@
       .no-touch & {
         &:hover {
           border: 1px solid var(--secondary-high);
-          border-radius: 4px;
+          border-radius: var(--d-border-radius);
           color: var(--primary-800);
           background: var(--primary-50);
         }
@@ -113,7 +113,7 @@
       .touch & {
         &:active {
           border: 1px solid var(--secondary-high);
-          border-radius: 4px;
+          border-radius: var(--d-border-radius);
           color: var(--primary-800);
           background: var(--primary-50);
         }

plugins/chat/assets/stylesheets/common/chat-message-thread-indicator.scss

@@ -11,7 +11,7 @@
   background-color: var(--primary-very-low);
   margin: 4px 0 -2px calc(var(--message-left-width) - 0.25rem);
   padding: 0.5rem;
-  border-radius: 8px;
+  border-radius: var(--d-border-radius-large);
   color: var(--primary);
 
   > * {

plugins/chat/assets/stylesheets/common/chat-message.scss

@@ -131,7 +131,7 @@
 .touch .chat-message-container {
   &.-active {
     background: var(--d-hover);
-    border-radius: 5px;
+    border-radius: var(--d-border-radius);
 
     &.-bookmarked {
       background: var(--highlight-low);

plugins/chat/assets/stylesheets/common/chat-skeleton.scss

@@ -1,4 +1,4 @@
-$radius: 3px;
+$radius: var(--d-border-radius);
 
 .chat-skeleton {
   height: auto;

plugins/chat/assets/stylesheets/common/chat-thread-header-buttons.scss

@@ -13,7 +13,7 @@
   &:hover {
     color: var(--primary-medium);
     background: var(--primary-very-low);
-    border-radius: 5px;
+    border-radius: var(--d-border-radius);
 
     &:hover {
       .d-icon {

plugins/chat/assets/stylesheets/common/chat-thread-list-item.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: row;
   padding: 0.5rem;
-  border-radius: 4px;
+  border-radius: var(--d-border-radius);
   background-color: var(--primary-very-low);
   border: 1px solid transparent;
 }

plugins/chat/assets/stylesheets/common/direct-message-creator.scss

@@ -0,0 +1,197 @@
+.direct-message-creator {
+  display: flex;
+  flex-direction: column;
+
+  .title-area {
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--primary-low);
+
+    .title {
+      font-weight: 700;
+      font-size: var(--font-up-1);
+      line-height: var(--font-up-1);
+    }
+  }
+
+  .filter-area {
+    padding: 1rem;
+    display: flex;
+    align-items: flex-start;
+    border-bottom: 1px solid var(--primary-low);
+    cursor: text;
+    position: relative;
+
+    &.is-focused {
+      background: var(--primary-very-low);
+    }
+  }
+
+  .prefix {
+    line-height: 34px;
+    padding-right: 0.25rem;
+  }
+
+  .selected-user {
+    list-style: none;
+    padding: 0;
+    margin: 1px 0.25rem 0.25rem 1px;
+    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
+    background: var(--primary-very-low);
+    border-radius: var(--d-border-radius-large);
+    border: 1px solid var(--primary-300);
+    align-items: center;
+    display: flex;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &.is-highlighted {
+      border-color: var(--tertiary);
+
+      .d-icon {
+        color: var(--danger);
+      }
+    }
+
+    .username {
+      margin: 0 0.5em;
+    }
+
+    & * {
+      pointer-events: none;
+    }
+
+    &:hover,
+    &:focus {
+      background: var(--primary-very-low);
+      color: var(--primary);
+
+      &:not(.is-highlighted) {
+        border-color: var(--tertiary);
+      }
+
+      .d-icon {
+        color: var(--danger);
+      }
+    }
+  }
+
+  .recipients {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: -0.25rem;
+    flex: 1;
+    min-width: 0;
+    align-items: center;
+
+    & + .btn {
+      margin-left: 1em;
+    }
+
+    .filter-usernames {
+      flex: 1 0 auto;
+      min-width: 80px;
+      margin: 1px 0 0 0;
+      appearance: none;
+      border: 0;
+      outline: 0;
+      background: none;
+      width: unset;
+    }
+  }
+
+  .results-container {
+    display: flex;
+    position: relative;
+  }
+
+  .results {
+    display: flex;
+    margin: 0;
+    flex-wrap: wrap;
+    border-bottom: 1px solid var(--primary-low);
+    box-shadow: var(--shadow-card);
+    position: absolute;
+    width: 100%;
+    z-index: z("dropdown");
+    background: var(--secondary);
+
+    .user {
+      display: flex;
+      width: 100%;
+      list-style: none;
+      cursor: pointer;
+      outline: 0;
+      padding: 0.25em 0.5em;
+      margin: 0.25rem;
+      align-items: center;
+      border-radius: var(--d-border-radius);
+
+      .user-info {
+        margin: 0;
+        width: 100%;
+      }
+
+      &.is-focused {
+        background: var(--tertiary-very-low);
+      }
+
+      * {
+        pointer-events: none;
+      }
+
+      .username {
+        margin-left: 0.25em;
+        color: var(--primary-high);
+        font-size: var(--font-up-1);
+      }
+
+      & + .user {
+        margin-top: 0.25em;
+      }
+
+      .user-status-message {
+        margin-left: 0.3em;
+
+        .emoji {
+          width: 15px;
+          height: 15px;
+        }
+      }
+    }
+
+    .btn {
+      padding: 0.25em;
+      &:last-child {
+        margin: 0;
+      }
+    }
+  }
+
+  .no-results-container {
+    position: relative;
+  }
+
+  .no-results {
+    text-align: center;
+    padding: 1rem;
+    width: 100%;
+    box-shadow: var(--shadow-card);
+    background: var(--secondary);
+    margin: 0;
+    box-sizing: border-box;
+  }
+
+  .fetching-preview-message {
+    padding: 1rem;
+    text-align: center;
+  }
+
+  .join-existing-channel {
+    margin: 1rem auto;
+  }
+}

plugins/chat/assets/stylesheets/common/incoming-chat-webhooks.scss

@@ -6,7 +6,7 @@
     justify-content: space-between;
     background-color: var(--primary-very-low);
     padding: 1em;
-    border-radius: 6px;
+    border-radius: var(--d-border-radius-large);
     margin-bottom: 1em;
 
     &--details {

plugins/chat/assets/stylesheets/desktop/base-desktop.scss

@@ -38,7 +38,7 @@
 
     &:hover {
       cursor: pointer;
-      border-radius: 5px;
+      border-radius: var(--d-border-radius);
       box-shadow: 0 2px 5px 0 rgba(var(--always-black-rgb), 0.1),
         0 2px 10px 0 rgba(var(--always-black-rgb), 0.1);
     }
@@ -88,10 +88,6 @@
   .full-page-chat {
     border-right: 1px solid var(--primary-low);
     border-left: 1px solid var(--primary-low);
-
-    .chat-channel {
-      border-radius: unset;
-    }
   }
 
   @media screen and (max-width: var(--max-chat-width)) {

plugins/chat/assets/stylesheets/desktop/chat-channel-title.scss

@@ -3,7 +3,7 @@
 
   &:hover {
     background: var(--primary-very-low);
-    border-radius: 5px;
+    border-radius: var(--d-border-radius);
   }
 
   .chat-channel-title {

plugins/chat/assets/stylesheets/desktop/chat-index-full-page.scss

@@ -21,7 +21,6 @@
         height: 2.5em;
         padding: 0 0.5rem;
         margin: 0 0.5rem 0.125rem 0.5rem;
-        border-radius: 0.25em;
         &:hover,
         &.active {
           background-color: var(--primary-low);

plugins/chat/assets/stylesheets/mobile/chat-message-actions.scss

@@ -5,7 +5,6 @@
   right: 0;
   display: flex;
   flex-direction: column;
-  border-radius: 8px 8px 0 0;
   margin: 0 5px;
   transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1),
     visibility cubic-bezier(0.4, 0, 0.2, 1);
@@ -22,7 +21,6 @@
     padding: 0.5em;
     border: 1px solid var(--primary-low);
     box-shadow: 0 0 4px rgba(0, 0, 0, 0.125);
-    border-radius: 8px;
 
     .selected-message-reply {
       margin-left: 5px;
@@ -100,7 +98,6 @@
     }
 
     .reply-btn {
-      border-radius: 3px;
       .d-icon {
         font-size: var(--font-up-4);
       }