various design review fixes

src/components/AddImages/AddImages.css

@@ -17,7 +17,7 @@
   float: left;
   position: relative;
   width: 100%;
-  margin: 5px 0;
+  margin: 5px 0 12px;
   overflow: hidden;
 }
 
@@ -35,6 +35,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
+  border-radius: 2px;
 }
 
 .thumbnailLoading {

src/components/Avatar/Avatar.css

@@ -62,3 +62,15 @@
   background-color: var(--matterColorAnti);
   color: var(--matterColorLight);
 }
+
+span {
+  padding-bottom: 4px;
+}
+
+.mediumAvatar span {
+  padding-bottom: 5px;
+}
+
+.largeAvatar span {
+  padding-bottom: 6px;
+}

src/components/EditListingWizard/EditListingWizard.css

@@ -10,8 +10,7 @@
   /* Layout */
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
-  padding: 11px 24px 0 24px;
+  padding: 10px 24px 0 24px;
 
   border-top-width: 1px;
   border-top-color: var(--matterColorNegative);
@@ -23,3 +22,7 @@
 .panel {
   flex-grow: 1;
 }
+
+h1 {
+  padding-bottom: 1px;
+}

src/components/TabNav/TabNav.css

@@ -3,12 +3,11 @@
 .root {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
   overflow-x: auto;
 }
 
 .tab {
-  margin-left: 24px;
+  margin-left: 16px;
 
   &:first-child {
     margin-left: 0;
@@ -39,10 +38,11 @@
 
 .selectedLink {
   border-bottom: 2px solid var(--matterColorDark);
+  color: var(--matterColorDark);
 }
 
 .disabled {
   pointer-events: none;
-  color: #999;
+  color: var(--matterColorAnti);
   text-decoration: none;
 }

src/containers/EditListingPhotosForm/EditListingPhotosForm.css

@@ -11,6 +11,7 @@
 
 .imagesField {
   flex-shrink: 0;
+  margin: 1px 0 11px 0;
 }
 
 .addImageWrapper {
@@ -50,10 +51,11 @@
   margin-top: 0;
 
   /* Colors */
-  background-color: #F2F2F2;
+  background-color: #F7F7F7;
   border-style: dashed;
   border-color: #E6E6E6;
   border-width: 2px;
+  border-radius: 2px;
 
   /* Behaviour */
   cursor: pointer;
@@ -68,6 +70,7 @@
 .chooseImage {
   @apply --marketplaceH4FontStyles;
   color: var(--matterColor);
+  font-weight: var(--fontWeightSemiBold);
 
   margin-top: 0;
   margin-bottom: 0;
@@ -101,10 +104,11 @@
 .tip {
   flex-shrink: 0;
   color: var(--matterColorAnti);
+  margin-top: 0;
 }
 
 .submitButton {
   flex-shrink: 0;
-  margin-top: auto;
+  margin-top: 60px;
   margin-bottom: 24px;
 }

src/containers/InboxPage/InboxPage.css

@@ -159,8 +159,9 @@
   /* Font */
   @apply --marketplaceH4FontStyles;
   color: var(--matterColor);
+  line-height: 20px;
 
-  margin-top: 0;
+  margin-top: 2px;
   margin-bottom: 0px;
   @media (--desktopViewport) {
     margin-top: 0;
@@ -172,7 +173,7 @@
   /* Font */
   @apply --marketplaceH5FontStyles;
 
-  margin-top: 4px;
+  margin-top: 0px;
   margin-bottom: 0px;
   @media (--desktopViewport) {
     margin-top: 4px;
@@ -200,6 +201,8 @@
 
 .namePending {
   font-weight: var(--fontWeightBold);
+  margin-top: 1px;
+  line-height: 21px;
 }
 
 .timePending {

src/translations/en.json

@@ -45,7 +45,7 @@
   "DateRangeInputField.screenReaderInputMessage": "Date input",
   "DateRangeInputField.startDatePlaceholderText": "Add start date",
   "EditListingDescriptionForm.description": "Describe your sauna",
-  "EditListingDescriptionForm.descriptionPlaceholder": " ",
+  "EditListingDescriptionForm.descriptionPlaceholder": "How many people can fit in at once? Does the sauna come with towels?",
   "EditListingDescriptionForm.descriptionRequired": "You need to add a description.",
   "EditListingDescriptionForm.maxLength": "Must be {maxLength} characters or less",
   "EditListingDescriptionForm.title": "Name of your sauna",