From 4d46c557e48e2d310f903c0de7edc4e843d6127d Mon Sep 17 00:00:00 2001
From: Aditya Anand M C <aditya.anandmc@gmail.com>
Date: Thu, 9 Jan 2020 12:13:52 +0530
Subject: [PATCH 1/2] bug: profile fix

---
 app/assets/v2/css/profile.css                 |  4 +++
 .../templates/profiles/header_details.html    | 30 ++++++++++++----
 app/dashboard/templates/profiles/profile.html | 35 ++++++++-----------
 app/dashboard/templates/profiles/tabs.html    |  1 +
 4 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/app/assets/v2/css/profile.css b/app/assets/v2/css/profile.css
index 4904cace64f..c204e69c239 100644
--- a/app/assets/v2/css/profile.css
+++ b/app/assets/v2/css/profile.css
@@ -73,6 +73,10 @@
   font-size: 1.7rem;
 }
 
+.profile-header__handle .quick-link {
+  top: -3px;
+}
+
 .profile-header__handle small {
   text-transform: none;
 }
diff --git a/app/dashboard/templates/profiles/header_details.html b/app/dashboard/templates/profiles/header_details.html
index 06343418b1f..18074470db7 100644
--- a/app/dashboard/templates/profiles/header_details.html
+++ b/app/dashboard/templates/profiles/header_details.html
@@ -2,22 +2,37 @@
 
 <h1 class="profile-header__handle">
   {{ profile.name }}
+
   {% if is_staff and not profile.is_org %}
-    <button class="btn btn-outline-gc-blue btn-sm flex-grow-1" data-openchat="{{profile}}"> <i class="fas fa-comment-dots" data-placement="bottom" data-toggle="tooltip" data-html="true" title="Chat @{{ profile.handle }}"></i></button>
+    <button class="btn btn-outline-gc-blue btn-sm flex-grow-1 font-smaller-5 position-relative quick-link" data-openchat="{{profile}}">
+      <i class="fas fa-comment-dots" data-placement="bottom" data-toggle="tooltip" data-html="true"
+        title="Chat @{{ profile.handle }}">
+      </i>
+    </button>
   {% endif %}
-  <a class="btn btn-outline-gc-blue btn-sm flex-grow-1" href="{% url 'tip' %}?username={{ profile.handle }}"  data-placement="bottom" data-toggle="tooltip" data-html="true" title="Tip @{{ profile.handle }}">
+
+  <a class="btn btn-outline-gc-blue btn-sm flex-grow-1 font-smaller-5 position-relative quick-link"
+    href="{% url 'tip' %}?username={{ profile.handle }}"  data-placement="bottom" data-toggle="tooltip" data-html="true" title="Tip @{{ profile.handle }}"
+  >
     <i class="fab fa-ethereum"></i>
   </a>
-  <a class="btn btn-outline-gc-blue btn-sm flex-grow-1" href="/users?invite={{ profile.handle }}" data-placement="bottom" data-toggle="tooltip" data-html="true" title="Invite @{{ profile.handle }} to Bounty">
+
+  <a class="btn btn-outline-gc-blue btn-sm flex-grow-1 font-smaller-5 position-relative quick-link" href="/users?invite={{ profile.handle }}"
+    data-placement="bottom" data-toggle="tooltip" data-html="true" title="Invite @{{ profile.handle }} to Bounty"
+  >
     <i class="fas fa-share-square"></i>
   </a>
+
   {% if verification %}
     <button class="btn btn-sm animate-verify" data-container="body" data-toggle="popover" data-html="true" data-placement="bottom" data-trigger="hover click" data-content='
-    <p class="h6 my-2 text-left">Gitcoin Verified <img width="18" src="{% static "v2/images/badge-verify.svg" %}"></p>
-    <p>This contributor has completed the Gitcoin verification process, which means that the Gitcoin Core trusts their work.</p>
-    <p>Please note - use your judgement on whether this is the right contributor for your task.</p>
-    '><img src="{% static 'v2/images/badge-verify.svg' %}" alt=""></button>
+      <p class="h6 my-2 text-left">Gitcoin Verified <img width="18" src="{% static "v2/images/badge-verify.svg" %}"></p>
+      <p>This contributor has completed the Gitcoin verification process, which means that the Gitcoin Core trusts their work.</p>
+      <p>Please note - use your judgement on whether this is the right contributor for your task.</p>'
+    >
+      <img src="{% static 'v2/images/badge-verify.svg' %}" alt="">
+    </button>
   {% endif %}
+
 </h1>
 <p class="mb-0">
   {{ profile.handle }}
@@ -59,6 +74,7 @@ <h1 class="profile-header__handle">
     <small class="review-comment">{{ profile.data.bio }}</small>
   </div>
 {% endif %}
+
 {% if user.is_authenticated and is_on_tribe and profile.is_org %}
   <button class="btn btn-gc-blue btn-sm" data-jointribe="{{profile.handle}}">Leave Tribe</button>
 {% elif user.is_authenticated and profile.is_org %}
diff --git a/app/dashboard/templates/profiles/profile.html b/app/dashboard/templates/profiles/profile.html
index 526543b1d57..2ae262c21af 100644
--- a/app/dashboard/templates/profiles/profile.html
+++ b/app/dashboard/templates/profiles/profile.html
@@ -46,8 +46,9 @@
         </div>
       {% endif %}
     </div>
+
     <div class="container-fluid bg-light">
-      <div class="container profile-card mt-md-n5 mh-150">
+      <div class="container profile-card mh-150">
         <div class="row">
           {% if total_kudos_count %}
             <div id="kudos_header" class="d-md-block d-none">
@@ -57,33 +58,27 @@
             </div>
           {% endif %}
 
-          <div class="col-12 col-lg-6 profile-header__main-infos">
-            {% if not hidden %}
+          {% if not hidden %}
+            <div class="col-12 col-lg-6 profile-header__main-infos">
               {% include 'profiles/header_avatar.html' %}
               {% include 'profiles/header_details.html' %}
+            </div>
+            {% if profile.is_org %}
+              {% include 'profiles/organization.html' %}
 
-            {% if not hidden %}
-              {% if profile.is_org %}
-                {% include 'profiles/organization.html' %}
-              {% else %}
-              {% if profile.cascaded_persona == 'funder' %}
-                {% include 'profiles/scorecard_funder.html' %}
-              {% elif profile.cascaded_persona == 'hunter' %}
-                {% include 'profiles/scorecard_hunter.html' %}
-              {% else %}
-                {% include 'profiles/scorecard_hunter.html' %}
-              {% endif %}
-          </div>
-        </div>
+            {% elif profile.cascaded_persona == 'funder' %}
+              {% include 'profiles/scorecard_funder.html' %}
+
+            {% else %}
+              {% include 'profiles/scorecard_hunter.html' %}
+            {% endif %}
           {% endif %}
-        {% endif %}
+        </div>
       </div>
     </div>
-    {% endif%}
 
-      {% include 'profiles/tabs.html' %}
+    {% include 'profiles/tabs.html' %}
 
-    </div>
     <div class="container">
       {% if hidden %}
         {% include 'profiles/hidden.html' %}
diff --git a/app/dashboard/templates/profiles/tabs.html b/app/dashboard/templates/profiles/tabs.html
index d95ebf4703f..b40b5a71623 100644
--- a/app/dashboard/templates/profiles/tabs.html
+++ b/app/dashboard/templates/profiles/tabs.html
@@ -109,6 +109,7 @@
         {% endif %}
       </ul>
     </div>
+  </div>
 {% endif %}
 
 

From 9ecc58951d41220cedb272bb96aeb62fc4a6dd9e Mon Sep 17 00:00:00 2001
From: Aditya Anand M C <aditya.anandmc@gmail.com>
Date: Thu, 9 Jan 2020 12:21:36 +0530
Subject: [PATCH 2/2] minor fixes

---
 app/assets/v2/css/profile.css                 |  20 ++-
 .../templates/profiles/header_details.html    |   5 +-
 .../templates/profiles/status_box.html        |   2 +-
 .../templates/profiles/tab_active.html        |   8 +-
 .../profiles/tab_grant_contribs.html          | 135 +++++++++---------
 .../templates/profiles/tab_portfolio.html     |  15 +-
 .../templates/profiles/tab_viewers.html       |  22 +--
 app/dashboard/templates/profiles/tabs.html    |   2 +-
 8 files changed, 117 insertions(+), 92 deletions(-)

diff --git a/app/assets/v2/css/profile.css b/app/assets/v2/css/profile.css
index c204e69c239..a7f9eb48260 100644
--- a/app/assets/v2/css/profile.css
+++ b/app/assets/v2/css/profile.css
@@ -18,7 +18,7 @@
   background: #E8F0FA;
   padding: 4px;
   border-radius: 2px;
-  font-size: 12px;
+  font-size: 11px;
   color: #6487AE;
   display: inline-block;
   margin-bottom: 2px;
@@ -219,8 +219,11 @@
     display: none;
   }
 
-}
+  .transaction-history.bounty_row .avatar {
+    max-width: 100% !important;
+  }
 
+}
 
 .profile-header__stats {
   border: none;
@@ -243,6 +246,19 @@
   padding: 0.7rem;
 }
 
+
+.bounty_row {
+  border-bottom: 1px solid #EFEFEF;
+}
+
+.bounty_row:hover {
+  background: none;
+}
+
+#earn_dataviz {
+  max-width: 100%;
+}
+
 @media (min-width: 992px) and (max-width: 1199.98px) {
 
   .profile-header__stats .card-header {
diff --git a/app/dashboard/templates/profiles/header_details.html b/app/dashboard/templates/profiles/header_details.html
index 18074470db7..65d099dba77 100644
--- a/app/dashboard/templates/profiles/header_details.html
+++ b/app/dashboard/templates/profiles/header_details.html
@@ -20,7 +20,7 @@ <h1 class="profile-header__handle">
   <a class="btn btn-outline-gc-blue btn-sm flex-grow-1 font-smaller-5 position-relative quick-link" href="/users?invite={{ profile.handle }}"
     data-placement="bottom" data-toggle="tooltip" data-html="true" title="Invite @{{ profile.handle }} to Bounty"
   >
-    <i class="fas fa-share-square"></i>
+  <i class="fas fa-user-plus"></i>
   </a>
 
   {% if verification %}
@@ -64,9 +64,6 @@ <h1 class="profile-header__handle">
       <i class="fab fa-discord"></i>
     </a>
   {% endif %}
-  {% if is_staff %}
-    <button class="chat btn btn-outline-gc-black" data-openchat="{{profile.handle}}"><i class="fas fa-comment-dots"  data-placement="bottom" data-toggle="tooltip" data-html="true" title="@{{ profile.handle }} on Gitcoin Chat"></i></button>
-  {% endif %}
 </p>
 
 {% if profile.data.bio %}
diff --git a/app/dashboard/templates/profiles/status_box.html b/app/dashboard/templates/profiles/status_box.html
index c0d1d3332f3..84795de235d 100644
--- a/app/dashboard/templates/profiles/status_box.html
+++ b/app/dashboard/templates/profiles/status_box.html
@@ -1,5 +1,5 @@
 {% load static %}
-<div class="container-fluid mt-1" id="status">
+<div class="container-fluid mt-4" id="status">
   {% csrf_token %}
   <textarea
     id="textarea"
diff --git a/app/dashboard/templates/profiles/tab_active.html b/app/dashboard/templates/profiles/tab_active.html
index 7d67ea164dd..5e9b1891d8b 100755
--- a/app/dashboard/templates/profiles/tab_active.html
+++ b/app/dashboard/templates/profiles/tab_active.html
@@ -2,7 +2,7 @@
 
 <div class="tab-projects d-flex flex-column">
   {% for bounty in active_bounties %}
-    <div class="tab-projects__item d-flex mb-0 {% cycle 'odd' 'even' %} pt-1 pb-1 bounty_row">
+    <div class="tab-projects__item d-flex mb-0 pt-1 pb-1 bounty_row">
       <div class="avatar-container col-1 justify-content-center hide_min_viewport">
         <img class="profile-header__avatar mr-3" src="{% avatar_url bounty.org_name %}" alt="">
       </div>
@@ -13,12 +13,14 @@
         <div class="info font-caption">Bounty opened {{bounty.web3_created|naturaltime}} for {{bounty.org_name}}</div>
         <div class="tag-list">
           {% for keyword in bounty.keywords_list %}
-            <small class="tag-list__item">{{keyword}}</small>
+            <small class="tag-list__item px-2">{{keyword}}</small>
           {% endfor %}
         </div>
       </div>
       <div class="col-12 col-md-4 col-lg-3 font-caption my-auto text-right">
-        <a class="btn btn-gc-blue btn-sm " href="{{bounty.url}}">View Bounty &gt;</a>
+        <a class="btn btn-gc-blue btn-sm font-caption font-weight-semibold" href="{{bounty.url}}">
+          View Bounty <i class="fas fa-chevron-right ml-1 font-smaller-5"></i>
+        </a>
       </div>
     </div>
   {% endfor %}
diff --git a/app/dashboard/templates/profiles/tab_grant_contribs.html b/app/dashboard/templates/profiles/tab_grant_contribs.html
index 822df22316d..1cc316a1303 100644
--- a/app/dashboard/templates/profiles/tab_grant_contribs.html
+++ b/app/dashboard/templates/profiles/tab_grant_contribs.html
@@ -21,79 +21,86 @@ <h2 class="font-title my-3 pb-3 title">
       {% trans "Grant Contribution History" %}
       {% if total_grant_contributions %} ({{total_grant_contributions}}) {% endif %}
     </h2>
-    <h3 class="font-body mt-1 mb-1">Monthly Summary</h3>
+    <h3 class="font-body mt-1 mb-2 font-weight-semibold">Monthly Summary</h3>
+
     {% include "profiles/earningsgraph.html" with graph_type="grants" %}
 
-    <h3 class="font-body mt-1 mb-1">Grants Created ({{profile.grant_admin.count}})</h3>
+    <h2 class="font-body m-3 pb-3 title">Grants Created ({{profile.grant_admin.count}})</h3>
+
     {% if not profile.grant_admin.count %}
-    <p class="p-3">
-      No Grants Created. <a href=grants/new>Create a Grant &gt;</a>
-    </p>
+      <h2 class="font-title m-3 pb-3 title">
+        No Grants Created. <a href=grants/new>Create a Grant &gt;</a>
+      </h2>
     {% endif %}
+
     {% for transaction in profile.grant_admin.all %}
-          <div class="py-3 mx-sm-0 row transaction-history">
-            <div class="col-3 col-md-2 font-subheader text-center my-auto">
-              {{ transaction.created_on|date:"Y-m-d" }}
-            </div>
-            <div class="col-2 col-md-2 justify-content-center special_tag">
-              <img class="avatar" style="max-width: 70px;" src="{% if transaction.logo and transaction.logo.url %}{{ transaction.logo.url }}{% else %}{% with grant_logo='v2/images/grants/logos/' id=transaction.id|modulo:3 %} {% static grant_logo|addstr:id|add:'.png' %} {% endwith %} {% endif %}">
-            </div>
-            <div class="col-7 col-md-5 my-auto">
-              <div class="title font-body">
-                <a href="{{ transaction.url }}">{{ transaction.title }}</a>
-              </div>
-              <div class="info font-caption">
-              </div>
-            </div>
+      <div class="py-3 mx-sm-0 px-lg-0 row transaction-history bounty_row">
+        <div class="col-5 col-sm-4 col-md-2 font-body my-auto">
+          {{ transaction.created_on|date:"Y-m-d" }}
+        </div>
+        <div class="col-2 col-md-2 px-0 justify-content-center special_tag">
+          <img class="avatar" style="max-width: 70px;" src="{% if transaction.logo and transaction.logo.url %}{{ transaction.logo.url }}{% else %}{% with grant_logo='v2/images/grants/logos/' id=transaction.id|modulo:3 %} {% static grant_logo|addstr:id|add:'.png' %} {% endwith %} {% endif %}">
+        </div>
+        <div class="col-5 col-md-4 my-auto">
+          <div class="title font-body">
+            <a href="{{ transaction.url }}">{{ transaction.title }}</a>
+          </div>
+        </div>
+        <div class="col-12 col-sm-6 col-md-2 my-auto">
+          <div class="info font-caption mt-4 mt-md-0 text-center text-sm-left">
+            <span class="font-weight-semibold">Goal: </span> {{ transaction.amount_goal}}<br>
+            <span class="font-weight-semibold">Received:</span> {{ transaction.amount_received }}<br>
           </div>
+        </div>
+        <div class="col-12 col-sm-6 col-md-2 my-auto">
+          <div class="info font-caption mt-sm-4 mt-md-0 text-center text-sm-left">
+            <span class="font-weight-semibold">Contributons Count:</span> {{ transaction.contribution_count }} <br>
+            <span class="font-weight-semibold">Contributors Count:</span> {{ transaction.contributor_count }}
+          </div>
+        </div>
+      </div>
     {% endfor %}
-    <h3 class="font-body mt-1 mb-1">Grant Contribution History ({{history|length}})</h3>
-    {% for transaction in history %}
-          <div class="py-3 mx-sm-0 row transaction-history">
-            <div class="col-3 col-md-2 font-subheader text-center my-auto">
-              {{ transaction.created_on }}
-            </div>
-            <div class="col-2 col-md-1 justify-content-center special_tag">
-              <img class="avatar" style="max-width: 70px;" src="{% if transaction.logo %}{{ transaction.logo }}{% else %}{% with grant_logo='v2/images/grants/logos/' id=transaction.id|modulo:3 %} {% static grant_logo|addstr:id|add:'.png' %} {% endwith %} {% endif %}">
-            </div>
-            <div class="col-7 col-md-4 my-auto">
-              <div class="title font-body">
-                <a href="{{ transaction.url }}">{{ transaction.title }}</a>
-              </div>
-              <div class="info font-caption">
 
-                {{ transaction.amount_per_period|floatformat:4|intcomma }} {{ transaction.token_symbol }} 
-                {% if transaction.num_tx_approved > 1 %}
-                  / {{ transaction.frequency }} {{ transaction.frequency_unit }},
-                {% endif %}
-                {{transaction.num_tx_approved|floatformat}} time{{ transaction.num_tx_approved|pluralize }}
+    <h2 class="font-body mx-3 pb-2 mt-5 title">Grant Contribution History ({{history|length}})</h2>
 
-              </div>
-            </div>
-            <div class="col-5 col-md-2 font-body my-auto txn-link">
-              <a id="tx_link" href="https://etherscan.io/tx/{{transaction.cont.tx_id}}" target="_blank" rel="noopener noreferrer">
-                  {% if transaction.tx_id %}
-                  View Etherscan
-                  {% endif %}
-              </a>
-              <input type="hidden" id="tx_id" name="tx_id" value="{{ transaction.cont.tx_id }}"/>
-            </div>
-            <div class="offset-lg-1 col-7 col-md-2 my-auto tags font-caption">
-              <div class="tag tag-lg token">
-                <p>
-                  {{ transaction.amount_per_period|floatformat:4|intcomma }}
-                  <span>{{ transaction.token_symbol }}</span>
-                </p>
-              </div>
-              {% if transaction.amount_per_period_usdt %}
-                <div class="tag tag-lg usd">
-                  <p>
-                    {{ transaction.amount_per_period_usdt|floatformat:2 }}
-                    <span>USD</span>
-                  </p>
-                </div>
-              {% endif %}
-            </div>
+    {% for transaction in history %}
+      <div class="py-3 mx-sm-0 px-lg-0 row transaction-history bounty_row">
+        <div class="col-5 col-sm-4 col-md-2 font-body my-auto">
+          {{ transaction.created_on }}
+        </div>
+        <div class="col-2 col-md-2 px-0 justify-content-center special_tag">
+          <img class="avatar" style="max-width: 70px;" src="{% if transaction.logo %}{{ transaction.logo }}{% else %}{% with grant_logo='v2/images/grants/logos/' id=transaction.id|modulo:3 %} {% static grant_logo|addstr:id|add:'.png' %} {% endwith %} {% endif %}">
+        </div>
+        <div class="col-5 col-md-4 my-auto">
+          <div class="title font-body">
+            <a href="{{ transaction.url }}">{{ transaction.title }}</a>
+          </div>
+        </div>
+        <div class="col-5 col-md-2 font-caption my-auto txn-link pt-3 pt-md-0">
+          {% if transaction.tx_id %}
+            <a id="tx_link" href="https://etherscan.io/tx/{{transaction.cont.tx_id}}" target="_blank" rel="noopener noreferrer">
+              View Etherscan
+            </a>
+          {% endif %}
+
+          <input type="hidden" id="tx_id" name="tx_id" value="{{ transaction.cont.tx_id }}"/>
+        </div>
+        <div class="col-7 col-md-2 my-auto tags font-caption pt-3 pt-md-0">
+          <div class="tag tag-lg token">
+            <p>
+              {{ transaction.amount_per_period|floatformat:4|intcomma }}
+              <span>{{ transaction.token_symbol }}</span>
+            </p>
           </div>
+          {% if transaction.amount_per_period_usdt %}
+            <div class="tag tag-lg usd">
+              <p>
+                {{ transaction.amount_per_period_usdt|floatformat:2 }}
+                <span>USD</span>
+              </p>
+            </div>
+          {% endif %}
+        </div>
+      </div>
     {% endfor %}
   </div>
diff --git a/app/dashboard/templates/profiles/tab_portfolio.html b/app/dashboard/templates/profiles/tab_portfolio.html
index 44bbcdc5c30..7c186395e73 100644
--- a/app/dashboard/templates/profiles/tab_portfolio.html
+++ b/app/dashboard/templates/profiles/tab_portfolio.html
@@ -2,7 +2,7 @@
 <div class="py-3 font-weight-bold">Specified Skillset</div>
 <div class="tag-list">
   {% for keyword in profile.keywords %}
-	 <small class="tag-list__item">{{keyword}}</small>
+	 <small class="tag-list__item px-2">{{keyword}}</small>
   {% endfor %}
 </div>
 
@@ -19,10 +19,10 @@
 
 
 {% if is_my_profile %}
-  <div class="p-3 mt-3" style="background-color: #f5f5f5;">
-    <div class="py-1 font-weight-bold">Add a project</div>
-    <div style="font-size: 12px;">
-      <i class="fas fa-eye"></i> <span>Only visible to you</span>
+  <div class="py-3 mt-3">
+    <div class="py-1">
+      <span class="font-weight-bold">Add a project</span>
+      <span class="font-caption">( Only visible to you <i class="fas fa-eye font-smaller-5"></i> )</span>
     </div>
     <div class="tab-projects-submit d-flex flex-column">
       <div class="tab-projects__item d-flex mb-0">
@@ -42,9 +42,8 @@
                 <label class="form__label" for="tags">Tags (comma seperated)</label>
                 <input name="tags" id="tags" class="form__input" type="text" placeholder="python, javascript" value="">
               </div>
-              <div class="col-12 col-md-3 ">
-                <div class="mt-6">&nbsp;</div>
-                <input class="btn btn-gc-blue btn-sm mt-3"  type="submit" name="submit" id="submit" value="Add Project">
+              <div class="col-12 col-md-3 pt-3">
+                <input class="mt-4 btn btn-gc-blue btn-sm font-caption font-weight-semibold"  type="submit" name="submit" id="submit" value="Add Project">
               </div>
             </div>
           </div>
diff --git a/app/dashboard/templates/profiles/tab_viewers.html b/app/dashboard/templates/profiles/tab_viewers.html
index d4e0d0edb93..382bdca35ed 100644
--- a/app/dashboard/templates/profiles/tab_viewers.html
+++ b/app/dashboard/templates/profiles/tab_viewers.html
@@ -1,7 +1,7 @@
 {% load i18n static avatar_tags humanize %}
 {% if not hidden %}
   {% if is_editable %}
-      <h3 class="font-body mt-1 mb-1">Monthly Summary</h3>
+    <h3 class="font-body mt-1 mb-2 font-weight-semibold">Monthly Summary</h3>
     {% if profile.viewed_by.count > 1 %}
       {% include "profiles/earningsgraph.html" with amount=profile.viewed_by.count graph_type="viewers" %}
     {% endif %}
@@ -11,21 +11,25 @@ <h3 class="font-body mt-1 mb-1">Monthly Summary</h3>
         No Viewers
       {% endif %}
       {% for viewer in profile.viewed_by.all %}
-        <div class="tab-projects__item d-flex mb-0 {% cycle 'odd' 'even' %} pt-1 pb-1">
-          <img class="rounded mr-3" src="{% avatar_url viewer.viewer.handle %}" alt="">
-          <div class="tab-projects__item-details" style="width: 70%">
+        <div class="tab-projects__item d-flex mb-0 pt-1 pb-1 bounty_row">
+          <div class="avatar-container col-1 justify-content-center hide_min_viewport">
+            <img class="profile-header__avatar mr-3" src="{% avatar_url viewer.viewer.handle %}" alt="">
+          </div>
+          <div class="tab-projects__item-details col-12 col-md-8 d-flex flex-column bounty-detail">
             <div class="d-flex">
-              <h5 class="font-weight-semibold">{{viewer.viewer.handle}}</h5>&nbsp;
+              <div class="font-weight-semibold font-subheader">{{viewer.viewer.handle}}</div>&nbsp;
             </div>
-            <small class="align-self-center">Viewed profile {{viewer.created_on | naturaltime}}</small>
+            <div class="info font-caption">Viewed profile {{viewer.created_on | naturaltime}}</div>
             <div class="tag-list">
               {% for keyword in viewer.keywords %}
-                <small class="tag-list__item">{{keyword}}</small>
+                <small class="tag-list__item px-2">{{keyword}}</small>
               {% endfor %}
             </div>
           </div>
-          <div class="float-right">
-            <a class="btn btn-gc-blue btn-sm " href="/profile/{{viewer.viewer.handle}}">View Profile &gt;</a>
+          <div class="col-12 col-md-4 col-lg-3 font-caption my-auto text-right">
+            <a class="btn btn-gc-blue btn-sm font-caption font-weight-semibold" href="/profile/{{viewer.viewer.handle}}">
+              View Profile <i class="fas fa-chevron-right ml-1 font-smaller-5"></i>
+            </a>
           </div>
         </div>
       {% endfor %}
diff --git a/app/dashboard/templates/profiles/tabs.html b/app/dashboard/templates/profiles/tabs.html
index b40b5a71623..54b327d2da1 100644
--- a/app/dashboard/templates/profiles/tabs.html
+++ b/app/dashboard/templates/profiles/tabs.html
@@ -117,7 +117,7 @@
   <div class="tab-pane fade show active">
     <div class="container position-relative">
       <div class="row mb-2 mt-0 bg-white rounded p-3">
-        <div class="col-12">
+        <div class="col-12 px-lg-0">
           {% if tab == 'kudos' %}
             {% include 'profiles/tab_kudos.html' %}
           {% elif tab == 'resume' %}