Invoice: Adjust styles (#5728)

src/components/middle/message/Invoice.scss

@@ -5,10 +5,20 @@
     margin-bottom: 0;
   }
 
+  .info {
+    line-height: 1.25;
+  }
+
   .description {
     position: relative;
     margin-top: 0.5rem;
 
+    .description-text {
+      .star-amount-icon {
+        margin-inline-start: 0;
+      }
+    }
+
     &.has-image {
       .content-inner:not(.forwarded-message) & {
         margin: 0.5rem -0.5rem -0.375rem;

src/components/middle/message/Invoice.tsx

@@ -96,7 +96,7 @@ const Invoice: FC<OwnProps> = ({
         <p className="title">{renderText(title)}</p>
       )}
       {description && (
-        <div>{renderText(description, ['emoji', 'br'])}</div>
+        <div className="info">{renderText(description, ['emoji', 'br'])}</div>
       )}
       <div className={`description ${photo ? 'has-image' : ''}`}>
         {Boolean(photo) && (

src/components/middle/message/MessageMeta.scss

@@ -91,7 +91,7 @@
 
   .media.no-footer &,
   .Message .custom-shape &,
-  .Message .invoice:not(.has-reactions) & {
+  .Message .invoice:not(.has-reactions).has-photo & {
     --color-accent-own: white;
     --color-accent: white;
     color: white !important;
@@ -108,7 +108,7 @@
   }
 
   .media.no-footer &,
-  .Message .invoice:not(.has-reactions) & {
+  .Message .invoice:not(.has-reactions).has-photo & {
     background: rgba(0, 0, 0, 0.2);
   }
 

src/components/middle/message/helpers/buildContentClassName.ts

@@ -148,6 +148,10 @@ export function buildContentClassName(
     classNames.push('invoice');
   }
 
+  if (invoice && invoice.photo) {
+    classNames.push('has-photo');
+  }
+
   if (storyData) {
     classNames.push('story');
   }