Contact Message: Fix style inconsistencies (#5314)

src/components/common/PeerColorWrapper.module.scss

@@ -2,7 +2,8 @@
   position: relative;
   overflow: hidden;
 
-  padding-inline-start: 0.5rem;
+  padding-inline-start: 0.5625rem;
+  padding-inline-end: 0.375rem;
 
   border-radius: 0.25rem;
 

src/components/middle/message/Contact.module.scss

@@ -1,11 +1,12 @@
 .root {
   position: relative;
-  margin: 0.25rem 0.25rem 0.875rem 0.25rem;
+  margin-top: 0.25rem;
+  margin-bottom: var(--message-meta-height);
 }
 
 .info-container {
   display: flex;
-  padding: 0.5rem 1.5rem 0.5rem 0.75rem;
+  padding: 0.5rem 1.5rem 0.5rem 0.125rem;
   cursor: var(--custom-cursor, pointer);
 }
 
@@ -35,19 +36,19 @@
 
 .divider {
   height: 0.0625rem;
-  margin: 0 0.5rem;
   background: var(--accent-color);
   filter: opacity(0.35);
 }
 
 .buttons {
   display: flex;
+  padding-block: 0.125rem;
 
   .button {
     width: auto;
     flex: 1;
     height: 2.25rem;
-    margin: 0.375rem;
+    margin-block: 0.25rem;
     font-weight: 500;
     background-color: transparent;
     color: var(--accent-color);

src/components/middle/message/FactCheck.module.scss

@@ -4,7 +4,6 @@
   margin-top: 0.5rem;
   font-size: 0.875rem;
   padding-block: 0.25rem;
-  padding-inline-end: 0.25rem;
 }
 
 .title {

src/components/middle/message/SponsoredMessage.scss

@@ -71,24 +71,9 @@
   }
 
   .content-inner {
-    padding-top: 0.375rem;
+    padding-top: 0.25rem;
-    padding-inline-end: 0.375rem;
     padding-bottom: 0;
-    padding-inline-start: 0.625rem;
     font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
-    background-color: var(--accent-background-color);
-    overflow: hidden;
-
-    &::before {
-      content: "";
-      display: block;
-      position: absolute;
-      top: 0;
-      inset-inline-start: 0;
-      bottom: 0;
-      width: 3px;
-      background: var(--bar-gradient, var(--accent-color));
-    }
 
     > .Button {
       border-radius: 0 0 0.375rem 0.375rem;

src/components/middle/message/WebPage.scss

@@ -1,7 +1,8 @@
 .WebPage {
+  color: var(--color-text);
   margin-top: 0.25rem;
   margin-bottom: 0.125rem;
-  padding: 0.1875rem;
+  padding-block: 0.1875rem;
   font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
   line-height: 1.125rem;
   max-width: 29rem;
@@ -11,7 +12,7 @@
   overflow: hidden;
 
   &.with-video {
-    padding: 0.1875rem 0.375rem;
+    padding-block: 0.375rem;
   }
 
   &--background-icons {
@@ -39,11 +40,12 @@
   }
 
   &.in-preview {
+    padding-inline-start: 0.5rem;
+    padding-inline-end: 0.375rem;
     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;
 
     &.interactive {
@@ -54,21 +56,8 @@
     }
   }
 
-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    inset-inline-start: 0;
-    bottom: 0;
-    width: 3px;
-    background: var(--bar-gradient, var(--accent-color));
-  }
-
   .WebPage--content {
     position: relative;
-    margin-inline-start: 0.375rem;
-    margin-inline-end: 0.25rem;
 
     &.is-story {
       display: flex;
@@ -105,7 +94,8 @@
 
   .media-inner {
     margin: 0 !important;
-    margin-block: 0.25rem !important;
+    margin-block-end: 0.1875rem !important;
+    margin-block-start: 0.25rem !important;
 
     &,
     & img,

src/components/middle/message/WebPage.tsx

@@ -22,6 +22,7 @@ import useOldLang from '../../../hooks/useOldLang';
 import Audio from '../../common/Audio';
 import Document from '../../common/Document';
 import EmojiIconBackground from '../../common/embedded/EmojiIconBackground';
+import PeerColorWrapper from '../../common/PeerColorWrapper';
 import SafeLink from '../../common/SafeLink';
 import StickerView from '../../common/StickerView';
 import Button from '../../ui/Button';
@@ -87,8 +88,6 @@ const WebPage: FC<OwnProps> = ({
   const webPage = getMessageWebPage(message);
   const { isMobile } = useAppLayout();
   // eslint-disable-next-line no-null/no-null
-  const ref = useRef<HTMLDivElement>(null);
-  // eslint-disable-next-line no-null/no-null
   const stickersRef = useRef<HTMLDivElement>(null);
 
   const lang = useOldLang();
@@ -177,8 +176,7 @@ const WebPage: FC<OwnProps> = ({
   }
 
   return (
-    <div
+    <PeerColorWrapper
-      ref={ref}
       className={className}
       data-initial={(siteName || displayUrl)[0]}
       dir={lang.isRtl ? 'rtl' : 'auto'}
@@ -292,7 +290,7 @@ const WebPage: FC<OwnProps> = ({
         )}
       </div>
       {quickButtonLangKey && renderQuickButton(quickButtonLangKey)}
-    </div>
+    </PeerColorWrapper>
   );
 };