From aec8d77c0de09974eb05d58d029b2560a2c1c57d Mon Sep 17 00:00:00 2001
From: barbara-chaves <barbarabarcellos90@gmail.com>
Date: Fri, 17 Nov 2023 12:19:22 +0100
Subject: [PATCH 1/2] Update green buttons

---
 .../stylesheets/tpi/_emissions-chart.scss     |  6 +++
 app/assets/stylesheets/tpi/buttons.scss       | 11 +++++
 app/assets/stylesheets/tpi/pages/ascor.scss   | 48 ++++++++++---------
 .../charts/ascor-emissions/CountrySelector.js |  2 +-
 app/views/tpi/ascor/index.html.erb            |  4 +-
 app/views/tpi/ascor/show.html.erb             |  2 +-
 6 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/app/assets/stylesheets/tpi/_emissions-chart.scss b/app/assets/stylesheets/tpi/_emissions-chart.scss
index 3f3fcb633..381cee482 100644
--- 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
index fe1305ff0..449430a0d 100644
--- 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
index a0debceaf..439ee3a91 100644
--- a/app/assets/stylesheets/tpi/pages/ascor.scss
+++ b/app/assets/stylesheets/tpi/pages/ascor.scss
@@ -10,7 +10,8 @@ $see-more-width-tablet: 130px;
       background-color: $ascor-background-color;
 
       @include desktop {
-        padding: $container-top-padding $container-side-padding 40px $container-side-padding;
+        padding: $container-top-padding $container-side-padding 40px
+          $container-side-padding;
       }
     }
 
@@ -38,7 +39,7 @@ $see-more-width-tablet: 130px;
     }
 
     .left-icon {
-      background-image: image-url('tpi/ascor/circles_1.svg');
+      background-image: image-url("tpi/ascor/circles_1.svg");
       width: 100%;
       height: 100%;
       background-repeat: no-repeat;
@@ -47,7 +48,7 @@ $see-more-width-tablet: 130px;
     }
 
     .right-icon {
-      background-image: image-url('tpi/ascor/circles_2.svg');
+      background-image: image-url("tpi/ascor/circles_2.svg");
       width: 100%;
       height: 100%;
       background-repeat: no-repeat;
@@ -56,7 +57,7 @@ $see-more-width-tablet: 130px;
     }
 
     .bottom-icon {
-      background-image: image-url('tpi/ascor/logo.png');
+      background-image: image-url("tpi/ascor/logo.png");
       width: 100%;
       height: 100%;
       background-repeat: no-repeat;
@@ -83,11 +84,11 @@ $see-more-width-tablet: 130px;
         }
 
         @include desktop {
-          padding-left: calc((960px - 608px)/2);
+          padding-left: calc((960px - 608px) / 2);
         }
 
         @include widescreen {
-          padding-left: calc((1152px - 608px)/2);
+          padding-left: calc((1152px - 608px) / 2);
         }
       }
 
@@ -135,6 +136,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);
@@ -312,7 +314,7 @@ $see-more-width-tablet: 130px;
 
     &__icon {
       &:before {
-        content: '';
+        content: "";
         display: block;
 
         min-width: 40px;
@@ -324,31 +326,31 @@ $see-more-width-tablet: 130px;
       }
 
       &--no:before {
-        background-image: image-url('tpi/ascor/no.svg');
+        background-image: image-url("tpi/ascor/no.svg");
       }
 
       &--yes:before {
-        background-image: image-url('tpi/ascor/yes.svg');
+        background-image: image-url("tpi/ascor/yes.svg");
       }
 
       &--not-applicable:before {
-        background-image: image-url('tpi/ascor/not_applicable.svg');
+        background-image: image-url("tpi/ascor/not_applicable.svg");
       }
 
       &--no-data:before {
-        background-image: image-url('tpi/ascor/no_data.svg');
+        background-image: image-url("tpi/ascor/no_data.svg");
       }
 
       &--partial:before {
-        background-image: image-url('tpi/ascor/partial.svg');
+        background-image: image-url("tpi/ascor/partial.svg");
       }
 
       &--no-disclosure:before {
-        background-image: image-url('tpi/ascor/no_disclosure.svg');
+        background-image: image-url("tpi/ascor/no_disclosure.svg");
       }
 
       &--excempt:before {
-        background-image: image-url('tpi/ascor/excempt.svg');
+        background-image: image-url("tpi/ascor/excempt.svg");
       }
     }
 
@@ -418,7 +420,7 @@ $see-more-width-tablet: 130px;
       flex-wrap: wrap;
 
       &__title {
-        flex-grow:2
+        flex-grow: 2;
       }
 
       &__text {
@@ -464,7 +466,7 @@ $see-more-width-tablet: 130px;
       width: $see-more-width;
       right: -1px;
       bottom: -1px;
-      border: 1px solid #CFD7ED;
+      border: 1px solid #cfd7ed;
       user-select: none;
 
       @include tablet {
@@ -473,17 +475,17 @@ $see-more-width-tablet: 130px;
 
       &:before {
         color: $grey-dark;
-        content: 'See more';
+        content: "See more";
         display: block;
         font-size: 12px;
         margin-top: 3px;
       }
 
       &:after {
-        content: '';
+        content: "";
         display: block;
 
-        background-image: image-url('icons/chevron-gray.svg');
+        background-image: image-url("icons/chevron-gray.svg");
         background-repeat: no-repeat;
         background-position: right center;
         background-size: 16px;
@@ -500,7 +502,7 @@ $see-more-width-tablet: 130px;
 
       .country-assessment__more {
         &:before {
-          content: 'See less';
+          content: "See less";
         }
 
         &::after {
@@ -521,7 +523,7 @@ $see-more-width-tablet: 130px;
     position: relative;
 
     &__icon {
-      background-image: image-url('tpi/ascor/circles_3.svg');
+      background-image: image-url("tpi/ascor/circles_3.svg");
       width: 100%;
       height: 100%;
       background-repeat: no-repeat;
@@ -552,7 +554,7 @@ $see-more-width-tablet: 130px;
 
       p {
         font-size: 14px;
-        margin-bottom: 50px
+        margin-bottom: 50px;
       }
 
       .button {
@@ -576,4 +578,4 @@ $see-more-width-tablet: 130px;
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/javascript/components/tpi/charts/ascor-emissions/CountrySelector.js b/app/javascript/components/tpi/charts/ascor-emissions/CountrySelector.js
index 124bf9ea8..ceeb64592 100644
--- 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
index b71df80ec..93ffeb5a3 100644
--- 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
index f01e3839a..ba0bd8141 100644
--- 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 %>

From 5316fd682b14827fbc0777e7ae070a916d392413 Mon Sep 17 00:00:00 2001
From: barbara-chaves <barbarabarcellos90@gmail.com>
Date: Fri, 17 Nov 2023 12:43:04 +0100
Subject: [PATCH 2/2] fix ascor.scss

---
 app/assets/stylesheets/tpi/pages/ascor.scss | 48 ++++++++++-----------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/app/assets/stylesheets/tpi/pages/ascor.scss b/app/assets/stylesheets/tpi/pages/ascor.scss
index 439ee3a91..310f0cdd5 100644
--- a/app/assets/stylesheets/tpi/pages/ascor.scss
+++ b/app/assets/stylesheets/tpi/pages/ascor.scss
@@ -10,8 +10,7 @@ $see-more-width-tablet: 130px;
       background-color: $ascor-background-color;
 
       @include desktop {
-        padding: $container-top-padding $container-side-padding 40px
-          $container-side-padding;
+        padding: $container-top-padding $container-side-padding 40px $container-side-padding;
       }
     }
 
@@ -39,7 +38,7 @@ $see-more-width-tablet: 130px;
     }
 
     .left-icon {
-      background-image: image-url("tpi/ascor/circles_1.svg");
+      background-image: image-url('tpi/ascor/circles_1.svg');
       width: 100%;
       height: 100%;
       background-repeat: no-repeat;
@@ -48,7 +47,7 @@ $see-more-width-tablet: 130px;
     }
 
     .right-icon {
-      background-image: image-url("tpi/ascor/circles_2.svg");
+      background-image: image-url('tpi/ascor/circles_2.svg');
       width: 100%;
       height: 100%;
       background-repeat: no-repeat;
@@ -57,7 +56,7 @@ $see-more-width-tablet: 130px;
     }
 
     .bottom-icon {
-      background-image: image-url("tpi/ascor/logo.png");
+      background-image: image-url('tpi/ascor/logo.png');
       width: 100%;
       height: 100%;
       background-repeat: no-repeat;
@@ -84,11 +83,11 @@ $see-more-width-tablet: 130px;
         }
 
         @include desktop {
-          padding-left: calc((960px - 608px) / 2);
+          padding-left: calc((960px - 608px)/2);
         }
 
         @include widescreen {
-          padding-left: calc((1152px - 608px) / 2);
+          padding-left: calc((1152px - 608px)/2);
         }
       }
 
@@ -137,7 +136,6 @@ $see-more-width-tablet: 130px;
   .base-tooltip__default-trigger {
     background-color: $ascor-green;
     color: $ascor-color;
-
     &:hover {
       background-color: transparentize($ascor-green, 0.4);
     }
@@ -314,7 +312,7 @@ $see-more-width-tablet: 130px;
 
     &__icon {
       &:before {
-        content: "";
+        content: '';
         display: block;
 
         min-width: 40px;
@@ -326,31 +324,31 @@ $see-more-width-tablet: 130px;
       }
 
       &--no:before {
-        background-image: image-url("tpi/ascor/no.svg");
+        background-image: image-url('tpi/ascor/no.svg');
       }
 
       &--yes:before {
-        background-image: image-url("tpi/ascor/yes.svg");
+        background-image: image-url('tpi/ascor/yes.svg');
       }
 
       &--not-applicable:before {
-        background-image: image-url("tpi/ascor/not_applicable.svg");
+        background-image: image-url('tpi/ascor/not_applicable.svg');
       }
 
       &--no-data:before {
-        background-image: image-url("tpi/ascor/no_data.svg");
+        background-image: image-url('tpi/ascor/no_data.svg');
       }
 
       &--partial:before {
-        background-image: image-url("tpi/ascor/partial.svg");
+        background-image: image-url('tpi/ascor/partial.svg');
       }
 
       &--no-disclosure:before {
-        background-image: image-url("tpi/ascor/no_disclosure.svg");
+        background-image: image-url('tpi/ascor/no_disclosure.svg');
       }
 
       &--excempt:before {
-        background-image: image-url("tpi/ascor/excempt.svg");
+        background-image: image-url('tpi/ascor/excempt.svg');
       }
     }
 
@@ -420,7 +418,7 @@ $see-more-width-tablet: 130px;
       flex-wrap: wrap;
 
       &__title {
-        flex-grow: 2;
+        flex-grow:2
       }
 
       &__text {
@@ -466,7 +464,7 @@ $see-more-width-tablet: 130px;
       width: $see-more-width;
       right: -1px;
       bottom: -1px;
-      border: 1px solid #cfd7ed;
+      border: 1px solid #CFD7ED;
       user-select: none;
 
       @include tablet {
@@ -475,17 +473,17 @@ $see-more-width-tablet: 130px;
 
       &:before {
         color: $grey-dark;
-        content: "See more";
+        content: 'See more';
         display: block;
         font-size: 12px;
         margin-top: 3px;
       }
 
       &:after {
-        content: "";
+        content: '';
         display: block;
 
-        background-image: image-url("icons/chevron-gray.svg");
+        background-image: image-url('icons/chevron-gray.svg');
         background-repeat: no-repeat;
         background-position: right center;
         background-size: 16px;
@@ -502,7 +500,7 @@ $see-more-width-tablet: 130px;
 
       .country-assessment__more {
         &:before {
-          content: "See less";
+          content: 'See less';
         }
 
         &::after {
@@ -523,7 +521,7 @@ $see-more-width-tablet: 130px;
     position: relative;
 
     &__icon {
-      background-image: image-url("tpi/ascor/circles_3.svg");
+      background-image: image-url('tpi/ascor/circles_3.svg');
       width: 100%;
       height: 100%;
       background-repeat: no-repeat;
@@ -554,7 +552,7 @@ $see-more-width-tablet: 130px;
 
       p {
         font-size: 14px;
-        margin-bottom: 50px;
+        margin-bottom: 50px
       }
 
       .button {
@@ -578,4 +576,4 @@ $see-more-width-tablet: 130px;
       }
     }
   }
-}
+}
\ No newline at end of file