chore(style): colours

src/app/components/app-builds/app-builds.component.html

@@ -11,7 +11,7 @@ <h1>Builds</h1>
 
     </div>
     <div class="nav-right">
-      <div class="group-buttons">
+      <div class="group-buttons bright">
         <button class="group-button" [ngClass]="{ 'is-active': show === 'all' }" (click)="showAllBuilds()">
           <i class="ionicon ion-network"></i>
           All Builds
@@ -41,7 +41,7 @@ <h1>Builds</h1>
 
           <div class="column is-12" *ngIf="!builds?.length">
             <div class="notification">
-              No builds have been run yet.
+              <p>No builds have been run yet.</p>
             </div>
           </div>
 

src/app/components/app-header/app-header.component.html

@@ -7,15 +7,19 @@
     </div>
     <div class="nav-center">
       <a class="nav-item is-hidden-mobile" routerLink="/dashboard" routerLinkActive="is-active" name="dashboard" *ngIf="user || demo">
+        <i class="ionicon ion-ios-pie"></i>
         <span>Dashboard</span>
       </a>
       <a class="nav-item nav-team is-hidden-mobile" routerLink="/team" routerLinkActive="is-active" *ngIf="user">
+        <i class="ionicon ion-person-stalker"></i>
         <span>Team</span>
       </a>
       <a class="nav-item is-hidden-mobile" routerLink="/repositories" routerLinkActive="is-active">
+        <i class="ionicon ion-ios-paper"></i>
         <span>Repositories</span>
       </a>
       <a class="nav-item is-hidden-mobile" routerLink="/images" routerLinkActive="is-active" *ngIf="user">
+        <i class="ionicon ion-images"></i>
         <span>Images</span>
       </a>
     </div>
@@ -48,7 +52,6 @@
           </a>
           <a class="version-link" href="https://github.com/bleenco/abstruse" target="_blank">
             Abstruse {{ version }}
-            <i class="ionicon ion-social-github"></i>
           </a>
         </div>
       </a>

src/app/components/app-images/app-images.component.html

@@ -9,7 +9,7 @@ <h1>Docker Build Images</h1>
     </div>
     <div class="nav-center is-hidden-mobile"></div>
     <div class="nav-right">
-      <div class="group-buttons">
+      <div class="group-buttons bright">
         <button class="group-button" name="tab-images" [ngClass]="{ 'is-active': tab === 'images' }" (click)="tab = 'images'">
           <i class="ionicon ion-ios-paper-outline"></i>
           Images

src/app/components/app-logs/app-logs.component.html

@@ -11,7 +11,7 @@ <h1>System Logs</h1>
 
     </div>
     <div class="nav-right">
-      <div class="group-buttons">
+      <div class="group-buttons bright">
         <button class="group-button" [ngClass]="{ 'is-active': show === 'all' }" (click)="changeShowType('all')">All Logs</button>
         <button class="group-button" [ngClass]="{ 'is-active': show === 'info' }" (click)="changeShowType('info')">Info</button>
         <button class="group-button" [ngClass]="{ 'is-active': show === 'warning' }" (click)="changeShowType('warning')">Warnings</button>
@@ -50,7 +50,7 @@ <h1>System Logs</h1>
               </div>
             </div>
             <div layout-align="center" *ngIf="logs?.length" align="center" class="more-button-container">
-              <button type="button" class="button dark" name="btn-loadmore" (click)="fetch($event)" [class.is-loading]="fetching" [class.is-hidden]="hideMoreButton">
+              <button type="button" class="button" name="btn-loadmore" (click)="fetch($event)" [class.is-loading]="fetching" [class.is-hidden]="hideMoreButton">
                 <img src="/images/icons/more.svg">
                 Load more
               </button>

src/app/components/app-repository/app-repository.component.html

@@ -10,7 +10,7 @@ <h1 class="mr15 repository-h1">{{ repo?.full_name }}</h1>
     </div>
     <div class="nav-center"></div>
     <div class="nav-right">
-      <div class="group-buttons" *ngIf="userId">
+      <div class="group-buttons bright" *ngIf="userId">
         <button class="group-button" name="btn-builds" [class.is-active]="tab === 'builds'" (click)="switchTab('builds')">
           <i class="ionicon ion-hammer"></i>
           Builds
@@ -68,7 +68,7 @@ <h1 class="mr15 repository-h1">{{ repo?.full_name }}</h1>
               <app-build-item [build]="build"></app-build-item>
             </div>
             <div layout-align="center" *ngIf="repo?.builds?.length" align="center" class="more-button-container">
-              <button type="button" class="button dark" name="btn-loadmore" (click)="fetchBuilds($event)" [class.is-loading]="fetching" [class.is-hidden]="hideMoreButton">
+              <button type="button" class="button" name="btn-loadmore" (click)="fetchBuilds($event)" [class.is-loading]="fetching" [class.is-hidden]="hideMoreButton">
                 <img src="/images/icons/more.svg">
                 Load more builds
               </button>

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 dark w200" (click)="showAddUser()" name="btn-addUser" [disabled]="addUser || !user.admin">
+      <button type="button" class="button w200" (click)="showAddUser()" name="btn-addUser" [disabled]="addUser || !user.admin">
         <i class="ionicon ion-person-add"></i>
         Add User
       </button>

src/app/styles/build-details.sass

@@ -1,6 +1,6 @@
 .build-top-container
   width: 100%
-  border: 2px solid $divider
+  border: 1px solid $divider
   margin-bottom: 10px
   margin-top: 20px
 
@@ -15,7 +15,7 @@
 
   .build-top-content
     padding: 20px
-    background: $background
+    background: $white
 
     .ssh
       padding: 5px 10px

src/app/styles/buttons.sass

@@ -118,7 +118,7 @@
     &[disabled]
       background: lighten($red, 5)
       border-color: $red
-      color: $white
+      color: $color
 
   &.white
     background: transparent
@@ -176,6 +176,7 @@
     background: #E9EDF1
     border: 1px solid #DFE3E9
     pointer-events: none
+    color: $color
 
   img
     width: 14px
@@ -208,7 +209,7 @@
     font-family: $font-family-semibold
     font-weight: 700
     text-transform: uppercase
-    font-size: 12px
+    font-size: 11px
     outline: none
     cursor: pointer
     display: inline-flex
@@ -236,9 +237,10 @@
   &.bright
 
     .group-button
-      background-image: linear-gradient(0deg, #F2F4F7 0%, #FFFFFF 100%)
+      background-image: linear-gradient(0deg, #F7FBFD 0%, #FFFFFF 100%)
       border: 1px solid $border
       color: $color-secondary
+      margin-left: -1px
 
       &.is-active, &:hover
         background: $white

src/app/styles/colors.sass

@@ -1,4 +1,4 @@
-$background: #FFFFFF
+$background: #F5F7FA
 $background-secondary: #222C3C
 $background-button: #F1F5F7
 $color: #354052
@@ -10,16 +10,16 @@ $border: #DFE2E5
 $divider: #DFE2E5
 $border-blue: #2EA2F8
 
-$blue: #2EA1F8
+$blue: #00b4e7
 $blue-secondary: #1991EB
-$blue-background: #2EA1F8
-$green: #39B54A
-$green-secondary: #45B854
-$green-bg: #36AF47
-$red: #fa6957
-$red-secondary: #fa6957
-$yellow: #FFC120
-$yellow-secondary: #FFC120
+$blue-background: #00b4e7
+$green: #0c9346
+$green-secondary: #0c9346
+$green-bg: #0c9346
+$red: #ec0000
+$red-secondary: #ec0000
+$yellow: #fcca01
+$yellow-secondary: #fcca01
 $grey: #636363
 $grey-light: #adb5bd
 $orange-secondary: #FD9A18
@@ -34,4 +34,4 @@ $header-background: #343637
 $header-background-dark: #404143
 $header-context-background: #1798de
 
-$hover-item-background: #f7f8f9
+$hover-item-background: #fafafa

src/app/styles/content.sass

@@ -50,10 +50,11 @@
       text-decoration: underline
 
     &.bold
-      font-family: $font-family-bold
+      font-family: $font-family-semibold
 
     &.larger
-      font-size: 17px
+      font-size: 15px
+      font-family: $font-family-semibold
 
       +mobile
         padding: 5px 0
@@ -103,10 +104,11 @@
   color: $color
   font-size: 13px
   cursor: pointer
-  background: $background
+  background: $white
   border: 1px solid $divider
   display: flex
   align-items: center
+  font-family: $font-family-semibold
 
   +mobile
     display: block
@@ -201,14 +203,15 @@
       width: 100%
 
       span
+        font-size: 16px
+        font-family: $font-family-semibold
 
         +mobile
           text-align: center
 
         &.span-branch
           font-size: 13px
           display: inline-block
-          color: $color
 
           img
             display: block
@@ -271,7 +274,7 @@
   .avatar-icon
     width: 50px
     height: 50px
-    border-radius: 50px
+    border-radius: 5px
     margin: 0 15px 0 5px
 
   span
@@ -281,7 +284,7 @@
       text-decoration: underline
 
     &.bold
-      font-family: $font-family-bold
+      font-family: $font-family-semibold
 
   .icon-and-text
     display: inline-flex
@@ -315,7 +318,7 @@
       font-size: 15px
 
     .env-text
-      font-size: 15px
+      font-size: 14px
 
 .message-center
   display: block
@@ -421,14 +424,14 @@ progress
     width: 30px
     height: 30px
     border: 1px solid $border
-    border-radius: 50%
+    border-radius: 5px
     z-index: 11
 
 .avatar-img
   display: block
   max-width: 50px
   height: 50px
-  border-radius: 50%
+  border-radius: 5px
 
 
 .data-label

src/app/styles/login.sass

@@ -3,7 +3,7 @@
 
   .login-form
     width: 100%
-    background: $background
+    background: $white
     border-radius: 4px
     padding: 50px 30px
 

src/app/styles/message.sass

@@ -5,6 +5,7 @@
   border-radius: 0
   margin: 20px 0
   border: 1px solid $border
+  background: $white
 
   p
     color: $color