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 }) => {
-
-
-
-
-
-
+
-
-
-
-
-
+
diff --git a/src/common/MetaPreview/MetaPreviewPlaceholder/styles.less b/src/common/MetaPreview/MetaPreviewPlaceholder/styles.less index dfcddf573..59cc0d60c 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; @@ -9,9 +9,9 @@ .logo-container { width: 20rem; - height: 7rem; + height: 8rem; 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,24 +38,19 @@ 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: 4.6rem; max-width: 80%; - margin-top: 0.2rem; - } - - &:nth-child(3) { - width: 23rem; - max-width: 70%; - margin-top: 0.2rem; + margin-top: 1rem; } } } @@ -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); } } } @@ -107,8 +85,8 @@ flex: none; width: 6rem; height: 6rem; - margin-right: 1rem; - background-color: var(--color-placeholder); + margin-right: 2rem; + 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); } } }