From 9fed040815d7066d01a14c75a09c116fa6f9eae2 Mon Sep 17 00:00:00 2001
From: Aditya Anand <aditya.anandmc@gmail.com>
Date: Wed, 14 Nov 2018 21:33:02 +0530
Subject: [PATCH 1/3] qa : fixes

- refactoring
- added common nav
- added custom nav for grants
- new: removed munites + hours + any
- new: increase textarea height + make form neater
- new : increased font-size
- detail: remove duplicate fund text
- milestones: change order + remove description
- milestones: UI cleanup
- milestones: add back button
- details: tab fixes

refs: #2798
refs: #2753
refs: #2803
---
 app/assets/v2/css/forms/form.css              | 17 ++++-
 app/assets/v2/css/forms/input.css             |  4 ++
 app/assets/v2/css/forms/label.css             |  5 ++
 app/assets/v2/css/grants/detail.css           | 10 ++-
 app/assets/v2/css/grants/milestones.css       | 20 ++++--
 app/assets/v2/css/grants/new.css              |  7 +-
 app/assets/v2/css/tabs.css                    |  1 +
 app/assets/v2/js/grants/new.js                |  5 --
 app/grants/forms.py                           | 30 +++++---
 app/grants/templates/grants/cancel.html       |  3 +-
 app/grants/templates/grants/detail.html       | 46 ++++++------
 app/grants/templates/grants/fund.html         |  3 +-
 app/grants/templates/grants/index.html        |  3 +-
 app/grants/templates/grants/milestones.html   | 64 +++++++++--------
 app/grants/templates/grants/nav.html          | 54 ++++++++++++++
 app/grants/templates/grants/new.html          | 71 +++++++++----------
 .../templates/grants/profile/index.html       |  8 +--
 app/grants/templates/grants/quickstart.html   | 11 +--
 app/grants/views.py                           | 39 +++++-----
 19 files changed, 257 insertions(+), 144 deletions(-)
 create mode 100644 app/grants/templates/grants/nav.html

diff --git a/app/assets/v2/css/forms/form.css b/app/assets/v2/css/forms/form.css
index 3d303a4000e..c8cee199647 100644
--- a/app/assets/v2/css/forms/form.css
+++ b/app/assets/v2/css/forms/form.css
@@ -51,6 +51,10 @@
   margin-bottom: 3rem;
 }
 
+.form__footer a {
+  font-weight: 500;
+}
+
 .form__footer button {
   margin-bottom: .5rem;
 }
@@ -63,9 +67,20 @@
   .form__group {
     flex-direction: column;
   }
-  
+
   .form__group-item {
     margin-bottom: 1em;
     width: 100%;
   }
 }
+
+@media (min-width: 992px) {
+  .form__footer a {
+    position: relative;
+    top: 10px;
+  }
+
+  .form__footer button {
+    float: right
+  }
+}
diff --git a/app/assets/v2/css/forms/input.css b/app/assets/v2/css/forms/input.css
index 400b968671c..b586b3e8583 100644
--- a/app/assets/v2/css/forms/input.css
+++ b/app/assets/v2/css/forms/input.css
@@ -7,6 +7,10 @@
   width: 100%;
 }
 
+.form__input-lg {
+  font-size: 1rem;
+}
+
 .form__input_lg {
   padding: 8px;
 }
diff --git a/app/assets/v2/css/forms/label.css b/app/assets/v2/css/forms/label.css
index 4b422bab44e..a13b59d0d4d 100644
--- a/app/assets/v2/css/forms/label.css
+++ b/app/assets/v2/css/forms/label.css
@@ -2,3 +2,8 @@
   font-size: 12px;
   margin: .5rem 0;
 }
+
+.form__label-lg {
+  font-size: 1rem;
+  margin: .7rem 0;
+}
diff --git a/app/assets/v2/css/grants/detail.css b/app/assets/v2/css/grants/detail.css
index 8cc8ff4ae7d..1e632f855b4 100644
--- a/app/assets/v2/css/grants/detail.css
+++ b/app/assets/v2/css/grants/detail.css
@@ -90,13 +90,17 @@ textarea.editable {
   color: #43484D;
 }
 
+.article-description {
+  text-align:justify;
+}
+
 .no-subscriptions a {
   text-decoration: none;
   color: #007bff;
 }
 
 .article-date {
-  color: #BBBDBF;
+  color: #999;
 }
 
 .form__input {
@@ -132,6 +136,10 @@ textarea.editable {
   background-color: white;
 }
 
+#js-postUpdate {
+  max-width: 40rem;
+}
+
 @keyframes rotation {
   from {
     transform: rotate(0deg);
diff --git a/app/assets/v2/css/grants/milestones.css b/app/assets/v2/css/grants/milestones.css
index ec1d972f6be..508b0b2ed41 100644
--- a/app/assets/v2/css/grants/milestones.css
+++ b/app/assets/v2/css/grants/milestones.css
@@ -1,6 +1,6 @@
 .milestones-edit {
   float: right;
-  font-size: 0.75rem;
+  font-weight: 600;
 }
 
 .milestones-container {
@@ -58,7 +58,7 @@ ul.milestones-list .milestone-title {
 ul.milestones-list .milestone-date {
   margin-bottom: 0.3rem;
   font-size: 14px;
-  color: #CCCCCC;
+  color: #000;
 }
 
 ul.milestones-list .milestone-date form {
@@ -68,23 +68,35 @@ ul.milestones-list .milestone-date form {
 ul.milestones-list .milestone-date input {
   border: 0;
   font-size: 14px;
-  color: #CCCCCC;
+  color: #999;
 }
+
 ul.milestones-list .milestone-date .error {
   color: #D50000;
   font-size: 0.75rem;
 }
+
 ul.milestones-list .milestone-date a {
   float: right;
   margin-right: 0.3rem;
 }
 
 ul.milestones-list .milestone-description {
-  font-size: 14px;
+  font-size: .85rem;
   color: #43484D;
 }
 
 .milestones-input input,
 .milestones-input textarea {
   margin-top: 20px;
+}
+
+ul.milestones-list .button {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #fff;
+}
+
+ul.milestones-list .button:hover {
+  color: #fff;
 }
\ No newline at end of file
diff --git a/app/assets/v2/css/grants/new.css b/app/assets/v2/css/grants/new.css
index 71d240edc59..4d283268399 100644
--- a/app/assets/v2/css/grants/new.css
+++ b/app/assets/v2/css/grants/new.css
@@ -20,6 +20,7 @@
 
 .frequency .select2-container--default .select2-selection--single .select2-selection__rendered {
   position: relative;
+  font-size: 1rem;
 }
 
 .frequency .select2-container--default .select2-selection--single .select2-selection__rendered,
@@ -29,7 +30,11 @@
 
 .select2-container--default .select2-selection--multiple {
   border-color: #000;
-  font-size: 0.8rem;
+  font-size: 1rem;
+}
+
+.select2-results__option, .select2-search--dropdown .select2-search__field {
+  font-size: 1rem;
 }
 
 .select2-container--default .select2-selection--multiple .select2-selection__choice {
diff --git a/app/assets/v2/css/tabs.css b/app/assets/v2/css/tabs.css
index dc20c65dc22..9319cf003b7 100644
--- a/app/assets/v2/css/tabs.css
+++ b/app/assets/v2/css/tabs.css
@@ -23,6 +23,7 @@
   cursor: pointer;
   color: var(--gc-purple);
   padding: 0;
+  padding-bottom: 8px;
 }
 
 .section-tab:hover,
diff --git a/app/assets/v2/js/grants/new.js b/app/assets/v2/js/grants/new.js
index 8dd047742f4..bb20eda87b9 100644
--- a/app/assets/v2/js/grants/new.js
+++ b/app/assets/v2/js/grants/new.js
@@ -1,10 +1,5 @@
 /* eslint-disable no-console */
 
-const validate = () => {
-  if ($('#frequency_unit').select2('data')[0].text === 'any')
-    $('#frequency_count').val('0');
-};
-
 $(document).ready(function() {
 
   if (localStorage['grants_quickstart_disable'] !== 'true') {
diff --git a/app/grants/forms.py b/app/grants/forms.py
index 892873677c9..6788bedadef 100644
--- a/app/grants/forms.py
+++ b/app/grants/forms.py
@@ -31,9 +31,9 @@ class Meta:
 
         model = Grant
         fields = (
-            'title', 'description', 'reference_url', 'logo', 'logo_svg', 'admin_address', 'frequency',
-            'amount_goal', 'amount_received', 'token_address', 'contract_address', 'transaction_hash', 'metadata',
-            'network', 'required_gas_price', 'admin_profile', 'team_members'
+            'title', 'description', 'reference_url', 'logo', 'logo_svg', 'admin_address', 'frequency', 'amount_goal',
+            'amount_received', 'token_address', 'contract_address', 'transaction_hash', 'metadata', 'network',
+            'required_gas_price', 'admin_profile', 'team_members'
         )
 
 
@@ -44,11 +44,23 @@ class Meta:
         """Define the metadata for the Milestone model form."""
 
         model = Milestone
-        fields = (
-            'title', 'description', 'due_date',
-        )
+        fields = ('title', 'description', 'due_date', )
         widgets = {
-            'title': forms.TextInput(attrs={'class': 'form__input', 'placeholder': _('Title')}),
-            'description': forms.Textarea(attrs={'class': 'form__input', 'placeholder': _('Description')}),
-            'due_date': forms.DateInput(attrs={'type': 'date', 'class': 'form__input', 'placeholder': _('Date')})
+            'title': forms.TextInput(attrs={
+                'class': 'form__input form__input-lg',
+                'placeholder': _('Title')
+            }),
+            'description':
+                forms.Textarea(attrs={
+                    'class': 'form__input form__input-lg',
+                    'placeholder': _('Description')
+                }),
+            'due_date':
+                forms.DateInput(
+                    attrs={
+                        'type': 'date',
+                        'class': 'form__input form__input-lg',
+                        'placeholder': _('Date')
+                    }
+                )
         }
diff --git a/app/grants/templates/grants/cancel.html b/app/grants/templates/grants/cancel.html
index 7f7a7c2299a..5b1789186f9 100644
--- a/app/grants/templates/grants/cancel.html
+++ b/app/grants/templates/grants/cancel.html
@@ -24,7 +24,8 @@
   <body class="interior {{ active }} grant">
     {% include 'shared/tag_manager_2.html' %}
     <div class="container-fluid header dash">
-      {% include 'shared/nav.html' %}
+      {% include 'shared/top_nav.html' with class='d-md-flex' %}
+      {% include 'grants/nav.html' %}
       <div class="row no-gutters metamask-banner">
         <div class="col-12">
           {% include 'shared/no_metamask_error.html' %}
diff --git a/app/grants/templates/grants/detail.html b/app/grants/templates/grants/detail.html
index 74f0e27baaf..455b938a81d 100644
--- a/app/grants/templates/grants/detail.html
+++ b/app/grants/templates/grants/detail.html
@@ -26,7 +26,8 @@
   <body class="interior {{ active }} grant grant-detail g-font-muli">
     {% include 'shared/tag_manager_2.html' %}
     <div class="container-fluid header dash">
-      {% include 'shared/nav.html' %}
+      {% include 'shared/top_nav.html' with class='d-md-flex' %}
+      {% include 'grants/nav.html' %}
     </div>
 
     <div class="grant-banner">
@@ -177,9 +178,6 @@ <h1 class="grant__title font-title-xl mb-4">
               {% empty %}
                 <div class="no-subscriptions">
                   <p class="mb-1">{% trans "No active subscriptions." %}</p>
-                  <p class="mt-0">
-                    <a href="{% url 'grants:fund' grant.id %}"> {% trans "Subscribe now!" %}</a>
-                  </p>
                 </div>
               {% endfor %}
             </div>
@@ -227,33 +225,33 @@ <h1 class="grant__title font-title-xl mb-4">
                 <li><a href="#all-updates">{% trans "Updates" %}</a></li>
                 <li><a href="#github">{% trans "GitHub" %}</a></li>
               </ul>
-              {% if is_admin %}
-              <div class="mt-4 py-2 px-3 px-md-5">
-                <form method="POST" id="js-postUpdate">
-                  {% csrf_token %}
-                  <div class="form__group-horizontal">
-                    <input class="form__input" type="text" id="input-title" name="input-title" placeholder="{% trans 'Title' %}" required />
-                  </div>
+              <div id="all-updates">
+                {% if is_admin %}
+                  <div class="my-4 py-2 px-3">
+                    <form method="POST" id="js-postUpdate">
+                      {% csrf_token %}
+                      <div class="form__group-horizontal mb-4">
+                        <input class="form__input" type="text" id="input-title" name="input-title" placeholder="{% trans 'Title' %}" required />
+                      </div>
 
-                  <div class="form__group-horizontal">
-                    <textarea class="form__input" type="text" id="input-description" name="description" placeholder="{% trans 'Describe the update' %}" required></textarea>
-                  </div>
+                      <div class="form__group-horizontal">
+                        <textarea rows=8 class="form__input" type="text" id="input-description" name="description" placeholder="{% trans 'Describe the update' %}" required></textarea>
+                      </div>
 
-                  <div class="text-right">
-                    <button class="button button--primary button__small">
-                      <span class="font-body">{% trans "Post Update" %}</span>
-                    </button>
+                      <div class="text-left">
+                        <button class="btn btn-gc-blue">
+                          <span class="font-body">{% trans "Post Update" %}</span>
+                        </button>
+                      </div>
+                    </form>
                   </div>
-                </form>
-              </div>
-              {% endif %}
-              <div id="all-updates">
+                {% endif %}
                 <ul>
                   {% for item in activity %}
                     <li>
                       <div class="article-title font-title">{{ item.title }}</div>
                       <div class="article-date font-body mb-2">{{ item.date }}</div>
-                      <p class="article-description font-body">{{ item.description }}</p>
+                      <p class="article-description font-subheader">{{ item.description }}</p>
                     </li>
                   {% empty %}
                     {% trans "No updates yet!" %}
@@ -266,7 +264,7 @@ <h1 class="grant__title font-title-xl mb-4">
                     <li>
                       <div class="article-title font-title">{{ item.title }}</div>
                       <div class="article-date font-body mb-2">{{ item.date }}</div>
-                      <p class="article-description font-body">{{ item.description }}</p>
+                      <p class="article-description font-subheader">{{ item.description }}</p>
                     </li>
                   {% empty %}
                     {% trans "No Github activity yet!" %}
diff --git a/app/grants/templates/grants/fund.html b/app/grants/templates/grants/fund.html
index 3d7aac65d46..823c5ad171c 100644
--- a/app/grants/templates/grants/fund.html
+++ b/app/grants/templates/grants/fund.html
@@ -25,7 +25,8 @@
   <body class="interior {{ active }} grant g-font-muli">
     {% include 'shared/tag_manager_2.html' %}
     <div class="container-fluid header dash">
-      {% include 'shared/nav.html' %}
+      {% include 'shared/top_nav.html' with class='d-md-flex' %}
+      {% include 'grants/nav.html' %}
       <div class="row no-gutters metamask-banner">
         <div class="col-12">
           {% include 'shared/no_metamask_error.html' %}
diff --git a/app/grants/templates/grants/index.html b/app/grants/templates/grants/index.html
index 52042ad2887..2f2a0bc58a9 100644
--- a/app/grants/templates/grants/index.html
+++ b/app/grants/templates/grants/index.html
@@ -25,7 +25,8 @@
   <body class="interior {{ active }} grant g-font-muli">
     {% include 'shared/tag_manager_2.html' %}
     <div class="container-fluid header dash">
-      {% include 'shared/nav.html' %}
+      {% include 'shared/top_nav.html' with class='d-md-flex' %}
+      {% include 'grants/nav.html' %}
     </div>
 
     <div class="container pt-5">
diff --git a/app/grants/templates/grants/milestones.html b/app/grants/templates/grants/milestones.html
index 7d71c4ffe1d..16fa2428adb 100644
--- a/app/grants/templates/grants/milestones.html
+++ b/app/grants/templates/grants/milestones.html
@@ -10,18 +10,40 @@
   <body class="interior {{ active }} grant">
     {% include 'shared/tag_manager_2.html' %}
     <div class="container-fluid header dash">
-      {% include 'shared/nav.html' %}
+      {% include 'shared/top_nav.html' with class='d-md-flex' %}
+      {% include 'grants/nav.html' %}
     </div>
 
     <div class="container">
       <div class="row justify-content-md-center">
         <div class="col-sm-12 col-md-12 col-lg-8">
-          <div class="form__intro">
-            <h1>{% trans "Create Milestones for " %}{{ grant.title }}</h1>
-            <p>{{ grant.description }}</p>
+          <div class="pt-5 my-4 text-center">
+            <h1 class="font-title-xl">{% trans "Create Milestones for " %}{{ grant.title }}</h1>
           </div>
-          <div class="milestones-container">
-              {% if milestones %}
+          <div class="milestones-input">
+            <form action="{% url 'grants:milestones' grant.id %}" method="POST">
+              {% csrf_token %}
+              <input type="hidden" name="method" value="POST">
+              <div class="form__group-horizontal">
+                <div class="row">
+                  <div class="col-12">
+                    {{ form.title }}
+                    {{ form.title.errors }}
+                    {{ form.description }}
+                    {{ form.description.errors }}
+                    {{ form.due_date }}
+                    {{ form.due_date.errors }}
+                  </div>
+                </div>
+              </div>
+              <div class="form__footer">
+                <a class="mt-2" href="{% url 'grants:details' grant.id %}">{% trans "Back to Grant" %}</a>
+                <button class="btn btn-gc-blue">{% trans "Create Milestone" %}</button>
+              </div>
+            </form>
+          </div>
+          <div class="milestones-container mb-4">
+            {% if milestones %}
               <ul class="milestones-list">
                 {% for milestone in milestones %}
                   <li>
@@ -36,8 +58,8 @@ <h1>{% trans "Create Milestones for " %}{{ grant.title }}</h1>
                           <input type="hidden" name="method" value="">
                           <input type="hidden" name="milestone_id" value="{{milestone.id}}">
                           <input type="date" placeholder="Date" name="completion_date" required />
-                          <a data-form-method="DELETE" class="button button__small">{% trans "Delete" %}</a>
-                          <a data-form-method="PUT" class="button button__small">{% trans "Complete" %}</a>
+                          <a data-form-method="DELETE" class="button button--warning">{% trans "Delete" %}</a>
+                          <a data-form-method="PUT" class="button button--primary">{% trans "Complete" %}</a>
                         </form>
                       {% endif %}
                     </div>
@@ -46,30 +68,12 @@ <h1>{% trans "Create Milestones for " %}{{ grant.title }}</h1>
                 {% endfor %}
               </ul>
             {% else %}
-              <p>{% trans "No milestones currently set for this grant." %}</p>
+              <p class="font-title text-center">
+                <i class="fas fa-hiking"></i>
+                {% trans "No milestones currently set for this grant." %}
+              </p>
             {% endif %}
           </div>
-          <div class="milestones-input">
-            <form action="{% url 'grants:milestones' grant.id %}" method="POST">
-              {% csrf_token %}
-              <input type="hidden" name="method" value="POST">
-              <div class="form__group-horizontal">
-                <div class="row">
-                  <div class="col-12">
-                    {{ form.title }}
-                    {{ form.title.errors }}
-                    {{ form.due_date }}
-                    {{ form.due_date.errors }}
-                    {{ form.description }}
-                    {{ form.description.errors }}
-                  </div>
-                </div>
-              </div>
-              <div class="form__footer">
-                <button class="button button--primary">{% trans "Create Milestone" %}</button>
-              </div>
-            </form>
-          </div>
         </div>
       </div>
     </div>
diff --git a/app/grants/templates/grants/nav.html b/app/grants/templates/grants/nav.html
new file mode 100644
index 00000000000..be2ad3b5de4
--- /dev/null
+++ b/app/grants/templates/grants/nav.html
@@ -0,0 +1,54 @@
+{% comment %}
+    Copyright (C) 2017 Gitcoin Core
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published
+    by the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+{% endcomment %}
+{% load i18n static matches %}
+<nav class="navbar navbar-expand-md navbar-dark">
+  <div id="gitcoin-background"></div>
+  <a class="navbar-brand pt-0 pb-0 brand-hover" href="{% url 'grants:grants' %}">
+    <img class="mw-100" src="{% static "v2/images/top-bar/grants-logo.svg" %}" alt="grants" height="35">
+  </a>
+  {% if request.path|matches:"^\/((new)|(fund.*)|(.*cancel.*))$" %}
+    <div class="navbar-network ml-5 py-1 px-2 hidden">
+      <i class="fas fa-circle pr-1"></i>
+      <span id="current-network"></span>
+    </div>
+  {% endif %}
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <div class="collapse navbar-collapse" id="navbarSupportedContent">
+    <nav class="navbar-nav ml-auto mr-3">
+      <a class="nav-link{% if active == 'grants_landing' %} selected {% endif %} interior" href="{% url 'grants:grants' %}">{% trans "Grants" %}</a>
+      <a class="nav-link{% if active == 'grants_quickstart' %} selected {% endif %} interior" href="{% url 'grants:quickstart' %}">{% trans "What is Grants?" %}</a>
+      <a class="nav-link{% if active == 'new_grant' %} selected {% endif %} interior" href="{% url 'grants:new' %}">{% trans "Create Grant" %}</a>
+
+      {% if not user.is_authenticated %}
+        <a href="{% url 'social:begin' 'github' %}?next={{ request.get_full_path }}" class="nav-link interior" onclick="dataLayer.push({'event': 'login'});">
+          <i class="fab fa-github mr-1" role="aria-hidden"></i>
+          {% trans "LOG IN" %}
+        </a>
+      {% else %}
+        {% include 'shared/nav_auth.html' with source='authed' %}
+      {% endif %}
+    </nav>
+  </div>
+</nav>
+{% if request.path|matches:"^\/((new)|(fund.*)|(.*cancel.*))$" %}
+  <p id="navbar-network-banner" class="px-0 py-1 m-0 font-caption hidden"></p>
+{% endif %}
diff --git a/app/grants/templates/grants/new.html b/app/grants/templates/grants/new.html
index f6b221e6933..f154e4f5171 100644
--- a/app/grants/templates/grants/new.html
+++ b/app/grants/templates/grants/new.html
@@ -26,7 +26,8 @@
   <body class="interior {{ active }} grant g-font-muli">
     {% include 'shared/tag_manager_2.html' %}
     <div class="container-fluid header dash">
-      {% include 'shared/nav.html' %}
+      {% include 'shared/top_nav.html' with class='d-md-flex' %}
+      {% include 'grants/nav.html' %}
       <div class="row no-gutters metamask-banner">
         <div class="col-12">
           {% include 'shared/no_metamask_error.html' %}
@@ -67,65 +68,60 @@
         <div id="robot_error" class="hidden">
           <img src="{% static "v2/images/prime.png" %}">
         </div>
-        <div class="col-sm-12 col-md-10 col-lg-6" id="grants_form">
+        <div class="col-sm-12 col-md-10 col-lg-7" id="grants_form">
           <div class="form__intro text-center">
             <h1>{% trans "Create a Grant" %}</h1>
-            <p>{% trans "We're excited to learn about your project. Complete the form below to get funding for your project." %}</p>
+            <p>{% trans "We're excited to learn about your project.<br>Complete the form below to get funding for your project." %}</p>
           </div>
           <form method="POST" id="create-grant" enctype="multipart/form-data">
             {% csrf_token %}
             <div class="form__group-horizontal">
-              <label class="form__label" for="input_name">{% trans "Name of Project" %}</label>
-              <input class="form__input" type="text" id="input_name" name="input_name" required />
+              <label class="form__label form__label-lg" for="input_name">{% trans "Name of Project" %}</label>
+              <input class="form__input form__input-lg " type="text" id="input_name" name="input_name" required />
             </div>
 
             <div class="form__group-horizontal">
-              <label class="form__label" for="input-description">{% trans "Description of Project" %}</label>
-              <textarea class="form__input" type="text" id="input-description" name="description" required></textarea>
+              <label class="form__label form__label-lg" for="input-description">{% trans "Description of Project" %}</label>
+              <textarea rows=8 class="form__input form__input-lg " type="text" id="input-description" name="description" required></textarea>
             </div>
 
             <div class="form__group-horizontal">
-              <label class="form__label" for="input-url">{% trans "Project URL" %}</label>
-              <input type="url" class="form__input" id="input-url" name="reference_url" required/>
+              <label class="form__label form__label-lg" for="input-url">{% trans "Project URL" %}</label>
+              <input type="url" class="form__input form__input-lg " id="input-url" name="reference_url" required/>
             </div>
 
             <div class="form__group-horizontal">
-              <label class="form__label" for="input-team_members">{% trans "Team members" %}</label>
+              <label class="form__label form__label-lg" for="input-team_members">{% trans "Team members" %}</label>
               <div class="form__select2">
-                <select id="input-team_members" class="form__input team_members" name="team_members[]" multiple="multiple">
+                <select id="input-team_members" class="form__input form__input-lg  team_members" name="team_members[]" multiple="multiple">
                 </select>
               </div>
             </div>
 
             <div class="form__group-horizontal">
-              <label class="form__label">{% trans "Total amount sought for grant in ETH" %}</label>
               <div class="row">
-                <div class="col-12">
-                  <input type="number" name="amount_goal" class="form__input" required />
+                <div class="col-12 col-md-6">
+                  <label class="form__label form__label-lg">{% trans "Total amount sought for grant in ETH" %}</label>
+                  <input type="number" name="amount_goal" class="form__input form__input-lg " required />
                 </div>
-              </div>
-            </div>
-
-            <div class="form__group-horizontal">
-              <label class="form__label">{% trans "Monthly amount sought in ETH" %}</label>
-              <div class="row">
-                <div class="col-12">
-                  <input type="number" name="monthly_goal" class="form__input" required />
+                <div class="col-12 col-md-6">
+                  <label class="form__label form__label-lg">{% trans "Monthly amount sought in ETH" %}</label>
+                  <input type="number" name="monthly_goal" class="form__input form__input-lg " required />
                 </div>
               </div>
             </div>
 
             <div class="form__group-horizontal">
-              <label class="form__label">{% trans "Required subscription amount in ETH" %}</label>
               <div class="row">
                 <div class="col-12">
-                  <input type="number" name="required_amount" class="form__input" value="0" required />
+                  <label class="form__label form__label-lg">{% trans "Required subscription amount in ETH" %}</label>
+                  <input type="number" name="required_amount" class="form__input form__input-lg " value="0" required />
                 </div>
               </div>
             </div>
 
             <div class="form__group-horizontal">
-              <label class="form__label">{% trans "Required Token For Subscription" %}</label>
+              <label class="form__label form__label-lg">{% trans "Required Token For Subscription" %}</label>
               <div class="row">
                 <div class="col-12">
                   <div class="form__select2">
@@ -136,30 +132,27 @@ <h1>{% trans "Create a Grant" %}</h1>
             </div>
 
             <div class="form__group-horizontal">
-              <label class="form__label" for="input-admin_address">{% trans "Admin Wallet Address" %}</label>
-              <input type="text" class="form__input" id="input-adminAddress" placeholder="{% trans 'Enter the address you would live funds sent to' %}" name="admin_address" required/>
+              <label class="form__label form__label-lg" for="input-admin_address">{% trans "Admin Wallet Address" %}</label>
+              <input type="text" class="form__input form__input-lg " id="input-adminAddress" placeholder="{% trans 'Enter the address you would live funds sent to' %}" name="admin_address" required/>
             </div>
 
             <div class="form__group-horizontal frequency">
-              <label class="form__label">{% trans "Frequency of payments" %}</label>
+              <label class="form__label form__label-lg">{% trans "Frequency of payments" %}</label>
               <div class="row">
                 <div class="col-8">
-                  <input type="number" id="frequency_count" name="frequency" class="form__input" placeholder="{% trans 'Your required frequency - 0 for any' %}" required />
+                  <input type="number" id="frequency_count" name="frequency" class="form__input form__input-lg " placeholder="{% trans 'Your required frequency - 0 for any' %}" required />
                 </div>
                 <div class="col-4 font-body">
-                  <select onchange="validate()" name="frequency_unit" id="frequency_unit" style="width: 100%">
-                    <option value="minutes">{% trans "minutes" %}</option>
-                    <option value="hours">{% trans "hours" %}</option>
+                  <select name="frequency_unit" id="frequency_unit" style="width: 100%">
                     <option value="days">{% trans "days" %}</option>
-                    <option value="months">{% trans "months" %}</option>
-                    <option value="any" selected="selected">{% trans "any" %}</option>
+                    <option value="months" selected="selected">{% trans "months" %}</option>
                   </select>
                 </div>
               </div>
             </div>
 
             <div class="form__group-horizontal">
-              <label class="form__label">{% trans "Project Logo" %}</label>
+              <label class="form__label form__label-lg">{% trans "Project Logo" %}</label>
               <div class="form__drop" id="js-drop">
                 <input id="img-project" type="file" name="input_image" accept="image/*">
                 <span>{% trans "Drag & Drop or Browse" %}</span>
@@ -168,13 +161,13 @@ <h1>{% trans "Create a Grant" %}</h1>
             </div>
 
             <div class="form__footer text-center">
-              <button class="button button--primary">{% trans "Create Grant" %}</button>
+              <button class="btn btn-gc-blue">{% trans "Create Grant" %}</button>
             </div>
 
             <div>
-              <input type="hidden" class="form__input" id="transaction_hash" name="transaction_hash" />
-              <input type="hidden" class="form__input" id="contract_address" name="contract_address" />
-              <input type="hidden" class="form__input" id="network" name="network" />
+              <input type="hidden" class="form__input form__input-lg " id="transaction_hash" name="transaction_hash" />
+              <input type="hidden" class="form__input form__input-lg " id="contract_address" name="contract_address" />
+              <input type="hidden" class="form__input form__input-lg " id="network" name="network" />
               <input type="hidden" id="receipt" name="receipt" value="{}">
             </div>
           </form>
diff --git a/app/grants/templates/grants/profile/index.html b/app/grants/templates/grants/profile/index.html
index 31c8ef88291..336795ec204 100644
--- a/app/grants/templates/grants/profile/index.html
+++ b/app/grants/templates/grants/profile/index.html
@@ -28,15 +28,15 @@
   <body class="interior {{ active }} g-font-muli">
     {% include 'shared/tag_manager_2.html' %}
     <div class="container-fluid header dash">
-      {% include 'shared/nav.html' %}
-      {% include 'shared/minihero.html' with h1='My Grants' suppress_logo=1 position_h1_below_logo=True hide_rain=True %}
+      {% include 'shared/top_nav.html' with class='d-md-flex' %}
+      {% include 'grants/nav.html' %}
     </div>
 
     {% if grants|length != 0 and sub_grants|length != 0 %}
       <div class="container pt-5">
         <div id="grant-profile-tabs" class="tab-container font-body mb-3">
-          <button type="button" id="supported" class="section-tab">{% trans "Supported by Me" %} ({{ sub_grants|length }})</button>
-          <button type="button" id="created" class="section-tab">{% trans "Created by Me" %} ({{ grants|length }})</button>
+          <button type="button" id="supported" class="section-tab">{% trans "Supported" %} ({{ sub_grants|length }})</button>
+          <button type="button" id="created" class="section-tab">{% trans "Created" %} ({{ grants|length }})</button>
         </div>
 
         <div id="grant-profile-tabs-sections" class="tab-sections section">
diff --git a/app/grants/templates/grants/quickstart.html b/app/grants/templates/grants/quickstart.html
index 7c8f17fb382..cece442df9a 100644
--- a/app/grants/templates/grants/quickstart.html
+++ b/app/grants/templates/grants/quickstart.html
@@ -54,7 +54,8 @@
   <body class="interior {{ active }} g-font-muli">
     {% include 'shared/tag_manager_2.html' %}
     <div class="container-fluid header dash">
-      {% include 'shared/nav.html' %}
+      {% include 'shared/top_nav.html' with class='d-md-flex' %}
+      {% include 'grants/nav.html' %}
       {% include 'shared/minihero.html' with h1='Getting Started with Grants' suppress_logo=1 position_h1_below_logo=True hide_rain=True %}
     </div>
 
@@ -103,8 +104,8 @@ <h2 class="font-title">{%trans "It’s not just about the money" %}</h2>
                   <img src="{% static "v2/images/grants/quickstart/fund.svg" %}">
                 </div>
                 <div class="col-12 text-center font-subheader">
-                  <h3 class="font-subheader mb-2">{%trans "Ready to fund a grant?" %}</h3>
-                  <a class="btn btn-gc-blue" href="/">{%trans "Fund a Grant" %}</a>
+                  <h3 class="font-subheader my-3">{%trans "Ready to fund a grant?" %}</h3>
+                  <a class="btn btn-gc-blue" href="{% url 'grants:grants' %}">{%trans "Fund a Grant" %}</a>
                   <p class="font-body mt-3">
                     {%trans "Have any questions?" %} <br>
                     {%trans "Reach out to a Gitcoin Core Team member on" %}
@@ -157,8 +158,8 @@ <h2 class="font-title">{%trans "Introduce yourself or your team" %}</h2>
                   <img src="{% static "v2/images/grants/quickstart/start.svg" %}">
                 </div>
                 <div class="col-12 text-center font-subheader">
-                  <h3 class="font-subheader mb-2">{%trans "Ready to start a grant?" %}</h3>
-                  <a class="btn btn-gc-blue" href="/grants/new">{%trans "Start a Grant" %}</a>
+                  <h3 class="font-subheader my-3">{%trans "Ready to start a grant?" %}</h3>
+                  <a class="btn btn-gc-blue" href="{% url 'grants:new' %}">{%trans "Start a Grant" %}</a>
                   <p class="font-body mt-3">
                     {%trans "Have any questions?" %} <br>
                     {%trans "Reach out to a Gitcoin Core Team member on" %}
diff --git a/app/grants/views.py b/app/grants/views.py
index b373333e0e0..bedd60974be 100644
--- a/app/grants/views.py
+++ b/app/grants/views.py
@@ -56,15 +56,13 @@ def grants(request):
     if request.method == 'POST':
         keyword = request.POST.get('search_grants', '')
         _grants = Grant.objects.filter(
-            Q(description__icontains=keyword) |
-            Q(title__icontains=keyword) |
-            Q(reference_url__icontains=keyword)
+            Q(description__icontains=keyword) | Q(title__icontains=keyword) | Q(reference_url__icontains=keyword)
         ).order_by(sort)
 
     paginator = Paginator(_grants, limit)
     grants = paginator.get_page(page)
 
-    params = {'active': 'dashboard', 'title': _('Grants Explorer'), 'grants': grants, 'keywords': get_keywords(), }
+    params = {'active': 'grants_landing', 'title': _('Grants Explorer'), 'grants': grants, 'keywords': get_keywords(), }
     return TemplateResponse(request, 'grants/index.html', params)
 
 
@@ -129,18 +127,20 @@ def grant_details(request, grant_id):
         'title': 'Initial commit by flapjacks',
         'date': '08.02.2018',
         'description': 'Initial commit with some blah blah blah...',
-    }, {
-        'title': 'Fix the build by derp-nation',
-        'date': '08.02.2018',
-        'description': 'Initial commit with some blah blah blah...',
-    }, {
-        'title': 'A subpar commit by derp-diggity',
-        'date': '08.02.2018',
-        'description': 'Initial commit with some blah blah blah...',
-    }]
+    },
+               {
+                   'title': 'Fix the build by derp-nation',
+                   'date': '08.02.2018',
+                   'description': 'Initial commit with some blah blah blah...',
+               },
+               {
+                   'title': 'A subpar commit by derp-diggity',
+                   'date': '08.02.2018',
+                   'description': 'Initial commit with some blah blah blah...',
+               }]
 
     params = {
-        'active': 'dashboard',
+        'active': 'grant_details',
         'title': _('Grant Details'),
         'grant': grant,
         'subscription': subscription,
@@ -185,7 +185,7 @@ def grant_new(request):
 
         return redirect(reverse('grants:details', args=(grant.pk, )))
 
-    params = {'active': 'grants', 'title': _('New Grant'), 'grant': {}, 'keywords': get_keywords(), }
+    params = {'active': 'new_grant', 'title': _('New Grant'), 'grant': {}, 'keywords': get_keywords(), }
 
     return TemplateResponse(request, 'grants/new.html', params)
 
@@ -224,7 +224,7 @@ def milestones(request, grant_id):
     milestones = Milestone.objects.filter(grant_id=grant_id).order_by('due_date')
 
     params = {
-        'active': 'grants',
+        'active': 'grant_milestones',
         'title': _('Grant Milestones'),
         'grant': grant,
         'milestones': milestones,
@@ -261,7 +261,7 @@ def grant_fund(request, grant_id):
         return redirect(reverse('grants:details', args=(grant.pk, )))
 
     params = {
-        'active': 'dashboard',
+        'active': 'fund_grant',
         'title': _('Fund Grant'),
         'subscription': {},
         'grant': grant,
@@ -283,6 +283,7 @@ def subscription_cancel(request, grant_id, subscription_id):
         return redirect(reverse('grants:details', args=(grant.pk, )))
 
     params = {
+        'active': 'cancel_grant',
         'title': _('Cancel Grant Subscription'),
         'subscription': subscription,
         'grant': grant,
@@ -342,4 +343,6 @@ def profile(request):
 
 def quickstart(request):
     """Display quickstart guide."""
-    return TemplateResponse(request, 'grants/quickstart.html', {})
+
+    params = {'active': 'grants_quickstart', 'title': _('Quickstart')}
+    return TemplateResponse(request, 'grants/quickstart.html', params)

From 032c25d2a1c426fc7c931e7bf35a20d4c7e3a41b Mon Sep 17 00:00:00 2001
From: Aditya Anand <aditya.anandmc@gmail.com>
Date: Thu, 15 Nov 2018 02:43:59 +0530
Subject: [PATCH 2/3] added feedback comments

---
 app/grants/templates/grants/new.html |  6 +++-
 app/grants/views.py                  | 42 +++++++++++++++-------------
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/app/grants/templates/grants/new.html b/app/grants/templates/grants/new.html
index f154e4f5171..bd8a54f965d 100644
--- a/app/grants/templates/grants/new.html
+++ b/app/grants/templates/grants/new.html
@@ -71,7 +71,11 @@
         <div class="col-sm-12 col-md-10 col-lg-7" id="grants_form">
           <div class="form__intro text-center">
             <h1>{% trans "Create a Grant" %}</h1>
-            <p>{% trans "We're excited to learn about your project.<br>Complete the form below to get funding for your project." %}</p>
+            <p>
+              {% trans "We're excited to learn about your project." %}
+              <br>
+              {% trans "Complete the form below to get funding for your project." %}
+            </p>
           </div>
           <form method="POST" id="create-grant" enctype="multipart/form-data">
             {% csrf_token %}
diff --git a/app/grants/views.py b/app/grants/views.py
index bedd60974be..889fa2e1b05 100644
--- a/app/grants/views.py
+++ b/app/grants/views.py
@@ -309,26 +309,28 @@ def profile(request):
     paginator = Paginator(_grants, limit)
     grants = paginator.get_page(page)
 
-    history = [{
-        'date': '16 Mar',
-        'value_true': 1.0,
-        'token_name': 'ETH',
-        'frequency': 'days',
-        'value_in_usdt_now': 80,
-        'title': 'Lorem ipsum dolor sit amet',
-        'link': 'https://etherscan.io/txs?a=0xcf267ea3f1ebae3c29fea0a3253f94f3122c2199&f=3',
-        'avatar_url': 'https://c.gitcoin.co/avatars/57e79c0ae763bb27095f6b265a1a8bf3/thelostone-mc.svg'
-    },
-               {
-                   'date': '24 April',
-                   'value_true': 90,
-                   'token_name': 'DAI',
-                   'frequency': 'months',
-                   'value_in_usdt_now': 90,
-                   'title': 'Lorem ipsum dolor sit amet',
-                   'link': 'https://etherscan.io/txs?a=0xcf267ea3f1ebae3c29fea0a3253f94f3122c2199&f=3',
-                   'avatar_url': 'https://c.gitcoin.co/avatars/57e79c0ae763bb27095f6b265a1a8bf3/thelostone-mc.svg'
-               }]
+    history = [
+        {
+            'date': '16 Mar',
+            'value_true': 1.0,
+            'token_name': 'ETH',
+            'frequency': 'days',
+            'value_in_usdt_now': 80,
+            'title': 'Lorem ipsum dolor sit amet',
+            'link': 'https://etherscan.io/txs?a=0xcf267ea3f1ebae3c29fea0a3253f94f3122c2199&f=3',
+            'avatar_url': 'https://c.gitcoin.co/avatars/57e79c0ae763bb27095f6b265a1a8bf3/thelostone-mc.svg'
+        },
+        {
+            'date': '24 April',
+            'value_true': 90,
+            'token_name': 'DAI',
+            'frequency': 'months',
+            'value_in_usdt_now': 90,
+            'title': 'Lorem ipsum dolor sit amet',
+            'link': 'https://etherscan.io/txs?a=0xcf267ea3f1ebae3c29fea0a3253f94f3122c2199&f=3',
+            'avatar_url': 'https://c.gitcoin.co/avatars/57e79c0ae763bb27095f6b265a1a8bf3/thelostone-mc.svg'
+        }
+    ]
 
     params = {
         'active': 'profile',

From 5a8bb90206a372356ad9196d3420e55000f30a35 Mon Sep 17 00:00:00 2001
From: Aditya Anand <aditya.anandmc@gmail.com>
Date: Thu, 15 Nov 2018 03:19:30 +0530
Subject: [PATCH 3/3] - profile: show placeholder

---
 app/grants/templates/grants/card.html         |  1 -
 app/grants/templates/grants/index.html        |  1 +
 .../templates/grants/profile/index.html       | 31 ++++++++++++-------
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/app/grants/templates/grants/card.html b/app/grants/templates/grants/card.html
index 482bfc86833..0849945a295 100644
--- a/app/grants/templates/grants/card.html
+++ b/app/grants/templates/grants/card.html
@@ -15,7 +15,6 @@
   along with this program. If not, see <http://www.gnu.org/licenses/>.
 {% endcomment %}
 {% load i18n static humanize i18n %}
-<link rel="stylesheet" href="{% static "v2/css/grants/card.css" %}">
 <div class="grant-item">
   <div class="grant-item__content py-4 px-3">
     <h2 class="grant-item__title font-subheader"><a href="{% url 'grants:details' grant.id %}">{{ grant.title|truncatechars:60 }}</a></h2>
diff --git a/app/grants/templates/grants/index.html b/app/grants/templates/grants/index.html
index 2f2a0bc58a9..a47aa0229a5 100644
--- a/app/grants/templates/grants/index.html
+++ b/app/grants/templates/grants/index.html
@@ -21,6 +21,7 @@
     <link rel="stylesheet" href="{% static "v2/css/search_bar.css" %}">
     {% include 'shared/head.html' %}
     {% include 'shared/cards.html' %}
+    <link rel="stylesheet" href="{% static "v2/css/grants/card.css" %}">
   </head>
   <body class="interior {{ active }} grant g-font-muli">
     {% include 'shared/tag_manager_2.html' %}
diff --git a/app/grants/templates/grants/profile/index.html b/app/grants/templates/grants/profile/index.html
index 336795ec204..6a5292a2795 100644
--- a/app/grants/templates/grants/profile/index.html
+++ b/app/grants/templates/grants/profile/index.html
@@ -24,6 +24,7 @@
     <link rel="stylesheet" href={% static "v2/css/tabs.css" %}>
     <link rel="stylesheet" href={% static "v2/css/tag.css" %}>
     <link rel="stylesheet" href="{% static "v2/css/grants/profile.css" %}">
+    <link rel="stylesheet" href="{% static "v2/css/grants/card.css" %}">
   </head>
   <body class="interior {{ active }} g-font-muli">
     {% include 'shared/tag_manager_2.html' %}
@@ -32,7 +33,7 @@
       {% include 'grants/nav.html' %}
     </div>
 
-    {% if grants|length != 0 and sub_grants|length != 0 %}
+    {% if grants|length != 0 or sub_grants|length != 0 %}
       <div class="container pt-5">
         <div id="grant-profile-tabs" class="tab-container font-body mb-3">
           <button type="button" id="supported" class="section-tab">{% trans "Supported" %} ({{ sub_grants|length }})</button>
@@ -41,22 +42,30 @@
 
         <div id="grant-profile-tabs-sections" class="tab-sections section">
           <div id="section-supported" class="tab-section active">
-            <div class="container px-0">
-              <div class="row mb-3 py-2 px-0 mx-sm-0">
-                <div class="col-12 px-0">
-                  {% include 'grants/profile/body.html' with grants=sub_grants history=history %}
+            {% if sub_grants|length != 0 %}
+              <div class="container px-0">
+                <div class="row mb-3 py-2 px-0 mx-sm-0">
+                  <div class="col-12 px-0">
+                    {% include 'grants/profile/body.html' with grants=sub_grants history=history %}
+                  </div>
                 </div>
               </div>
-            </div>
+            {% else %}
+              {% include 'grants/profile/none.html' %}
+            {% endif %}
           </div>
           <div id="section-created" class="tab-section">
-            <div class="container px-0">
-              <div class="row mb-3 py-2 px-0 mx-sm-0">
-                <div class="col-12 px-0">
-                  {% include 'grants/profile/body.html' with grants=grants history=history %}
+            {% if grants|length != 0 %}
+              <div class="container px-0">
+                <div class="row mb-3 py-2 px-0 mx-sm-0">
+                  <div class="col-12 px-0">
+                    {% include 'grants/profile/body.html' with grants=grants history=history %}
+                  </div>
                 </div>
               </div>
-            </div>
+            {% else %}
+              {% include 'grants/profile/none.html' %}
+            {% endif %}
           </div>
         </div>
       </div>