From 5f5367a6cfe207d2fb02a9568962fafbb9bb0152 Mon Sep 17 00:00:00 2001
From: i348307 <doron.nahari@sap.com>
Date: Thu, 9 Jan 2020 10:20:41 +0200
Subject: [PATCH 1/8] Align next button + cards + inputs + overall

---
 frontend/src/App.vue                          | 127 +++++++++++-------
 frontend/src/components/Header.vue            |   2 +-
 frontend/src/components/Navigation.vue        |   5 +-
 .../src/components/QuestionTypeSelector.vue   |  99 +++++++++-----
 .../QuestionTypes/GeneratorSelection.vue      |   1 +
 .../QuestionTypes/QuestionCheckbox.vue        |  60 ++++-----
 .../QuestionTypes/QuestionConfirm.vue         |  25 ++--
 .../QuestionTypes/QuestionEditor.vue          |  20 ++-
 .../QuestionTypes/QuestionExpand.vue          |  31 ++---
 .../QuestionTypes/QuestionInput.vue           |  41 ++++--
 .../components/QuestionTypes/QuestionList.vue |  68 ++++------
 frontend/src/components/Step.vue              |   8 +-
 frontend/src/main.js                          |   1 -
 frontend/src/plugins/vuetify.js               |   7 +-
 .../QuestionTypes/QuestionCheckbox.spec.js    |   9 +-
 .../QuestionTypes/QuestionExpand.spec.js      |   3 +-
 .../QuestionTypes/QuestionInput.spec.js       |   5 +-
 .../QuestionTypes/QuestionList.spec.js        |   5 +-
 18 files changed, 289 insertions(+), 228 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index f5a707e7..0d4ff9a6 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,23 +1,28 @@
 <template>
-  <div id="app" class="d-flex flex-column yeoman-ui vld-parent">
-    <loading :active.sync="isLoading"
+  <v-app id="app">
+        <loading :active.sync="isLoading"
              :is-full-page="true"
              :height="128"
              :width="128"
              :color="isLoadingColor"
              loader="dots">
     </loading>
+    <div v-if="!prompts.length" class="loading">{{ messages.generators_loading }}</div>
+
     <Header
       v-if="prompts.length"
       :selectedGeneratorHeader="selectedGeneratorHeader"
       :stepName="prompts[promptIndex].name"
       :rpc="rpc"
+      @parentShowConsole="toggleConsole"
     />
-    <v-row class="m-0 p-0">
-      <v-col class="navigaiton-row m-0 p-0" lg="3" sm="auto">
-          <Navigation v-if="prompts.length > 0" :promptIndex="promptIndex" :prompts="prompts" />
+    <v-row class="main-row m-0 p-0">
+      <v-col class="left-col m-0 p-0" lg="3" sm="auto">
+        <Navigation v-if="prompts.length" :promptIndex="promptIndex" :prompts="prompts" />
       </v-col>
-      <v-col class="">
+      <v-col class="right-col">
+        <!-- <v-row class="right-row"> -->
+        <v-col class="prompts-col" lg="12">
           <Done
             v-if="isDone"
             :doneMessage="doneMessage"
@@ -31,13 +36,16 @@
             @generatorSelected="onGeneratorSelected"
             @stepvalidated="onStepValidated"
           />
-          <div class="navigation" v-if="prompts.length > 0 && !isDone">
-            <b-button class="btn" :disabled="!stepValidated" @click="next">Next</b-button>
-          </div>
+        </v-col>
+          <v-col v-if="prompts.length > 0 && !isDone" class="bottom-right-col" style="height: 4rem;" offset-lg="9" lg="3">
+            <v-row  class="progress-buttons-row" align="center" justify="end">
+              <v-btn :disabled="!stepValidated" @click="next">Next ></v-btn>
+            </v-row>
+        </v-col>
       </v-col>
     </v-row>
 
-  <!-- TODO Handle scroll of above content when console is visible -->
+    <!-- TODO Handle scroll of above content when console is visible. low priority because it is for localhost console only -->
     <v-card :class="consoleClass" v-show="showConsole">
       <v-footer absolute class="font-weight-medium" style="max-height: 300px; overflow-y: auto;">
         <v-col class cols="12">
@@ -45,9 +53,10 @@
         </v-col>
       </v-footer>
     </v-card>
-  </div>
+  </v-app>
 </template>
 
+
 <script>
 import Vue from "vue"
 import Loading from 'vue-loading-overlay';
@@ -357,23 +366,14 @@ export default {
 .yeoman-ui *:focus {
   outline-color: transparent;
 }
+div.v-application .primary {
+  background-color: var(--vscode-editorCodeLens-foreground, #898989) !important;
+}
 html,
 body {
   height: 100%;
   background-color: var(--vscode-editor-background, #1e1e1e);
 }
-.list-group-item.selected {
-  background-color: var(--vscode-list-active-selection-background);
-}
-.form-control.yeoman-form-control {
-  color: var(--vscode-input-foreground, #cccccc);
-  background-color: var(--vscode-input-background, #3c3c3c);
-}
-.form-control:focus.yeoman-form-control:focus {
-  color: var(--vscode-input-foreground, #cccccc);
-  background-color: var(--vscode-input-background, #3c3c3c);
-}
-
 v-container {
   margin: 0px;
   padding: 0px;
@@ -381,24 +381,8 @@ v-container {
 v-row {
   margin: 0px;
 }
-div[class^="col-"],
-div[class*="col-"] {
-  padding-right: 5px;
-  padding-left: 5px;
-}
-button.btn,
-a.btn {
-  background-color: var(--vscode-button-background, #0e639c);
-  border-color: var(--vscode-button-background, #0e639c);
-  color: var(--vscode-button-foreground, white);
-  border-radius: 0.2rem;
-  font-size: 0.8rem;
-  padding: 0.2rem 0.6rem;
-}
-button.btn:hover,
-a.btn:hover {
-  background-color: var(--vscode-button-hoverBackground, #1177bb);
-  border-color: var(--vscode-button-hoverBackground, #1177bb);
+.theme--light {
+  color: var(--vscode-foreground, #cccccc) !important;
 }
 .loading {
   color: var(--vscode-foreground, white);
@@ -420,13 +404,62 @@ div.consoleClassVisible .v-footer {
   word-wrap: break-word;
   white-space: pre-wrap;
 }
-.navigation {
-  display: flex;
-  justify-content: flex-end;
-  padding: 10px;
+.left-col {
+  background-color: var(--vscode-menu-background, #252426);
+}
+.prompts-col {
+  overflow-y: scroll;
+  padding-right: 30px !important;
+}
+.main-row,
+.prompts-col {
+  height: calc(100% - 4rem);
+}
+.left-col,
+.right-col,
+.right-row,
+#step-component-div,
+#QuestionTypeSelector,
+#QuestionTypeSelector > .col,
+#QuestionTypeSelector > .col > div {
+  height: 100%;
+}
+.right-col {
+  padding: 0 !important;
+}
+.bottom-right-col {
+  background: var(--vscode-titleBar-activeBackground, #383838);
+  position: relative;
+  overflow: hidden;
+}
+.bottom-right-col:before {
+  height: 100%;
+  width: 100%;
+  background-color: var(--vscode-editor-background, #1e1e1e);
+  position: absolute;
+  content: "";
+  transform: rotate(-60deg);
+  transform-origin: bottom left;
 }
 
-.navigaiton-row {
-  background-color: var(--vscode-menu-background, #252426);
+div.bottom-right-col 
+  .theme--light.v-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined) {
+  background-color: var(--vscode-button-background, #0e639c);
+  border-color: var(--vscode-button-background, #0e639c);
+  color: var(--vscode-button-foreground, white);
+  border-radius: 0px;
+  font-size: 0.8rem;
+  padding: 0.2rem 0.6rem;
+  width: 7rem;
+  height: 2rem;
+}
+div.bottom-right-col
+  .theme--light.v-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined):hover {
+  background-color: var(--vscode-button-hoverBackground, #1177bb);
+  border-color: var(--vscode-button-hoverBackground, #1177bb);
+}
+div.bottom-right-col .progress-buttons-row  {
+  padding-right: 15px;
+  padding-top:4px;
 }
 </style>
diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
index 59d34785..492b9547 100644
--- a/frontend/src/components/Header.vue
+++ b/frontend/src/components/Header.vue
@@ -17,7 +17,7 @@ export default {
   methods: {
     collapseLog() {
       this.rpc.invoke("toggleLog", [{}]);
-      this.$parent.showConsole = !this.$parent.showConsole; //TODO investigate why this.$emit is not working
+      this.$emit("parentShowConsole");
     }
   }
 };
diff --git a/frontend/src/components/Navigation.vue b/frontend/src/components/Navigation.vue
index b66fbe7e..6d4f855c 100644
--- a/frontend/src/components/Navigation.vue
+++ b/frontend/src/components/Navigation.vue
@@ -7,7 +7,6 @@
           :key="`${index}-step`"
           :step="index"
           :complete="currentStep > index"
-          complete-icon="circle-slice-8"
         >{{ prompts[index - 1] ? prompts[index - 1].name : "" }}</v-stepper-step>
         <v-stepper-content :step="index" :key="`${index}-content`"></v-stepper-content>
       </template>
@@ -69,6 +68,10 @@ span.v-stepper__step__step {
   width: 10px;
 }
 
+span.v-stepper__step__step .v-icon.v-icon {
+  font-size: 0;
+}
+
 /* TODO Erez to give styles for completed step */
 .v-stepper__step--complete .v-stepper__step__step {
   background: var(--vscode-editorCodeLens-foreground, #999999);
diff --git a/frontend/src/components/QuestionTypeSelector.vue b/frontend/src/components/QuestionTypeSelector.vue
index ed33f520..216cf529 100644
--- a/frontend/src/components/QuestionTypeSelector.vue
+++ b/frontend/src/components/QuestionTypeSelector.vue
@@ -1,39 +1,54 @@
 <template>
-  <div v-if="currentQuestion.isWhen">
-    
-    <GeneratorSelection
-      v-if="currentQuestion.type==='generators'"
-      :currentQuestion="currentQuestion"
-      @generatorSelected="onGeneratorSelected"
-    />
-    <b-form-group :label="currentQuestion.message">
-      <QuestionInput
-        v-if="!currentQuestion.type || currentQuestion.type==='input' || currentQuestion.type==='password' || currentQuestion.type==='number'"
-        :currentQuestion="currentQuestion"
+  <div id="QuestionTypeSelector">
+    <v-col v-if="questions[0] && questions[0].type==='generators'" lg="12">
+      <GeneratorSelection
+        :currentQuestion="questions[0]"
+        @generatorSelected="onGeneratorSelected"
       />
+    </v-col>
+    <v-col v-else lg="6">
+      <v-form>
+        <div v-for="(currentQuestion, index) in questions" :key="index">
+          <div v-if="currentQuestion.isWhen">
+            <QuestionInput
+              v-if="!currentQuestion.type || currentQuestion.type==='input' || currentQuestion.type==='password' || currentQuestion.type==='number'"
+              :currentQuestion="currentQuestion"
+            />
 
-      <QuestionEditor v-if="currentQuestion.type==='editor'" :currentQuestion="currentQuestion" />
+            <QuestionEditor
+              v-if="currentQuestion.type==='editor'"
+              :currentQuestion="currentQuestion"
+            />
 
-      <QuestionList
-        v-if="currentQuestion.type==='list' || currentQuestion.type==='rawlist'"
-        :currentQuestion="currentQuestion"
-      />
+            <QuestionList
+              v-if="currentQuestion.type==='list' || currentQuestion.type==='rawlist'"
+              :currentQuestion="currentQuestion"
+            />
 
-      <QuestionConfirm v-if="currentQuestion.type==='confirm'" :currentQuestion="currentQuestion" />
+            <QuestionConfirm
+              v-if="currentQuestion.type==='confirm'"
+              :currentQuestion="currentQuestion"
+            />
 
-      <QuestionCheckbox
-        v-if="currentQuestion.type==='checkbox'"
-        :currentQuestion="currentQuestion"
-      />
+            <QuestionCheckbox
+              v-if="currentQuestion.type==='checkbox'"
+              :currentQuestion="currentQuestion"
+            />
 
-      <QuestionExpand v-if="currentQuestion.type==='expand'" :currentQuestion="currentQuestion" />
+            <QuestionExpand
+              v-if="currentQuestion.type==='expand'"
+              :currentQuestion="currentQuestion"
+            />
 
-      <b-form-invalid-feedback
-        id="validation-message"
-        class="invalid-feedback"
-        :state="currentQuestion.isValid"
-      >{{currentQuestion.validationMessage}}</b-form-invalid-feedback>
-    </b-form-group>
+            <b-form-invalid-feedback
+              id="validation-message"
+              class="invalid-feedback"
+              :state="currentQuestion.isValid"
+            >{{currentQuestion.validationMessage}}</b-form-invalid-feedback>
+          </div>
+        </div>
+      </v-form>
+    </v-col>
   </div>
 </template>
 
@@ -58,7 +73,7 @@ export default {
     GeneratorSelection
   },
   props: {
-    currentQuestion: Object
+    questions: Array
   },
   data() {
     return {
@@ -75,8 +90,26 @@ export default {
   }
 };
 </script>
-<style scoped>
-.btn {
-  margin: 0 5px;
+<style >
+#validation-message{
+  margin-top: -1.5rem !important;
+}
+p.question-label{
+  margin-bottom: 0.25rem !important;
+}
+
+div.v-input__slot .v-select__selection{
+  color: var(--vscode-input-foreground, #cccccc) !important;
+}
+div.v-select-list div.v-list{
+  background-color: var(--vscode-input-background, #3c3c3c) !important;
+}
+div.v-select-list div.v-list div.v-list-item,
+div.v-select-list div.v-list div.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled)
+{
+  color: var(--vscode-input-foreground, #cccccc) !important;
+}
+div.v-input__slot input, div.v-input__slot textarea {
+  color: var(--vscode-input-foreground, #cccccc) !important;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/QuestionTypes/GeneratorSelection.vue b/frontend/src/components/QuestionTypes/GeneratorSelection.vue
index 234a1b75..35819ac9 100644
--- a/frontend/src/components/QuestionTypes/GeneratorSelection.vue
+++ b/frontend/src/components/QuestionTypes/GeneratorSelection.vue
@@ -104,6 +104,7 @@ export default {
 
 .card-deck {
   margin: 0rem;
+  height: 100%;
 }
 
 .card.generator {
diff --git a/frontend/src/components/QuestionTypes/QuestionCheckbox.vue b/frontend/src/components/QuestionTypes/QuestionCheckbox.vue
index dba43f17..8971b7cf 100644
--- a/frontend/src/components/QuestionTypes/QuestionCheckbox.vue
+++ b/frontend/src/components/QuestionTypes/QuestionCheckbox.vue
@@ -1,31 +1,33 @@
 <template>
-  <div class="question-checkbox-container">
-    <b-form-checkbox-group
-      v-model="selected"
-      stacked
-      :options="options"
-    ></b-form-checkbox-group>
+  <div>
+    <p class="question-label">{{currentQuestion.message}}</p>
+      <div v-for="(option,index) in options" :key="options[index].text">
+        <v-checkbox dense :label="option.text" v-model="option.selected"></v-checkbox>
+      </div>
+    <!-- <div class="question-checkbox-container">
+      <b-form-checkbox-group v-model="selected" stacked :options="options"></b-form-checkbox-group>
+    </div> -->
   </div>
 </template>
 
 <script>
-import _ from "lodash"
+import _ from "lodash";
 
 export default {
   name: "QuestionCheckbox",
   computed: {
     options() {
-      const values = this.currentQuestion.choices 
+      const values = this.currentQuestion.choices;
       if (_.isArray(values)) {
         return _.map(values, value => {
           if (_.has(value, "name") && !_.has(value, "text")) {
-            value.text = value.name
+            value.text = value.name;
           }
-          return value
-        })
+          return value;
+        });
       }
 
-      return []
+      return [];
     }
   },
   props: {
@@ -35,45 +37,33 @@ export default {
     const selected = _.compact(
       _.map(this.currentQuestion.choices, choice => {
         if (choice.checked) {
-          return choice.value
+          return choice.value;
         }
       })
-    )
+    );
 
-    this.currentQuestion.answer = selected
+    this.currentQuestion.answer = selected;
 
     return {
       selected: selected
-    }
+    };
   },
   watch: {
     selected: {
       handler(val) {
-        this.currentQuestion.answer = val
+        this.currentQuestion.answer = val;
       }
     }
   }
-}
+};
 </script>
 
 <style scoped>
-.list-group {
-  margin-bottom: 15px;
-}
-.list-group-item:hover {
-  background: #eee;
-  cursor: pointer;
-}
-
-.selected {
-  background-color: lightblue;
-}
-
-.correct {
-  background-color: lightgreen;
+div.v-input--checkbox{
+  margin-top: 0;
 }
-
-.incorrect {
-  background-color: red;
+div.v-input--checkbox >>> div.v-input__slot{
+  margin-bottom: 0;
+  align-items: flex-start;
 }
 </style>
diff --git a/frontend/src/components/QuestionTypes/QuestionConfirm.vue b/frontend/src/components/QuestionTypes/QuestionConfirm.vue
index 0f3bac6a..5cd2c7ad 100644
--- a/frontend/src/components/QuestionTypes/QuestionConfirm.vue
+++ b/frontend/src/components/QuestionTypes/QuestionConfirm.vue
@@ -1,9 +1,10 @@
 <template>
-  <div class="question-confirm-container">
-    <b-form-radio-group v-model="currentQuestion.answer">
-      <b-form-radio :value="true">Yes</b-form-radio>
-      <b-form-radio :value="false">No</b-form-radio>
-    </b-form-radio-group>
+  <div>
+  <p class="question-label">{{currentQuestion.message}}</p>
+    <v-radio-group v-model="currentQuestion.answer" row>
+      <v-radio label="Yes" :value="true"></v-radio>
+      <v-radio label="No" :value="false"></v-radio>
+    </v-radio-group>
   </div>
 </template>
 
@@ -13,19 +14,11 @@ export default {
   props: {
     currentQuestion: Object
   }
-}
+};
 </script>
 
 <style scoped>
-.list-group {
-  margin-bottom: 15px;
-}
-.list-group-item:hover {
-  background: #eee;
-  cursor: pointer;
-}
-
-.selected {
-  background-color: lightblue;
+div.v-input--radio-group{
+  margin-top: 0;
 }
 </style>
diff --git a/frontend/src/components/QuestionTypes/QuestionEditor.vue b/frontend/src/components/QuestionTypes/QuestionEditor.vue
index 2f596def..7899c941 100644
--- a/frontend/src/components/QuestionTypes/QuestionEditor.vue
+++ b/frontend/src/components/QuestionTypes/QuestionEditor.vue
@@ -1,10 +1,14 @@
 <template>
-  <b-form-textarea
-    v-model="text"
+<div id="question-editor">
+    <p class="question-label">{{currentQuestion.message}}</p>
+    <v-textarea
+          solo
+              v-model="text"
     :placeholder="currentQuestion.default"
     class="yeoman-form-control"
     aria-describedby="validation-message"
-  ></b-form-textarea>
+        ></v-textarea>
+</div>
 </template>
 
 <script>
@@ -30,3 +34,13 @@ export default {
   }
 };
 </script>
+<style scoped>
+#question-editor >>> div.v-input__slot {
+  color: var(--vscode-input-foreground, #cccccc) !important;
+  background-color: var(--vscode-input-background, #3c3c3c) !important;
+  border-radius: unset !important; 
+}
+#question-editor >>> div.v-input__slot input, div.v-input__slot textarea {
+  color: var(--vscode-input-foreground, #cccccc) !important;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/QuestionTypes/QuestionExpand.vue b/frontend/src/components/QuestionTypes/QuestionExpand.vue
index 135114b7..53184f46 100644
--- a/frontend/src/components/QuestionTypes/QuestionExpand.vue
+++ b/frontend/src/components/QuestionTypes/QuestionExpand.vue
@@ -1,12 +1,15 @@
 <template>
-  <div class="question-expand-container">
-    <b-button-group vertical>
-      <b-button
+  <div id="question-expand">
+    <p class="question-label">{{currentQuestion.message}}</p>
+    <v-btn-toggle v-model="icon" tile color="deep-purple accent-3">
+      <v-btn
         v-for="(choice, index) in currentQuestion.choices"
         @click="onClick(choice.value)"
         :key="index"
-      >{{ choice.name }}</b-button>
-    </b-button-group>
+      >
+        <span class="hidden-sm-and-down">{{ choice.name }}</span>
+      </v-btn>
+    </v-btn-toggle>
   </div>
 </template>
 
@@ -18,22 +21,20 @@ export default {
   },
   methods: {
     onClick(answer) {
-      this.currentQuestion.answer = answer
+      this.currentQuestion.answer = answer;
     }
   }
-}
+};
 </script>
 
 <style scoped>
-.list-group {
-  margin-bottom: 15px;
+div#question-expand{
+  margin-bottom: 1.5rem;
 }
-.list-group-item:hover {
-  background: #eee;
-  cursor: pointer;
+div.v-btn-toggle:not(.v-btn-toggle--group) .v-btn.v-btn:not(.v-item--active) {
+  background-color: var(--vscode-input-background, #3c3c3c);
 }
-
-.selected {
-  background-color: lightblue;
+div.v-btn-toggle:not(.v-btn-toggle--group) .v-btn.v-btn.v-item--active {
+  background-color: var(--vscode-input-background, #1976d2);
 }
 </style>
diff --git a/frontend/src/components/QuestionTypes/QuestionInput.vue b/frontend/src/components/QuestionTypes/QuestionInput.vue
index 4bc4f9cf..cc88eadc 100644
--- a/frontend/src/components/QuestionTypes/QuestionInput.vue
+++ b/frontend/src/components/QuestionTypes/QuestionInput.vue
@@ -1,15 +1,20 @@
 <template>
-  <b-form-input
-    v-model="text"
-    :type="type"
-    :placeholder="currentQuestion.default"
-    class="yeoman-form-control"
-    aria-describedby="validation-message"
-  ></b-form-input>
+  <div id="question-input">
+    <p class="question-label">{{currentQuestion.message}}</p>
+    <v-text-field
+      v-model="text"
+      :type="type"
+      :placeholder="currentQuestion.default"
+      class="yeoman-form-control"
+      aria-describedby="validation-message"
+      solo
+      dense
+    ></v-text-field>
+  </div>
 </template>
 
 <script>
-import _ from "lodash"
+import _ from "lodash";
 
 export default {
   name: "QuestionInput",
@@ -19,7 +24,7 @@ export default {
   data() {
     return {
       text: undefined
-    }
+    };
   },
   computed: {
     type() {
@@ -28,17 +33,27 @@ export default {
       // and
       //   https://bootstrap-vue.js.org/docs/components/form-input/
       // const questionType = _.get(this.currentQuestion, "type")
-      const type = this.currentQuestion.type
-      return type === "input" ? "text" : type
+      const type = this.currentQuestion.type;
+      return type === "input" ? "text" : type;
     }
   },
   watch: {
     text: {
       handler(val) {
         this.currentQuestion.answer =
-          _.size(val) === 0 ? _.get(this.currentQuestion, "default") : val
+          _.size(val) === 0 ? _.get(this.currentQuestion, "default") : val;
       }
     }
   }
-}
+};
 </script>
+<style scoped>
+#question-input >>> div.v-input__slot {
+  color: var(--vscode-input-foreground, #cccccc) !important;
+  background-color: var(--vscode-input-background, #3c3c3c) !important;
+  border-radius: unset !important; 
+}
+#question-input >>> div.v-input__slot .v-select__selection{
+  color: var(--vscode-input-foreground, #cccccc) !important;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/QuestionTypes/QuestionList.vue b/frontend/src/components/QuestionTypes/QuestionList.vue
index c0cf508d..ea0cf7d3 100644
--- a/frontend/src/components/QuestionTypes/QuestionList.vue
+++ b/frontend/src/components/QuestionTypes/QuestionList.vue
@@ -1,85 +1,71 @@
 <template>
-  <b-form-select
-    v-model="selected"
-    :options="options"
-    class="custom-yeoman-select"
-    aria-describedby="validation-message"
-  ></b-form-select>
+  <div id="question-list">
+    <p class="question-label">{{currentQuestion.message}}</p>
+    <v-select v-model="selected" :items="options" aria-describedby="validation-message" solo dense></v-select>
+  </div>
 </template>
 
 <script>
-import _ from "lodash"
+import _ from "lodash";
 
 export default {
   name: "QuestionList",
   data() {
     return {
       selected: null
-    }
+    };
   },
   computed: {
     options() {
-      const values = this.currentQuestion.choices
+      const values = this.currentQuestion.choices;
       if (_.isArray(values)) {
         return _.map(values, value => {
           if (_.has(value, "name") && !_.has(value, "text")) {
-            value.text = value.name
+            value.text = value.name;
           } else if (value.type === "separator") {
-            value.text = _.has(value, "line") ? value.line : "──────────────"
-            value.disabled = true
+            value.text = _.has(value, "line") ? value.line : "──────────────";
+            value.disabled = true;
           }
-          return value
-        })
+          return value;
+        });
       }
 
-      return []
+      return [];
     },
     default() {
-      const defaultValue = _.get(this.currentQuestion, "default", 0)
+      const defaultValue = _.get(this.currentQuestion, "default", 0);
       if (_.isNumber(defaultValue)) {
-        const choice = _.get(this.options, "[" + defaultValue + "]")
-        return _.get(choice, "value", _.get(choice, "name", choice))
+        const choice = _.get(this.options, "[" + defaultValue + "]");
+        return _.get(choice, "value", _.get(choice, "name", choice));
       } else if (_.isString(defaultValue)) {
-        return defaultValue
+        return defaultValue;
       }
-      return undefined
+      return undefined;
     }
   },
   watch: {
-    'default': {
+    default: {
       immediate: true,
       handler: function(defaultValue) {
-        this.selected = defaultValue
+        this.selected = defaultValue;
       }
     },
-    'selected': {
+    selected: {
       immediate: true,
       handler: function(selectedvalue) {
-        this.currentQuestion.answer = selectedvalue
+        this.currentQuestion.answer = selectedvalue;
       }
     }
   },
   props: {
     currentQuestion: Object
   }
-}
+};
 </script>
-
 <style scoped>
-.list-group {
-  margin-bottom: 15px;
-}
-.list-group-item:hover {
-  background: var(--vscode-list-hover-background);
-  cursor: pointer;
-}
-
-.selected {
-  background-color: var(--vscode-list-active-selection-background);
-}
-
-.custom-select.custom-yeoman-select {
-  color: var(--vscode-input-foreground, #cccccc);
-  background-color: var(--vscode-input-background, #3c3c3c);
+#question-list >>> div.v-input__slot {
+  color: var(--vscode-input-foreground, #cccccc) !important;
+  background-color: var(--vscode-input-background, #3c3c3c) !important;
+  border-radius: unset !important; 
 }
 </style>
diff --git a/frontend/src/components/Step.vue b/frontend/src/components/Step.vue
index 8a7dddba..3854f6aa 100644
--- a/frontend/src/components/Step.vue
+++ b/frontend/src/components/Step.vue
@@ -1,13 +1,9 @@
 <template>
-  <div>
-    <b-form>
+  <div id="step-component-div">
       <QuestionTypeSelector
-        v-for="(item, index) in currentPrompt.questions"
-        :key="index"
-        :currentQuestion="item"
+        :questions="currentPrompt.questions"
         @generatorSelected="onGeneratorSelected"
       />
-    </b-form>
   </div>
 </template>
 
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 1b2eeea7..6835a780 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -7,7 +7,6 @@ import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap-vue/dist/bootstrap-vue.css';
 
 import vuetify from "./plugins/vuetify";
-import "material-design-icons-iconfont/dist/material-design-icons.css";
 
 Vue.use(BootstrapVue);
 Vue.config.productionTip = false
diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js
index 2f13eb0b..9ca37f2e 100644
--- a/frontend/src/plugins/vuetify.js
+++ b/frontend/src/plugins/vuetify.js
@@ -4,7 +4,8 @@ import "material-design-icons-iconfont/dist/material-design-icons.css";
 import '@mdi/font/css/materialdesignicons.css'
 
 Vue.use(Vuetify, {
-  iconfont: 'mdi'
-})
+    iconfont: 'mdi'
+  })
+
 export default new Vuetify({
-});
\ No newline at end of file
+});
diff --git a/frontend/tests/components/QuestionTypes/QuestionCheckbox.spec.js b/frontend/tests/components/QuestionTypes/QuestionCheckbox.spec.js
index 30c05140..d31c5d13 100644
--- a/frontend/tests/components/QuestionTypes/QuestionCheckbox.spec.js
+++ b/frontend/tests/components/QuestionTypes/QuestionCheckbox.spec.js
@@ -1,6 +1,5 @@
 import QuestionCheckbox from '../../../src/components/QuestionTypes/QuestionCheckbox.vue'
 import { initComponent, destroy } from '../../Utils'
-import {BFormCheckboxGroup} from 'bootstrap-vue'
 
 let wrapper
 
@@ -63,8 +62,8 @@ describe('QuestionCheckbox.vue', () => {
                 }
             })
 
-            const bFormCheckboxGroup = wrapper.find(BFormCheckboxGroup)
-            expect(bFormCheckboxGroup.vm.options[0].text).toBe('testName1')
+            const bFormCheckboxGroup = wrapper.find('v-checkbox-stub')
+            expect(bFormCheckboxGroup.vm.label).toBe('testName1')
         })
 
         test('choices is not array', () => {
@@ -74,8 +73,8 @@ describe('QuestionCheckbox.vue', () => {
                 }
             })
 
-            const bFormCheckboxGroup = wrapper.find(BFormCheckboxGroup)
-            expect(bFormCheckboxGroup.vm.options).toHaveLength(0)
+            const bFormCheckboxGroup = wrapper.find('v-checkbox-stub')
+            expect(bFormCheckboxGroup.vm).toBeUndefined()
         })
     })
 })
diff --git a/frontend/tests/components/QuestionTypes/QuestionExpand.spec.js b/frontend/tests/components/QuestionTypes/QuestionExpand.spec.js
index b15dd923..976f442f 100644
--- a/frontend/tests/components/QuestionTypes/QuestionExpand.spec.js
+++ b/frontend/tests/components/QuestionTypes/QuestionExpand.spec.js
@@ -1,5 +1,4 @@
 import QuestionExpand from '../../../src/components/QuestionTypes/QuestionExpand.vue'
-import {BButton} from 'bootstrap-vue'
 import {initComponent, destroy} from '../../Utils'
 
 let wrapper
@@ -19,7 +18,7 @@ describe('QuestionExpand.vue', () => {
 
         expect(wrapper.vm.currentQuestion.answer).toBeUndefined()
 
-        wrapper.find(BButton).trigger('click')
+        wrapper.find('button').trigger('click')
         await wrapper.vm.$nextTick()
 
         expect(wrapper.vm.currentQuestion.answer).toBe('testValue')
diff --git a/frontend/tests/components/QuestionTypes/QuestionInput.spec.js b/frontend/tests/components/QuestionTypes/QuestionInput.spec.js
index 18461242..50950d26 100644
--- a/frontend/tests/components/QuestionTypes/QuestionInput.spec.js
+++ b/frontend/tests/components/QuestionTypes/QuestionInput.spec.js
@@ -1,5 +1,4 @@
 import QuestionInput from '../../../src/components/QuestionTypes/QuestionInput.vue'
-import {BFormInput} from 'bootstrap-vue'
 import {initComponent, destroy} from '../../Utils'
 
 let wrapper
@@ -18,7 +17,7 @@ describe('QuestionInput.vue', () => {
                 }
             })
             
-            const bFormInput = wrapper.find(BFormInput)
+            const bFormInput = wrapper.find('v-text-field-stub')
             expect(bFormInput.vm.type).toBe('time')
         })
 
@@ -29,7 +28,7 @@ describe('QuestionInput.vue', () => {
                 }
             })
             
-            const bFormInput = wrapper.find(BFormInput)
+            const bFormInput = wrapper.find('v-text-field-stub')
             expect(bFormInput.vm.type).toBe('text')
         })
     })
diff --git a/frontend/tests/components/QuestionTypes/QuestionList.spec.js b/frontend/tests/components/QuestionTypes/QuestionList.spec.js
index a3747d0c..bbedf6d0 100644
--- a/frontend/tests/components/QuestionTypes/QuestionList.spec.js
+++ b/frontend/tests/components/QuestionTypes/QuestionList.spec.js
@@ -1,5 +1,4 @@
 import QuestionList from '../../../src/components/QuestionTypes/QuestionList.vue'
-import {BFormSelect} from 'bootstrap-vue'
 import {initComponent, destroy} from '../../Utils'
 
 let wrapper
@@ -115,7 +114,7 @@ describe('QuestionList.vue', () => {
                 }
             })
             
-            const options = wrapper.find(BFormSelect).vm.options
+            const options = wrapper.find('v-select-stub').vm.items
             expect(options).toHaveLength(0)
         })
 
@@ -131,7 +130,7 @@ describe('QuestionList.vue', () => {
                 }
             })
 
-            const options = wrapper.find(BFormSelect).vm.options
+            const options = wrapper.find('v-select-stub').vm.items
             expect(options).toHaveLength(4)
             expect(options[0].name).toBe('testName1')
             expect(options[0].text).toBe('testText1')

From 8167ba1fa589cc6445c52fb17f1d946b893c68d5 Mon Sep 17 00:00:00 2001
From: i348307 <doron.nahari@sap.com>
Date: Thu, 9 Jan 2020 11:09:31 +0200
Subject: [PATCH 2/8] Support different checkbox data type

---
 frontend/src/components/QuestionTypes/QuestionCheckbox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/QuestionTypes/QuestionCheckbox.vue b/frontend/src/components/QuestionTypes/QuestionCheckbox.vue
index 8971b7cf..845eafed 100644
--- a/frontend/src/components/QuestionTypes/QuestionCheckbox.vue
+++ b/frontend/src/components/QuestionTypes/QuestionCheckbox.vue
@@ -2,7 +2,7 @@
   <div>
     <p class="question-label">{{currentQuestion.message}}</p>
       <div v-for="(option,index) in options" :key="options[index].text">
-        <v-checkbox dense :label="option.text" v-model="option.selected"></v-checkbox>
+        <v-checkbox dense :label="option.text || option" v-model="option.selected"></v-checkbox>
       </div>
     <!-- <div class="question-checkbox-container">
       <b-form-checkbox-group v-model="selected" stacked :options="options"></b-form-checkbox-group>

From 49b14ee8cc4f8871da25d6542510e2f668b48c99 Mon Sep 17 00:00:00 2001
From: Tomer Epstein <tomer.epstein@sap.com>
Date: Thu, 9 Jan 2020 11:17:40 +0200
Subject: [PATCH 3/8] Align next button + cards + inputs + overall

---
 frontend/src/App.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 0d4ff9a6..4417647b 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,13 +1,12 @@
 <template>
-  <v-app id="app">
-        <loading :active.sync="isLoading"
+  <v-app id="app" class="vld-parent">
+    <loading :active.sync="isLoading"
              :is-full-page="true"
              :height="128"
              :width="128"
              :color="isLoadingColor"
              loader="dots">
     </loading>
-    <div v-if="!prompts.length" class="loading">{{ messages.generators_loading }}</div>
 
     <Header
       v-if="prompts.length"

From 9c5af7150d92432fe29f87da2fe752c79165eef1 Mon Sep 17 00:00:00 2001
From: i348307 <doron.nahari@sap.com>
Date: Thu, 9 Jan 2020 12:56:11 +0200
Subject: [PATCH 4/8] toggle color fix

---
 frontend/src/components/QuestionTypes/QuestionExpand.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/QuestionTypes/QuestionExpand.vue b/frontend/src/components/QuestionTypes/QuestionExpand.vue
index 53184f46..575406d3 100644
--- a/frontend/src/components/QuestionTypes/QuestionExpand.vue
+++ b/frontend/src/components/QuestionTypes/QuestionExpand.vue
@@ -35,6 +35,6 @@ div.v-btn-toggle:not(.v-btn-toggle--group) .v-btn.v-btn:not(.v-item--active) {
   background-color: var(--vscode-input-background, #3c3c3c);
 }
 div.v-btn-toggle:not(.v-btn-toggle--group) .v-btn.v-btn.v-item--active {
-  background-color: var(--vscode-input-background, #1976d2);
+  background-color: var(--vscode-button-background, #1976d2);
 }
 </style>

From 97f007bf89f0b54f1476be6e87b64583ddaa9e1c Mon Sep 17 00:00:00 2001
From: i348307 <doron.nahari@sap.com>
Date: Thu, 9 Jan 2020 13:45:49 +0200
Subject: [PATCH 5/8] fix button text color

---
 frontend/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 4417647b..cf44774b 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -445,7 +445,7 @@ div.bottom-right-col
   .theme--light.v-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined) {
   background-color: var(--vscode-button-background, #0e639c);
   border-color: var(--vscode-button-background, #0e639c);
-  color: var(--vscode-button-foreground, white);
+  color: #cccccc !important;
   border-radius: 0px;
   font-size: 0.8rem;
   padding: 0.2rem 0.6rem;

From 6873f798b5a20bf1e9e604c7968853f1f43e8610 Mon Sep 17 00:00:00 2001
From: i348307 <doron.nahari@sap.com>
Date: Thu, 9 Jan 2020 14:49:41 +0200
Subject: [PATCH 6/8] done buttons

---
 frontend/src/components/Done.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Done.vue b/frontend/src/components/Done.vue
index 226a28f3..30ca10ba 100644
--- a/frontend/src/components/Done.vue
+++ b/frontend/src/components/Done.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="done-component">
     <b-jumbotron class="jumbo">
       <p>
         <b-img class="imgDone" src="https://icons-for-free.com/iconfiles/png/128/success-1319971786207747160.png"></b-img>
@@ -12,10 +12,10 @@
         <b-row>
           <b-col>Where would you like to open the project?</b-col>
           <b-col cols="12" md="auto">
-            <b-button class="btn" :data-command-params="donePath" @click="close">Close</b-button>
+            <v-btn class="btn" :data-command-params="donePath" @click="close">Close</v-btn>
           </b-col>
           <b-col cols="12" md="auto">
-            <b-button class="btn" data-command-name="vscode.openFolder" :data-command-params="donePath" @click="executeCommand">New Workspace</b-button>
+            <v-btn class="btn" data-command-name="vscode.openFolder" :data-command-params="donePath" @click="executeCommand">New Workspace</v-btn>
           </b-col>
         </b-row>
       </b-container>
@@ -67,4 +67,17 @@ img.imgDone {
   width: 1.5rem;
   height: 1.5rem;
 }
+.jumbo button {
+  background-color: var(--vscode-button-background, #0e639c) !important;
+  border-color: var(--vscode-button-background, #0e639c) !important;
+  color: #cccccc !important;
+  border-radius: 0px !important;
+  font-size: 0.8rem !important;
+  padding: 0.2rem 0.6rem !important;
+  height: 2rem !important; 
+}
+.jumbo button {
+  background-color: var(--vscode-button-hoverBackground, #1177bb) !important;
+  border-color: var(--vscode-button-hoverBackground, #1177bb) !important;
+}
 </style>
\ No newline at end of file

From 9f5599fd23e419c097c1109901d940d8425ba57d Mon Sep 17 00:00:00 2001
From: i348307 <doron.nahari@sap.com>
Date: Thu, 9 Jan 2020 14:56:15 +0200
Subject: [PATCH 7/8] tests

---
 frontend/tests/components/Done.spec.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/tests/components/Done.spec.js b/frontend/tests/components/Done.spec.js
index 944320a0..e9cdaa32 100644
--- a/frontend/tests/components/Done.spec.js
+++ b/frontend/tests/components/Done.spec.js
@@ -1,6 +1,6 @@
 import {initComponent, destroy} from '../Utils'
 import Done from '../../src/components/Done.vue'
-import { BJumbotron, BButton, BContainer } from 'bootstrap-vue'
+import { BJumbotron, BContainer } from 'bootstrap-vue'
 import _ from 'lodash'
 
 
@@ -45,7 +45,7 @@ describe('Done.vue', () => {
             expect(clickEvent.currentTarget.dataset.commandName).toBe('workbench.action.closeActiveEditor')
         })
         wrapper.setMethods({executeCommand: executeCommandMock})
-        wrapper.find(BButton).trigger('click')
+        wrapper.find('button').trigger('click')
         expect(executeCommandMock).toHaveBeenCalled()
     })
 
@@ -55,7 +55,7 @@ describe('Done.vue', () => {
             postMessage: jest.fn()
         }
         wrapper = initComponent(Done, { doneMessage: testDoneMessage, donePath: 'testDonePath', isInVsCode: true}, true)
-        const buttons = wrapper.findAll(BButton)
+        const buttons = wrapper.findAll('button')
         const nWorkspaceButton = buttons.wrappers[1]
         nWorkspaceButton.trigger('click')
         expect(window.vscode.postMessage).toHaveBeenCalled()

From 9b83ab7cddaa28e129707727a1064d9c4d279ef3 Mon Sep 17 00:00:00 2001
From: Tomer Epstein <tomer.epstein@sap.com>
Date: Thu, 9 Jan 2020 15:55:44 +0200
Subject: [PATCH 8/8] --vscode-editorWidget-background, #252526

---
 frontend/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index cf44774b..3a504053 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -427,7 +427,7 @@ div.consoleClassVisible .v-footer {
   padding: 0 !important;
 }
 .bottom-right-col {
-  background: var(--vscode-titleBar-activeBackground, #383838);
+  background: var(--vscode-editorWidget-background, #252526);
   position: relative;
   overflow: hidden;
 }