fix: re-style exploratory session

src/components/ExploratoryTestWrapper.vue

@@ -1,39 +1,41 @@
 <template>
-  <v-container style="height: 100%">
+  <div class="pa-6" style="height: 100%">
     <div class="top">
       <v-btn
         class="text-capitalize pa-0 back-btn"
         plain
-        rounded
+        color="#475467"
         solid
         v-shortkey="backHotkey"
         @shortkey="handleResetConfirmDialog"
         @click="handleResetConfirmDialog"
       >
-        <v-icon class="ma-0">mdi-chevron-left</v-icon>
-        {{ $tc("caption.back", 1) }}
+        <div class="d-flex justify-center align-center">
+          <v-icon class="ma-0">mdi-chevron-left</v-icon>
+          <span class="font-weight-semibold">{{ $tc("caption.back", 1) }}</span>
+        </div>
       </v-btn>
     </div>
-    <v-row class="text-left" style="height: 100%">
-      <v-col cols="12" style="height: 100%; overflow-y: auto">
-        <div class="title title-text mb-4">
+    <div class="text-left" style="height: 100%">
+      <div style="height: 100%; overflow-y: auto">
+        <div class="fs-30 font-weight-semibold mt-4 mb-6">
           {{ $tc("caption.exploratory_session", 1) }}
         </div>
-        <v-tabs
-          class="charter-tab"
-          hide-slider
-          :background-color="currentTheme.primary"
-          :color="currentTheme.white"
-          :height="32"
-        >
+        <v-tabs class="charter-tab mb-5" hide-slider :height="40">
           <v-tab
-            ripple
-            class="text-capitalize"
+            plain
+            link
+            class="text-capitalize font-weight-semibold fs-16"
             @click="activeTab = 'textDescription'"
           >
             {{ $tc("caption.text_description", 1) }}
           </v-tab>
-          <v-tab ripple class="text-capitalize" @click="activeTab = 'mindMap'">
+          <v-tab
+            plain
+            link
+            class="text-capitalize font-weight-semibold fs-16"
+            @click="activeTab = 'mindMap'"
+          >
             {{ $tc("caption.mind_map", 1) }}
           </v-tab>
         </v-tabs>
@@ -75,29 +77,27 @@
             </v-col>
           </v-tab-item>
         </v-tabs-items>
-      </v-col>
-    </v-row>
+      </div>
+    </div>
     <ResetConfirmDialog
       v-model="resetConfirmDialog"
       ref="resetConfirmDialog"
       :text="$t('message.confirm_back')"
       @confirm="back"
       @cancel="resetConfirmDialog = false"
     />
-  </v-container>
+  </div>
 </template>
 
 <script>
-import { VContainer, VRow, VCol } from "vuetify/lib/components";
+import { VCol } from "vuetify/lib/components";
 import TestSettingWrapper from "./TestSettingWrapper.vue";
 import { mapGetters } from "vuex";
 import ResetConfirmDialog from "./dialogs/ResetConfirmDialog.vue";
 
 export default {
   name: "ExploratoryTestWrapper",
   components: {
-    VContainer,
-    VRow,
     VCol,
     ResetConfirmDialog,
     TestSettingWrapper,
@@ -186,4 +186,14 @@ export default {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 }
+.charter-tab .v-tab {
+  color: #667085 !important;
+}
+.charter-tab .v-tab.v-tab--active {
+  color: #0a26c3 !important;
+  border-bottom: solid 2px #0a26c3;
+}
+.charter-tab {
+  border-bottom: solid 1px #eaecf0;
+}
 </style>

src/components/TestSettingWrapper.vue

@@ -1,10 +1,10 @@
 <template>
-  <v-container>
-    <v-row class="text-left">
-      <v-col cols="12">
-        <div class="title">
+  <div>
+    <div class="text-left">
+      <div>
+        <div>
           <div
-            class="subtitle-2 label-text"
+            class="d-flex fs-14 text-theme-label mb-1 font-weight-medium"
             :style="{ color: currentTheme.secondary }"
             v-shortkey="titleHotkey"
             @shortkey="$hotkeyHelpers.focusField($refs, 'titleTextField')"
@@ -14,9 +14,12 @@
           <v-text-field
             :placeholder="$tc('caption.session_name', 1)"
             autofocus
-            outlined
+            class="rounded-lg"
+            :background-color="inputBg"
             dense
-            :height="35"
+            height="40px"
+            flat
+            solo
             :color="currentTheme.secondary"
             :loading="titleLoading"
             :append-icon="
@@ -44,12 +47,12 @@
         </div>
         <div class="mt-4">
           <div
-            class="subtitle-2 label-text"
+            class="d-flex fs-14 text-theme-label mb-1 font-weight-medium"
             :style="{ color: currentTheme.secondary }"
             v-shortkey="charterHotkey"
             @shortkey="$hotkeyHelpers.focusField($refs, 'charter')"
           >
-            {{ $tc("caption.charter", 1) }}
+            {{ $tc("caption.charter_description", 1) }}
           </div>
           <div v-if="!isMindmap">
             <v-card v-if="charterLoading" class="loading-wrapper" outlined flat>
@@ -61,6 +64,7 @@
               ></v-progress-circular>
             </v-card>
             <v-tiptap
+              class="tiptap-theme"
               v-else
               :value="charter.content"
               :placeholder="$t('message.describe_test_charter')"
@@ -217,15 +221,16 @@
             hide-details="true"
           />
         </div>
-      </v-col>
-    </v-row>
-  </v-container>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import { VContainer, VRow, VCol, VTextField } from "vuetify/lib/components";
+import { VTextField } from "vuetify/lib/components";
 import NewMindmapEditor from "./NewMindmapEditor.vue";
 import { debounce } from "lodash";
+import theme from "../mixins/theme";
 
 import {
   DEFAULT_CHARTER_MAP_NODES,
@@ -239,9 +244,6 @@ import { mapGetters } from "vuex";
 export default {
   name: "TestSettingWrapper",
   components: {
-    VContainer,
-    VRow,
-    VCol,
     VTextField,
     NewMindmapEditor,
   },
@@ -251,6 +253,7 @@ export default {
       default: () => false,
     },
   },
+  mixins: [theme],
   data() {
     return {
       title: this.$store.state.case.title,

src/components/dialogs/ResetConfirmDialog.vue

@@ -1,53 +1,70 @@
 <template>
-  <v-dialog v-bind="$attrs" v-on="$listeners" persistent width="350">
-    <v-sheet outlined rounded>
-      <v-card :style="{ backgroundColor: currentTheme.background }">
-        <LogoWrapper :height="20" :width="60" />
-        <v-card-text class="text" :style="{ color: currentTheme.secondary }">
-          {{ text || $t("message.confirm_delete") }}
+  <v-dialog v-bind="$attrs" v-on="$listeners" persistent width="480">
+    <v-sheet outlined class="rounded-lg">
+      <v-card :style="{ backgroundColor: mainBg }">
+        <v-card-text class="text pt-0">
+          <div class="d-flex justify-space-between align-start">
+            <p
+              class="font-weight-bold text-h6 text-sm-h5 text-start black--text"
+            >
+              {{ $t("message.go_back") }}
+            </p>
+            <button @click="handleCancel">
+              <v-icon>mdi-close</v-icon>
+            </button>
+          </div>
+          <div>
+            <p class="fs-14">{{ $t("message.session_lost") }}</p>
+          </div>
         </v-card-text>
         <v-card-actions>
-          <v-btn
-            small
-            ref="confirmBtn"
-            :color="currentTheme.primary"
-            :style="{ color: currentTheme.white }"
-            class="text-capitalize btn"
-            v-shortkey="confirmHotkey"
-            @shortkey="handleConfirm()"
-            @click="handleConfirm()"
-          >
-            {{ $tc("confirm", 1) }}
-          </v-btn>
-          <v-btn
-            small
-            :color="currentTheme.background"
-            class="text-capitalize btn"
-            :style="{ color: currentTheme.secondary }"
-            v-shortkey="cancelHotkey"
-            @shortkey="handleCancel()"
-            @click="handleCancel()"
-          >
-            {{ $tc("cancel", 1) }}
-          </v-btn>
+          <div class="row">
+            <v-col cols="6">
+              <v-btn
+                :color="btnBg"
+                depressed
+                class="text-capitalize rounded-lg"
+                v-shortkey="cancelHotkey"
+                @shortkey="handleCancel()"
+                @click="handleCancel()"
+                width="100%"
+                height="40px"
+              >
+                {{ $tc("cancel", 1) }}
+              </v-btn>
+            </v-col>
+            <v-col cols="6">
+              <v-btn
+                ref="confirmBtn"
+                :color="currentTheme.primary"
+                depressed
+                class="text-capitalize rounded-lg white--text"
+                v-shortkey="confirmHotkey"
+                @shortkey="handleConfirm()"
+                @click="handleConfirm()"
+                width="100%"
+                height="40px"
+              >
+                {{ $tc("confirm", 1) }}
+              </v-btn>
+            </v-col>
+          </div>
         </v-card-actions>
       </v-card>
     </v-sheet>
   </v-dialog>
 </template>
 
 <script>
-import LogoWrapper from "../LogoWrapper.vue";
 import { mapGetters } from "vuex";
+import theme from "../../mixins/theme";
 export default {
   name: "ResetConfirmDialog",
-  components: {
-    LogoWrapper,
-  },
   props: {
     title: String,
     text: String,
   },
+  mixins: [theme],
   data() {
     return {};
   },
@@ -61,13 +78,6 @@ export default {
     cancelHotkey() {
       return this.$hotkeyHelpers.findBinding("general.cancel", this.hotkeys);
     },
-    currentTheme() {
-      if (this.$vuetify.theme.dark) {
-        return this.$vuetify.theme.themes.dark;
-      } else {
-        return this.$vuetify.theme.themes.light;
-      }
-    },
   },
   methods: {
     handleCancel() {

src/components/dialogs/SourcePickerDialog.vue

@@ -42,19 +42,18 @@
         </div>
         <div class="footer">
           <v-btn
-            class="text-capitalize"
-            small
-            :color="currentTheme.background"
-            :style="{ color: currentTheme.secondary }"
+            class="text-capitalize rounded-lg"
+            :color="btnBg"
             v-shortkey="cancelHotkey"
             @shortkey="handleClose()"
             @click="handleClose()"
+            depressed
           >
             {{ $tc("caption.cancel", 1) }}
           </v-btn>
           <v-btn
-            class="text-capitalize"
-            small
+            class="text-capitalize rounded-lg"
+            depressed
             :color="currentTheme.primary"
             :style="{ color: currentTheme.white }"
             :disabled="!activeSource"
@@ -112,6 +111,9 @@ export default {
         return this.$vuetify.theme.themes.light;
       }
     },
+    btnBg() {
+      return this.$vuetify.theme.dark ? "#4B5563" : "#F2F4F7";
+    },
   },
   methods: {
     handleClose() {

src/locales/en.json

@@ -210,6 +210,7 @@
     "elapsed_time": "Elapsed time",
     "remaining_time": "Remaining time",
     "charter": "Charter",
+    "charter_description": "Charter description",
     "preconditions": "Preconditions",
     "editor": "Editor",
     "time_limit": "Time limit",
@@ -365,6 +366,8 @@
     "confirm_delete": "Are you sure you want to delete?",
     "confirm_reset": "Are you sure you want to reset?",
     "confirm_back": "Are you sure you want to go back? Your session data will be lost",
+    "go_back": "Are you sure you want to go back?",
+    "session_lost": "Your session data will be lost",
     "continue_last_session": "Do you want to continue your last session?",
     "confirm_save_progress": "Do you want save current progress?",
     "confirm_proceed_session_time": "Do you want to proceed with testing or end the test session?",

src/mixins/theme.js

@@ -0,0 +1,20 @@
+export default {
+  computed: {
+    currentTheme() {
+      if (this.$vuetify.theme.dark) {
+        return this.$vuetify.theme.themes.dark;
+      } else {
+        return this.$vuetify.theme.themes.light;
+      }
+    },
+    mainBg() {
+      return this.$vuetify.theme.dark ? "#374151" : this.currentTheme.white;
+    },
+    btnBg() {
+      return this.$vuetify.theme.dark ? "#4B5563" : "#F2F4F7";
+    },
+    inputBg() {
+      return this.$vuetify.theme.dark ? "#4B5563" : "#F9F9FB";
+    },
+  },
+};