Merge pull request #6219 from zoek1/feature/promo-tribes

Add Tribes promo graphic to town square

app/assets/v2/css/town_square.css

@@ -279,7 +279,7 @@
   background-image:radial-gradient(#0fde9c, #0fce7c 70%);
 }
 
-.offer_container {
+.offer_container, .promo {
   background: var(--gc-dark-violet);
   padding: 1em;
   color: white;
@@ -1003,3 +1003,49 @@ body.green.offer_view .announce {
     display:inline-block;
   }
 }
+
+
+.promo .logo {
+  height: 55px;
+  width: 65px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.promo {
+  background-image: url("/static/v2/images/tribes/promo-decoration.svg");
+  background-color: var(--gc-blue);
+  background-size: cover;
+}
+.promo .promo-text {
+  font-size: 0.9em;
+}
+
+.promo .action {
+  background-color: #101061;
+  color: white;
+  border-radius: 0;
+}
+
+.promo p {
+  margin-bottom: 0;
+}
+
+.promo .action:hover {
+  background-color: #101061;
+  filter: brightness(130%);
+}
+
+.promo .close-promo {
+  position: absolute;
+  top: 6px;
+  right: 29px;
+  font-size: 16px;
+  color: white;
+  opacity: 1;
+}
+
+.promo .close-promo i {
+  font-weight: 100;
+}

app/assets/v2/js/pages/townsquare.js

@@ -38,6 +38,12 @@ $(document).ready(function() {
     }
   });
 
+  $('body').on('click', '.close-promo', function(e) {
+    e.preventDefault();
+    $('.promo').remove();
+    localStorage.setItem('hide_promo', true);
+  });
+
   $('body').on('click', '.top_offer', function(e) {
     document.location = $(this).find('a.btn').attr('href');
   });
@@ -176,10 +182,13 @@ $(document).ready(function() {
           $(this).click();
         }
       });
+      const hide_promo = localStorage.getItem('hide_promo');
 
+      if (!hide_promo) {
+        $('.promo').removeClass('hidden');
+      }
     });
   };
 
   load_dressing();
-
 }(jQuery));

app/townsquare/templates/townsquare/index.html

@@ -90,6 +90,16 @@
           <div class="row mt-4 townsquare_header">
             <div class="col-12 col-lg-3 d-lg-block">
               <div id=left_sidebar>
+                <div class="promo mb-4 align-items-center hidden">
+                    <span class="close-promo"><i class="fas fa-times"></i></span>
+                    <img class="logo" src="{% static "v2/images/tribes/logo-townsquare.svg" %}">
+                    <div class="d-flex flex-column flex-fill ml-3">
+                      <p class="p-0 font-smaller-1">Work with the coolest projects and the best developers in Web3</p>
+                      <div class="font-caption font-smaller-5 text-left">
+                        <a href="{% url 'tribes_directory' %}" class="btn pl-5 pr-5 pt-2 pb-2 action font-smaller-4 btn-sm mt-2">Find a Tribe</a>
+                      </div>
+                    </div>
+                </div>
                 {% if SHOW_DRESSING %}
                   <div class="townsquare_left-sidebar feed_container">
                     <div class="townsquare_block-header" data-target="search-area" >