Merge pull request #243 from sharetribe/searchpage-fonts-shift

Font shift and rounded borders for ListingCard's image.

src/components/ListingCard/ListingCard.css

@@ -31,6 +31,7 @@
   left: 0;
   right: 0;
   width: 100%;
+  border-radius: 2px;
 }
 
 .info {
@@ -51,15 +52,15 @@
 
 .priceValue {
   /* Font */
-  @apply --marketplaceH4FontStyles;
+  @apply --marketplaceH3FontStyles;
 
   /* Remove default margins from font */
   margin-top: 0;
-  margin-bottom: 4px;
+  margin-bottom: 0;
 
   @media (--desktopViewport) {
     margin-top: 0;
-    margin-bottom: 4px;
+    margin-bottom: 0;
   }
 }
 
@@ -86,16 +87,16 @@
 
 .title {
   /* Font */
-  @apply --marketplaceH4FontStyles;
+  @apply --marketplaceH3FontStyles;
   color: var(--matterColor);
 
   /* Remove default margins from font */
   margin-top: 0;
-  margin-bottom: 4px;
+  margin-bottom: 0;
 
   @media (--desktopViewport) {
     margin-top: 0;
-    margin-bottom: 4px;
+    margin-bottom: 0;
   }
 }
 

src/containers/SearchPage/SearchPage.css

@@ -7,12 +7,14 @@
 
 .searchResultSummary {
   /* Layout */
-  margin: 18px 24px;
+  margin: 8px 24px 15px 24px;
+}
+
+.error {
+  color: var(--failColor);
 }
 
 .searchString {
-  /* Font color */
-  color: var(--marketplaceColor);
   white-space: nowrap;
 }
 

src/containers/SearchPage/SearchPage.js

@@ -45,36 +45,36 @@ export const SearchPageComponent = props => {
   const listingsAreLoaded = !searchInProgress && searchParamsMatch && hasPaginationInfo;
 
   const searchError = (
-    <p style={{ color: 'red' }}>
+    <h2 className={css.error}>
       <FormattedMessage id="SearchPage.searchError" />
-    </p>
+    </h2>
   );
 
   const resultsFoundNoAddress = (
-    <h3>
+    <h2>
       <FormattedMessage id="SearchPage.foundResults" values={{ count: totalItems }} />
-    </h3>
+    </h2>
   );
   const address = searchInURL && searchInURL.address
     ? <span className={css.searchString}>{searchInURL.address.split(', ')[0]}</span>
     : null;
   const resultsFoundWithAddress = (
-    <h3>
+    <h2>
       <FormattedMessage id="SearchPage.foundResultsWithAddress" values={{ count: totalItems, address }} />
-    </h3>
+    </h2>
   );
   const resultsFound = address ? resultsFoundWithAddress : resultsFoundNoAddress;
 
   const noResults = (
-    <h3>
+    <h2>
       <FormattedMessage id="SearchPage.noResults" />
-    </h3>
+    </h2>
   );
 
   const loadingResults = (
-    <h3>
+    <h2>
       <FormattedMessage id="SearchPage.loadingResults" />
-    </h3>
+    </h2>
   );
 
   const searchParamsForPagination = parse(location.search);

src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap

@@ -2,7 +2,7 @@ exports[`SearchPageComponent matches snapshot 1`] = `
 <Connect(withRouter(PageLayout))
   title="Search page: listings">
   <div>
-    <h3>
+    <h2>
       <FormattedMessage
         id="SearchPage.foundResults"
         values={
@@ -10,7 +10,7 @@ exports[`SearchPageComponent matches snapshot 1`] = `
             "count": 22,
           }
         } />
-    </h3>
+    </h2>
   </div>
   <div>
     <div>