chore: styling cleanup (#3074)

Author: arnautov-anton

src/components/Attachment/styling/Attachment.scss

@@ -2,10 +2,9 @@
 
 .str-chat {
   /* The margin applied to every attachment in the attachment list */
-  --str-chat__attachment-margin: var(--str-chat__spacing-0_5);
-
-  /* The border radius used for the borders of the component */
-  --str-chat__attachment-list-border-radius: 0;
+  --str-chat__attachment-margin: var(--space-2)
+    /* The border radius used for the borders of the component */
+    --str-chat__attachment-list-border-radius: 0;
 
   /* The text/icon color of the component */
   --str-chat__attachment-list-color: var(--str-chat__text-color);
@@ -328,7 +327,7 @@
 
   .str-chat__gallery .str-chat__message-attachment--svg-image,
   .str-chat__message-attachment--image.str-chat__message-attachment--svg-image {
-    $padding: var(--str-chat__spacing-6);
+    $padding: var(--space-24);
     padding: $padding;
 
     img {
@@ -344,8 +343,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--str-chat__spacing-2);
-    column-gap: var(--str-chat__spacing-4);
+    padding: var(--space-8);
+    column-gap: var(--space-16);
     //margin: var(--str-chat__attachment-margin);
 
     .str-chat__file-icon {
@@ -380,7 +379,7 @@
       flex-direction: column;
       align-items: flex-start;
       justify-content: center;
-      row-gap: var(--str-chat__spacing-0_5);
+      row-gap: var(--space-2);
       min-width: 0;
       line-height: var(--typography-line-height-tight);
 
@@ -390,7 +389,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        column-gap: var(--str-chat__spacing-2);
+        column-gap: var(--space-8);
         font-weight: var(--typography-font-weight-semi-bold);
         font-size: var(--typography-font-size-sm);
 
@@ -435,29 +434,12 @@
         color: var(--str-chat__voice-recording-attachment-widget-color);
       }
 
-      .str-chat__message-attachment-voice-recording-widget--first-row {
-        @include utils.ellipsis-text-parent;
-
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--str-chat__spacing-1);
-      }
-
       .str-chat__message-attachment-download-icon {
         svg {
           width: calc(var(--str-chat__spacing-px) * 24);
           height: calc(var(--str-chat__spacing-px) * 16);
         }
       }
-
-      .str-chat__message-attachment__voice-recording-widget__error-message {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        gap: var(--str-chat__spacing-1);
-      }
     }
 
     .str-chat__message-attachment__voice-recording-widget__right-section {
@@ -476,10 +458,6 @@
   .str-chat__message-attachment-download-icon {
     --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16);
   }
-
-  .str-chat__attachment-type-icon {
-    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 37);
-  }
 }
 
 .str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text {

src/components/Attachment/styling/CardAudio.scss

@@ -1,5 +1,3 @@
-@use '../../../styling/utils';
-
 .str-chat__message-attachment-card--audio {
   .str-chat__message-attachment-card--content {
     padding: 0;

src/components/Attachment/styling/Geolocation.scss

@@ -93,7 +93,7 @@
 
       .str-chat__message-attachment-geolocation__status--active-until {
         text-transform: lowercase;
-        font: var(--str-chat__caption-text);
+        font: var(--str-chat__metadata-emphasis-text);
       }
     }
   }

src/components/Attachment/styling/Giphy.scss

@@ -1,4 +1,4 @@
-@use '../../../styling/utils';
+@use '../../../styling/utils' as utils;
 
 .str-chat {
   /* The height of GIFs */

src/components/Attachment/styling/ModalGallery.scss

@@ -23,7 +23,7 @@
       grid-template-rows: 50% 50%;
       overflow: hidden;
       border-radius: var(--radius-lg);
-      gap: var(--str-chat__spacing-0_5);
+      gap: var(--space-2);
       width: $max-width;
       max-width: $max-width;
       // CDN resize requires height/max-height to be present on the img element, this rule ensures that

src/components/Avatar/styling/Avatar.scss

@@ -27,7 +27,8 @@
     height: 100%;
   }
 
-  .str-chat__icon--person {
+  // people icon for avatars without images and initials
+  .str-chat__icon {
     width: var(--avatar-icon-size);
     height: var(--avatar-icon-size);
     stroke-width: var(--avatar-icon-stroke-width);

src/components/Channel/styling/Channel.scss

@@ -204,9 +204,6 @@
   /* Right (left in RTL layout) border of the component */
   --str-chat__channel-border-inline-end: none;
 
-  /* The icon color used when no channel is selected */
-  --str-chat__channel-empty-indicator-color: var(--str-chat__disabled-color);
-
   /* The base surface color behind the loading shimmer */
   --str-chat__channel-loading-state-color: var(--background-core-surface);
 }

src/components/ChannelList/styling/ChannelList.scss

@@ -127,7 +127,7 @@
   .str-chat__channel-list-inner {
     height: 100%;
     overflow: hidden;
-    padding-bottom: var(--str-chat__spacing-2_5);
+    padding-bottom: calc(var(--space-8) + var(--space-2));
 
     .str-chat__channel-list-inner__main {
       height: 100%;
@@ -139,7 +139,7 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        padding: var(--str-chat__spacing-3);
+        padding: calc(var(--space-8) + var(--space-4));
 
         p {
           color: var(--text-secondary);
@@ -152,17 +152,13 @@
   .str-chat__load-more-button {
     display: flex;
     justify-content: center;
-    margin: var(--str-chat__spacing-2) 0;
+    margin: var(--space-8) 0;
 
     .str-chat__load-more-button__button {
       @include utils.flex-row-center;
     }
   }
 
-  .stream-chat__paginated-list {
-    gap: 0;
-  }
-
   .str-chat__load-more-button__button {
     @include utils.component-layer-overrides('channel-list-load-more');
     width: 80%;

src/components/Dialog/styling/Alert.scss

@@ -33,7 +33,7 @@
       }
 
       .str-chat__alert-header__description {
-        font: var(--str-chat__caption-default-tex);
+        font: var(--str-chat__caption-default-text);
       }
     }
   }

src/components/Dialog/styling/Prompt.scss

@@ -25,7 +25,7 @@
     }
 
     .str-chat__prompt__header__description {
-      font: var(--str-chat__body-text);
+      font: var(--str-chat__caption-default-text);
       color: var(--text-secondary);
     }
 
@@ -39,10 +39,6 @@
     /* Vertical padding so focus rings (e.g. TextInput wrapper box-shadow) are not clipped by scrollable-y */
     padding: var(--spacing-xxs) var(--spacing-xl);
     @include utils.scrollable-y;
-
-    .str-chat__prompt__title {
-      margin-bottom: 1rem;
-    }
   }
 
   .str-chat__prompt__footer {