Composer: same alignment for EmbededMessage and WebPage (#4014)

src/components/common/Composer.scss

@@ -610,7 +610,7 @@
     }
 
     @media (min-width: 600px) {
-      left: 0.75rem;
+      left: 0.5rem;
     }
   }
 
@@ -699,7 +699,7 @@
       padding-right: 0;
 
       @media (min-width: 600px) {
-        padding-left: 0.75rem;
+        padding-left: 0.5rem;
       }
     }
   }

src/components/common/embedded/EmbeddedMessage.scss

@@ -190,6 +190,8 @@
 
   &.inside-input {
     flex-grow: 1;
+    margin: 0;
+    border-radius: 0.25rem;
 
     .embedded-thumb {
       margin-left: 0.125rem;

src/components/middle/composer/ComposerEmbeddedMessage.scss

@@ -19,17 +19,14 @@
   &_inner {
     display: flex;
     align-items: center;
-    padding-right: 0.625rem;
+    margin-top: 0.5rem;
-    padding-top: 0.1875rem;
   }
 
   & .embedded-left-icon {
     flex-shrink: 0;
     background: none !important;
-    width: 3.5rem;
+    height: 2.625rem;
-    height: 2.875rem;
+    padding: 0.5625rem 0.75rem 0.5625rem 1rem;
-    margin: 0 -0.0625rem 0 0;
-    padding: 0;
     display: grid;
     place-content: center;
     font-size: 1.5rem;
@@ -43,15 +40,15 @@
   & .embedded-cancel {
     flex-shrink: 0;
     background: none !important;
-    width: 2.25rem;
+    width: auto;
-    height: 2.875rem;
+    height: 1.5rem;
-    margin: 0 -0.0625rem 0 0.75rem;
     padding: 0;
+    margin: 0.5625rem 1rem 0.5625rem 0.75rem;
     align-self: center;
     color: var(--accent-color, var(--color-primary));
 
     @media (max-width: 600px) {
-      width: 1.75rem;
+      margin: 0.5625rem 0.75rem 0.5625rem 0.5rem;
     }
   }
 

src/components/middle/composer/WebPagePreview.scss

@@ -1,5 +1,6 @@
 .WebPagePreview {
   height: 2.625rem;
+  margin-top: 0.5rem;
   /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
   transition: height 150ms ease-out, opacity 150ms ease-out;
 
@@ -19,15 +20,11 @@
   &_inner {
     display: flex;
     align-items: center;
-    padding-right: 0.625rem;
-    padding-top: 0.1875rem;
   }
 
   --accent-color: var(--color-primary);
 
   .ComposerEmbeddedMessage + & {
-    margin-top: 0.75rem;
-
     body.no-message-composer-animations & {
       transition: opacity 150ms ease-out;
     }
@@ -36,14 +33,12 @@
   & &-left-icon {
     flex-shrink: 0;
     background: none !important;
-    width: 3.5rem;
+    height: 2.625rem;
-    height: 2.875rem;
+    padding: 0.5625rem 0.75rem 0.5625rem 1rem;
-    margin: 0 -0.0625rem 0 0;
-    padding: 0;
     display: grid;
     place-content: center;
     font-size: 1.5rem;
-    color: var(--color-primary);
+    color: var(--accent-color);
 
     @media (max-width: 600px) {
       width: 2.875rem;
@@ -53,28 +48,23 @@
   & &-clear {
     flex-shrink: 0;
     background: none !important;
-    width: 2.25rem;
+    width: auto;
-    height: 2.875rem;
+    height: 1.5rem;
-    margin: 0 -0.0625rem 0 0;
     padding: 0;
+    margin: 0.5625rem 1rem 0.5625rem 0.75rem;
     align-self: center;
+    color: var(--accent-color);
 
     @media (max-width: 600px) {
-      width: 1.75rem;
+      margin: 0.5625rem 0.75rem 0.5625rem 0.5rem;
     }
   }
 
   .WebPage {
     flex-grow: 1;
-    margin: 0.1875rem 0 0.1875rem 0.125rem;
     max-width: calc(100% - 3.375rem);
     overflow: hidden;
 
-    &::before {
-      top: 0.125rem;
-      bottom: 0.0625rem;
-    }
-
     &.with-video .media-inner {
       display: none;
     }

src/components/middle/message/WebPage.scss

@@ -10,6 +10,15 @@
   position: relative;
   overflow: hidden;
 
+  &.in-preview {
+    border-radius: 0.25rem;
+    background-color: var(--color-primary-tint);
+    height: 2.625rem;
+    margin: 0;
+    padding: 0.125rem 0.25rem 0.125rem 0.625rem;
+    transition: background-color 0.2s ease-in;
+  }
+
   &::before {
     content: "";
     display: block;

src/styles/_variables.scss

@@ -102,6 +102,7 @@ $color-message-story-mention-to: #74bcff;
   --color-primary-shade-rgb: #{toRGB(color.mix($color-primary, $color-black, 92%))};
   --color-primary-opacity: rgba(var(--color-primary), 0.25);
   --color-primary-opacity-hover: rgba(var(--color-primary), 0.15);
+  --color-primary-tint: rgba(var(--color-primary), 0.1);
   --color-green: #{$color-green};
   --color-green-darker: #{color.mix($color-green, $color-black, 84%)};
 

src/styles/themes.json

@@ -2,6 +2,7 @@
   "--color-primary": ["#3390EC", "#8774E1"],
   "--color-primary-opacity": ["#50A2E940", "#8378DB80"],
   "--color-primary-opacity-hover": ["#50A2E926", "#8378DBA0"],
+  "--color-primary-tint": ["#3390ec1a", "#8774e11a"],
   "--color-primary-shade": ["#4a95d6", "#7b71c6"],
   "--color-background": ["#FFFFFF", "#212121"],
   "--color-background-compact-menu": ["#FFFFFFBB", "#212121DD"],