coders review on designers review

src/components/AddImages/AddImages.css

@@ -1,3 +1,5 @@
+@import '../../marketplace.css';
+
 .root {
   width: 100%;
   min-height: 120px;
@@ -17,7 +19,7 @@
   float: left;
   position: relative;
   width: 100%;
-  margin: 5px 0 12px;
+  margin: 5px 0 12px 0;
   overflow: hidden;
 }
 
@@ -35,7 +37,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 2px;
+  border-radius: var(--borderRadius);
 }
 
 .thumbnailLoading {

src/components/Avatar/Avatar.css

@@ -63,14 +63,14 @@
   color: var(--matterColorLight);
 }
 
-span {
+.initials {
   padding-bottom: 4px;
 }
 
-.mediumAvatar span {
+.mediumAvatar .initials {
   padding-bottom: 5px;
 }
 
-.largeAvatar span {
+.largeAvatar .initials {
   padding-bottom: 6px;
 }

src/components/Avatar/Avatar.js

@@ -12,7 +12,7 @@ const Avatar = props => {
 
   const placeHolderAvatar = (
     <div className={classes} title={authorName}>
-      <span>{initials}</span>
+      <span className={css.initials}>{initials}</span>
     </div>
   );
 

src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.css

@@ -10,3 +10,7 @@
 .form {
   flex-grow: 1;
 }
+
+.title {
+  margin-bottom: 19px;
+}

src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js

@@ -13,7 +13,7 @@ const EditListingDescriptionPanel = props => {
 
   return (
     <div className={classes}>
-      <h1><FormattedMessage id="EditListingDescriptionPanel.title" /></h1>
+      <h1 className={css.title}><FormattedMessage id="EditListingDescriptionPanel.title" /></h1>
       <EditListingDescriptionForm
         className={css.form}
         initialValues={{ title, description }}

src/components/EditListingLocationPanel/EditListingLocationPanel.css

@@ -10,3 +10,7 @@
 .form {
   flex-grow: 1;
 }
+
+.title {
+  margin-bottom: 19px;
+}

src/components/EditListingLocationPanel/EditListingLocationPanel.js

@@ -39,7 +39,7 @@ const EditListingLocationPanel = props => {
 
   return (
     <div className={classes}>
-      <h1><FormattedMessage id="EditListingLocationPanel.title" /></h1>
+      <h1 className={css.title}><FormattedMessage id="EditListingLocationPanel.title" /></h1>
       <EditListingLocationForm
         className={css.form}
         initialValues={initialSearchFormValues}

src/components/EditListingPhotosPanel/EditListingPhotosPanel.css

@@ -24,3 +24,7 @@
   margin-bottom: 36px;
   padding: 0 24px;
 }
+
+.title {
+  margin-bottom: 19px;
+}

src/components/EditListingPhotosPanel/EditListingPhotosPanel.js

@@ -85,7 +85,7 @@ class EditListingPhotosPanel extends Component {
 
     return (
       <div className={classes}>
-        <h1><FormattedMessage id="EditListingPhotosPanel.title" /></h1>
+        <h1 className={css.title}><FormattedMessage id="EditListingPhotosPanel.title" /></h1>
         <EditListingPhotosForm
           className={css.form}
           disabled={fetchInProgress}

src/components/EditListingPricingPanel/EditListingPricingPanel.css

@@ -10,3 +10,7 @@
 .form {
   flex-grow: 1;
 }
+
+.title {
+  margin-bottom: 19px;
+}

src/components/EditListingPricingPanel/EditListingPricingPanel.js

@@ -13,7 +13,7 @@ const EditListingPricingPanel = props => {
 
   return (
     <div className={classes}>
-      <h1><FormattedMessage id="EditListingPricingPanel.title" /></h1>
+      <h1 className={css.title}><FormattedMessage id="EditListingPricingPanel.title" /></h1>
       <EditListingPricingForm className={css.form} initialValues={{ price }} onSubmit={onSubmit} />
     </div>
   );

src/components/EditListingWizard/EditListingWizard.css

@@ -22,7 +22,3 @@
 .panel {
   flex-grow: 1;
 }
-
-h1 {
-  padding-bottom: 1px;
-}

src/containers/EditListingPhotosForm/EditListingPhotosForm.css

@@ -105,10 +105,11 @@
   flex-shrink: 0;
   color: var(--matterColorAnti);
   margin-top: 0;
+  margin-bottom: 60px;
 }
 
 .submitButton {
   flex-shrink: 0;
-  margin-top: 60px;
+  margin-top: auto;
   margin-bottom: 24px;
 }

src/containers/InboxPage/InboxPage.css

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