Merge pull request #1365 from SaptakS/fix/banner-text-alignment

Update top banners in different bounty flow pages
gitcoinco · Jun 7, 2018 · c217aa0 · c217aa0
2 parents 26a1e0d + 958a7c6
commit c217aa0
Show file tree

Hide file tree

Showing 12 changed files with 205 additions and 47 deletions.
diff --git a/app/assets/v2/css/base.css b/app/assets/v2/css/base.css
@@ -1177,6 +1177,37 @@ input.is-invalid {
   background-color: #FF6700;
 }
 
+.metamask-error img {
+  max-width: 100px;
+}
+
+.metamask-banner #upper_left {
+  height: 100%;
+}
+
+.metamask-banner h3 {
+  letter-spacing: 0;
+  padding-bottom: 4px;
+}
+
+.metamask-banner p {
+  margin-bottom: 0 !important;
+}
+
+.metamask-banner p,
+.metamask-banner li {
+  font-size: 0.85rem;
+}
+
+#robot_error {
+  width: 25%;
+  margin: 0 auto;
+}
+
+#robot_error img {
+  width: 100%;
+}
+
 @media (max-width: 1350px) {
   .profile_details .tips li div.details {
     width: 300px;
@@ -1413,6 +1444,11 @@ input.is-invalid {
   #primary_form {
     max-width: 100%;
   }
+
+  .no_issue_error ol {
+    padding-left: 1px;
+    padding-right: 1px;
+  }
 }
 
 @media (max-width: 481px) {
@@ -1584,6 +1620,24 @@ input.is-invalid {
   .bounty_nav li {
     display: block;
   }
+
+  .metamask-banner ol {
+    margin-bottom: 0;
+  }
+
+  .metamask-banner h3 {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .metamask-banner li {
+    text-align: left;
+    margin-top: 0.5rem;
+  }
+
+  .metamask-banner img {
+    margin-bottom: 5px;
+  }
 }
 
 @media (max-width: 991.98px) {

diff --git a/app/assets/v2/images/box.svg b/app/assets/v2/images/box.svg
diff --git a/app/assets/v2/images/refund.svg b/app/assets/v2/images/refund.svg
diff --git a/app/assets/v2/js/shared.js b/app/assets/v2/js/shared.js
@@ -575,25 +575,39 @@ var trigger_primary_form_web3_hooks = function() {
 
     if (typeof web3 == 'undefined') {
       $('#no_metamask_error').css('display', 'block');
+      $('#zero_balance_error').css('display', 'none');
+      $('#robot_error').removeClass('hidden');
       $('#primary_form').addClass('hidden');
+      $('.submit_bounty .newsletter').addClass('hidden');
+      $('#unlock_metamask_error').css('display', 'none');
       $('#no_issue_error').css('display', 'none');
       mixpanel_track_once('No Metamask Error', params);
     } else if (!web3.eth.coinbase) {
       $('#unlock_metamask_error').css('display', 'block');
+      $('#zero_balance_error').css('display', 'none');
+      $('#no_metamask_error').css('display', 'none');
+      $('#robot_error').removeClass('hidden');
       $('#primary_form').addClass('hidden');
+      $('.submit_bounty .newsletter').addClass('hidden');
       $('#no_issue_error').css('display', 'none');
       mixpanel_track_once('Unlock Metamask Error', params);
     } else if (is_zero_balance_not_okay && document.balance == 0) {
       $('#zero_balance_error').css('display', 'block');
+      $('#robot_error').removeClass('hidden');
       $('#primary_form').addClass('hidden');
+      $('.submit_bounty .newsletter').addClass('hidden');
+      $('#unlock_metamask_error').css('display', 'none');
+      $('#no_metamask_error').css('display', 'none');
       $('#no_issue_error').css('display', 'none');
       mixpanel_track_once('Zero Balance Metamask Error', params);
     } else {
       $('#zero_balance_error').css('display', 'none');
       $('#unlock_metamask_error').css('display', 'none');
       $('#no_metamask_error').css('display', 'none');
       $('#no_issue_error').css('display', 'block');
+      $('#robot_error').addClass('hidden');
       $('#primary_form').removeClass('hidden');
+      $('.submit_bounty .newsletter').removeClass('hidden');
     }
   }
 };

diff --git a/app/dashboard/templates/fulfill_bounty.html b/app/dashboard/templates/fulfill_bounty.html
@@ -27,16 +27,26 @@
     <div class="container-fluid header dash">
       {% include 'shared/nav.html' %}
     </div>
-    <div class="row no-gutter">
-      <div class="col-12 body">
-        <div class="container-fluid no-gutter">
+    <div class="container-fluid">
+      <div class="row no-gutters metamask-banner">
+        <div class="col-sm-12 col-lg-2">
+          {% include 'shared/current_balance.html' %}
+        </div>
+        <div class="col-lg-10 col-sm-12">
+            {% include 'shared/no_issue_error.html' with page='fulfill_bounty' %}
+          {% include 'shared/no_metamask_error.html' %}
+          {% include 'shared/zero_balance_error.html' %}
+          {% include 'shared/unlock_metamask.html' %}
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-12 body">
           <div class="row font-smaller-2" id="form_container">
-            {% include 'shared/no_metamask_error.html' %}
-            {% include 'shared/zero_balance_error.html' %}
-            {% include 'shared/unlock_metamask.html' %}
+            <div id="robot_error" class="hidden">
+              <img src="{% static "v2/images/prime.png" %}">
+            </div>
             <div class="col offset-md-1 col-md-10 d-flex align-items-center justify-content-center" id="primary_form">
               <div class="d-flex justify-content-center flex-column mt-5" id="primary_subform">
-                {% include 'shared/bounty_nav.html' with active_item=3 %}
                 <div class="w-100" style="text-align: center;">
                   <h3>{% trans "Submit Work" %}</h3>
                   <img src="{% static "v2/images/prime.png" %}">

diff --git a/app/dashboard/templates/increase_bounty.html b/app/dashboard/templates/increase_bounty.html
@@ -29,13 +29,24 @@
     <div class="container-fluid header dash">
       {% include 'shared/nav.html' %}
     </div>
-    <div class="row no-gutter">
-      <div class="col-12 body">
-        <div class="container-fluid no-gutter">
+    <div class="container-fluid">
+      <div class="row no-gutters metamask-banner">
+        <div class="col-sm-12 col-lg-2">
+          {% include 'shared/current_balance.html' %}
+        </div>
+        <div class="col-lg-10 col-sm-12">
+            {% include 'shared/no_issue_error.html' with page='submit_bounty' %}
+          {% include 'shared/no_metamask_error.html' %}
+          {% include 'shared/zero_balance_error.html' %}
+          {% include 'shared/unlock_metamask.html' %}
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-12 body">
           <div class="row font-smaller-2" id="form_container">
-            {% include 'shared/no_metamask_error.html' %}
-            {% include 'shared/zero_balance_error.html' %}
-            {% include 'shared/unlock_metamask.html' %}
+            <div id="robot_error" class="hidden">
+              <img src="{% static "v2/images/prime.png" %}">
+            </div>
             <input type="hidden" name="standardBountiesId"
               value="{{bounty.standard_bounties_id}}">
             <input type="hidden" name="bountyOwnerAddress"

diff --git a/app/dashboard/templates/kill_bounty.html b/app/dashboard/templates/kill_bounty.html
@@ -27,13 +27,24 @@
     <div class="container-fluid header dash">
         {% include 'shared/nav.html' %}
     </div>
-    <div class="row no-gutter">
-      <div class="col-12 body">
-        <div class="container-fluid no-gutter">
+    <div class="container-fluid">
+      <div class="row no-gutters metamask-banner">
+        <div class="col-sm-12 col-lg-2">
+          {% include 'shared/current_balance.html' %}
+        </div>
+        <div class="col-lg-10 col-sm-12">
+          {% include 'shared/no_issue_error.html' with page='kill_bounty' %}
+          {% include 'shared/no_metamask_error.html' %}
+          {% include 'shared/zero_balance_error.html' %}
+          {% include 'shared/unlock_metamask.html' %}
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-12 body">
           <div class="row font-smaller-2" id="form_container">
-            {% include 'shared/no_metamask_error.html' %}
-            {% include 'shared/zero_balance_error.html' %}
-            {% include 'shared/unlock_metamask.html' %}
+            <div id="robot_error" class="hidden">
+              <img src="{% static "v2/images/prime.png" %}">
+            </div>
             <div class="col offset-md-1 col-md-10 d-flex align-items-center justify-content-center" id="primary_form">
               <div class="d-flex justify-content-center flex-column mt-5" id="primary_subform">
                 <div class="w-100" style="text-align: center;">

diff --git a/app/dashboard/templates/process_bounty.html b/app/dashboard/templates/process_bounty.html
@@ -28,16 +28,26 @@
     <div class="container-fluid header dash">
       {% include 'shared/nav.html' %}
     </div>
-    <div class="row no-gutter">
-      <div class="col-12 body">
-        <div class="container-fluid no-gutter">
+    <div class="container-fluid">
+      <div class="row no-gutters metamask-banner">
+        <div class="col-sm-12 col-lg-2">
+          {% include 'shared/current_balance.html' %}
+        </div>
+        <div class="col-lg-10 col-sm-12">
+            {% include 'shared/no_issue_error.html' with page='process_bounty' %}
+          {% include 'shared/no_metamask_error.html' %}
+          {% include 'shared/zero_balance_error.html' %}
+          {% include 'shared/unlock_metamask.html' %}
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-12 body">
           <div class="row font-smaller-2" id="form_container">
-            {% include 'shared/no_metamask_error.html' %}
-            {% include 'shared/zero_balance_error.html' %}
-            {% include 'shared/unlock_metamask.html' %}
+            <div id="robot_error" class="hidden">
+              <img src="{% static "v2/images/prime.png" %}">
+            </div>
             <div class="col offset-md-1 col-md-10 d-flex align-items-center justify-content-center" id="primary_form">
               <div class="d-flex justify-content-center flex-column mt-5" id="primary_subform">
-                {% include 'shared/bounty_nav.html' with active_item=4 %}
                 <div class="w-100" style="text-align: center;">
                   <h3>{% trans "Accept Bounty Fulfillment" %}</h3>
                   <img src="{% static "v2/images/prime.png" %}">

diff --git a/app/dashboard/templates/shared/no_issue_error.html b/app/dashboard/templates/shared/no_issue_error.html
@@ -15,19 +15,66 @@
   along with this program. If not, see <http://www.gnu.org/licenses/>.
 {% endcomment %}
 {% load i18n static %}
+{% if page == 'submit_bounty' %}
 <div id="no_issue_error" class="submit-notification container-fluid" style="display: block; background-color: #3d00fd;">
+  <div class="row align-items-center px-4 text-center text-lg-left">
+      <div class="col-lg-10 col-sm-12 pt-3">
+        <h3>{% trans "Tips for Funding an Issue" %}</h3>
+        <p>
+          <ol>
+            <li>{% trans "Create an issue on Github so that we can reference the details of the issue." %}</li>
+            <li>{% trans "What to fund? A new feature, feature improvements, bug fixes, code review, design and more." %}</li>
+          </ol>
+        </p>
+      </div>
+      <div class="col-lg-2 col-sm-12">
+        <img src="{% static "v2/images/lightbulb.svg" %}">
+      </div>
+  </div>
+</div>
+{% elif page == 'kill_bounty' %}
+<div id="no_issue_error" class="submit-notification container-fluid" style="display: block; background-color: #4a4a4a;">
+  <div class="row align-items-center px-4 pt-2 text-center text-lg-left">
+    <div class="col-lg-10 col-sm-12">
+      <h3>{% trans "Cancelling a Bounty is Sometimes Necessary" %}</h3>
+      <p>
+        {% trans "Don't forget once you cancel you can reclaim the fund to reuse it on your next bounty." %}
+      </p>
+    </div>
+    <div class="col-lg-2 col-sm-12">
+      <img src="{% static "v2/images/refund.svg" %}">
+    </div>
+  </div>
+</div>
+{% elif page == 'process_bounty' %}
+<div id="no_issue_error" class="submit-notification container-fluid" style="display: block; background-color: #fe006a;">
   <div class="row align-items-center px-4 pt-2 text-center text-lg-left">
     <div class="col-lg-10 col-sm-12">
-      <h3>{% trans "Tips for Funding an Issue" %}</h3>
+      <h3>{% trans "Accepting a Submission is Exciting" %}</h3>
       <p>
         <ol>
-          <li>{% trans "Create an issue on Github so that we can reference the details of the issue." %}</li>
-          <li>{% trans "What to fund? A new feature, feature improvements, bug fixes, code review, design and more." %}</li>
+          <li>{% trans "Make sure the submitter has completed the requirements to the specifications of your bounty." %}</li>
+          <li>{% trans "Feedbacks and gratitude are always nice ways to continue a relationship." %}</li>
         </ol>
       </p>
     </div>
     <div class="col-lg-2 col-sm-12">
-      <img src="{% static "v2/images/Lightbulb.svg" %}">
+      <img src="{% static "v2/images/box.svg" %}">
+    </div>
+  </div>
+</div>
+{% elif page == 'fulfill_bounty' %}
+<div id="no_issue_error" class="submit-notification container-fluid" style="display: block; background-color: #3d00fd;">
+  <div class="row align-items-center px-4 pt-2 text-center text-lg-left">
+    <div class="col-lg-10 col-sm-12 mt-3">
+      <h3>{% trans "Submit Work" %}</h3>
+      <p>
+        {% trans "You have worked really hard! Time to submit work and get paid" %}
+      </p>
+    </div>
+    <div class="col-lg-2 col-sm-12">
+      <i class="fas fa-3x fa-code"></i>
     </div>
   </div>
 </div>
+{% endif %}
diff --git a/app/dashboard/templates/shared/unlock_metamask.html b/app/dashboard/templates/shared/unlock_metamask.html
@@ -16,8 +16,8 @@
 {% endcomment %}
 {% load i18n static %}
 <div id="unlock_metamask_error" class="submit-notification metamask-error container-fluid" style="display: none;">
-  <div class="row align-items-center px-4 pt-2 text-center text-lg-left">
-    <div class="col-lg-10 col-sm-12">
+  <div class="row align-items-center px-4 text-center text-lg-left">
+    <div class="col-lg-10 pt-2 pb-2 col-sm-12">
       <h3>{% trans "Please Unlock Metamask to Continue" %}</h3>
       <p>
         {% trans "In order to continue, you'll need to unlock metamask." %}

diff --git a/app/dashboard/templates/shared/zero_balance_error.html b/app/dashboard/templates/shared/zero_balance_error.html
@@ -20,21 +20,17 @@
     <div class="col-lg-10 col-sm-12">
       <h3>{% trans "You're almost there!" %}</h3>
       <p>
-        {% trans "In order to continue, you'll need some Ether." %}
-      </p>
-      <p>
-        {% trans "'Ether' is a digital asset that can be used to pay for the computational resources needed to run an application or program. In this case, Gitcoin." %}
-      </p>
-      <p>
-        {% trans "The easiest way to get Ether is to request it via the Gitcoin Faucet:" %}
+        <ol>
+          <li>{% trans "In order to continue, you'll need some Ether." %}</li>
+          <li>{% trans "'Ether' is a digital asset that can be used to pay for the computational resources needed to run an application or program. In this case, Gitcoin." %}</li>
+          <li>{% trans "The easiest way to get Ether is to request it via the Gitcoin Faucet:" %}</li>
+        </ol>
       </p>
     </div>
     <div class="col-lg-2 col-sm-12">
       <p>
-        <a class="btn btn-sm btn-info mt-3 pulseClick" role="button" id="submit" href="{% url 'faucet' %}" target="_blank" rel="noopener noreferrer">{% trans "View Faucet" %}</a>
-        <br>
-        - {% trans "or" %} -
-        <br>
+        <a class="button button--primary mt-2 pulseClick" role="button" id="submit" href="{% url 'faucet' %}" target="_blank" rel="noopener noreferrer">{% trans "View Faucet" %}</a>
+        <br><br>
         <a href="https://github.com/gitcoinco/gitcoinco/issues/4" target="_blank" rel="noopener noreferrer">{% trans "Can't get web3 to work?  Get help here." %}</a>
       </p>
     </div>