Merge pull request #654 from Vizzuality/he-updates

He updates
Vizzuality · Jan 24, 2024 · e75e598 · e75e598
2 parents 1edc0fe + c85da6b
commit e75e598
Show file tree

Hide file tree

Showing 6 changed files with 330 additions and 273 deletions.
diff --git a/src/components/charts/scatter-plot/scatter-plot-styles.module.scss b/src/components/charts/scatter-plot/scatter-plot-styles.module.scss
@@ -70,6 +70,7 @@ $chart-margin: 14px;
 .tickValue {
   @extend %annotation;
   color: $alto;
+  font-size: $font-size-tick;
 }
 
 .tickValue {
@@ -94,7 +95,7 @@ $chart-margin: 14px;
   border: 2px solid $firefly;
   width: 190px;
   overflow: hidden;
-  .countryLabel{
+  .countryLabel {
     padding: 5px;
     .name {
       @extend %title;
@@ -109,12 +110,11 @@ $chart-margin: 14px;
   }
 }
 
-
 @keyframes pulse {
   0% {
     r: 1%;
     opacity: 0;
-    animation-timing-function:cubic-bezier(1,.01,.91,.46);
+    animation-timing-function: cubic-bezier(1, 0.01, 0.91, 0.46);
   }
   50% {
     r: 1.1%;

diff --git a/src/containers/nrc-content/nrc-challenges/nrc-challenges-styles.module.scss b/src/containers/nrc-content/nrc-challenges/nrc-challenges-styles.module.scss
@@ -40,7 +40,7 @@
       width: 80%;
       margin-left: 20px;
 
-      .xAxisContainer{
+      .xAxisContainer {
         width: 100%;
 
         .xAxisLabelContainer {
@@ -63,8 +63,8 @@
           .yAxisIndicator {
             @extend %bodyText;
             color: $alto;
+            font-size: $font-size-tick;
           }
-
         }
       }
 
@@ -77,8 +77,8 @@
         position: relative;
         bottom: 50%;
         left: 2px;
+        font-size: $font-size-tick;
       }
-
     }
 
     .scatterPlotLegendWrapper {
@@ -88,14 +88,15 @@
       .legendTitle {
         color: $grey-text;
         font-weight: 300;
-        font-size: 13px;
+        font-size: $font-size-legend;
       }
 
       .legendItem {
         align-items: center;
         color: $white;
         display: flex;
         margin: 0;
+        font-size: $font-size-tick;
 
         .legendItemColor {
           border-radius: 50%;
@@ -158,10 +159,9 @@
       .scatterPlotChartWrapper {
         width: 100%;
 
-          .xAxisLabelContainer {
-            padding-left: calc(50% - 165px);
-
-          }
+        .xAxisLabelContainer {
+          padding-left: calc(50% - 165px);
+        }
 
         .yAxisContainer {
           bottom: 300px;
@@ -176,7 +176,6 @@
         width: 90%;
 
         .continentsLegendWrapper {
-
           .legendItemsContainer {
             display: grid;
             grid-template-columns: 1fr 1fr;

diff --git a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/component.jsx b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/component.jsx
@@ -87,7 +87,7 @@ function AnalyzeAreasCardComponent({
               <button
                 key={tab.slug}
                 // eslint-disable-next-line react/no-unknown-property
-                active={selectedAnalysisTab === tab.slug}
+                active={(selectedAnalysisTab === tab.slug).toString()}
                 className={cx({
                   [styles.tabButton]: true,
                   [styles.tabButtonActive]: selectedAnalysisTab === tab.slug,
@@ -128,7 +128,7 @@ function AnalyzeAreasCardComponent({
                 <RadioButton
                   id={option.slug}
                   option={{ ...option, name: option.label }}
-                  checked={selectedOption.slug === option.slug}
+                  checked={selectedOption?.slug === option.slug}
                   onChange={() => handleOptionSelection(option)}
                   theme={radioTheme}
                 />

diff --git a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/index.js b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/index.js
@@ -212,7 +212,7 @@ function AnalyzeAreasContainer(props) {
       newSelectedOption === WDPA_OECM_FEATURE_LAYER;
 
     const getLayersToToggle = () => {
-      const formerSelectedSlug = selectedOption.slug;
+      const formerSelectedSlug = selectedOption?.slug;
       const newLayerCategory =
         newSelectedOption === HALF_EARTH_FUTURE_TILE_LAYER
           ? LAYERS_CATEGORIES.PROTECTION
@@ -285,8 +285,8 @@ function AnalyzeAreasContainer(props) {
   };
 
   const handleOptionSelection = (option) => {
-    handleLayerToggle(option.slug);
-    changeUI({ selectedAnalysisLayer: option.slug });
+    handleLayerToggle(option?.slug);
+    changeUI({ selectedAnalysisLayer: option?.slug });
     setTooltipIsVisible(false);
   };
 

diff --git a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/styles.module.scss b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/styles.module.scss
@@ -68,7 +68,7 @@
   height: 100px;
   border: 1px dashed $white;
   border-radius: $border-radius-desktop;
-  .uploadShapeButton{
+  .uploadShapeButton {
     margin-right: $paragraph-gutter;
   }
   .label {
@@ -189,7 +189,7 @@
   }
 
   input:checked ~ .checkbox {
-    background-color: #2196F3;
+    background-color: $picton-blue;
   }
 
   .checkbox {
@@ -203,7 +203,7 @@
     background-color: #eee;
 
     &:after {
-      content: "";
+      content: '';
       position: absolute;
       display: none;
     }
@@ -219,4 +219,18 @@
     margin: 0;
     padding: 0 0 0 10px;
   }
-}
+}
+
+.clearFilters {
+  @extend %title;
+  background-color: $brand-color-main;
+  width: 100%;
+  height: 30px;
+  padding: 0px 20px;
+  border-radius: 2px;
+  margin-top: 10px;
+
+  &:hover {
+    background-color: $white;
+  }
+}