Merge pull request #435 from Vizzuality/fix/beta-feedback-2

Fix/beta feedback 2
Vizzuality · Aug 24, 2023 · c64d8ed · c64d8ed
2 parents b0bf06a + f84fa62
commit c64d8ed
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 13 deletions.
diff --git a/app/assets/stylesheets/tpi/_colors.scss b/app/assets/stylesheets/tpi/_colors.scss
@@ -14,12 +14,11 @@ $grey-blue: #CFD7ED;
 $dark: #191919;
 $black: #000;
 $green: #00C170;
-$aquamarine: #60EDE5;
+$purple:#9747FF;
 
 $tpi-level0: $blue-light;
 $tpi-level1: $blue;
 $tpi-level2: $blue-ribbon;
 $tpi-level3: $blue-dark;
 $tpi-level4: $blue-darker;
-$tpi-level5-background-color: $aquamarine;
-$tpi-level5-color: $black;
+$tpi-level5-background-color: $purple;
diff --git a/app/assets/stylesheets/tpi/_mixins.scss b/app/assets/stylesheets/tpi/_mixins.scss
@@ -98,7 +98,6 @@
 
   &.level5 {
     background-color: $tpi-level5-background-color;
-    color: $tpi-level5-color;
 
     .mq-level-trend__container {
       background-color: $tpi-level5-background-color;

diff --git a/app/assets/stylesheets/tpi/_mq_beta_scores.scss b/app/assets/stylesheets/tpi/_mq_beta_scores.scss
@@ -28,13 +28,14 @@
 
   &__beta-button:before {
     content: "";
-    width: 8px;
-    height: 8px;
+    width: 9px;
+    height: 9px;
     border-radius: 50%;
     margin-right: 5px;
     display: inline-block;
     background-color: $tpi-level5-background-color;
     vertical-align: middle;
+    border: 1px solid $white;
   }
 
   &__download-button {

diff --git a/app/assets/stylesheets/tpi/charts/companies_accordion.scss b/app/assets/stylesheets/tpi/charts/companies_accordion.scss
@@ -1,7 +1,7 @@
 @import "../colors";
 @import "../typography";
 
-$tpi-level-chart-colors: #86A9F9 #5587F7 #2465F5 #0A4BDC #083AAB #60EDE5;
+$tpi-level-chart-colors: #86A9F9 #5587F7 #2465F5 #0A4BDC #083AAB #9747FF;
 
 .mobile_bubble-chart__container {
   margin: 0 -0.75rem;

diff --git a/app/assets/stylesheets/tpi/charts/mq-sector-pie-chart.scss b/app/assets/stylesheets/tpi/charts/mq-sector-pie-chart.scss
@@ -1,6 +1,6 @@
 @import '../variables';
 
-$tpi-pie-chart-colors: #86A9F9 #5587F7 #2465F5 #0A4BDC #083AAB #60EDE5;
+$tpi-pie-chart-colors: #86A9F9 #5587F7 #2465F5 #0A4BDC #083AAB #9747FF;
 
 .chart--mq-sector-pie-chart {
   margin: 0 auto;

diff --git a/app/assets/stylesheets/tpi/pages/sector.scss b/app/assets/stylesheets/tpi/pages/sector.scss
@@ -71,12 +71,13 @@ $tape-color: rgba(25,25,25,0.1);
 
       &__title {
         position: relative;
-        height: 40px;
+        height: 60px;
         margin-bottom: 50px;
       }
 
       &__companies {
         flex: 1;
+        line-height: 1.25;
 
         padding: 12px 24px;
         color: white;
@@ -86,14 +87,16 @@ $tape-color: rgba(25,25,25,0.1);
         }
 
         li {
-          display: flex;
           padding: 2px 0;
         }
 
         .mq-level-trend {
           @include mq-level-trend(20px);
+          background-color: rgba(0, 0, 0, 0.4);
 
-          margin-left: 5px;
+          &__container {
+            vertical-align: bottom;
+          }
         }
 
         @include mq-level-backgrounds;

diff --git a/app/javascript/components/tpi/charts/bubble/Chart.js b/app/javascript/components/tpi/charts/bubble/Chart.js
@@ -22,7 +22,7 @@ const LEVELS_COLORS = [
   '#2465F5',
   '#0A4BDC',
   '#083AAB',
-  '#60EDE5'
+  '#9747FF'
 ];
 
 const LEVELS_SUBTITLES = {

diff --git a/app/javascript/components/tpi/charts/mq-sector-pie/options.js b/app/javascript/components/tpi/charts/mq-sector-pie/options.js
@@ -10,7 +10,7 @@ export function getOptions({ chartData }) {
       styledMode: true,
       type: 'pie'
     },
-    colors: ['#86A9F9', '#5587F7', '#2465F5', '#0A4BDC', '#083AAB', '#60EDE5'],
+    colors: ['#86A9F9', '#5587F7', '#2465F5', '#0A4BDC', '#083AAB', '#9747FF'],
     tooltip: {
       enabled: false
     },