From 2ebd86aa084a09f9eb2d4d0f606119fc4103120d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= <kristof.toth@avatao.com>
Date: Sat, 21 Jul 2018 11:58:26 +0200
Subject: [PATCH 1/4] Redesign IDE header while tackling several issues with it

---
 src/app/ide/ide.component.scss | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/app/ide/ide.component.scss b/src/app/ide/ide.component.scss
index 9249657..b3e3f3a 100644
--- a/src/app/ide/ide.component.scss
+++ b/src/app/ide/ide.component.scss
@@ -5,7 +5,6 @@
 
 .tfw-grid-ide-statusbar {
   display: grid;
-  height: $tao-navbar-height;
   grid-template-columns: 8fr 1fr;
 }
 
@@ -16,7 +15,7 @@
 }
 
 .btn-group {
-  padding-left: 34px;
+  padding-bottom: 1em;
 }
 
 .underline {
@@ -26,10 +25,8 @@
 .tfw-tab-btn {
   background-color: gray;
   color: $tao-gray-600;
-  border-left: 0;
-  border-right: 0;
-  border-radius: 100px;
-  padding: 5px 19px;
+  border-radius: 0;
+  padding: 0.5em 0.7em;
   z-index: 200;
 
   .tfw-tab-btn-saved,
@@ -39,23 +36,19 @@
     background-color: white;
     font-weight: bolder;
     color: black;
-    border: 0;
   }
 }
 
 .tfw-deploy-btn-group {
-  margin: auto $tiny;
-
   .tfw-deploy-btn {
     background: $tao-bright-green-200;
-    border-radius: 100px;
-    padding: 6px 19px;
+    padding: 0.5em 0.7em;
+    border-radius: 0;
 
     img {
       padding-right: 0.5em;
       position: relative;
-      bottom: 1px;
-      height: $small;
+      height: 1em;
     }
 
     &.failed {

From 7c4296583ccf476567182249a5923ad9d747b131 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= <kristof.toth@avatao.com>
Date: Sat, 21 Jul 2018 13:51:20 +0200
Subject: [PATCH 2/4] Make IDE header more... subtle in it's glory

---
 src/app/ide/ide.component.scss | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/app/ide/ide.component.scss b/src/app/ide/ide.component.scss
index b3e3f3a..9bedbd4 100644
--- a/src/app/ide/ide.component.scss
+++ b/src/app/ide/ide.component.scss
@@ -6,6 +6,7 @@
 .tfw-grid-ide-statusbar {
   display: grid;
   grid-template-columns: 8fr 1fr;
+  background-color: #353535;
 }
 
 .tfw-ide-editor {
@@ -14,17 +15,13 @@
   overflow: hidden;
 }
 
-.btn-group {
-  padding-bottom: 1em;
-}
-
 .underline {
   text-decoration: underline;
 }
 
 .tfw-tab-btn {
-  background-color: gray;
-  color: $tao-gray-600;
+  background-color: #333333;
+  color: $tao-gray-400;
   border-radius: 0;
   padding: 0.5em 0.7em;
   z-index: 200;
@@ -33,9 +30,8 @@
   .active,
   .disabled,
   &:disabled {
-    background-color: white;
-    font-weight: bolder;
-    color: black;
+    background-color: #131313;  // matches vscode dark theme with disbled gray
+    color: white;
   }
 }
 

From 71f6e35cdf3b4b4873c6a357e77943688fc3288c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= <kristof.toth@avatao.com>
Date: Mon, 23 Jul 2018 10:58:24 +0200
Subject: [PATCH 3/4] Fix Deploy button alignment in case the text is short

---
 src/app/ide/ide.component.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/ide/ide.component.scss b/src/app/ide/ide.component.scss
index 9bedbd4..81d3728 100644
--- a/src/app/ide/ide.component.scss
+++ b/src/app/ide/ide.component.scss
@@ -36,6 +36,9 @@
 }
 
 .tfw-deploy-btn-group {
+  display: flex;
+  justify-content: flex-end;  
+
   .tfw-deploy-btn {
     background: $tao-bright-green-200;
     padding: 0.5em 0.7em;

From 51f79310bedee2505620fd368a379d58876d0e0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krist=C3=B3f=20T=C3=B3th?= <kristof.toth@avatao.com>
Date: Mon, 23 Jul 2018 12:11:37 +0200
Subject: [PATCH 4/4] Make minor design improvements to Deploy button

---
 src/app/ide/ide.component.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/ide/ide.component.scss b/src/app/ide/ide.component.scss
index 81d3728..c6df21d 100644
--- a/src/app/ide/ide.component.scss
+++ b/src/app/ide/ide.component.scss
@@ -41,8 +41,9 @@
 
   .tfw-deploy-btn {
     background: $tao-bright-green-200;
-    padding: 0.5em 0.7em;
+    padding: 0.5em 0.7em 0.8em 1.5em;
     border-radius: 0;
+    border-bottom-left-radius: 2.2em;
 
     img {
       padding-right: 0.5em;