Navigation style improvements

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;
+  }
 }

src/components/Header/Header.scss

@@ -5,6 +5,6 @@
   margin: 0 1rem;
 
   img {
-    max-width: 200px;
+    max-width: 300px;
   }
 }

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;
+  }
 }

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%;
-}
+
+  &:hover {
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: -10px;
+      left: 0;
+      width: 100%;
+      border-bottom: 4px solid $light-blue;
+    }
+  }
+}

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() {

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;
+    }
+  }
 }

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>
     );
   }