Merge pull request #110 from earthrise-media/design-qa-refreshed

Design qa refreshed

vacs-map-app/scripts/generate-minimaps.js

@@ -124,7 +124,7 @@ const generateMapSvg = (crop, model, data, world, Africa, AfricanCountries, Afri
     .fitExtent(
       [
         [margin, margin],
-        [width - margin, height - margin]
+        [width - margin, height - margin*3]
       ],
       Africa
     )

vacs-map-app/src/LandingPage.vue

@@ -108,6 +108,7 @@
         </p>
       </div>
       <div class="vacs-link">
+        <br />
         <a href="https://www.state.gov/the-vision-for-adapted-crops-and-soils/" target="_blank">
           Learn more about VACS →
         </a>
@@ -249,7 +250,8 @@ button:hover {
   background: var(--ui-blue-hover);
 }
 
-.keep-reading {
+.keep-reading,
+.vacs-link {
   cursor: pointer;
   color: var(--ui-blue);
   text-decoration: underline;
@@ -263,7 +265,7 @@ button:hover {
 
 a {
   cursor: pointer;
-  color: var(--ui-blue-light-bg);
+  color: var(--ui-blue);
   text-decoration: underline;
 }
 

vacs-map-app/src/MapExplorer.vue

@@ -152,8 +152,8 @@ onUnmounted(() => {
 
 select {
   cursor: pointer;
-  width: 1.875rem;
-  padding-right: 1.875rem;
+  width: 2.5rem;
+  padding-right: 2.5rem;
   aspect-ratio: 1/1;
 
   border-radius: 100%;

vacs-map-app/src/components/BaseMap.vue

@@ -68,7 +68,7 @@ watch(mapPadding, () => {
 }
 
 .mapboxgl-ctrl-top-right {
-  top: 9rem;
+  top: 8.75rem;
   right: calc(var(--page-horizontal-margin));
 }
 

vacs-map-app/src/components/CardWrapper.vue

@@ -4,6 +4,12 @@
 
     <div class="info" :class="{ bold: boldTitle }">
       <div class="title" :class="{ bold: boldTitle }">{{ title }}</div>
+      <div v-if="indicator" class="indicator">
+        <span class="indicator-category"> {{ indicator.key }} </span>
+        <span class="indicator-level" :style="{ background: indicatorColor }">
+          {{ indicatorLevel }}
+        </span>
+      </div>
       <p class="description">
         {{ description }}
         <span v-if="showMoreInfo" class="more-info" @click="() => $emit('showInfo')">
@@ -15,7 +21,8 @@
 </template>
 
 <script setup>
-import { toRefs } from 'vue'
+import { toRefs, computed } from 'vue'
+import { stopLightScheme } from '@/utils/colors'
 
 defineEmits(['showInfo'])
 const props = defineProps({
@@ -47,9 +54,26 @@ const props = defineProps({
   showMoreInfo: {
     type: Boolean,
     default: false
+  },
+
+  indicator: {
+    type: Object,
+    default: () => {}
   }
 })
-const { title, description, handleClick } = toRefs(props)
+const { title, description, handleClick, indicator } = toRefs(props)
+
+const indicatorLevel = computed(() => {
+  if (indicator?.value.val === null) return 'no data'
+  if (indicator.value.val < 3) return 'low'
+  if (indicator.value.val < 7) return 'medium'
+  return 'high'
+})
+
+const indicatorColor = computed(() => {
+  if (indicatorLevel.value === 'no data') return stopLightScheme.default
+  return stopLightScheme[indicatorLevel.value]
+})
 </script>
 
 <style scoped>
@@ -109,6 +133,25 @@ const { title, description, handleClick } = toRefs(props)
   font-size: 1.375rem;
 }
 
+.indicator {
+  display: flex;
+  gap: 0.375rem;
+  align-items: center;
+}
+
+.indicator-category {
+  color: var(--black);
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.indicator-level {
+  color: var(--white);
+  padding: 0.0625rem 0.1875rem;
+  text-transform: capitalize;
+  font-weight: 600;
+}
+
 .active {
   border-color: var(--ui-blue);
 }

vacs-map-app/src/components/ContentModal.vue

@@ -64,23 +64,24 @@ onClickOutside(contentInnerRef, () => emit('close'))
   flex-direction: column;
   background: var(--dark-gray);
   color: var(--white);
-  border-radius: 4px;
-  max-height: 70%;
+  border-radius: 1rem;
+  max-height: 75%;
   overflow-y: auto;
-  max-width: 45%;
-  padding: 2.5rem;
+  max-width: 40%;
+  padding: 1.5rem;
 
   white-space: pre-line;
 }
 
 .wide {
-  max-width: 70%;
+  max-width: 80%;
 }
 
 .header {
   font-family: var(--font-family-h2);
   font-size: 1.875rem;
   padding-bottom: 0.25rem;
+  line-height: 110%;
 }
 
 .close-button {

vacs-map-app/src/components/CropCards.vue

@@ -8,6 +8,10 @@
         :bold-title="true"
         :description="crop.description"
         :handle-click="() => navigate(crop.id)"
+        :indicator="{
+          key: cropSortBy,
+          val: crop.indicators.nutritional[cropSortBy]
+        }"
       >
         <img :src="getUrl(crop.id)" alt="" />
       </CardWrapper>

vacs-map-app/src/components/CropFilters.vue

@@ -97,6 +97,7 @@ const scenarioOptions = computed(() => {
 
 <style scoped>
 .crop-filters {
+  padding-top: 0.5rem;
   display: flex;
   gap: 1.25rem;
   align-items: center;

vacs-map-app/src/components/CropFingerprint.vue

@@ -1,25 +1,36 @@
 <template>
   <div class="fingerprint-wrapper">
     <div class="legend">
-      <div v-if="hovered" class="hovered-label">
-        <span class="metric-label"> {{ hovered?.key }} </span>
-        <span class="category-label" :style="{ background: fingerprintScheme[hovered?.category] }">
-          {{ selectedCropObject?.label }}
-        </span>
-        <span v-if="showBenchmark" class="category-label benchmark-label">
-          {{ benchmarkCropObject?.label }}
-        </span>
-      </div>
-      <div v-else class="hovered-label">
-        <span
-          v-for="cat in indicatorCategories"
-          :key="cat"
-          class="category-label"
-          :style="{ background: fingerprintScheme[cat] }"
-        >
-          {{ cat }}
-        </span>
-        <span v-if="showBenchmark" class="category-label benchmark-label"> Benchmark </span>
+      <span class="benchmark-message">
+        *As compared to benchmark crop {{ benchmarkCropObject?.label }}</span
+      >
+
+      <div class="responsive-legend">
+        <div v-if="hovered" class="hovered-label">
+          <span class="metric-label"> {{ hovered?.key }} </span>
+          <span
+            class="category-label"
+            :style="{ background: fingerprintScheme[hovered?.category] }"
+          >
+            {{ selectedCropObject?.label }}
+          </span>
+          <span v-if="showBenchmark" class="category-label benchmark-label">
+            {{ benchmarkCropObject?.label }}
+          </span>
+        </div>
+        <div v-else class="hovered-label">
+          <span
+            v-for="cat in indicatorCategories"
+            :key="cat"
+            class="category-label"
+            :style="{ background: fingerprintScheme[cat] }"
+            @mouseenter="hoveredCategory = cat"
+            @mouseleave="hoveredCategory = null"
+          >
+            {{ cat }}
+          </span>
+          <span v-if="showBenchmark" class="category-label benchmark-label"> Benchmark </span>
+        </div>
       </div>
     </div>
     <div class="svg-wrapper" ref="wrapperRef">
@@ -34,8 +45,11 @@
               stroke-width="0.5"
               :d="arc(indicator)"
               :class="{
-                highlighted: hovered?.key === indicator.key,
-                unhighlighted: hovered && hovered.key !== indicator.key
+                highlighted:
+                  hovered?.key === indicator.key || hoveredCategory === indicator.category,
+                unhighlighted:
+                  (hovered && hovered.key !== indicator.key) ||
+                  (hoveredCategory && hoveredCategory !== indicator.category)
               }"
             />
           </g>
@@ -54,8 +68,11 @@
                 :stroke-width="1"
                 :d="arc(indicator)"
                 :class="{
-                  highlighted: hovered?.key === indicator.key,
-                  unhighlighted: hovered && hovered.key !== indicator.key
+                  highlighted:
+                    hovered?.key === indicator.key || hoveredCategory === indicator.category,
+                  unhighlighted:
+                    (hovered && hovered.key !== indicator.key) ||
+                    (hoveredCategory && hoveredCategory !== indicator.category)
                 }"
               />
             </g>
@@ -94,6 +111,8 @@ const props = defineProps({
 const { cropId } = toRefs(props)
 const hovered = ref(null)
 
+const hoveredCategory = ref(null)
+
 const wrapperRef = ref(null)
 const width = ref(0)
 const height = ref(0)
@@ -228,14 +247,27 @@ svg {
   width: 40%;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   color: var(--white);
 }
 
+.benchmark-message {
+  color: var(--gray);
+  font-size: 0.8125rem;
+  font-style: italic;
+  font-weight: 400;
+  line-height: 140%;
+  white-space: nowrap;
+}
+
+.responsive-legend {
+  margin: auto 0;
+}
+
 .hovered-label {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  line-height: 110%;
 }
 
 .category-label {
@@ -246,13 +278,13 @@ svg {
   font-weight: 600;
   padding: 1px 4px;
   text-transform: capitalize;
+  cursor: default;
 }
 
 .metric-label {
   color: var(--white);
   font-size: 0.8125rem;
   font-weight: 500;
-  line-height: 140%;
   text-transform: uppercase;
 }
 

vacs-map-app/src/components/ExploreSidebar.vue

@@ -42,7 +42,7 @@
         <CardWrapper
           v-for="scenario in futureScenarios"
           :key="scenario"
-          :title="copy[`${scenario}_label`] + ` (${scenario.split('_')[1].toUpperCase()})`"
+          :title="copy[`${scenario}_label`] + ` &mdash; ${scenario.split('_')[1].toUpperCase()}`"
           :description="copy[`${scenario}_short`]"
           :is-active="selectedModel === scenario"
           :handle-click="() => (selectedModel = scenario)"
@@ -128,7 +128,7 @@ const openScenarioModal = (s) => {
 .sidebar-section {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.2rem;
 }
 
 .sidebar-header {