From 624b5a5f836d0091b9884cf8bf063bf4409ba325 Mon Sep 17 00:00:00 2001
From: Stefanie Fluin <sjtrimble@gmail.com>
Date: Wed, 12 Apr 2017 15:19:10 -0700
Subject: [PATCH] feat(aio): filetree and top bar hover styles

---
 aio/src/styles/0-base/_typography.scss  |  1 +
 aio/src/styles/1-layouts/_top-menu.scss | 11 ++++++++---
 aio/src/styles/2-modules/_filetree.scss |  9 +++++----
 aio/src/styles/_constants.scss          |  1 +
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss
index 0b8570ec57..cc6bebee78 100755
--- a/aio/src/styles/0-base/_typography.scss
+++ b/aio/src/styles/0-base/_typography.scss
@@ -84,6 +84,7 @@
       color: white;
       font-family: $main-font;
       text-transform: uppercase;
+      padding: 21px 0;
     }
 
     strong {
diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss
index 394df75984..c33431c317 100644
--- a/aio/src/styles/1-layouts/_top-menu.scss
+++ b/aio/src/styles/1-layouts/_top-menu.scss
@@ -4,8 +4,7 @@
 }
 
 .nav-link {
-  margin-right: 10px;
-  margin-left: 20px;
+  margin: 0 16px;
   cursor: pointer;
 }
 
@@ -49,7 +48,13 @@ aio-top-menu {
 
     li {
       list-style-type: none;
-      padding: 0px;
+      line-height: 64px;
+      height: 64px;
+      cursor: pointer;
+
+      &:hover {
+        background-color: $accentblue;
+      }
     }
   }
 }
diff --git a/aio/src/styles/2-modules/_filetree.scss b/aio/src/styles/2-modules/_filetree.scss
index 94dc4a4fee..e3b4ae8499 100644
--- a/aio/src/styles/2-modules/_filetree.scss
+++ b/aio/src/styles/2-modules/_filetree.scss
@@ -1,15 +1,16 @@
 .filetree {
   background: $offwhite;
-  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
-  border: 2px solid $lightgray;
+  border: 4px solid $lightgray;
+  border-radius: 4px;
   margin: 0 0 24px 0;
-  padding: 24px;
+  padding: 16px 32px;
 
   .file {
     display: block;
     font-family: $main-font;
+    letter-spacing: 0.3px;
     line-height: 32px;
-    color: $lightgray;
+    color: $darkgray;
   }
 
   .children {
diff --git a/aio/src/styles/_constants.scss b/aio/src/styles/_constants.scss
index 430e3af12d..24f8f8372c 100755
--- a/aio/src/styles/_constants.scss
+++ b/aio/src/styles/_constants.scss
@@ -7,6 +7,7 @@ $code-font: "Droid Sans Mono", monospace;
 
 // COLOR PALETTE
 $blue: #1976D2;
+$accentblue: #1E88E5;
 $brightred: #DD0031;
 $darkred: #C3002F;
 $white: #FFFFFF;