Merge pull request #478 from Vizzuality/client/feature/LSE-152-fe-cha…

…nges-in-download-button Update green buttons
Vizzuality · Nov 17, 2023 · da64870 · da64870
2 parents 2dcac9b + 5316fd6
commit da64870
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 5 deletions.
diff --git a/app/assets/stylesheets/tpi/_emissions-chart.scss b/app/assets/stylesheets/tpi/_emissions-chart.scss
@@ -23,6 +23,7 @@
     &__country-selector {
       .button {
         padding: 12px 16px;
+        color: $ascor-color;
       }
 
       &__countries {
@@ -73,6 +74,11 @@
         &__button {
           display: flex;
           justify-content: flex-end;
+          button {
+            border: 2px solid $ascor-green !important;
+            background-color: white !important;
+            color: $ascor-green !important;
+          }
         }
       }
     }

diff --git a/app/assets/stylesheets/tpi/buttons.scss b/app/assets/stylesheets/tpi/buttons.scss
@@ -120,6 +120,17 @@ $button-border-width: 4px;
     }
   }
 
+  &.is-emphasis {
+    background-color: $ascor-green !important;
+    color: $ascor-color !important;
+    img {
+      filter: brightness(0.1);
+    }
+    &:hover {
+      background-color: transparentize($ascor-green, 0.4) !important;
+    }
+  }
+
   &.with-icon {
     img {
       margin-right: 10px;

diff --git a/app/assets/stylesheets/tpi/pages/ascor.scss b/app/assets/stylesheets/tpi/pages/ascor.scss
@@ -135,7 +135,7 @@ $see-more-width-tablet: 130px;
 
   .base-tooltip__default-trigger {
     background-color: $ascor-green;
-
+    color: $ascor-color;
     &:hover {
       background-color: transparentize($ascor-green, 0.4);
     }

diff --git a/app/javascript/components/tpi/charts/ascor-emissions/CountrySelector.js b/app/javascript/components/tpi/charts/ascor-emissions/CountrySelector.js
@@ -41,7 +41,7 @@ const CountrySelector = ({
   return (
     <div className="emissions__filters__country-selector">
       <button
-        className="button is-primary"
+        className="button is-emphasis"
         onClick={() => setCountriesOpen((open) => !open)}
         type="button"
       >

diff --git a/app/views/tpi/ascor/index.html.erb b/app/views/tpi/ascor/index.html.erb
@@ -23,7 +23,7 @@
         </a>
       </div>
 
-      <%= link_to user_download_tpi_ascor_index_path, class: 'button is-primary is-pulled-right with-icon with-border' do %>
+      <%= link_to user_download_tpi_ascor_index_path, class: 'button is-emphasis is-pulled-right with-icon with-border' do %>
         <img src="<%= asset_path 'icons/download.svg'%>" alt="download icon" />
         Download ASCOR data
       <% end %>
@@ -114,7 +114,7 @@
       <div class="promoted-publications__title">
         <div class="promoted-publications__title-text">Publications and news</div>
 
-        <%= link_to 'View all publications and news', tpi_publications_path, class: 'button is-secondary is-hidden-touch' %>
+        <%= link_to 'View all publications and news', tpi_publications_path, class: 'button is-emphasis is-hidden-touch' %>
       </div>
 
       <% if @publications_and_articles.any? %>

diff --git a/app/views/tpi/ascor/show.html.erb b/app/views/tpi/ascor/show.html.erb
@@ -26,7 +26,7 @@
         </div>
       </div>
 
-      <%= link_to user_download_tpi_ascor_index_path, class: 'button is-primary is-pulled-right with-icon with-border' do %>
+      <%= link_to user_download_tpi_ascor_index_path, class: 'button is-emphasis is-pulled-right with-icon with-border' do %>
         <img src="<%= asset_path 'icons/download.svg'%>" alt="download icon" />
         Download ASCOR data
       <% end %>