Add account settings new design

2 files changed, 18 insertions, 13 deletions

diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 21f8d8ba4..0ed8ec518 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -1,7 +1,7 @@
 <menu>
   <div *ngIf="isLoggedIn" class="logged-in-block">
     <div class="logged-in-info">
-      <div class="logged-in-username">{{ user.username  }}</div>
+      <a routerLink="/account/settings" class="logged-in-username">{{ user.username  }}</a>
       <div class="logged-in-email">{{ user.email }}</div>
     </div>
 
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 2c2106733..9d67ca66c 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -28,6 +28,10 @@ menu {
       .logged-in-username {
         font-size: 16px;
         font-weight: $font-semibold;
+        color: $menu-color;
+        cursor: pointer;
+
+        @include disable-default-a-behaviour;
       }
 
       .logged-in-email {
@@ -57,6 +61,12 @@ menu {
       width: 190px;
       border-radius: 3px;
       text-align: center;
+      color: $menu-color;
+      display: block;
+      cursor: pointer;
+      margin-bottom: 15px;
+
+      @include disable-default-a-behaviour;
 
       &.login-button {
         background-color: $orange-color;
@@ -82,6 +92,13 @@ menu {
 
     a {
       display: flex;
+      color: $menu-color;
+      cursor: pointer;
+      height: 22px;
+      line-height: 22px;
+      font-size: 16px;
+      margin-bottom: 15px;
+      @include disable-default-a-behaviour;
 
       .icon {
         width: 22px;
@@ -113,16 +130,4 @@ menu {
       }
     }
   }
-
-  a {
-    color: $menu-color;
-    height: 22px;
-    line-height: 22px;
-    display: block;
-    font-size: 16px;
-    cursor: pointer;
-    margin-bottom: 15px;
-
-    @include disable-default-a-behaviour;
-  }
 }