From cf3c1782b65bbf17fa1aaa1fb0d44d91732ca125 Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jan.tuomi@eficode.com>
Date: Sat, 17 Nov 2018 00:47:35 +0200
Subject: [PATCH] Navigation style improvements

---
 src/components/DropDownBox/DropDownBox.scss   | 12 ++++++++---
 src/components/Header/Header.scss             |  2 +-
 .../NavbarChildLink/NavbarChildLink.scss      | 15 ++++++++------
 .../NavbarDropdownLink.scss                   | 20 +++++++++++++++----
 .../NavbarDropdownLink/NavbarDropdownLink.tsx |  2 +-
 src/components/Navigation/Navigation.scss     | 19 +++++++++++++++---
 src/components/Navigation/Navigation.tsx      |  8 +++++---
 7 files changed, 57 insertions(+), 21 deletions(-)

diff --git a/src/components/DropDownBox/DropDownBox.scss b/src/components/DropDownBox/DropDownBox.scss
index fcee4e2..e0c0d5d 100644
--- a/src/components/DropDownBox/DropDownBox.scss
+++ b/src/components/DropDownBox/DropDownBox.scss
@@ -1,9 +1,15 @@
 @import "../../assets/scss/globals";
 
 .drop-down-box {
-  background-color: white;
+  background-color: $white;
   margin-top: 0.8rem;
   position: absolute;
-  width: 6rem;
-  border: 0.1rem solid black;
+  left: 0;
+  top: 20px;
+
+  &,
+  & a {
+    color: $dark-blue !important;
+    text-transform: uppercase;
+  }
 }
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index 5a88e77..c8bec3f 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -5,6 +5,6 @@
   margin: 0 1rem;
 
   img {
-    max-width: 200px;
+    max-width: 300px;
   }
 }
diff --git a/src/components/NavbarChildLink/NavbarChildLink.scss b/src/components/NavbarChildLink/NavbarChildLink.scss
index b075af9..cd4933e 100644
--- a/src/components/NavbarChildLink/NavbarChildLink.scss
+++ b/src/components/NavbarChildLink/NavbarChildLink.scss
@@ -2,10 +2,13 @@
 $border-width: 2px;
 
 .navbar-child-link {
-  width: 100%;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: left;
-  margin-left: 0.5rem;
-  margin-bottom: 1rem;
+  display: block;
+  padding: 1rem 1rem;
+  letter-spacing: 1.5px;
+  margin-right: 3rem;
+  font-weight: 400;
+
+  &:hover {
+    background-color: $light-blue;
+  }
 }
diff --git a/src/components/NavbarDropdownLink/NavbarDropdownLink.scss b/src/components/NavbarDropdownLink/NavbarDropdownLink.scss
index 954fc23..124ddbe 100644
--- a/src/components/NavbarDropdownLink/NavbarDropdownLink.scss
+++ b/src/components/NavbarDropdownLink/NavbarDropdownLink.scss
@@ -2,13 +2,25 @@
 $border-width: 2px;
 
 .navbar-dropdown-link {
-  width: 100%;
   display: flex;
   flex-flow: row nowrap;
-  justify-content: center;
+  justify-content: flex-start;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 2px;
 }
 
 .navbar-dropdown-container {
   position: relative;
-  width: 100%;
-}
\ No newline at end of file
+
+  &:hover {
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: -10px;
+      left: 0;
+      width: 100%;
+      border-bottom: 4px solid $light-blue;
+    }
+  }
+}
diff --git a/src/components/NavbarDropdownLink/NavbarDropdownLink.tsx b/src/components/NavbarDropdownLink/NavbarDropdownLink.tsx
index 189c1dd..cb1724c 100644
--- a/src/components/NavbarDropdownLink/NavbarDropdownLink.tsx
+++ b/src/components/NavbarDropdownLink/NavbarDropdownLink.tsx
@@ -23,7 +23,7 @@ class NavbarDropdownLink extends React.Component<NavbarDropdownLinkProps, Navbar
   }
 
   handleClose = () => {
-    // this.setState({open: false});
+    this.setState({open: false});
   }
 
   render() {
diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss
index 15d00cc..c1497b4 100644
--- a/src/components/Navigation/Navigation.scss
+++ b/src/components/Navigation/Navigation.scss
@@ -5,14 +5,16 @@ $border-width: 2px;
   width: 100%;
   display: flex;
   flex-flow: row nowrap;
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: center;
   font-size: 12px;
-  color: $white;
+  color: $light-blue;
+  margin-left: 5rem;
 
   a,
   a:-webkit-any-link {
-    fill: $white;
+    fill: $light-blue;
+    color: $light-blue;
   }
 
   &__item {
@@ -26,4 +28,15 @@ $border-width: 2px;
       border-bottom: $border-width solid $white;
     }
   }
+
+  & .navigation-some {
+    display: flex;
+    flex-flow: row nowrap;
+
+    a,
+    a:-webkit-any-link {
+      fill: $white;
+      color: $white;
+    }
+  }
 }
diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
index fd29a58..e9a9269 100644
--- a/src/components/Navigation/Navigation.tsx
+++ b/src/components/Navigation/Navigation.tsx
@@ -21,9 +21,11 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
         <NavbarDropdownLink to="/yritysyhteistyo" text="Yritysyhteistyö"></NavbarDropdownLink>
         <NavbarDropdownLink to="/yhteystiedot" text="Yhteystiedot"></NavbarDropdownLink>
         <NavbarDropdownLink to="/in_english" text="In English"></NavbarDropdownLink>
-        <SoMeIcon name={SoMe.Facebook} link="https://www.facebook.com/AaltoYliopistonSIK/" />
-        <SoMeIcon name={SoMe.Instagram} link="https://www.instagram.com/sahkoinsinoorikilta/" />
-        <SoMeIcon name={SoMe.LinkedIn} link="https://www.linkedin.com/groups/8103057/" />
+        <div className="navigation-some">
+          <SoMeIcon name={SoMe.Facebook} link="https://www.facebook.com/AaltoYliopistonSIK/" />
+          <SoMeIcon name={SoMe.Instagram} link="https://www.instagram.com/sahkoinsinoorikilta/" />
+          <SoMeIcon name={SoMe.LinkedIn} link="https://www.linkedin.com/groups/8103057/" />
+        </div>
       </div>
     );
   }