fix: replace vertical message margins with padding (theme v1) (#197)

* fix: replace vertical margins with padding in theme v1 messages * fix: adjust message alignment in thread theme v1
GetStream · Sep 30, 2022 · 71848b6 · 71848b6
1 parent 24c3f9d
commit 71848b6
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 42 deletions.
diff --git a/src/v1/Attachment.scss b/src/v1/Attachment.scss
@@ -74,19 +74,21 @@
     width: 100%;
 
     border-radius: var(--border-radius);
-    margin: var(--xs-m) auto var(--xs-m) 0;
-    padding: 0;
+    padding: var(--xs-m) auto var(--xs-m) 0;
   }
 
   /** Let giphies stretch their containers */
   &-attachment--giphy {
     max-width: unset;
   }
 
+  .str-chat__message-attachment {
+    margin: var(--xs-m) 0 var(--xs-m) auto;
+  }
+
   &--me {
     .str-chat__message-attachment {
       padding-left: 0;
-      margin: var(--xs-m) 0 var(--xs-m) auto;
     }
   }
 }

diff --git a/src/v1/Message.scss b/src/v1/Message.scss
@@ -83,7 +83,7 @@
   /* group styling */
   &--top,
   &--single {
-    margin: 24px 0 0;
+    padding-top: calc(var(--md-p)/2);
 
     .str-chat__message {
       &-attachment--img,
@@ -176,7 +176,7 @@
   }
 
   &--bottom {
-    margin: 0 0 24px;
+    padding-bottom: calc(var(--md-p)/2);
 
     .str-chat__message {
       &-attachment--img,
@@ -217,7 +217,7 @@
   }
 
   &--single {
-    margin-bottom: var(--md-m);
+    padding-bottom: calc(var(--md-m)/2);
   }
 
   &--top,
@@ -233,16 +233,14 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
-            calc(var(--border-radius-sm) / 2);
+          border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
         }
       }
 
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) var(--border-radius)
-              calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
       }
@@ -253,25 +251,21 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
-            calc(var(--border-radius-sm) / 2);
+          border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
 
           &--has-attachment {
-            border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius)
-              var(--border-radius) calc(var(--border-radius-sm) / 2);
+            border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
           }
         }
       }
 
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) var(--border-radius)
-              calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
 
             &--has-attachment {
-              border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
-                calc(var(--border-radius-sm) / 2) var(--border-radius);
+              border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
             }
           }
         }
@@ -284,16 +278,14 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
-            calc(var(--border-radius-sm) / 2);
+          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
         }
       }
 
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
-              calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
 
             &--has-attachment {
               margin: 0;
@@ -304,8 +296,7 @@
         .str-chat__message-attachment-card {
           margin: 0;
           padding: 0;
-          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
-            calc(var(--border-radius-sm) / 2) var(--border-radius);
+          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
         }
       }
     }
@@ -319,7 +310,8 @@
   align-items: flex-end;
   padding: 0;
   position: relative;
-  margin: calc(var(--xxs-m) / 2) 0;
+  padding-top: var(--xxs-p);
+  padding-bottom: var(--xxs-p);
   width: 100%;
   transition: background-color 0.5s ease-out;
 
@@ -481,7 +473,6 @@
   /* me */
   &--me {
     display: inline-flex;
-    margin: var(--xxs-m) 0;
     justify-content: flex-end;
 
     .str-chat__message {
@@ -566,7 +557,7 @@
   }
 
   &--with-reactions {
-    margin-top: var(--md-m);
+    padding-top: var(--md-p);
   }
 
   &--highlighted {
@@ -595,20 +586,16 @@
       .str-chat {
         &__message,
         &__message--me {
-          margin: calc(var(--xxs-m) / 2) 0;
-
           &--with-reactions {
-            margin-top: var(--lg-m);
+            padding-top: var(--lg-p);
           }
         }
 
         &__message-attachment--image {
-          margin: calc(var(--xxs-m) / 2) 0;
           max-width: 480px;
         }
 
         &__message-attachment--card {
-          margin: calc(var(--xxs-m) / 2) 0;
           line-height: normal;
         }
 
@@ -962,7 +949,6 @@
   }
 
   .str-chat__message-attachment--file {
-    margin: 0;
     background: var(--white);
     border-color: transparent;
     border: 1px solid var(--grey-gainsboro);

diff --git a/src/v1/MessageCommerce.scss b/src/v1/MessageCommerce.scss
@@ -176,7 +176,7 @@
   }
 
   &--with-reactions {
-    margin-top: 30px;
+    padding-top: 30px;
 
     .str-chat__message-commerce__actions__action--reactions {
       display: none;

diff --git a/src/v1/Thread.scss b/src/v1/Thread.scss
@@ -10,11 +10,48 @@
   flex-direction: column;
   padding-top: 0;
 
-  .str-chat__thread-container {
-    height: 100%;
+  .str-chat__virtual-list .str-chat__virtual-list-message-wrapper {
+    padding-left: var(--md-p);
+    padding-right: var(--md-p);
+  }
+
+  &.str-chat__thread-container {
+    max-height: 100%;
     display: flex;
     flex-direction: column;
     width: 100%;
+
+    .str-chat__parent-message-li {
+      .str-chat__message {
+        padding-left: var(--md-p);
+        padding-right: var(--md-p);
+
+        .str-chat__message-inner {
+          min-width: 0;
+        }
+
+        .str-chat__message-attachment--image,
+        .str-chat__message-attachment-card {
+          border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) ;
+        }
+      }
+
+      .str-chat__message--me {
+        .str-chat__message-attachment--img,
+        .str-chat__message-attachment-card {
+          border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+        }
+      }
+
+      .str-chat__message--with-reactions {
+        padding-top: var(--xl-p);
+      }
+
+      .str-chat__message:not(.str-chat__message--has-attachment) {
+        padding-top: var(--xs-p);
+      }
+
+    }
   }
 
   &--full {

diff --git a/src/v1/VirtualMessage.scss b/src/v1/VirtualMessage.scss
@@ -3,12 +3,11 @@
   font-size: 0;
 
   .str-chat__virtual-list-message-wrapper {
-    padding: 1px var(--xl-p);
+    padding-left: var(--xl-p);
+    padding-right: var(--xl-p);
     width: 100%;
 
     .str-chat__message-simple {
-      padding-bottom: var(--sm-p);
-
       &.str-chat__virtual-message__wrapper--first {
         padding-bottom: 0;
         padding-left: var(--xl-p);
@@ -40,7 +39,6 @@
 
       &.str-chat__virtual-message__wrapper--group {
         align-items: center;
-        padding-bottom: 0;
         padding-left: var(--xl-p);
 
         &.str-chat__message-simple--me {
@@ -254,8 +252,6 @@
 }
 
 .str-chat__virtual-message__wrapper--group {
-  padding-top: 0;
-
   > .str-chat__avatar {
     display: none;
   }