Style modifications

components/Header/index.js

@@ -7,7 +7,8 @@ import {
   Label,
   LogoLink,
   Progression,
-  ProgressBar } from './style';
+  ProgressBar,
+  ProgressLabel } from './style';
 import { PrimaryButton, GhostButton } from '../Button';
 import Logo from './Logo';
 
@@ -32,11 +33,6 @@ export default function Header(props: Props) {
         </Link>
       </div>
 
-      <Progression isHidden={!displayProgress}>
-        {currentCount} of {totalItemsCount} completed
-        <ProgressBar />
-      </Progression>
-
       <ButtonRowContainer>
         <Link href="/about">
           <GhostButton as="a" href="/about">
@@ -53,6 +49,21 @@ export default function Header(props: Props) {
           Contribute
         </PrimaryButton>
       </ButtonRowContainer>
+
+      { displayProgress && (
+      <Progression
+        id="progress"
+        aria-label={`${currentCount} of ${totalItemsCount} completed`}
+      >
+        <ProgressBar
+          id="progress_bar"
+          aria-describedby="progress_tooltip"
+        />
+        <ProgressLabel
+          id="progress_tooltip"
+          role="tooltip"
+        >{currentCount} of {totalItemsCount} completed</ProgressLabel>
+      </Progression>)}
     </Container>
   );
 }

components/Header/style.js

@@ -5,24 +5,20 @@ import { hexa } from '../globals';
 
 export const Container = styled.div`
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  grid-template-areas: 'logo progression actions';
-  padding: 16px;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas: "logo actions";
+  padding: 16px 16px;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
-  background: ${props =>
-    props.showHeaderShadow ? props.theme.bg.default : props.theme.bg.wash};
+  background: ${theme.bg.default};
   z-index: 3;
-  box-shadow: ${props =>
-    props.showHeaderShadow ? '0 4px 8px rgba(0,0,0,0.04)' : 'none'};
+  box-shadow: 0 4px 8px rgba(0,0,0,0.04);
   transition: all 0.2s ease-in-out;
 
   @media (max-width: 968px) {
     padding: 8px 16px;
-    grid-template-columns: 1fr 1fr;
-    grid-template-areas: "logo actions" "progression progression";
   }
 `;
 
@@ -33,26 +29,46 @@ export const Logo = styled.h1`
   color: ${theme.text.default};
 `;
 
-export const Progression = styled.div`
-  grid-area: progression;
+export const Progression = styled.button`
   text-align: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 32px;
+  width: 100%;
+  bottom: -16px;
+  display: block;
+  background: transparent;
 
-  display: ${props =>
-    props.isHidden ? 'none' : 'block'};
+  &:active, &:focus {
+    outline: none;
+  }
 `;
 
 export const ProgressBar = styled.div`
+  display: block;
   height: 8px;
-  margin: 6px 0;
+  width: 100%;
+  margin: 8px 0 0;
   position: relative;
   overflow: hidden;
-  border-radius: 4px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
   background-image: linear-gradient(to left, #a913de, #6ac9ff);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.04);
+  z-index: 5;
+
+  ${Progression}:focus &,
+  ${Progression}:active & {
+    box-shadow: 0 0 0 1px ${theme.bg.default},
+      0 0 0 3px ${props => hexa(props.theme.brand.default, 0.25)};
+  }
 
   &:after {
     content: '';
     position: absolute;
     height: 100%;
+    top: 0;
     right: 0;
     width: 100%;
     background: ${theme.border.default};
@@ -61,6 +77,32 @@ export const ProgressBar = styled.div`
   }
 `;
 
+export const ProgressLabel = styled.p`
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  z-index: 4;
+  bottom: -25%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: ${theme.bg.default};
+  padding: 8px 16px;
+
+  transition: all ${theme.animations.default};
+
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+
+  ${Progression}:hover &,
+  ${Progression}:focus &,
+  ${Progression}:active &
+   {
+    visibility: visible;
+    opacity: 1;
+    bottom: calc((100% - 8px) * -1);
+  }
+`
+
 export const ButtonRowContainer = styled.div`
   display: flex;
   justify-content: flex-end;
@@ -77,7 +119,8 @@ export const LogoLink = styled.a`
   display: inline-flex;
   align-items: center;
   border-radius: 6px;
-
+  height: 100%;
+  
   &:hover {
     transform: scale(1.2);
   }