From 63e8b74540ee739ac79ff0f0f3bdedeb1309bb37 Mon Sep 17 00:00:00 2001
From: Eduard Kuzmenko <thanwords24@gmail.com>
Date: Fri, 25 Feb 2022 15:36:13 +0200
Subject: [PATCH] Some bubble layout fixes

---
 src/scss/partials/_chatBubble.scss  | 17 ++++++++++-------
 src/scss/partials/_chatPinned.scss  | 10 +++++-----
 src/scss/partials/_leftSidebar.scss |  9 +++++----
 src/scss/partials/_row.scss         | 23 ++++++++++++-----------
 src/scss/style.scss                 |  5 +++++
 5 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss
index 306e8666..c6a4ff91 100644
--- a/src/scss/partials/_chatBubble.scss
+++ b/src/scss/partials/_chatBubble.scss
@@ -1023,9 +1023,15 @@ $bubble-beside-button-width: 38px;
         margin-top: 1px;
       }
     }
+
+    .webpage-name,
+    .text,
+    .title {
+      font-size: var(--messages-secondary-text-size);
+      line-height: var(--messages-secondary-line-height);
+    }
     
     .webpage-name {
-      font-size: var(--messages-secondary-text-size);
       text-decoration: none;
       
       @include hover() {
@@ -1036,7 +1042,6 @@ $bubble-beside-button-width: 38px;
     .text {
       word-break: break-word;
       margin-top: 1px;
-      font-size: var(--messages-secondary-text-size);
     }
 
     .quote {
@@ -1064,7 +1069,6 @@ $bubble-beside-button-width: 38px;
     }
   }
   
-  .web, 
   .reply {
     font-size: var(--messages-secondary-text-size);
   }
@@ -1834,13 +1838,12 @@ $bubble-beside-button-width: 38px;
   .name {
   // &-content > .name, 
   // .document-wrapper > .name {
-    /* padding: .2675rem 9px 0 9px; */
-    /* padding: .32rem 9px 0 9px; */
-    padding: 5px 9px 0 9px;
+    padding: .3125rem .625rem 0 .625rem;
     font-weight: 500 !important;
     /* padding-bottom: 4px; */
     color: var(--primary-color);
-    font-size: .9rem;
+    font-size: .875rem;
+    line-height: 1.25rem;
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/src/scss/partials/_chatPinned.scss b/src/scss/partials/_chatPinned.scss
index 8fca9fd2..893010fb 100644
--- a/src/scss/partials/_chatPinned.scss
+++ b/src/scss/partials/_chatPinned.scss
@@ -151,8 +151,8 @@
   
   &-title, 
   &-subtitle {
-    font-size: 14px;
-    line-height: var(--line-height);
+    font-size: var(--font-size-14);
+    line-height: var(--line-height-14);
 
     @include text-overflow();
   }
@@ -484,7 +484,7 @@
 
   &-subtitle {
     .animated-super-row {
-      font-size: .875rem;
+      font-size: var(--font-size-14);
       line-height: 16px;
       overflow: hidden;
       white-space: nowrap;
@@ -630,8 +630,8 @@
 
   &-title, 
   &-subtitle {
-    font-size: .875rem;
-    line-height: var(--line-height);
+    font-size: var(--font-size-14);
+    line-height: var(--line-height-14);
     width: 100%;
     max-width: 100%;
 
diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss
index fec24ac7..d887deef 100644
--- a/src/scss/partials/_leftSidebar.scss
+++ b/src/scss/partials/_leftSidebar.scss
@@ -648,9 +648,9 @@
 
   .row {
     .btn-primary {
-      height: 30px;
-      padding: 0 12px;
-      font-size: 15px;
+      height: 1.875rem;
+      padding: 0 .75rem;
+      font-size: .9375rem;
       width: auto;
       transition: width 0.2s;
       margin: 0;
@@ -658,7 +658,8 @@
       right: 1rem;
       top: 50%;
       transform: translateY(-50%);
-      border-radius: 15px;
+      border-radius: .9375rem;
+      line-height: 1.875rem;
 
       body.animation-level-0 & {
         transition: none;
diff --git a/src/scss/partials/_row.scss b/src/scss/partials/_row.scss
index 6045a8e1..6ddf82af 100644
--- a/src/scss/partials/_row.scss
+++ b/src/scss/partials/_row.scss
@@ -88,7 +88,8 @@
     }
   }
 
-  .radio-field-main, .checkbox-field {
+  .radio-field-main, 
+  .checkbox-field {
     padding-left: 3.375rem;
     margin-left: -3.375rem;
   }
@@ -100,18 +101,18 @@
     .checkbox-caption {
       padding-left: 0;
     }
-  }
 
-  .checkbox-field-toggle {
-    margin: 0;
-    margin-right: .125rem;
-    padding: 0;
+    &-toggle {
+      margin: 0;
+      margin-right: .125rem;
+      padding: 0;
+    }
   }
 
   &-subtitle {
     color: var(--secondary-text-color) !important;
     font-size: .875rem !important;
-    line-height: var(--line-height);
+    line-height: var(--line-height-14);
     margin-top: .125rem;
     margin-bottom: .0625rem;
     order: 1;
@@ -122,15 +123,15 @@
   }
 
   &-media {
-    width: 48px !important;
-    height: 48px !important;
+    width: 3rem !important;
+    height: 3rem !important;
     position: absolute !important;
     margin: 0 !important;
     left: .5rem;
 
     &-small {
-      width: 32px !important;
-      height: 32px !important;
+      width: 2rem !important;
+      height: 2rem !important;
       left: .75rem !important;
     }
   }
diff --git a/src/scss/style.scss b/src/scss/style.scss
index de1acb67..49b0e734 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -80,7 +80,12 @@ $chat-input-inner-padding-handhelds: .25rem;
   --messages-container-width: #{$messages-container-width};
   --messages-text-size: 16px;
   --messages-secondary-text-size: calc(var(--messages-text-size) - 2px);
+  --messages-secondary-line-height: calc(var(--messages-secondary-text-size) + 4px);
   --line-height: 1.3125;
+  --line-height-16: 21px;
+  --line-height-14: 18px;
+  --font-size-16: 16px;
+  --font-size-14: 14px;
   --esg-sticker-size: 80px;
   --disabled-opacity: .3;
   --round-video-size: 280px;