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);
}
}
}