From 586fb1d39f45c66bef653f95587870294b0c9c6c Mon Sep 17 00:00:00 2001
From: Tomer Epstein <57438361+tomer-epstein@users.noreply.github.com>
Date: Mon, 27 Jan 2020 17:02:58 +0200
Subject: [PATCH] UI-Theme (#125)

---
 backend/package.json                                         | 2 +-
 frontend/src/App.vue                                         | 2 +-
 frontend/src/assets/css/globalStyles.css                     | 2 +-
 frontend/src/components/Header.vue                           | 3 ++-
 frontend/src/components/Navigation.vue                       | 4 ++--
 frontend/src/components/QuestionTypes/GeneratorSelection.vue | 2 +-
 frontend/src/components/QuestionTypes/QuestionEditor.vue     | 2 +-
 frontend/src/components/QuestionTypes/QuestionInput.vue      | 5 ++++-
 frontend/src/components/QuestionTypes/QuestionList.vue       | 2 +-
 9 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/backend/package.json b/backend/package.json
index eb92d56f..d5c56f8c 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -5,7 +5,7 @@
 	"license": "Apache 2.0",
 	"description": "Provide rich user experience for Yeoman generators using VSCode extension or the browser",
 	"repository": "https://github.com/SAP/yeoman-ui",
-	"version": "0.0.32",
+	"version": "0.0.33",
 	"engines": {
 		"vscode": "^1.39.2"
 	},
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 133d482e..967e8eeb 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -450,7 +450,7 @@ div.consoleClassVisible .v-footer {
   white-space: pre-wrap;
 }
 .left-col {
-  background-color: var(--vscode-editorWidget-background, #252426);
+  background-color: var(--vscode-editorWidget-background, #252526);
 }
 .prompts-col {
   overflow-y: scroll;
diff --git a/frontend/src/assets/css/globalStyles.css b/frontend/src/assets/css/globalStyles.css
index b90f5a3b..e6f0f1b2 100644
--- a/frontend/src/assets/css/globalStyles.css
+++ b/frontend/src/assets/css/globalStyles.css
@@ -40,7 +40,7 @@ p.question-label{
 
 div.v-input__slot .v-select__selection,
 .v-input div label.v-label{
-  color: var(--vscode-input-foreground, #cccccc);
+  color: var(--vscode-input-foreground, #cccccc) !important;
 }
 div.v-select-list div.v-list{
   background-color: var(--vscode-input-background, #3c3c3c);
diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
index 068c0eee..68b16299 100644
--- a/frontend/src/components/Header.vue
+++ b/frontend/src/components/Header.vue
@@ -28,7 +28,8 @@ header.v-app-bar.v-toolbar, header.v-app-bar.v-toolbar .v-btn {
   color: var(--vscode-foreground, #cccccc);
 }
 header.v-app-bar.v-toolbar {
-  border-bottom: 1px solid  var(--vscode-editorWidget-background, #252426);
+  border-bottom: 1px solid  var(--vscode-editorWidget-background, #252526);
   box-shadow: none;
+  background-color: var(--vscode-editor-background, #1e1e1e) !important;
 }
 </style>
diff --git a/frontend/src/components/Navigation.vue b/frontend/src/components/Navigation.vue
index 3926f6d7..f05f01a4 100644
--- a/frontend/src/components/Navigation.vue
+++ b/frontend/src/components/Navigation.vue
@@ -50,13 +50,13 @@ div.v-stepper div.v-stepper__step {
   border-bottom: 1px solid var(--vscode-editor-background, #1e1e1e);
 }
  .v-stepper__step--complete.v-stepper__step {
-  background: var(--vscode-editorWidget-background,#252426);
+  background: var(--vscode-editorWidget-background,#252526);
 }
 .v-stepper__step--active.v-stepper__step {
   background: var(--vscode-editor-background, #1e1e1e);
 }
 .v-stepper__step--inactive.v-stepper__step {
-  background: var(--vscode-editorWidget-background,#252426);
+  background: var(--vscode-editorWidget-background,#252526);
 }
 
 span.v-stepper__step__step {
diff --git a/frontend/src/components/QuestionTypes/GeneratorSelection.vue b/frontend/src/components/QuestionTypes/GeneratorSelection.vue
index 7cdc1162..1669b955 100644
--- a/frontend/src/components/QuestionTypes/GeneratorSelection.vue
+++ b/frontend/src/components/QuestionTypes/GeneratorSelection.vue
@@ -86,7 +86,7 @@ export default {
 
 <style scoped>
 .v-card {
-  background-color: var(--vscode-input-background, #3c3c3c);
+  background-color: var(--vscode-editorWidget-background, #252526);
 }
 .v-card:hover {
   background-color: var(--vscode-list-hoverBackground,#2a2d2e) !important;
diff --git a/frontend/src/components/QuestionTypes/QuestionEditor.vue b/frontend/src/components/QuestionTypes/QuestionEditor.vue
index af435228..4137fca1 100644
--- a/frontend/src/components/QuestionTypes/QuestionEditor.vue
+++ b/frontend/src/components/QuestionTypes/QuestionEditor.vue
@@ -44,7 +44,7 @@ export default {
 <style scoped>
 #question-editor >>> div.v-input__slot {
   background-color: var(--vscode-input-background, #3c3c3c);
-  border: 1px solid  var(--vscode-editorWidget-background, #252426);
+  border: 1px solid  var(--vscode-editorWidget-background, #252526);
   box-shadow: none;
   border-radius: unset; 
 }
diff --git a/frontend/src/components/QuestionTypes/QuestionInput.vue b/frontend/src/components/QuestionTypes/QuestionInput.vue
index 66bbd548..f05f8930 100644
--- a/frontend/src/components/QuestionTypes/QuestionInput.vue
+++ b/frontend/src/components/QuestionTypes/QuestionInput.vue
@@ -52,7 +52,7 @@ export default {
   color: var(--vscode-input-foreground, #cccccc) !important;
   background-color: var(--vscode-input-background, #3c3c3c) !important;
   border-radius: unset !important;
-  border: 1px solid  var(--vscode-editorWidget-background, #252426);
+  border: 1px solid  var(--vscode-editorWidget-background, #252526);
   box-shadow: none;
 }
 #question-input >>> div.v-input__slot .v-select__selection {
@@ -61,4 +61,7 @@ export default {
 .theme--light.v-input:not(.v-input--is-disabled) >>> input{
   color: var(--vscode-input-foreground, #cccccc);
 }
+.theme--light.v-input:not(.v-input--is-disabled) >>> input::placeholder{
+  color: var(--vscode-editorCodeLens-foreground, #999999);
+}
 </style>
diff --git a/frontend/src/components/QuestionTypes/QuestionList.vue b/frontend/src/components/QuestionTypes/QuestionList.vue
index 1eeb8098..27a6af63 100644
--- a/frontend/src/components/QuestionTypes/QuestionList.vue
+++ b/frontend/src/components/QuestionTypes/QuestionList.vue
@@ -77,7 +77,7 @@ export default {
   color: var(--vscode-input-foreground, #cccccc) !important;
   background-color: var(--vscode-input-background, #3c3c3c) !important;
   border-radius: unset;
-  border: 1px solid  var(--vscode-editorWidget-background, #252426);
+  border: 1px solid  var(--vscode-editorWidget-background, #252526);
   box-shadow: none;
 }