Invoice: Fix title padding (#3450)

src/components/middle/message/Invoice.scss

@@ -2,6 +2,7 @@
   .title {
     color: var(--accent-color);
     font-weight: 500;
+    margin-bottom: 0;
   }
 
   .description {
@@ -13,6 +14,10 @@
         margin: 0.5rem -0.5rem -0.375rem;
       }
 
+      .message-content.has-reactions & {
+        margin-bottom: 0;
+      }
+
       .invoice-image {
         position: relative;
         width: 100%;

src/components/middle/message/Message.tsx

@@ -1101,7 +1101,7 @@ const Message: FC<OwnProps & StateProps> = ({
         {invoice && !invoice.extendedMedia && (
           <Invoice
             message={message}
-            shouldAffectAppendix={hasCustomAppendix}
+            shouldAffectAppendix={hasCustomAppendix && !hasReactions}
             isInSelectMode={isInSelectMode}
             isSelected={isSelected}
             theme={theme}

src/components/middle/message/MessageMeta.scss

@@ -84,7 +84,7 @@
 
   .media:not(.text) &,
   .Message .custom-shape &,
-  .Message .invoice & {
+  .Message .invoice:not(.has-reactions) & {
     --color-accent-own: white;
     --color-accent: white;
     color: white !important;
@@ -101,7 +101,7 @@
   }
 
   .media:not(.text) &,
-  .Message .invoice & {
+  .Message .invoice:not(.has-reactions) & {
     background: rgba(0, 0, 0, 0.2);
   }