active states and ui style tweaks for navi and footer (#38)

* active states and ui style tweaks for navi and footer

* Update _navi.scss

* responsive homepage image

* ui states for buttons, links etc

pages/index.js

@@ -12,7 +12,8 @@ function Tech({data}) {
       <div className="tech__image">
         <img
           src={data.image.src}
-          srcSet={`${data.image.src} 2x, ${data.image.src2} 1.5x`}
+          srcSet={`${data.image.src2} 640w, ${data.image.src} 1280w`}
+          sizes="(max-width: 480px) 640px, 1280px"
           width={data.image.width}
           height={data.image.height}
           alt={data.image.alt}

pages/jambonz-ui.js

@@ -152,7 +152,7 @@ export default function JambonzUI({ data }) {
             <Button href="/regions/?redirect=login" mainStyle="login">Log In</Button>
           </div>
         </div>
-        <div className="bg--jambonz">
+        <div className="bg--charcoal">
           <div className="pad">
             <Button href="/regions/?redirect=login" mainStyle="login" subStyle="white">Log In</Button>
           </div>

src/components/footer.js

@@ -1,14 +1,22 @@
 import { nanoid } from 'nanoid';
+import classNames from 'classnames';
 
 import Link from 'next/link';
 
-import { Button } from './jambonz-ui';
+import { Button, useActiveNavi, rSlash } from './jambonz-ui';
 
 function FooterItem({ obj }) {
+  const activeNavi = useActiveNavi();
+  const cleanLink = obj.link.replace(rSlash, '');
+  const classes = {
+    foot__link: true,
+    active: cleanLink === activeNavi,
+  };
+
   return (
     <li>
       <Link href={obj.link}>
-        <a target={obj.open ? '_blank' : null} className="foot__link">
+        <a target={obj.open ? '_blank' : null} className={classNames(classes)}>
           {obj.label}
         </a>
       </Link>
@@ -18,7 +26,7 @@ function FooterItem({ obj }) {
 
 export default function Footer({ siteData }) {
   return (
-    <footer className="bg--jambonz foot">
+    <footer className="bg--charcoal foot">
       <div className="wrap foot__wrap">
         <div className="foot__navs">
           <ul className="foot__links">

src/components/jambonz-ui.js

@@ -4,6 +4,9 @@ import { useState, useEffect, useCallback } from 'react';
 import Icons from './icons';
 
 import Link from 'next/link';
+import { useRouter } from 'next/router';
+
+export const rSlash = /^\/|\/$/g;
 
 // Normalize how we work with the subtext as an array[]
 export function normalizeSubtext(subtext) {
@@ -19,6 +22,12 @@ export function normalizeSlug(key) {
   return String(key.toLowerCase()).split(' ').join('-');
 }
 
+export function useActiveNavi() {
+  const router = useRouter();
+  const cleanPath = router.asPath.replace(rSlash, '').split('/')[0];
+  return cleanPath;
+}
+
 // Normalize for our mobile media query
 export function useMobileMedia() {
   const [mobile, setMobile] = useState(false);

src/components/navi.js

@@ -3,18 +3,15 @@ import { nanoid } from 'nanoid';
 import classNames from 'classnames';
 
 import Link from 'next/link';
-import { useRouter } from 'next/router';
 
-import { Button, Icon, useMobileMedia } from './jambonz-ui';
+import { Button, Icon, useMobileMedia, useActiveNavi, rSlash } from './jambonz-ui';
 
 function NaviItem({obj}) {
-  const router = useRouter();
-  const rSlash = /^\/|\/$/g;
+  const activeNavi = useActiveNavi();
   const cleanLink = obj.link.replace(rSlash, '');
-  const cleanPath = router.asPath.replace(rSlash, '').split('/')[0];
   const classes = {
     navi__link: true,
-    active: cleanLink && cleanLink === cleanPath,
+    active: cleanLink === activeNavi,
   };
 
   return (
@@ -30,7 +27,7 @@ function NaviItem({obj}) {
 
 function NaviMobile({ active, handler, siteData }) {
   const classes = {
-    'bg--jambonz': true,
+    'bg--charcoal': true,
     'wrap': true,
     'navi__mobile': true,
     'active': active,

src/styles/_buttons.scss

@@ -7,8 +7,15 @@
   text-decoration: none;
   border-radius: 30px;
   display: inline-block;
+  transition: background-color $base-dur $base-ease,
+              border-color $base-dur $base-ease,
+              color $base-dur $base-ease;
   @include font-bold();
 
+  &:hover {
+    background-color: mix($pink, $jambonz, $mix-amount);
+  }
+
   @media (max-width: $width-tablet-2) {
     font-size: $ms-size;
   }
@@ -26,9 +33,19 @@
     color: $jambonz;
     padding: 10px 26px;
 
+    &:hover {
+      background-color: $jambonz;
+      color: $white;
+    }
+
     &--white {
       color: $white;
       border-color: $white;
+
+      &:hover {
+        background-color: $white;
+        color: $charcoal;
+      }
     }
 
     @media (max-width: $width-tablet-2) {
@@ -39,23 +56,43 @@
   &--fill {
     &--dark {
       background-color: $charcoal;
+
+      &:hover {
+        background-color: mix($white, $charcoal, $mix-amount);
+      }
     }
 
     &--purple {
       background-color: $purple;
+
+      &:hover {
+        background-color: mix($white, $purple, $mix-amount);
+      }
     }
 
     &--teal {
       background-color: $teal;
+
+      &:hover {
+        background-color: mix($white, $teal, $mix-amount);
+      }
     }
 
     &--blue {
       background-color: $blue;
+
+      &:hover {
+        background-color: mix($white, $blue, $mix-amount);
+      }
     }
 
     &--light {
       background-color: $white;
       color: $jambonz;
+
+      &:hover {
+        background-color: mix($grey-light, $white, $mix-amount);
+      }
     }
   }
 
@@ -66,6 +103,11 @@
     color: $charcoal;
     padding: 18px 32px 17px;
 
+    &:hover {
+      background-color: $charcoal;
+      color: $white;
+    }
+
     @media (max-width: $width-mobile) {
       padding: 15px 32px 16px;
     }
@@ -97,6 +139,15 @@
       border-color: $jambonz;
       color: $jambonz;
 
+      &:hover {
+        background-color: $jambonz;
+        color: $white;
+
+        svg {
+          stroke: $white;
+        }
+      }
+
       svg {
         stroke: $jambonz;
       }

src/styles/_footer.scss

@@ -40,6 +40,15 @@
   &__link {
     color: $white;
     text-decoration: none;
+
+    &:hover {
+      color: $jambonz;
+    }
+
+    &.active {
+      color: $jambonz;
+      border-bottom: 1px solid $jambonz;
+    }
   }
 
   &__support {

src/styles/_icons.scss

@@ -1,3 +1,7 @@
+svg {
+  transition: stroke $base-dur $base-ease;
+}
+
 .icon {
   display: inline-block;
   background-color: $jambonz;
@@ -88,7 +92,7 @@
       background-color: $white;
 
       svg {
-        stroke: $jambonz;
+        stroke: $charcoal;
       }
     }
   }

src/styles/_layout.scss

@@ -42,7 +42,7 @@
   background: $jambonz;
   position: sticky;
   top: 0;
-  z-index: $navi-index + 1;
+  z-index: $navi-index + 2;
   text-align: center;
 
   a {
@@ -115,7 +115,7 @@
     margin-top: 16px;
 
     a {
-      text-decoration: underline;
+      border-bottom: 1px solid $jambonz;
     }
   }
 }
@@ -145,10 +145,6 @@
     }
   }
 
-  &--privacy, &--terms {
-    padding-bottom: 16px;
-  }
-
   &--pink {
     position: relative;
 

src/styles/_navi.scss

@@ -6,7 +6,7 @@
 
   &.active {
     @media ( max-width: $mobile-width ) {
-      z-index: $navi-index + 2;
+      z-index: $navi-index + 1;
     }
   }
 
@@ -38,8 +38,13 @@
     color: $charcoal;
     margin-left: 32px;
 
+    &:hover {
+      color: $jambonz;
+    }
+
     &.active {
       color: $jambonz;
+      border-bottom: 1px solid $jambonz;
     }
   }
 
@@ -88,6 +93,23 @@
       z-index: $navi-index;
     }
 
+    // Overrides for mobile navi links
+    .navi__link {
+      color: $white;
+      font-size: $h6-size;
+      font-family: $font-medium;
+      margin: 0;
+
+      &:hover {
+        color: $jambonz;
+      }
+
+      &.active {
+        color: $jambonz;
+        border-bottom: 1px solid $jambonz;
+      }
+    }
+
     &__head {
       padding: 16px 0;
       display: flex;
@@ -104,24 +126,13 @@
     &__footer {
       text-align: center;
       padding-top: 32px;
-
-      .navi__link {
-        color: $white;
-        font-size: $h6-size;
-        font-family: $font-medium;
-        margin: 0;
-      }
     }
 
     &__links {
       .navi__link {
         padding: 4px 0;
-        margin: 12px 0;
+        margin: 6px 0;
         display: inline-block;
-
-        &.active {
-          border-bottom: 2px solid $white;
-        }
       }
     }
 
@@ -148,4 +159,4 @@
       }
     }
   }
-}
+}

src/styles/_text-layout.scss

@@ -12,6 +12,10 @@
       margin-top: 0;
     }
 
+    a {
+      border-bottom: 1px solid $jambonz;
+    }
+
     sup {
       color: $jambonz;
     }

src/styles/_typography.scss

@@ -8,6 +8,7 @@ body {
 a {
   color: $jambonz;
   text-decoration: none;
+  transition: color $base-dur $base-ease;
 }
 
 /*

src/styles/_vars.scss

@@ -23,6 +23,7 @@ $teal: #30beb0;
 $blue: #006dff;
 $green: #008a1a;
 $red: #e10e22;
+$mix-amount: 25%;
 
 /******************************************************************************
  * Font family

src/styles/pages/_home.scss

@@ -249,7 +249,7 @@
     }
 
     a {
-      text-decoration: underline;
+      border-bottom: 1px solid $jambonz;
     }
   }
 

src/styles/pages/_regions.scss

@@ -28,5 +28,10 @@
 
   &__text {
     color: $black;
+    transition: color $base-dur $base-ease;
+
+    &:hover {
+      color: $jambonz;
+    }
   }
 }