Merge pull request #133 from earthrise-media/final-design-qa

Make final style adjustments

vacs-map-app/src/LandingPage.vue

@@ -342,7 +342,6 @@ a {
 
 <style>
 .overlay .disclaimer-wrapper {
-  justify-content: center;
   background: var(--black-80);
 }
 </style>

vacs-map-app/src/MapExplorer.vue

@@ -15,8 +15,12 @@
           <div class="map-overlay desktop">
             <div class="overlay-left">
               <ExploreSidebar class="interactive" ref="overlayLeftRef" />
-              <MapLegendCropGroups v-if="showCropGroupMap" class="interactive" :class="{ hidden: showSandAndSoil }"/>
-              <MapLegend v-else class="interactive" :class="{ hidden: showSandAndSoil }"/>
+              <MapLegendCropGroups
+                v-if="showCropGroupMap"
+                class="interactive"
+                :class="{ hidden: showSandAndSoil }"
+              />
+              <MapLegend v-else class="interactive" :class="{ hidden: showSandAndSoil }" />
             </div>
 
             <div class="overlay-right">
@@ -222,6 +226,7 @@ button.active:hover {
 .hidden {
   pointer-events: none;
   opacity: 10%;
+  filter: blur(8px);
 }
 
 @media only screen and (max-width: 720px) {

vacs-map-app/src/assets/base.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap');
 
 :root {
   --black: #17191b;
@@ -43,6 +43,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+button {
+  font-family: var(--font-family-body);
+}
+
 @font-face {
   font-family: PPEiko-thin;
   src: url('./fonts/pp-eiko/PPEiko-Thin.otf');

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

@@ -155,9 +155,11 @@ const useDarkIndicatorText = computed(() => {
 
 .card-wrapper.dynamic {
   height: var(--title-height);
+  box-shadow: 0 0 0 1px var(--dark-gray);
 }
 
 .card-wrapper.dynamic.active {
+  box-shadow: 0 0 0 1px var(--gray);
   height: unset;
 }
 
@@ -209,6 +211,7 @@ const useDarkIndicatorText = computed(() => {
 }
 
 .title-row img {
+  margin: auto 0;
   margin-left: auto;
 }
 

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

@@ -64,13 +64,16 @@
 
     <div class="sidebar-section">
       <div class="scenario-switch">
-        <span class="scenarios-title"> emissions scenario </span>
-        <img
-          class="info"
-          src="@/assets/img/info.svg"
-          alt=""
-          @click="openScenarioModal(selectedModel)"
-        />
+        <div class="scenario-title">
+          <span class="scenarios-title"> emissions scenario </span>
+          <img
+            class="info"
+            src="@/assets/img/info.svg"
+            alt=""
+            @click="openScenarioModal(selectedModel)"
+          />
+        </div>
+
         <RadioSwitch
           v-model="selectedModel"
           :options="scenarioOptions"
@@ -270,4 +273,11 @@ const openScenarioModal = (s) => {
   gap: 1rem;
   padding-top: 0.5rem;
 }
+
+.scenario-title {
+  display: flex;
+  flex-direction: row;
+  gap: 0.25rem;
+  align-items: center;
+}
 </style>

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

@@ -6,6 +6,7 @@
         <button @click="copyLink" @mouseleave="linkCopied = false" class="desktop">
           <img src="@/assets/img/copy-link.svg" alt="copy-link" />
           <span class="copy-link-message">
+            <img v-if="linkCopied" src="../assets/img/checkmark.svg" alt="" />
             {{ linkCopied ? 'Link copied to clipboard' : 'Copy a link to your clipboard' }}
           </span>
         </button>
@@ -64,11 +65,11 @@ const copyLink = () => {
 .overview-top {
   display: flex;
   flex-direction: column;
-  font-family: var(--font-family-h2);
+  font-family: var(--font-family-header);
   font-size: 1.5rem;
   gap: 0.5rem;
   padding: 1rem var(--page-horizontal-margin) 0.375rem var(--page-horizontal-margin);
-  background: var(--black-90);
+  background: var(--black-70);
 }
 
 .header-question {
@@ -93,9 +94,10 @@ const copyLink = () => {
   border-radius: 0.125rem;
   cursor: default;
   width: max-content;
-  max-width: 12rem;
   z-index: 5000;
   box-shadow: var(--shadow);
+
+  white-space: nowrap;
 }
 
 .row {
@@ -142,6 +144,8 @@ button:hover {
 button:hover .copy-link-message,
 button:hover .toggle-colormode-message {
   display: flex;
+  gap: 0.5rem;
+  align-items: center;
 }
 
 .button-active {

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

@@ -32,6 +32,7 @@ const { soil: soilScheme, sand: sandScheme } = storeToRefs(colorStore)
   width: 100%;
   min-height: 100%;
 
+  backdrop-filter: blur(8px);
   background: var(--black-90);
   color: var(--white);
 
@@ -41,7 +42,6 @@ const { soil: soilScheme, sand: sandScheme } = storeToRefs(colorStore)
   justify-content: center;
 
   padding: 1.25rem;
-
 }
 
 h1 {

vacs-map-app/src/components/pages/CropTypeOverview.vue

@@ -35,9 +35,6 @@ const showFilters = ref(false)
 }
 
 @media only screen and (max-width: 720px) {
-  .wrapper {
-    box-shadow: var(--shadow);
-  }
   .desktop {
     display: none;
   }

vacs-map-app/src/stores/mapExplore.js

@@ -14,15 +14,15 @@ export const useMapExploreStore = defineStore('mapExplore', () => {
   const showCropGroupMap = ref(false)
   const cropGroupMetric = ref('max')
 
-  return { 
-    selectedMap, 
-    mapPadding, 
-    
-    hoveredId, 
-    hoveredCrop, 
-    
+  return {
+    selectedMap,
+    mapPadding,
+
+    hoveredId,
+    hoveredCrop,
+
     showSandAndSoil,
-    showCropGroupMap, 
-    cropGroupMetric 
+    showCropGroupMap,
+    cropGroupMetric
   }
 })