styling changes - added font-awesome

app/components/Navbar/Navbar.js

@@ -11,6 +11,9 @@ export default class Navbar extends React.Component {
                 <div className="Navbar__header">GoBot</div>
                 <Link to="/" className="Navbar__item" onlyActiveOnIndex activeClassName="Navbar__item--active">Home</Link>
                 <Link to="/soundboard" className="Navbar__item" activeClassName="Navbar__item--active">Soundboard</Link>
+                <div className="link">
+                    <a href="https://discordapp.com/invite/0Z2tzxKECEj2BHwj" target="_blank">Join the discord</a>
+                </div>
             </div>
         );
     }

app/components/Navbar/Navbar.scss

@@ -11,14 +11,24 @@
     background-color: $gray2;
     border-right: 1px solid darken($gray2, 2%);
     overflow-y: auto;
+    padding-bottom: 10px;
+    
+    .link {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        justify-content: flex-end;
+        text-align: center;
+    }
 }
 
 .Navbar__header {
+    font-size: 25px;
     min-height: 100px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: $gray2;
+    background-color: $primaryBlue;
     border-bottom: 1px solid $gray3;
 }
 
@@ -31,6 +41,7 @@
     text-align: center;
     color: $white;
     transition: background-color 0.1s linear;
+    transition: color 0.1s linear;
     
     &:hover {
         background-color: $gray1; 
@@ -45,4 +56,5 @@
 .Navbar__item--active {
     padding-left: 4px;
     border-right: 4px solid $primaryBlue;
+    color: $primaryBlue !important;
 }