Merge pull request #6531 from gitcoinco/darkmode

fixes for darkmode
gitcoinco · Apr 29, 2020 · 79096e5 · 79096e5
2 parents 21a70e3 + b2cf641
commit 79096e5
Show file tree

Hide file tree

Showing 16 changed files with 70 additions and 66 deletions.
diff --git a/app/assets/v2/css/activity_stream.css b/app/assets/v2/css/activity_stream.css
@@ -70,12 +70,6 @@ a .sup {
   color: black;
 }
 
-.tip_activity,
-.action:hover {
-  background-color: #fafafa;
-  cursor: pointer;
-}
-
 .action.open {
   background-color: #eeeeee;
 }
@@ -89,30 +83,34 @@ a .sup {
 .comment_container .row{
   max-width: 100%;
 }
+
 .comment_container .action{
   cursor: pointer;
 }
+
 .comment_container .action.open,
 .comment_container .open .fa-heart{
   color: var(--gc-pink) !important;
 }
+
 .activity_stream .activity_detail {
   flex: 1;
   font-size: 0.75rem;
 }
 
-.comment_container{
-  padding: 0px;
-}
+.comment_container {
+  background-color: var(--bg-comment-container);
 
-.comment_container.filled{
   text-align: left;
   width: 300px;
-  background-color: #f2f2f2;
   padding: .5rem;
   border-radius: 5px;
 }
 
+.comment_container:empty {
+  display: none;
+}
+
 .comment_container img {
   border-radius: 20px;
   max-width: 40px;
@@ -154,7 +152,6 @@ a .sup {
 }
 
 .activity_stream .activity_comments .comment_container.filled {
-  background-color: #EFF3F6;
   width: 100%;
   margin-top: 1rem;
 }
@@ -190,6 +187,7 @@ a .sup {
 .activity_stream .box {
   padding: 0.75rem 1.2rem;
   border-bottom: 1px solid #EFEFEF;
+  background-color: var(--bg-activity);
 }
 
 #avatar_url .avatar {
@@ -215,12 +213,6 @@ a .sup {
   display: inline-block;
 }
 
-.click-gif.selected,
-#poll-button.selected,
-#video-button.selected {
-  color: black;
-}
-
 #video_container{
   background-color: white;
   text-align: center;
@@ -259,7 +251,6 @@ iframe.popout{
 
 .poll_choices.answered div.vote {
   border: 1px solid #e9e9e9;
-  background-color: #f9f9f9;
   cursor: default;
 }
 
@@ -278,6 +269,7 @@ iframe.popout{
 }
 
 .poll_choices div.answer {
+  color: black;
   border: 3px solid black;
   background-color: #f0f0f0;
 }
@@ -378,7 +370,7 @@ textarea.enter-activity-comment {
 }
 
 .activity_stream .comment_row .activity_comments_main {
-  border-top: 2px solid #e9ecf0;
+  margin-top: 1em;
   padding-top: 5px;
 }
 

diff --git a/app/assets/v2/css/base.css b/app/assets/v2/css/base.css
@@ -17,7 +17,7 @@ span {
 }
 
 a {
-  color: #3E00FF;
+  color: var(--link-color);
 }
 
 .cursor-pointer {

diff --git a/app/assets/v2/css/colors.css b/app/assets/v2/css/colors.css
@@ -26,8 +26,10 @@ html {
   --text-dark: var(--gc-black);
 
   --bg-shade-0: white;
-  --bg-shade-1: white;
+  --bg-shade-1: #EFF3F6;
   --bg-shade-2: #5f5c74;
+  --bg-activity: white;
+  --bg-comment-container: var(--bg-shade-1);
 
   --main-bg: #eff3f6;
   --form-input-bg: white;
@@ -63,19 +65,25 @@ html.dark-mode {
   --gc-blue-grey: #f2f6f9;
   --gc-dark-grey: #868789;
   --gc-darker-grey: #3d3d3d;
+  --gc-medium-dark-gray: #bbbbbb;
+  --gc-darker-grey: #3d3d3d;
 
   --text-light: #D8D8D8;
   --text-dark: var(--gc-black);
 
-  --bg-shade-0: #0a0428;
-  --bg-shade-1: #221d3e;
-  --bg-shade-2: #5f5c74;
+  --bg-shade-0: #221D3E;
+  --bg-shade-1: #373351;
+  --bg-shade-2: #5F5C74;
+  --bg-activity: var(--bg-shade-1);
+  --bg-comment-container: var(--bg-shade-0);
+
+
 
   --main-bg: #0a0428;
-  --form-input-bg: #221d3e;
+  --form-input-bg: #221D3E;
   --form-input-color: white;
   --button-radio-icon-color: white;
-  --link-color: white;
+  --link-color: #91b5ff;
   --townsquare-link-color: white;
   --townsquare-block-header-color: white;
   --active-button-border-color: white;
@@ -116,4 +124,4 @@ html.dark-mode {
 
 .text-medium-dark-grey {
   color: var(--gc-medium-dark-gray);
-}
+}
diff --git a/app/assets/v2/css/forms/input.css b/app/assets/v2/css/forms/input.css
@@ -71,3 +71,10 @@ textarea.form__input {
 .amount_container{
   height: 100px;
 }
+
+.dark-mode .form-control,
+.dark-mode .form__input,
+.dark-mode .border,
+.dark-mode .activity_stream .box {
+  border-color:transparent!important;
+}
diff --git a/app/assets/v2/css/gitcoin.css b/app/assets/v2/css/gitcoin.css
@@ -919,9 +919,10 @@ textarea.status-textarea {
 }
 
 .status-menu button {
-  color: #6c757d;
+  color: var(--gc-dark-grey);
 }
 
-.status-menu button.selected {
-  color: black;
+.status-menu button.selected,
+.status-menu button:hover {
+  color: var(--townsquare-link-color);
 }
diff --git a/app/assets/v2/css/notifications.css b/app/assets/v2/css/notifications.css
@@ -2,7 +2,6 @@ html {
   --color-notification: 37, 232, 153;
   --badge-bg: #D6FBEB;
   --badge-text: #00A55E;
-  --link-color: #3E00FF;
   --badge-blue-bg: #E7F0FA;
   --badge-blue-text: #6587AE;
 }
@@ -12,7 +11,6 @@ html.dark-mode {
   --color-notification: 37, 232, 153;
   --badge-bg: #D6FBEB;
   --badge-text: #00A55E;
-  --link-color: #3E00FF;
   --badge-blue-bg: #5f5c74;
   --badge-blue-text: white;
 }

diff --git a/app/assets/v2/css/theme_switcher.css b/app/assets/v2/css/theme_switcher.css
@@ -4,14 +4,14 @@
 }
 
 .theme-switcher-svg {
-  fill: white;
-  width: 1em;
-  height: 1em;
+  width: 0.7em;
+  height: 0.7em;
   display: inline-block;
   font-size: 1.5rem;
   transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   flex-shrink: 0;
   user-select: none;
+  margin-right: 0.8em;
 }
 
 html:not(.dark-mode) .theme-switcher__dark {
@@ -20,4 +20,4 @@ html:not(.dark-mode) .theme-switcher__dark {
 
 html.dark-mode .theme-switcher__light {
   display: none;
-}
+}
diff --git a/app/assets/v2/css/town_square.css b/app/assets/v2/css/town_square.css
@@ -889,6 +889,7 @@ body.green.offer_view .announce {
 
 .townsquare_block-header {
   font-size: 0.9rem;
+  font-weight: 700;
   color: var(--townsquare-block-header-color);
   text-transform: uppercase;
   cursor: pointer;
@@ -911,7 +912,7 @@ body.green.offer_view .announce {
 }
 
 .grey {
-  color: #666666 !important;
+  color: var(--gc-medium-dark-gray) !important;
 }
 .offer_container span{
   display: inline;
@@ -935,7 +936,7 @@ body.green.offer_view .announce {
 }
 
 .activity_time {
-  color: #666666;
+  color: var(--gc-medium-dark-gray);
 }
 
 .filter-tag {
@@ -977,7 +978,7 @@ body.green.offer_view .announce {
 
 .nav-badge {
   font-size: 9px;
-  color: rgba(62,0,255);
+  color: var(--link-color);
   top: -8px;
   position: relative;
   font-weight: bold;

diff --git a/app/assets/v2/js/activity.js b/app/assets/v2/js/activity.js
@@ -707,7 +707,7 @@ $(document).ready(function() {
         if (is_first_hidden) {
           show_more_box = `
           <div class="row mx-auto ${ show_all_option ? 'show_all' : 'show_more'} d-block text-center">
-            <a href="#" class="text-black-60 font-smaller-5">
+            <a href="#" class="font-smaller-5">
             ${ show_all_option ? 'See all comments' : `Show More (<span class="comment-count">${num_comments - hide_after_n_comments + 1}</span>)`}
             </a>
           </div>
@@ -759,10 +759,10 @@ $(document).ready(function() {
                 </span>
                 <span class="comment_options font-smaller-5 mt-1" style="display: block; text-align: right;">
                   ${is_comment_owner ?
-    `<i data-pk=${comment['id']} class="delete_comment fas fa-trash font-smaller-7 position-relative text-black-70 mr-1 cursor-pointer" style="top:-1px; "></i>| `
+    `<i data-pk=${comment['id']} class="delete_comment fas fa-trash font-smaller-7 position-relative grey mr-1 cursor-pointer" style="top:-1px; "></i>| `
     : ''}
     ${is_comment_owner ?
-    `<i data-pk=${comment['id']} class="edit_comment fas fa-edit font-smaller-7 position-relative text-black-70 mr-1 cursor-pointer" style="top:-1px; "></i>| `
+    `<i data-pk=${comment['id']} class="edit_comment fas fa-edit font-smaller-7 position-relative grey mr-1 cursor-pointer" style="top:-1px; "></i>| `
     : ''}
                   ${show_tip ? `
                   <span class="action like px-0 ${comment['is_liked'] ? 'open' : ''}" data-toggle="tooltip" title="Liked by ${comment['likes']}">
@@ -793,11 +793,11 @@ $(document).ready(function() {
           <div class="comment-area col-12 col-sm-11 text-right">
             <textarea class="form-control bg-lightblue font-caption enter-activity-comment" placeholder="Enter comment" cols="80" rows="3">${existing_text}</textarea>
             <div class="emoji-container position-absolute d-flex flex-wrap">
-              <button class="btn btn-sm p-1 emoji_button" data-toggle="tooltip" title="Add an emoji to post.">
+              <button class="btn btn-sm p-1 emoji_button grey" data-toggle="tooltip" title="Add an emoji to post.">
                 <i class="far fa-fw fa-smile"></i>
               </button>
             </div>
-            <a href=# class="btn btn-gc-blue btn-sm mt-= font-smaller-7 font-weight-bold post_comment">COMMENT</a>
+            <a href=# class="btn btn-gc-blue btn-sm mt-3 font-smaller-7 font-weight-bold post_comment">COMMENT</a>
           </div>
         </div>
       `;

diff --git a/app/dashboard/templates/profiles/status_box.html b/app/dashboard/templates/profiles/status_box.html
@@ -59,7 +59,7 @@
       </button>
     </div>
   </div>
-  <div id="thumbnail" class="mt-1 mb-2" style="display: none; top: initial; left: initial; background-color: #FAFAFA">
+  <div id="thumbnail" class="mt-1 mb-2" style="display: none; top: initial; left: initial;">
     <div class="row" style="display: flex; justify-content: center; align-items: center; ">
       <div class="col ml-1 col-sm-3 col-md-2 text-center">
         <img id="thumbnail-img" style="width: 130%;" src="{% static 'v2/images/team/gitcoinbot.png' %}">

diff --git a/app/dashboard/templates/shared/menu.html b/app/dashboard/templates/shared/menu.html
@@ -331,6 +331,5 @@ <h5>Weekly leaderboard</h5>
   </nav>
   <nav class="navbar-nav mr-3">
     {% include 'shared/nav_auth.html' with source='authed' %}
-    {% include 'shared/theme_switcher.html' with source='authed' %}
   </nav>
 </div>
diff --git a/app/dashboard/templates/shared/nav_auth.html b/app/dashboard/templates/shared/nav_auth.html
@@ -89,6 +89,9 @@
         </a>
       {% endif %}
       <div class="dropdown-divider"></div>
+      {% if is_townsquare %}
+        {% include 'shared/theme_switcher.html' with source='authed' %}
+      {% endif %}
       <a class="dropdown-item" data-gtm="logout" href="{% url "logout" %}?next={{ request.get_full_path }}">
         <i class="fas fa-lock"></i>
         {% trans "Log Out" %}

diff --git a/app/dashboard/templates/shared/theme_switcher.html b/app/dashboard/templates/shared/theme_switcher.html
@@ -1,5 +1,6 @@
-<div id="theme-switcher" class="navbar-nav mr-3" aria-label="Toggle light/dark theme" title="Toggle light/dark theme">
+<div id="theme-switcher" class="dropdown-item" aria-label="Toggle light/dark theme" title="Toggle light/dark theme">
   <svg class="theme-switcher-svg theme-switcher__light" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"><path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6c3.31 0 6 2.69 6 6s-2.69 6-6 6z"></path></svg>
 
   <svg class="theme-switcher-svg theme-switcher__dark" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"><path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"></path></svg>
-</div>
+  Darkmode
+</div>
diff --git a/app/retail/templates/shared/activity-vue.html b/app/retail/templates/shared/activity-vue.html
@@ -52,7 +52,7 @@
   })(jQuery)
 </script>
 <script type="text/x-template" id="townsquare-activity-template">
-  <div class="box bg-white d-block m-0 mb-3 activity {{ row.activity_type }} infinite-item px-sm-3 py-4" data-pk="{{row.pk}}">
+  <div class="box d-block m-0 mb-3 activity {{ row.activity_type }} infinite-item px-sm-3 py-4" data-pk="{{row.pk}}">
   <template v-if='row.activity_type == "new_bounty"'>
     <div class="align-items-baseline d-flex font-weight-bold justify-content-between mb-2 mt-n3">
       <b>New Bounty</b>
@@ -435,9 +435,7 @@
   </div>
   {% endif %}
     <div class="activity_comments">
-      <div class="comment_container">
-
-      </div>
+      <div class="comment_container"></div>
     </div>
 </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,7 +17,7 @@ span { @@
     }
     a {
-      color: #3E00FF;
+      color: var(--link-color);
     }
     .cursor-pointer {
@@ Expand Down @@