No results message

web/components/Listings.js

@@ -23,6 +23,15 @@ export default class Listings extends React.Component {
   renderListings () {
     const {listings = (new Map())} = this.props;
 
+    if (listings.size === 0) {
+      return (<div className="listings-no-results">
+        <h4>Nema rezultata</h4>
+        <h5>
+          Nema oglasa koji ispunjavaju vaše uslove pretrage.
+        </h5>
+      </div>)
+    }
+
     const rendered = [];
 
     for(const l of listings.values()) {

web/dist/main.css

@@ -340,6 +340,10 @@ html {
   text-align: right;
 }
 
+.listings-no-results {
+  text-align: center;
+}
+
 .property-list-item {
   padding: 0;
   border-bottom: 1px solid rgb(230, 230, 230);
@@ -794,3 +798,20 @@ html {
 .hide {
   display: none;
 }
+
+h4 {
+  margin: 25px 0;
+  color: #2d3138;
+  font-size: 20px;
+  font-weight: 400;
+  letter-spacing: .33px;
+}
+
+h5 {
+  margin: 20px 0;
+  color: #2d3138;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 27px;
+  letter-spacing: .26px;
+}