Update styles

src/app/pages/dashboard/dashboard.component.scss

@@ -32,7 +32,7 @@
       }
 
       &.-select {
-        background-color: rgba($color-1, .5);
+        background-color: rgba($color-1, 1);
         color: $color-3;
       }
     }

src/app/shared/menu/menu.component.html

@@ -1,14 +1,14 @@
 <div class="c-sidebar">
 	<div class="sidebar-top">
-		<h1>control<br>tower.</h1>
+		<h1>control<br>tower_</h1>
 		<a [routerLink]="['/dashboard']" class="sidebar-option" [routerLinkActive]="['sidebar-option-selected']">Dashboard</a>
     <a [routerLink]="['/plugins']" class="sidebar-option" [routerLinkActive]="['sidebar-option-selected']">Plugins</a>
     <a [routerLink]="['/microservices']" class="sidebar-option" [routerLinkActive]="['sidebar-option-selected']">Microservices</a>
     <a [routerLink]="['/endpoints']" class="sidebar-option" [routerLinkActive]="['sidebar-option-selected']">Endpoints</a>
     <a [routerLink]="['/users']" class="sidebar-option" [routerLinkActive]="['sidebar-option-selected']">Users</a>
-    <a [routerLink]="['/profile']" class="sidebar-option" [routerLinkActive]="['sidebar-option-selected']">Profile</a>	
+    <a [routerLink]="['/profile']" class="sidebar-option" [routerLinkActive]="['sidebar-option-selected']">Profile</a>
 	</div>
 	<div class="sidebar-bottom">
 		<app-button text="Logout" (click)="logout($event)"></app-button>
 	</div>
-</div>
+</div>

src/app/shared/menu/menu.component.scss

@@ -10,6 +10,7 @@
   padding: 40px 0 20px;
   position: fixed;
   width: 100px;
+  box-shadow: 1px 0px 5px #222;
 
   .sidebar-top {
 
@@ -24,21 +25,6 @@
         font-size: $font-size-big;
         padding: 0 30px 25px;
       }
-
-      &::before {
-        background-color: $color-3;
-        content: '';
-        display: block;
-        height: 2px;
-        position: absolute;
-        top: -10px;
-        width: 40px;
-
-        @media #{$mq-tablet} {
-          height: 4px;
-          width: 84px;
-        }
-      }
     }
 
     .sidebar-option {
@@ -68,7 +54,7 @@
 
     app-button {
       display: block;
-      margin: 55px auto 0;
+      margin: 20px auto 0;
       width: calc(100% - 50px);
     }
   }
@@ -77,4 +63,4 @@
     padding: 40px 0 45px;
     width: 250px;
   }
-}
+}

src/app/shared/plugin/plugin.component.html

@@ -4,15 +4,17 @@
 		<div class="card-title">
 			<h2>
 				{{plugin.name}}
+				<span class="active-text" *ngIf="plugin.active"> / activated_</span>
+				<span class="desactive-text" *ngIf="!plugin.active"> / desactivated_</span>
 			</h2>
 		</div>
 		<div class="card-main">
 			<h3>File/module: {{plugin.mainFile}}</h3>
 		</div>
 		<div class="card-button-contain">
 			<button (click)="editPlugin()">Edit</button>
-      <button *ngIf="plugin.active" class="green-active" (click)="toggleActivePlugin(false)">Desactivate</button>
+      <button *ngIf="plugin.active" class="orange-active" (click)="toggleActivePlugin(false)">Desactivate</button>
 			<button *ngIf="!plugin.active" (click)="toggleActivePlugin(true)">Activate</button>
 		</div>
 	</div>
-</div>
+</div>

src/app/shared/plugin/plugin.component.scss

@@ -11,15 +11,27 @@
   position: relative;
   width: 100%;
 
+  .active-text {
+    font-size: $font-size-normal;
+    color: $color-9;
+    font-weight: $font-weight-bold;
+  }
+
+  .desactive-text {
+    font-size: $font-size-normal;
+    color: $color-7;
+    font-weight: $font-weight-bold;
+  }
+
   .button-refresh {
     background-color: $color-3;
     border: 1px solid $color-6;
     cursor: pointer;
     font-family: $font-family-1;
-    padding: 10px 15px;
+    padding: 5px 15px;
     position: absolute;
     right: -1px;
-    top: -19px;
+    top: -25px;
     transition: .2s;
 
     &:hover {
@@ -87,15 +99,15 @@
       }
 
       &:last-child {
-        border-bottom: 8px solid $color-7;
+        border-bottom: 8px solid $color-5;
 
         &:active {
           border-bottom: 4px solid $color-7;
           top: 5px;
         }
 
-        &.green-active {
-          border-bottom: 8px solid $color-9;
+        &.orange-active {
+          border-bottom: 8px solid $color-5;
 
           &:active {
             border-bottom: 4px solid $color-9;
@@ -105,4 +117,4 @@
       }
     }
   }
-}
+}

src/assets/styles/_base.scss

@@ -33,6 +33,7 @@ body {
 
 a {
   text-decoration: none;
+  color: $color-2;
 }
 
 h1,

src/assets/styles/_settings.scss

@@ -35,14 +35,14 @@ $font-weight-normal: 400;
 $font-weight-bold: 700;
 
 // Colors
-$color-1: #3c61e5;
-$color-2: #111;
+$color-1: #ec6f53;
+$color-2: #222;
 $color-3: #fff;
 $color-4: #f7f7f7;
 $color-5: #d5dee5;
 $color-6: #858a94;
 $color-7: #ff4646;
-$color-8: #2448ca;
+$color-8: #ff8165;
 $color-9: #5bbd66;
 
 

src/assets/styles/mapglyphs.scss

@@ -47,7 +47,7 @@
   font-size: 140px;
 
 	&::after {
-		background-color: #3c61e5;
+		background-color: #ec6f53;
 		content: '';
 		display: inline-block;
 		height: 50px;

src/environments/environment.ts

@@ -5,5 +5,5 @@
 
 export const environment = {
   production: false,
-  apiUrl: 'https://staging-api.globalforestwatch.org'
+  apiUrl: 'http://staging-api.globalforestwatch.org'
 };