chore: fix up profile activity css

gitcoinco · Sep 26, 2019 · 35fde41 · 35fde41
1 parent 9a2e557
commit 35fde41
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 34 deletions.
diff --git a/app/assets/v2/css/activity_stream.css b/app/assets/v2/css/activity_stream.css
@@ -1,15 +1,16 @@
 
 .activity_stream .avatar {
-  width: 3.125rem;
-  height: 3.125rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  min-height: 2.5rem;
   margin: 0px auto;
   border-radius: 50px;
   margin-top: 0px;
 }
 
 .activity_stream .box {
-  padding: 1.2rem;
-  border-bottom: 1px solid #DBDBDB;
+  padding: 0.75rem 1.2rem;
+  border-bottom: 1px solid #EFEFEF;
 }
 
 #avatar_url .avatar {
@@ -29,7 +30,7 @@
 }
 
 .last-icon {
-  font-size: 30px;
+  font-size: 1.25rem;
   color: #0D0764;
 }
 
@@ -45,6 +46,13 @@
   display: none;
 }
 
+@media (min-width: 768px) {
+  .activity .secondary {
+    position: relative;
+    left: -10px;
+  }
+}
+
 @media (max-width: 767.98px) {
 
   .activity-info {
@@ -56,4 +64,4 @@
     margin-left: -20px;
     margin-top: 20px;
   }
-}
+}
diff --git a/app/assets/v2/css/buttons.css b/app/assets/v2/css/buttons.css
@@ -266,7 +266,7 @@ button:focus {
 }
 
 .btn-radio {
-  border: 2px solid #D3D3D3;
+  border: 1px solid #D3D3D3;
 }
 
 .btn-radio.active {

diff --git a/app/dashboard/templates/profiles/status_box.html b/app/dashboard/templates/profiles/status_box.html
@@ -3,29 +3,35 @@
   {% csrf_token %}
   <textarea
     id="textarea"
-    class="form__input"
+    class="form__input p-2"
     placeholder="What are you thinking?"
     style="resize: none"
   ></textarea>
 
   <div class="btn-group-toggle activity_type_selector" data-toggle="buttons">
-    <label class="btn btn-radio frontend mr-2 font-weight-bold py-2 px-4" >
-      <input type="checkbox" name="activity_type" id="" value="mentor" autocomplete="off" required="">
-        <i class="fas fa-terminal mr-2"></i>
+    <label class="btn btn-radio mr-2 frontend font-weight-semibold font-caption py-2 px-3" >
+      <input type="checkbox" name="activity_type" value="mentor" autocomplete="off">
+      <i class="fas fa-terminal mr-2"></i>
       Looking for Mentor
     </label>
-    <label class="btn btn-radio job mr-2 font-weight-bold py-2 px-4 ">
-      <input type="checkbox" name="activity_type" id="" value="job" autocomplete="off" required=""><i class="fas fa-code mr-2"></i> Looking for Job
+    <label class="btn btn-radio mr-2 job font-weight-semibold font-caption py-2 px-3">
+      <input type="checkbox" name="activity_type" value="job" autocomplete="off">
+      <i class="fas fa-code mr-2"></i>
+      Looking for Job
     </label>
-    <label class="btn btn-radio help mr-2 font-weight-bold py-2 px-4 ">
-      <input type="checkbox" name="activity_type" id="" value="help" autocomplete="off" required=""><i class="fas fa-laptop-code mr-2"></i> Looking for Help
+    <label class="btn btn-radio mr-2 help font-weight-semibold font-caption py-2 px-3">
+      <input type="checkbox" name="activity_type" value="help" autocomplete="off">
+      <i class="fas fa-laptop-code mr-2"></i>
+      Looking for Help
     </label>
-    <label class="btn btn-radio custom font-weight-bold py-2 px-4 ">
-      <input type="checkbox" name="activity_type" id="" value="custom" autocomplete="off" required=""><i class="fas fa-briefcase mr-2"></i> Custom
+    <label class="btn btn-radio custom font-weight-semibold font-caption py-2 px-3">
+      <input type="checkbox" name="activity_type" value="custom" autocomplete="off">
+      <i class="fas fa-briefcase mr-2"></i>
+      Custom
     </label>
   </div>
 
   <div class="text-right">
-    <button class="btn btn-gc-blue" id="btn_post" disabled="true">Post!</button>
+    <button class="btn btn-gc-blue font-caption" id="btn_post" disabled="true">SHARE</button>
   </div>
 </div>
diff --git a/app/retail/templates/shared/activity.html b/app/retail/templates/shared/activity.html
@@ -17,16 +17,16 @@
 {% endcomment %}
 {% load humanize i18n static %}
 <div class="row box activity {{ row.activity_type }} infinite-item">
-  <div class="col-12 col-md-1">
-    <div class="activity-avatar">
+  <div class="col-12 col-md-1 {% if row.secondary_avatar_url %} secondary {% endif %}">
+    <div class="activity-avatar my-auto py-2">
       <img class="avatar" src="/dynamic/avatar/{{ row.profile.handle }}"/>
       {% if row.secondary_avatar_url %}
-        <img class="avatar secondary_avatar" src="{{row.secondary_avatar_url}}" />
+        <img class="avatar my-auto secondary_avatar" src="{{row.secondary_avatar_url}}" />
       {% endif %}
     </div>
   </div>
-  <div class="col-12 col-md-10 activity-info">
-    <div class="activity-status mb-2">
+  <div class="col-12 col-md-10 activity-info my-auto {% if row.secondary_avatar_url %} position-relative {% endif %}">
+    <div class="activity-status font-body mb-1">
       <a href="https://gitcoin.co/profile/{{ row.profile.handle }}" target="_blank">
         @{{ row.profile.handle }}
       </a>
@@ -118,26 +118,26 @@
           </div>
         {% endif %}
         {% if row.value_in_usdt_now %}
-        <div class="tag usd">
-          <p>
-            <span>{{ row.value_in_usdt_now }} USD</span>
-          </p>
-        </div>
+          <div class="tag usd">
+            <p>
+              <span>{{ row.value_in_usdt_now }} USD</span>
+            </p>
+          </div>
         {% endif %}
         {% if row.bounty.network and row.bounty.network != 'mainnet' %}
-        <div class="tag network_warning">
-          <p>
-            <span>{{ activity.bounty.network }}</span>
-          </p>
-        </div>
+          <div class="tag network_warning">
+            <p>
+              <span>{{ activity.bounty.network }}</span>
+            </p>
+          </div>
         {% endif %}
         <span class="mx-2">
           {{ row.created_human_time }}
         </span>
       </div>
     </div>
   </div>
-  <div class="col-12 col-md-1 text-center">
+  <div class="col-12 col-md-1 text-center my-auto">
     {% if row.kudos %}
       <a href="/kudos/{{row.kudos.kudos_token_cloned_from_id}}/{{row.kudos.kudos_token_cloned_from.name}}">
         <img src="{% static row.kudos_data.image %}" alt="" class="w-100" style="max-width:100px;">