chore(style): header redesign

bleenco · Oct 24, 2017 · 5193b01 · 5193b01
1 parent bff045f
commit 5193b01
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 100 deletions.
diff --git a/src/app/components/app-header/app-header.component.html b/src/app/components/app-header/app-header.component.html
@@ -5,7 +5,24 @@
         <img src="images/abstruse-text-logo-white.svg">
       </a>
     </div>
-    <div class="nav-center"></div>
+    <div class="nav-center">
+      <a class="nav-item is-hidden-mobile" routerLink="/dashboard" routerLinkActive="is-active" name="dashboard" *ngIf="user || demo">
+        <!-- <img src="/images/icons/menu_dashboard.svg" class="icon"> -->
+        <span>Dashboard</span>
+      </a>
+      <a class="nav-item nav-team is-hidden-mobile" routerLink="/team" routerLinkActive="is-active" *ngIf="user">
+        <!-- <img src="/images/icons/menu_team.svg" class="icon"> -->
+        <span>Team</span>
+      </a>
+      <a class="nav-item is-hidden-mobile" routerLink="/repositories" routerLinkActive="is-active">
+        <!-- <img src="/images/icons/menu_repositories.svg" class="icon"> -->
+        <span>Repositories</span>
+      </a>
+      <a class="nav-item is-hidden-mobile" routerLink="/images" routerLinkActive="is-active" *ngIf="user">
+        <!-- <img src="/images/icons/menu_images.svg" class="icon"> -->
+        <span>Images</span>
+      </a>
+    </div>
     <div class="nav-right">
       <!-- <a class="nav-item notification-item is-hidden-mobile" *ngIf="user" (click)="toggleNotify()">
         <img src="/images/icons/notification.svg">
@@ -19,19 +36,6 @@
         </div>
       </a> -->
 
-      <a class="nav-item is-hidden-mobile" routerLink="/dashboard" routerLinkActive="is-active" name="dashboard" *ngIf="user || demo">
-        Dashboard
-      </a>
-      <a class="nav-item nav-team is-hidden-mobile" routerLink="/team" routerLinkActive="is-active" *ngIf="user">
-        Team
-      </a>
-      <a class="nav-item is-hidden-mobile" routerLink="/repositories" routerLinkActive="is-active">
-        Repositories
-      </a>
-      <a class="nav-item is-hidden-mobile" routerLink="/images" routerLinkActive="is-active" *ngIf="user">
-        Images
-      </a>
-
       <a class="nav-item user-item" (click)="toggleMenu()" [class.is-open]="menuDropped" *ngIf="user">
         <img class="nav-avatar" [src]="user.avatar">
         <i class="ion ion-chevron-down"></i>

diff --git a/src/app/components/app-header/app-header.component.spec.ts b/src/app/components/app-header/app-header.component.spec.ts
@@ -59,7 +59,7 @@ describe('Header Component', () => {
     });
 
     fixture.detectChanges();
-    const de = fixture.debugElement.query(By.css('.nav-right .nav-item:nth-child(1)'));
+    const de = fixture.debugElement.query(By.css('.nav-center .nav-item:nth-child(1)'));
     expect(de.nativeElement.textContent).toContain('Dashboard');
   }));
 
@@ -73,7 +73,7 @@ describe('Header Component', () => {
     });
 
     fixture.detectChanges();
-    const de = fixture.debugElement.query(By.css('.nav-right .nav-item:nth-child(2)'));
+    const de = fixture.debugElement.query(By.css('.nav-center .nav-item:nth-child(2)'));
     expect(de.nativeElement.textContent).toContain('Team');
   }));
 
@@ -87,7 +87,7 @@ describe('Header Component', () => {
     });
 
     fixture.detectChanges();
-    const de = fixture.debugElement.query(By.css('.nav-right .nav-item:nth-child(3)'));
+    const de = fixture.debugElement.query(By.css('.nav-center .nav-item:nth-child(3)'));
     expect(de.nativeElement.textContent).toContain('Repositories');
   }));
 
@@ -101,7 +101,7 @@ describe('Header Component', () => {
     });
 
     fixture.detectChanges();
-    const de = fixture.debugElement.query(By.css('.nav-right .nav-item:nth-child(4)'));
+    const de = fixture.debugElement.query(By.css('.nav-center .nav-item:nth-child(4)'));
     expect(de.nativeElement.textContent).toContain('Images');
   }));
 
@@ -136,7 +136,7 @@ describe('Header Component', () => {
     spyOn(localStorage, 'getItem').and.callFake(() => null);
 
     fixture.detectChanges();
-    const de = fixture.debugElement.query(By.css('.nav-right .nav-item:nth-child(1)'));
+    const de = fixture.debugElement.query(By.css('.nav-center .nav-item:nth-child(1)'));
     expect(de.nativeElement.textContent).toContain('Repositories');
   }));
 });
diff --git a/src/app/components/app-team/app-team.component.html b/src/app/components/app-team/app-team.component.html
@@ -11,7 +11,7 @@ <h1>Team Management</h1>
 
     </div>
     <div class="nav-right">
-      <button type="button" class="button blue w200" (click)="showAddUser()" name="btn-addUser" [disabled]="addUser || !user.admin">
+      <button type="button" class="button dark w200" (click)="showAddUser()" name="btn-addUser" [disabled]="addUser || !user.admin">
         <i class="ionicon ion-person-add"></i>
         Add User
       </button>

diff --git a/src/app/styles/buttons.sass b/src/app/styles/buttons.sass
@@ -134,6 +134,11 @@
     border-color: #F7981C
     color: $white
 
+  &.dark
+    background: $header-background
+    color: $white
+    border-color: $header-background-dark
+
   &:hover, &.is-hovered
     background-image: linear-gradient(0deg, #EAEEF3 0%, #FFFFFF 100%)
     border: 1px solid $border
@@ -159,6 +164,11 @@
       border-color: #F09219
       color: $white
 
+    &.dark
+      background: $header-background-dark
+      color: $white
+      border-color: $header-background-dark
+
   &:active, &.is-active
     color: $color-secondary
 
@@ -191,8 +201,8 @@
 
   .group-button
     height: 36px
-    background-image: linear-gradient(-1deg, #1991EB 2%, #2DA1F8 98%)
-    border: 1px solid #1585D8
+    background: $header-background-dark
+    border: 1px solid $header-background
     color: $white
     padding: 6px  12px
     font-family: $font-family-semibold
@@ -220,8 +230,8 @@
       border-bottom-right-radius: 4px
 
     &.is-active, &:hover
-      background-image: linear-gradient(-180deg, #0C73C1 2%, #196BAA 98%)
-      border: 1px solid #1468A7
+      background: $header-background
+      border: 1px solid $header-background
 
   &.bright
 

diff --git a/src/app/styles/colors.sass b/src/app/styles/colors.sass
@@ -30,7 +30,8 @@ $button-background: #516173
 $button-background-hover: #415061
 $button-background-active: #354353
 
-$header-background: #1488c6
+$header-background: #343637
+$header-background-dark: #404143
 $header-context-background: #1798de
 
 $hover-item-background: #f7f8f9
diff --git a/src/app/styles/nav.sass b/src/app/styles/nav.sass
@@ -1,5 +1,5 @@
 .nav
-  height: 65px
+  height: 55px
   width: 100%
   z-index: 90 !important
   background: $header-background
@@ -15,6 +15,13 @@
     font-weight: 700
     font-family: $font-family-semibold
 
+    .icon
+      display: block
+      float: left
+      width: 25px
+      height: 25px
+      margin-right: 5px
+
     i
       font-size: 20px !important
       margin-right: 10px
@@ -88,7 +95,7 @@
             background: $background
 
     &.user-item
-      margin-top: 13px
+      margin-top: 7px
       margin-right: -10px
       height: 40px
       display: inline-flex
@@ -105,7 +112,7 @@
 
       i
         position: absolute
-        top: 22px
+        top: 17px
         right: -10px
         font-size: 12px !important
 
@@ -144,43 +151,44 @@
     top: 60px
     right: -8px
     padding-top: 12px
-    background: $background
+    background: $header-background
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26)
-    border: 1px solid #fbfbfc
+    border: 1px solid $header-background-dark
 
     &:after
       display: block
       content: ''
       transform: rotate(-45deg)
       width: 12px
       height: 12px
-      background: $white
-      border-top: 1px solid $border
-      border-right: 1px solid $border
+      background: $header-background
+      border-top: 1px solid $header-background-dark
+      border-right: 1px solid $header-background-dark
       position: absolute
       top: -6px
       right: 10px
 
     .nav-dropdown-item
       display: block
-      color: $color-secondary
+      color: $white
       padding: 10px
       font-size: 12px
       position: relative
       text-align: center
-      font-weight: 600
+      font-weight: 700
+      font-family: $font-family-semibold
 
       &:last-child
         border-bottom-left-radius: 4px
         border-bottom-right-radius: 4px
 
       &:hover
-        background: $background
-        color: $color
+        background: $header-background-dark
+        color: $white
 
     .version-link
       font-size: 10px
-      color: $grey
+      color: $white
       padding: 5px 10px
       position: relative
       display: block
@@ -193,17 +201,19 @@
         font-size: 14px !important
         top: 0
         right: 0
-        color: $grey-light
+        color: $white
+
+      &:hover
+        color: $white
 
   &.sub-nav
-    background: transparent
-    padding-top: 40px
-    padding-bottom: 15px
-    margin-bottom: 10px
+    background: $hover-item-background
+    padding-top: 30px
+    padding-bottom: 30px
     display: flex
     align-items: center
     z-index: 80 !important
-    border-bottom: none
+    box-shadow: 1px 2px 0 rgba($header-background, 0.1)
 
     +mobile
       display: none
@@ -214,7 +224,7 @@
 
         h1
           color: $color
-          font-size: 18px
+          font-size: 20px
           font-weight: $weight-semibold
 
           +mobile
@@ -251,58 +261,3 @@
       float: left
       margin-top: 10px
       margin-left: 5px
-
-.nav-header-context
-  width: 100%
-  height: 42px
-  background: $header-context-background
-  z-index: 90
-  font-size: 13px
-  color: $white
-  margin-top: -1px
-  display: flex
-  align-items: center
-
-  .breadcrumb-item
-    color: $white
-    display: inline-block
-    padding: 12px 6px
-    position: relative
-    font-family: $weight-semibold
-    font-weight: 700
-    margin-right: 15px
-
-    &:before
-      content: ' '
-      display: block
-      width: 0
-      height: 0
-      border-top: 21px solid transparent
-      border-bottom: 21px solid transparent
-      border-left: 10px solid rgba(255, 255, 255, .3)
-      position: absolute
-      top: 50%
-      margin-top: -21px
-      margin-left: 1px
-      left: 100%
-      z-index: 3
-
-    &:after
-      content: ' '
-      display: block
-      width: 0
-      height: 0
-      border-top: 21px solid transparent
-      border-bottom: 21px solid transparent
-      border-left: 10px solid #1798de
-      position: absolute
-      top: 50%
-      margin-top: -21px
-      left: 100%
-      z-index: 3
-
-    &:last-child
-      &:before
-        display: none
-      &:after
-        display: none