fix: CSS issue on OGMessage EmojiReactions & resolve SASS deprecation warnings (#1209)

#### Fixes
* Fixed an issue where the style was breaking in OG messages due to
emoji reactions.
* Improved the CSS structure to prevent Sass deprecation warnings from
occurring.

Author: HoonBaek

src/modules/GroupChannelList/components/GroupChannelListItem/index.scss

@@ -171,12 +171,12 @@
 }
 
 .sendbird-channel-preview--active {
+  padding: 12px 16px 12px 12px;
   @include themed() {
     border-left: solid 4px t(primary-3);
     border-bottom: solid 1px t(on-bg-4);
     background-color: t(primary--1-7);
   }
-  padding: 12px 16px 12px 12px;
 
   .sendbird-channel-preview__content__upper__header__channel-name {
     @include themed() {

src/modules/OpenChannelList/components/OpenChannelPreview/index.scss

@@ -80,9 +80,6 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        &.frozen {
-          max-width: calc(100% - 20px);
-        }
         box-sizing: border-box;
 
         overflow-x: hidden;
@@ -91,6 +88,9 @@
         @include mobile() {
           overflow-y: hidden;
         }
+        &.frozen {
+          max-width: calc(100% - 20px);
+        }
       }
 
       .sendbird-open-channel-preview__context__title__frozen {

src/modules/Thread/components/ThreadList/ThreadListItemContent.scss

@@ -6,14 +6,18 @@
   flex-direction: row;
   width: 100%;
   height: 100%;
+
   &.incoming {
     justify-content: flex-start;
   }
+
   &.outgoing {
     justify-content: flex-end;
   }
+
   .sendbird-thread-list-item-content__middle {
     max-width: 200px;
+
     @include mobile() {
       max-width: calc(100vw - 100px);
     }
@@ -60,6 +64,7 @@
         display: flex;
         flex-direction: row;
         min-width: 80px;
+
         &.sendbird-mouse-hover {
           display: none;
         }
@@ -79,8 +84,15 @@
       position: relative;
       width: 100%;
       display: inline-flex;
-      &.outgoing { justify-content: flex-end }
-      &.incoming { justify-content: flex-start }
+
+      &.outgoing {
+        justify-content: flex-end
+      }
+
+      &.incoming {
+        justify-content: flex-start
+      }
+
       &:hover {
         cursor: pointer;
       }
@@ -91,11 +103,17 @@
     position: relative;
     display: inline-flex;
     width: 50px;
-    &.use-reactions { width: 70px; }
+
     margin-left: 4px;
     padding-top: 18px;
+
+    &.use-reactions {
+      width: 70px;
+    }
+
     &.chain-top {
       padding-top: 2px;
+
       &.use-quote {
         padding-top: 18px;
       }
@@ -106,6 +124,7 @@
       flex-direction: row;
       height: 32px;
       display: none;
+
       &.sendbird-mouse-hover {
         display: inline-flex;
       }
@@ -118,6 +137,7 @@
         display: inline-flex;
       }
     }
+
     .sendbird-thread-list-item-content__middle {
       .sendbird-thread-list-item-content__middle__body-container {
         .sendbird-thread-list-item-content__middle__body-container__created-at {
@@ -136,7 +156,11 @@
     display: inline-flex;
     justify-content: flex-end;
     width: 50px;
-    &.use-reactions { width: 70px }
+
+    &.use-reactions {
+      width: 70px
+    }
+
     &.use-quote {
       .sendbird-thread-list-item-content-menu {
         top: 18px;
@@ -149,6 +173,7 @@
       right: 4px;
       flex-direction: row;
       display: none;
+
       &.sendbird-mouse-hover {
         display: inline-flex;
       }
@@ -165,12 +190,19 @@
       position: relative;
       width: 100%;
       display: inline-flex;
-      &.outgoing { justify-content: flex-end }
-      &.incoming { justify-content: flex-start }
+
+      &.outgoing {
+        justify-content: flex-end
+      }
+
+      &.incoming {
+        justify-content: flex-start
+      }
     }
 
     .sendbird-thread-list-item-content__middle__body-container {
       position: relative;
+
       .sendbird-thread-list-item-content__middle__body-container__created-at {
         position: absolute;
         bottom: 2px;
@@ -181,9 +213,11 @@
         box-sizing: content-box;
         min-width: 80px;
         min-height: 16px;
+
         &.sendbird-mouse-hover {
           display: none;
         }
+
         .sendbird-thread-list-item-content__middle__body-container__created-at__component-container {
           position: relative;
           display: inline-flex;
@@ -202,6 +236,7 @@
         display: inline-flex;
       }
     }
+
     .sendbird-thread-list-item-content__middle {
       .sendbird-thread-list-item-content__middle__body-container {
         .sendbird-thread-list-item-content__middle__body-container__created-at {
@@ -228,14 +263,27 @@
   width: 100%;
   max-width: 400px;
   border-radius: 0px 0px 16px 16px;
-  @include themed() { background-color: t(bg-1) }
+
+  @include themed() {
+    background-color: t(bg-1)
+  }
+
   &.primary {
-    @include themed() { background-color: t(primary-3) }
+    @include themed() {
+      background-color: t(primary-3)
+    }
   }
-  &.mouse-hover, &:hover {
-    @include themed() { background-color: t(bg-2) }
+
+  &.mouse-hover,
+  &:hover {
+    @include themed() {
+      background-color: t(bg-2)
+    }
+
     &.primary {
-      @include themed() { background-color: t(primary-4) }
+      @include themed() {
+        background-color: t(primary-4)
+      }
     }
   }
 }
@@ -244,14 +292,17 @@
 .sendbird-thread-list-item-content__middle__thread-replies {
   margin-top: 4px;
 }
+
 .sendbird-thread-list-item-content__middle__message-item-body.sendbird-og-message-item-body,
 .sendbird-thread-list-item-content__middle__message-item-body.sendbird-thumbnail-message-item-body {
   min-width: 200px;
   max-width: 200px;
 }
+
 .sendbird-thread-list-item-content__middle__message-item-body.sendbird-thumbnail-message-item-body {
   height: 148px;
 }
+
 .sendbird-thread-list-item-content__middle__message-item-body .sendbird-thumbnail-message-item-body__placeholder,
 .sendbird-thread-list-item-content__middle__message-item-body .sendbird-thumbnail-message-item-body__icon-wrapper,
 .sendbird-thread-list-item-content__middle__message-item-body .sendbird-thumbnail-message-item-body__video {