fix(www): a11y tweaks (#11612)

amberleyromo · web-flow · commit b493ba489964 · 2019-02-06T20:32:51.000-06:00
* fix(www): make svg ids unique

* fix(www): increase text color contrast of mobile nav
diff --git a/www/src/assets/plugins-ecosystem.svg b/www/src/assets/plugins-ecosystem.svg
@@ -1,20 +1,20 @@
 <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M16 22.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13z" fill="url(#paint0_linear)"/>
+  <path d="M16 22.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13z" fill="url(#ecosystem0_linear)"/>
   <path d="M16 10c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6zm0-1c-3.9 0-7 3.1-7 7s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7z" fill="#639"/>
   <path d="M16 19.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" fill="#fff"/>
   <path d="M16 13c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3zm0-1c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4z" fill="#639"/>
-  <path d="M16 6c5.5 0 10 4.5 10 10h-3.5v.5c0 .8-.6 1.5-1.5 1.5s-1.5-.7-1.5-1.5V16H16v-3.5h.5c.8 0 1.5-.6 1.5-1.5s-.7-1.5-1.5-1.5H16V6z" fill="url(#paint1_linear)"/>
+  <path d="M16 6c5.5 0 10 4.5 10 10h-3.5v.5c0 .8-.6 1.5-1.5 1.5s-1.5-.7-1.5-1.5V16H16v-3.5h.5c.8 0 1.5-.6 1.5-1.5s-.7-1.5-1.5-1.5H16V6z" fill="url(#ecosystem1_linear)"/>
   <path d="M16 23c-3.9 0-7-3.1-7-7s3.1-7 7-7V6C10.5 6 6 10.5 6 16s4.5 10 10 10v-3z" fill="#fff"/>
-  <path d="M16 16h3.5v.5c0 .8.6 1.5 1.5 1.5s1.5-.7 1.5-1.5V16H26c0 5.5-4.5 10-10 10v-3.5h-.5c-.8 0-1.5-.6-1.5-1.5s.7-1.5 1.5-1.5h.5V16z" fill="url(#paint2_linear)"/>
+  <path d="M16 16h3.5v.5c0 .8.6 1.5 1.5 1.5s1.5-.7 1.5-1.5V16H26c0 5.5-4.5 10-10 10v-3.5h-.5c-.8 0-1.5-.6-1.5-1.5s.7-1.5 1.5-1.5h.5V16z" fill="url(#ecosystem2_linear)"/>
   <path d="M16 6.5v3h.5c.8 0 1.5.6 1.5 1.5s-.7 1.5-1.5 1.5H16V16m0 0v3.5h-.5c-.8 0-1.5.6-1.5 1.5s.7 1.5 1.5 1.5h.5V26m9.5-10h-3v.5c0 .8-.6 1.5-1.5 1.5s-1.5-.7-1.5-1.5V16H16" stroke="#639" stroke-miterlimit="10"/>
   <path d="M16 7.4c4.7 0 8.6 3.9 8.6 8.6 0 4.7-3.9 8.6-8.6 8.6-4.7 0-8.6-3.9-8.6-8.6 0-4.7 3.9-8.6 8.6-8.6zM16 6C10.5 6 6 10.5 6 16s4.5 10 10 10 10-4.5 10-10S21.5 6 16 6z" fill="#639"/>
   <defs>
-    <linearGradient id="paint0_linear" x1="16" y1="22.5" x2="16" y2="9.5" gradientUnits="userSpaceOnUse">
+    <linearGradient id="ecosystem0_linear" x1="16" y1="22.5" x2="16" y2="9.5" gradientUnits="userSpaceOnUse">
       <stop stop-color="#8C65B3"/>
       <stop offset=".5" stop-color="#FFB238"/>
       <stop offset="1" stop-color="#fff"/>
     </linearGradient>
-    <linearGradient id="paint1_linear" x1="21" y1="18.006" x2="21" y2="6" gradientUnits="userSpaceOnUse">
+    <linearGradient id="ecosystem1_linear" x1="21" y1="18.006" x2="21" y2="6" gradientUnits="userSpaceOnUse">
       <stop stop-color="#fff" stop-opacity=".5"/>
       <stop offset=".072" stop-color="#FFF2DE" stop-opacity=".536"/>
       <stop offset=".182" stop-color="#FFE1B3" stop-opacity=".591"/>
@@ -25,7 +25,7 @@
       <stop offset=".82" stop-color="#FFB33B" stop-opacity=".91"/>
       <stop offset="1" stop-color="#FFB238"/>
     </linearGradient>
-    <linearGradient id="paint2_linear" x1="20" y1="26" x2="20" y2="16" gradientUnits="userSpaceOnUse">
+    <linearGradient id="ecosystem2_linear" x1="20" y1="26" x2="20" y2="16" gradientUnits="userSpaceOnUse">
       <stop stop-color="#E2D8EC"/>
       <stop offset=".364" stop-color="#E5DCED" stop-opacity=".818"/>
       <stop offset=".656" stop-color="#EDE6F1" stop-opacity=".672"/>
diff --git a/www/src/assets/starters.svg b/www/src/assets/starters.svg
@@ -1,17 +1,17 @@
 <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M7.6 26.3l-2.5.4 5-5 1 1-3.5 3.6z" fill="#639"/>
   <path d="M26.2 6.7L11.3 21.6" stroke="#8C65B3" stroke-width="1.417" stroke-miterlimit="10" stroke-linecap="round"/>
-  <path d="M23.7 16.3c2-2 2-5.1 0-7.1s-5.1-2-7.1 0l7.1 7.1z" fill="url(#paint0_linear)" stroke="#639" stroke-width="1.417" stroke-miterlimit="10"/>
+  <path d="M23.7 16.3c2-2 2-5.1 0-7.1s-5.1-2-7.1 0l7.1 7.1z" fill="url(#starters0_linear)" stroke="#639" stroke-width="1.417" stroke-miterlimit="10"/>
   <path d="M18.8 19.1l-5-5c-.6-.6-.6-1.5 0-2.1.6-.6 1.5-.6 2.1 0l4.9 4.9c.6.6.6 1.5 0 2.1-.5.7-1.5.7-2 .1z" fill="#fff" stroke="#639" stroke-width="1.417" stroke-miterlimit="10"/>
-  <path d="M14.5 25.4l-7.1-7 3.6-3.6 7 7.1-3.5 3.5z" fill="url(#paint1_linear)" stroke="#639" stroke-width="1.417" stroke-miterlimit="10"/>
+  <path d="M14.5 25.4l-7.1-7 3.6-3.6 7 7.1-3.5 3.5z" fill="url(#starters1_linear)" stroke="#639" stroke-width="1.417" stroke-miterlimit="10"/>
   <path d="M11 18.9a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm.7 2.1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm2.8 1.4a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" fill="#639"/>
   <path d="M5.7 20.1s.7 2.1 2.8 4.2c2.1 2.1 4.2 2.8 4.2 2.8" stroke="#639" stroke-width="1.417" stroke-miterlimit="10"/>
   <defs>
-    <linearGradient id="paint0_linear" x1="20.167" y1="12.719" x2="23.703" y2="9.184" gradientUnits="userSpaceOnUse">
+    <linearGradient id="starters0_linear" x1="20.167" y1="12.719" x2="23.703" y2="9.184" gradientUnits="userSpaceOnUse">
       <stop stop-color="#fff"/>
       <stop offset="1" stop-color="#8C65B3"/>
     </linearGradient>
-    <linearGradient id="paint1_linear" x1="10.975" y1="21.912" x2="14.51" y2="18.376" gradientUnits="userSpaceOnUse">
+    <linearGradient id="starters1_linear" x1="10.975" y1="21.912" x2="14.51" y2="18.376" gradientUnits="userSpaceOnUse">
       <stop stop-color="#fff"/>
       <stop offset="1" stop-color="#FFB238"/>
     </linearGradient>
diff --git a/www/src/components/navigation-mobile.js b/www/src/components/navigation-mobile.js
@@ -112,7 +112,7 @@ const styles = {
   },
   link: {
     default: {
-      color: colors.lavender,
+      color: colors.gatsby,
       borderRadius: presets.radius,
       fontSize: scale(-1 / 2).fontSize,
       flexShrink: 0,
