From 283b764bed35806f94c499f3b61596576ef75802 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 31 Mar 2020 13:58:17 +0300
Subject: [PATCH 1/2] MetaPreviewPlaceholder improved

---
 .../MetaPreviewPlaceholder.js                 | 13 +----
 .../MetaPreviewPlaceholder/styles.less        | 56 ++++++-------------
 2 files changed, 19 insertions(+), 50 deletions(-)

diff --git a/src/common/MetaPreview/MetaPreviewPlaceholder/MetaPreviewPlaceholder.js b/src/common/MetaPreview/MetaPreviewPlaceholder/MetaPreviewPlaceholder.js
index 7b20cd6cc..6ae38f72e 100644
--- a/src/common/MetaPreview/MetaPreviewPlaceholder/MetaPreviewPlaceholder.js
+++ b/src/common/MetaPreview/MetaPreviewPlaceholder/MetaPreviewPlaceholder.js
@@ -15,23 +15,14 @@ const MetaPreviewPlaceholder = ({ className }) => {
                 <div className={styles['description-container']}>
                     <div className={styles['description-label-container']} />
                     <div className={styles['description-label-container']} />
-                    <div className={styles['description-label-container']} />
                 </div>
                 <div className={styles['genres-container']}>
                     <div className={styles['genres-header-container']} />
-                    <div className={styles['genres-labels-container']}>
-                        <div className={styles['genre-label-container']} />
-                        <div className={styles['genre-label-container']} />
-                        <div className={styles['genre-label-container']} />
-                    </div>
+                    <div className={styles['genre-label-container']} />
                 </div>
                 <div className={styles['genres-container']}>
                     <div className={styles['genres-header-container']} />
-                    <div className={styles['genres-labels-container']}>
-                        <div className={styles['genre-label-container']} />
-                        <div className={styles['genre-label-container']} />
-                        <div className={styles['genre-label-container']} />
-                    </div>
+                    <div className={styles['genre-label-container']} />
                 </div>
             </div>
             <div className={styles['action-buttons-container']}>
diff --git a/src/common/MetaPreview/MetaPreviewPlaceholder/styles.less b/src/common/MetaPreview/MetaPreviewPlaceholder/styles.less
index dfcddf573..adf875f27 100644
--- a/src/common/MetaPreview/MetaPreviewPlaceholder/styles.less
+++ b/src/common/MetaPreview/MetaPreviewPlaceholder/styles.less
@@ -1,7 +1,7 @@
 .meta-preview-placeholder-container {
     display: flex;
     flex-direction: column;
-    padding: 1rem;
+    padding: 2rem;
 
     .meta-info-container {
         flex: 1;
@@ -11,7 +11,7 @@
             width: 20rem;
             height: 7rem;
             max-width: 100%;
-            background-color: var(--color-placeholder);
+            background-color: var(--color-placeholder-background);
         }
 
         .duration-release-info-container {
@@ -24,13 +24,13 @@
                 flex-basis: 5rem;
                 height: 1.4rem;
                 margin-right: 1rem;
-                background-color: var(--color-placeholder);
+                background-color: var(--color-placeholder-background);
             }
 
             .release-info-container {
                 flex-basis: 5rem;
                 height: 1.4rem;
-                background-color: var(--color-placeholder);
+                background-color: var(--color-placeholder-background);
             }
         }
 
@@ -38,25 +38,20 @@
             margin: 1rem 0;
 
             .description-label-container {
-                height: 1.4rem;
-                background-color: var(--color-placeholder);
+                background-color: var(--color-placeholder-background);
 
                 &:nth-child(1) {
-                    width: 26rem;
+                    width: 20rem;
+                    height: 1.4rem;
                     max-width: 80%;
                 }
 
                 &:nth-child(2) {
                     width: 26rem;
+                    height: 3.2rem;
                     max-width: 80%;
                     margin-top: 0.2rem;
                 }
-
-                &:nth-child(3) {
-                    width: 23rem;
-                    max-width: 70%;
-                    margin-top: 0.2rem;
-                }
             }
         }
 
@@ -67,32 +62,15 @@
                 width: 6.5rem;
                 height: 1.6rem;
                 max-width: 100%;
-                background-color: var(--color-placeholder);
+                background-color: var(--color-placeholder-background);
             }
 
-            .genres-labels-container {
-                display: flex;
-                flex-direction: row;
+            .genre-label-container {
+                width: 10rem;
+                height: 1.2rem;
+                max-width: 100%;
                 margin-top: 0.2rem;
-
-                .genre-label-container {
-                    height: 1.2rem;
-                    background-color: var(--color-placeholder);
-
-                    &:nth-child(1) {
-                        flex-basis: 6rem;
-                        margin-right: 0.2rem;
-                    }
-
-                    &:nth-child(2) {
-                        flex-basis: 4rem;
-                        margin-right: 0.2rem;
-                    }
-
-                    &:nth-child(3) {
-                        flex-basis: 7rem;
-                    }
-                }
+                background-color: var(--color-placeholder-background);
             }
         }
     }
@@ -108,7 +86,7 @@
             width: 6rem;
             height: 6rem;
             margin-right: 1rem;
-            background-color: var(--color-placeholder);
+            background-color: var(--color-placeholder-background);
 
             &:last-child {
                 margin-right: 0;
@@ -118,14 +96,14 @@
                 width: 2rem;
                 height: 2rem;
                 margin: 1rem 2rem 0 2rem;
-                background-color: var(--color-placeholder);
+                background-color: var(--color-placeholder-background);
             }
 
             .action-button-label {
                 width: 4rem;
                 height: 1.2rem;
                 margin: 0.9rem 1rem;
-                background-color: var(--color-placeholder);
+                background-color: var(--color-placeholder-background);
             }
         }
     }

From efd84a475f0456717978f99fcbdc0420f0f591be Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 31 Mar 2020 14:20:04 +0300
Subject: [PATCH 2/2] MetaPreviewPlaceholder sizes improved

---
 src/common/MetaPreview/MetaPreviewPlaceholder/styles.less | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/common/MetaPreview/MetaPreviewPlaceholder/styles.less b/src/common/MetaPreview/MetaPreviewPlaceholder/styles.less
index adf875f27..59cc0d60c 100644
--- a/src/common/MetaPreview/MetaPreviewPlaceholder/styles.less
+++ b/src/common/MetaPreview/MetaPreviewPlaceholder/styles.less
@@ -9,7 +9,7 @@
 
         .logo-container {
             width: 20rem;
-            height: 7rem;
+            height: 8rem;
             max-width: 100%;
             background-color: var(--color-placeholder-background);
         }
@@ -48,9 +48,9 @@
 
                 &:nth-child(2) {
                     width: 26rem;
-                    height: 3.2rem;
+                    height: 4.6rem;
                     max-width: 80%;
-                    margin-top: 0.2rem;
+                    margin-top: 1rem;
                 }
             }
         }
@@ -85,7 +85,7 @@
             flex: none;
             width: 6rem;
             height: 6rem;
-            margin-right: 1rem;
+            margin-right: 2rem;
             background-color: var(--color-placeholder-background);
 
             &:last-child {