Merge branch 'master' into i18n

README.md

@@ -360,13 +360,13 @@ This project is licensed under the [MIT License](https://opensource.org/licenses
 
 <p>
 
-[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-252628?logo=Postwoman)](https://postwoman.io)
+[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-121212?logo=Postwoman)](https://postwoman.io)
 <details>
 <summary>Default</summary>
 <p>
 
 ```
-[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-252628?logo=Postwoman)](https://postwoman.io)
+[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-121212?logo=Postwoman)](https://postwoman.io)
 ```
 </p>
 </details>

assets/css/styles.scss

@@ -144,6 +144,8 @@ footer {
 
 .nav-first {
   z-index: 1;
+  height: 100vh;
+  padding: 0 8px;
 }
 
 .main {
@@ -183,7 +185,7 @@ nav.primary-nav {
     background-color: var(--bg-light-color);
     color: var(--fg-light-color);
     fill: var(--fg-light-color);
-    margin: 8px;
+    margin: 8px 0;
     transition: all 0.2s ease-in-out;
 
     &:hover {
@@ -228,7 +230,7 @@ nav.secondary-nav {
         border-radius: 50%;
         background-color: var(--bg-dark-color);
         color: var(--fg-light-color);
-        margin: 8px;
+        margin: 8px 0;
 
         &:hover {
           color: var(--fg-color);
@@ -255,7 +257,7 @@ h3 {
 }
 
 .tooltip {
-  $bgcolor: var(--brd-color);
+  $bgcolor: var(--bg-color);
   $fgcolor: var(--fg-color);
   display: block !important;
   z-index: 10000;
@@ -548,11 +550,31 @@ code {
   border-radius: 8px;
 }
 
+.select-wrapper {
+  position: relative;
+
+  &:after {
+    display: inline-block;
+    position: absolute;
+    pointer-events: none;
+    content: "\e313";
+    font-family: "Material Icons";
+    top: 14px;
+    right: 14px;
+  }
+}
+
 select {
   height: 37px;
-  line-height: 37px;
   background-color: var(--bg-dark-color);
   cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  &::-ms-expand {
+    display: none;
+  }
 }
 
 option {
@@ -781,18 +803,23 @@ input[type="radio"]:checked + label + .tab {
 }
 
 .toasted-container .toasted {
-  justify-content: start !important;
+  justify-content: flex-start !important;
 }
 
 .toasted.info {
   background-color: var(--ac-color) !important;
   color: var(--act-color) !important;
+  font-weight: 700 !important;
 }
 
 .toasted.bubble .action {
   color: inherit !important;
 }
 
+.toasted .action {
+  margin-left: auto !important;
+}
+
 .page-columns {
   display: flex;
   flex: 1;
@@ -824,6 +851,8 @@ input[type="radio"]:checked + label + .tab {
     position: fixed;
     top: auto;
     bottom: 0;
+    height: auto;
+    padding: 0;
     width: 100%;
     background-color: var(--bg-color);
     transition: all 0.2s ease-in-out;
@@ -836,6 +865,7 @@ input[type="radio"]:checked + label + .tab {
 
     a {
       background-color: transparent;
+      margin: 8px;
 
       &.nuxt-link-exact-active {
         background-color: transparent;
@@ -889,7 +919,7 @@ input[type="radio"]:checked + label + .tab {
     margin-left: 0;
   }
 
-  .toasted:last-child {
+  .toasted-container {
     margin-bottom: 68px;
   }
 }

assets/css/themes.scss

@@ -9,75 +9,71 @@
 // Dark is the default theme variant.
 @mixin darkTheme {
   // Background color
-  --bg-color: rgb(37, 38, 40);
+  --bg-color: rgba(18, 18, 18, 1);
   // Light Background color
-  --bg-light-color: rgba(255, 255, 255, 0.05);
+  --bg-light-color: rgba(255, 255, 255, 0.02);
-  //Dark Background color
+  // Dark Background color
   --bg-dark-color: rgba(0, 0, 0, 0.1);
-  // Auto-complete color
-  --atc-color: rgb(49, 49, 55);
   // Text color
-  --fg-color: rgb(247, 248, 248);
+  --fg-color: rgba(255, 255, 255, 1);
   // Light Text color
-  --fg-light-color: rgb(150, 155, 160);
+  --fg-light-color: rgba(255, 255, 255, 0.5);
   // Border color
-  --brd-color: rgb(48, 47, 55);
+  --brd-color: rgba(255, 255, 255, 0.05);
   // Error color
   --err-color: rgba(255, 255, 255, 0.05);
   // Acent color
-  --ac-color: #50fa7b;
+  --ac-color: rgba(80, 250, 123, 1);
   // Active text color
-  --act-color: rgb(37, 38, 40);
+  --act-color: rgba(18, 18, 18, 1);
+  // Auto-complete color
+  --atc-color: rgba(18, 18, 18, 1);
 }
 
 @mixin lightTheme {
-  // Dark Background color
+  // Background color
-  --bg-dark-color: #eeeeee;
+  --bg-color: rgba(255, 255, 255, 1);
   // Light Background color
   --bg-light-color: rgba(0, 0, 0, 0.02);
-  //Dark Background color
+  // Dark Background color
-  --bg-dark-color: rgba(0, 0, 0, 0.05);
+  --bg-dark-color: rgba(0, 0, 0, 0.02);
-  // Background color
-  --bg-color: #ffffff;
-  // Auto-complete color
-  --atc-color: #ebebeb;
   // Text color
-  --fg-color: #525252;
+  --fg-color: rgba(0, 0, 0, 1);
   // Light Text color
-  --fg-light-color: rgb(150, 155, 160);
+  --fg-light-color: rgba(0, 0, 0, 0.6);
   // Border color
-  --brd-color: #eeeeed;
+  --brd-color: rgba(0, 0, 0, 0.1);
   // Error color
-  --err-color: rgba(0, 0, 0, 0.02);
+  --err-color: rgba(0, 0, 0, 0.1);
   // Acent color
-  --ac-color: #57b5f9;
+  --ac-color: rgba(80, 250, 123, 1);
   // Active text color
-  --act-color: #ffffff;
+  --act-color: rgba(255, 255, 255, 1);
+  // Auto-complete color
+  --atc-color: rgba(255, 255, 255, 1);
 }
 
 @mixin blackTheme {
-  // Dark Background color
-  --bg-dark-color: rgb(8, 8, 8);
-  // Light Background color
-  --bg-light-color: rgba(255, 255, 255, 0.02);
-  //Dark Background color
-  --bg-dark-color: rgba(255, 255, 255, 0.02);
   // Background color
-  --bg-color: #000000;
+  --bg-color: rgba(0, 0, 0, 1);
-  // Auto-complete color
+  // Light Background color
-  --atc-color: rgb(18, 18, 18);
+  --bg-light-color: rgba(255, 255, 255, 0);
+  // Dark Background color
+  --bg-dark-color: rgba(255, 255, 255, 0.02);
   // Text color
-  --fg-color: rgb(250, 250, 250);
+  --fg-color: rgba(255, 255, 255, 1);
   // Light Text color
-  --fg-light-color: rgb(100, 100, 100);
+  --fg-light-color: rgba(255, 255, 255, 0.5);
   // Border color
-  --brd-color: rgb(16, 16, 16);
+  --brd-color: rgba(255, 255, 255, 0.05);
   // Error color
-  --err-color: rgba(255, 255, 255, 0.02);
+  --err-color: rgba(255, 255, 255, 0.05);
   // Acent color
-  --ac-color: #50fa7b;
+  --ac-color: rgba(80, 250, 123, 1);
   // Active text color
-  --act-color: #000000;
+  --act-color: rgba(0, 0, 0, 1);
+  // Auto-complete color
+  --atc-color: rgba(0, 0, 0, 1);
 }
 
 :root {

components/ace-editor.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-const DEFAULT_THEME = "dracula";
+const DEFAULT_THEME = "twilight";
 
 import ace from "ace-builds";
 import "ace-builds/webpack-resolver";

components/autocomplete.vue

@@ -50,6 +50,7 @@
     border-radius: 0 0 8px 8px;
     z-index: 9999;
     transition: transform 0.2s ease-out;
+    box-shadow: 0 5px 30px rgba(black, 0.1);
 
     li {
       width: 100%;

components/collections/collection.vue

@@ -44,11 +44,11 @@
       <ul>
         <li v-for="(folder, index) in collection.folders" :key="folder.name">
           <folder
-            v-bind:folder="folder"
+            :folder="folder"
-            v-bind:folderIndex="index"
+            :folderIndex="index"
-            v-bind:collection-index="collectionIndex"
+            :collection-index="collectionIndex"
-            v-on:edit-folder="editFolder(collectionIndex, folder, index)"
+            @edit-folder="editFolder(collectionIndex, folder, index)"
-            v-on:edit-request="$emit('edit-request', $event)"
+            @edit-request="$emit('edit-request', $event)"
           />
         </li>
         <li
@@ -62,11 +62,11 @@
       <ul>
         <li v-for="(request, index) in collection.requests" :key="index">
           <request
-            v-bind:request="request"
+            :request="request"
-            v-bind:collection-index="collectionIndex"
+            :collection-index="collectionIndex"
-            v-bind:folder-index="-1"
+            :folder-index="-1"
-            v-bind:request-index="index"
+            :request-index="index"
-            v-on:edit-request="
+            @edit-request="
               $emit('edit-request', {
                 request,
                 collectionIndex,
@@ -74,7 +74,7 @@
                 requestIndex: index
               })
             "
-          ></request>
+          />
         </li>
       </ul>
     </div>

components/collections/editCollection.vue

@@ -20,7 +20,7 @@
           <input
             type="text"
             v-model="name"
-            v-bind:placeholder="editingCollection.name"
+            :placeholder="editingCollection.name"
             @keyup.enter="saveCollection"
           />
         </li>

components/collections/editFolder.vue

@@ -20,7 +20,7 @@
           <input
             type="text"
             v-model="name"
-            v-bind:placeholder="folder.name"
+            :placeholder="folder.name"
             @keyup.enter="editFolder"
           />
         </li>

components/collections/editRequest.vue

@@ -26,35 +26,47 @@
             :placeholder="request.name"
           />
           <label for="selectCollection">Collection</label>
-          <select
+          <span class="select-wrapper">
-            type="text"
+            <select
-            id="selectCollection"
+              type="text"
-            v-model="requestUpdateData.collectionIndex"
+              id="selectCollection"
-          >
+              v-model="requestUpdateData.collectionIndex"
-            <option :key="undefined" :value="undefined" hidden disabled selected
-              >Current Collection</option
             >
-            <option
+              <option
-              v-for="(collection, index) in $store.state.postwoman.collections"
+                :key="undefined"
-              :key="index"
+                :value="undefined"
-              :value="index"
+                hidden
-              >{{ collection.name }}</option
+                disabled
-            >
+                selected
-          </select>
+                >Current Collection</option
+              >
+              <option
+                v-for="(collection, index) in $store.state.postwoman
+                  .collections"
+                :key="index"
+                :value="index"
+              >
+                {{ collection.name }}
+              </option>
+            </select>
+          </span>
           <label for="selectFolder">Folder</label>
-          <select
+          <span class="select-wrapper">
-            type="text"
+            <select
-            id="selectFolder"
+              type="text"
-            v-model="requestUpdateData.folderIndex"
+              id="selectFolder"
-          >
+              v-model="requestUpdateData.folderIndex"
-            <option :key="undefined" :value="undefined">/</option>
-            <option
-              v-for="(folder, index) in folders"
-              :key="index"
-              :value="index"
-              >{{ folder.name }}</option
             >
-          </select>
+              <option :key="undefined" :value="undefined">/</option>
+              <option
+                v-for="(folder, index) in folders"
+                :key="index"
+                :value="index"
+              >
+                {{ folder.name }}
+              </option>
+            </select>
+          </span>
         </li>
       </ul>
     </div>

components/collections/folder.vue

@@ -34,11 +34,11 @@
       <ul>
         <li v-for="(request, index) in folder.requests" :key="index">
           <request
-            v-bind:request="request"
+            :request="request"
-            v-bind:collection-index="collectionIndex"
+            :collection-index="collectionIndex"
-            v-bind:folder-index="folderIndex"
+            :folder-index="folderIndex"
-            v-bind:request-index="index"
+            :request-index="index"
-            v-on:edit-request="
+            @edit-request="
               $emit('edit-request', {
                 request,
                 collectionIndex,

components/collections/index.vue

@@ -6,40 +6,40 @@ TODO:
 <template>
   <div class="collections-wrapper">
     <addCollection
-      v-bind:show="showModalAdd"
+      :show="showModalAdd"
-      v-on:hide-modal="displayModalAdd(false)"
+      @hide-modal="displayModalAdd(false)"
     />
     <editCollection
-      v-bind:show="showModalEdit"
+      :show="showModalEdit"
-      v-bind:editingCollection="editingCollection"
+      :editingCollection="editingCollection"
-      v-bind:editingCollectionIndex="editingCollectionIndex"
+      :editingCollectionIndex="editingCollectionIndex"
-      v-on:hide-modal="displayModalEdit(false)"
+      @hide-modal="displayModalEdit(false)"
     />
     <addFolder
-      v-bind:show="showModalAddFolder"
+      :show="showModalAddFolder"
-      v-bind:collection="editingCollection"
+      :collection="editingCollection"
-      v-bind:collectionIndex="editingCollectionIndex"
+      :collectionIndex="editingCollectionIndex"
-      v-on:hide-modal="displayModalAddFolder(false)"
+      @hide-modal="displayModalAddFolder(false)"
     />
     <editFolder
-      v-bind:show="showModalEditFolder"
+      :show="showModalEditFolder"
-      v-bind:collection="editingCollection"
+      :collection="editingCollection"
-      v-bind:collectionIndex="editingCollectionIndex"
+      :collectionIndex="editingCollectionIndex"
-      v-bind:folder="editingFolder"
+      :folder="editingFolder"
-      v-bind:folderIndex="editingFolderIndex"
+      :folderIndex="editingFolderIndex"
-      v-on:hide-modal="displayModalEditFolder(false)"
+      @hide-modal="displayModalEditFolder(false)"
     />
     <editRequest
-      v-bind:show="showModalEditRequest"
+      :show="showModalEditRequest"
-      v-bind:collectionIndex="editingCollectionIndex"
+      :collectionIndex="editingCollectionIndex"
-      v-bind:folderIndex="editingFolderIndex"
+      :folderIndex="editingFolderIndex"
-      v-bind:request="editingRequest"
+      :request="editingRequest"
-      v-bind:requestIndex="editingRequestIndex"
+      :requestIndex="editingRequestIndex"
-      v-on:hide-modal="displayModalEditRequest(false)"
+      @hide-modal="displayModalEditRequest(false)"
     />
     <importExportCollections
-      v-bind:show="showModalImportExport"
+      :show="showModalImportExport"
-      v-on:hide-modal="displayModalImportExport(false)"
+      @hide-modal="displayModalImportExport(false)"
     />
 
     <div class="flex-wrap">
@@ -78,13 +78,13 @@ TODO:
       <ul>
         <li v-for="(collection, index) in collections" :key="collection.name">
           <collection
-            v-bind:collection-index="index"
+            :collection-index="index"
-            v-bind:collection="collection"
+            :collection="collection"
-            v-on:edit-collection="editCollection(collection, index)"
+            @edit-collection="editCollection(collection, index)"
-            v-on:add-folder="addFolder(collection, index)"
+            @add-folder="addFolder(collection, index)"
-            v-on:edit-folder="editFolder($event)"
+            @edit-folder="editFolder($event)"
-            v-on:edit-request="editRequest($event)"
+            @edit-request="editRequest($event)"
-          ></collection>
+          />
         </li>
         <li v-if="collections.length === 0">
           <label>Collections are empty</label>

components/collections/saveRequestAs.vue

@@ -22,53 +22,68 @@
             type="text"
             id="selectLabel"
             v-model="requestData.name"
-            v-bind:placeholder="defaultRequestName"
+            :placeholder="defaultRequestName"
             @keyup.enter="saveRequestAs"
           />
           <label for="selectCollection">Collection</label>
-          <select
+          <span class="select-wrapper">
-            type="text"
+            <select
-            id="selectCollection"
+              type="text"
-            v-model="requestData.collectionIndex"
+              id="selectCollection"
-          >
+              v-model="requestData.collectionIndex"
-            <option :key="undefined" :value="undefined" hidden disabled selected
-              >Select a Collection</option
             >
-            <option
+              <option
-              v-for="(collection, index) in $store.state.postwoman.collections"
+                :key="undefined"
-              :key="index"
+                :value="undefined"
-              :value="index"
+                hidden
-              >{{ collection.name }}</option
+                disabled
-            >
+                selected
-          </select>
+                >Select a Collection</option
+              >
+              <option
+                v-for="(collection, index) in $store.state.postwoman
+                  .collections"
+                :key="index"
+                :value="index"
+              >
+                {{ collection.name }}
+              </option>
+            </select>
+          </span>
           <label for="selectFolder">Folder</label>
-          <select
+          <span class="select-wrapper">
-            type="text"
+            <select
-            id="selectFolder"
+              type="text"
-            v-model="requestData.folderIndex"
+              id="selectFolder"
-          >
+              v-model="requestData.folderIndex"
-            <option :key="undefined" :value="undefined">/</option>
-            <option
-              v-for="(folder, index) in folders"
-              :key="index"
-              :value="index"
-              >{{ folder.name }}</option
             >
-          </select>
+              <option :key="undefined" :value="undefined">/</option>
+              <option
+                v-for="(folder, index) in folders"
+                :key="index"
+                :value="index"
+              >
+                {{ folder.name }}
+              </option>
+            </select>
+          </span>
           <label for="selectRequest">Request</label>
-          <select
+          <span class="select-wrapper">
-            type="text"
+            <select
-            id="selectRequest"
+              type="text"
-            v-model="requestData.requestIndex"
+              id="selectRequest"
-          >
+              v-model="requestData.requestIndex"
-            <option :key="undefined" :value="undefined">/</option>
-            <option
-              v-for="(folder, index) in requests"
-              :key="index"
-              :value="index"
-              >{{ folder.name }}</option
             >
-          </select>
+              <option :key="undefined" :value="undefined">/</option>
+              <option
+                v-for="(folder, index) in requests"
+                :key="index"
+                :value="index"
+              >
+                {{ folder.name }}
+              </option>
+            </select>
+          </span>
         </li>
       </ul>
     </div>
@@ -121,11 +136,13 @@ export default {
       const userSelectedAnyCollection =
         this.$data.requestData.collectionIndex !== undefined;
       if (!userSelectedAnyCollection) return [];
-      
+
-      const noCollectionAvailable = 
+      const noCollectionAvailable =
-        this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex] !== undefined;
+        this.$store.state.postwoman.collections[
+          this.$data.requestData.collectionIndex
+        ] !== undefined;
       if (!noCollectionAvailable) return [];
-      
+
       return this.$store.state.postwoman.collections[
         this.$data.requestData.collectionIndex
       ].folders;
@@ -148,8 +165,10 @@ export default {
         const collection = this.$store.state.postwoman.collections[
           this.$data.requestData.collectionIndex
         ];
-        const noCollectionAvailable = 
+        const noCollectionAvailable =
-          this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex] !== undefined;
+          this.$store.state.postwoman.collections[
+            this.$data.requestData.collectionIndex
+          ] !== undefined;
         if (!noCollectionAvailable) return [];
 
         const requests = collection.requests;

components/history.vue

@@ -307,7 +307,7 @@ ol li {
 }
 
 .entry {
-  border-bottom: 1px solid var(--brd-color);
+  border-bottom: 1px dashed var(--brd-color);
   padding: 16px 0;
 }
 

layouts/default.vue

@@ -327,7 +327,7 @@
                   </button>
                 </a>
                 <a
-                  v-bind:href="
+                  :href="
                     'https://github.com/liyasthomas/postwoman/releases/tag/' +
                       version.name
                   "
@@ -340,7 +340,7 @@
                 <!-- <span v-if="version.hash">
                   -
                   <a
-                    v-bind:href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash"
+                    :href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash"
                     target="_blank"
                     rel="noopener"
                   >{{version.hash}}</a>
@@ -525,7 +525,7 @@ export default {
       document.documentElement.style.setProperty("--ac-color", color);
       document.documentElement.style.setProperty(
         "--act-color",
-        vibrant ? "rgb(37, 38, 40)" : "#ffffff"
+        vibrant ? "rgba(18, 18, 18, 1)" : "rgba(255, 255, 255, 1)"
       );
     })();
   },
@@ -539,7 +539,7 @@ export default {
       .querySelector("meta[name=theme-color]")
       .setAttribute(
         "content",
-        this.$store.state.postwoman.settings.THEME_TAB_COLOR || "#252628"
+        this.$store.state.postwoman.settings.THEME_TAB_COLOR || "#121212"
       );
 
     // Initializes the PWA code - checks if the app is installed,

nuxt.config.js

@@ -100,7 +100,7 @@ export default {
       },
       {
         name: "msapplication-TileColor",
-        content: "#252628"
+        content: "#121212"
       },
       {
         name: "msapplication-tap-highlight",
@@ -257,14 +257,14 @@ export default {
 
       display: "standalone",
 
-      theme_color: "#252628",
+      theme_color: "#121212",
-      background_color: "#252628",
+      background_color: "#121212",
       start_url: `${routerBase.router.base}`
     },
 
     meta: {
       description: meta.shortDescription,
-      theme_color: "#252628"
+      theme_color: "#121212"
     },
 
     icons: (sizes => {

package.json

@@ -36,9 +36,9 @@
         "yargs-parser": "^16.1.0"
     },
     "devDependencies": {
-        "cypress": "^3.7.0",
+        "cypress": "^3.8.0",
         "node-sass": "^4.13.0",
-        "sass-loader": "^7.3.1",
+        "sass-loader": "^8.0.0",
         "start-server-and-test": "^1.10.6"
     }
 }

pages/index.vue

@@ -44,17 +44,19 @@
           <ul>
             <li>
               <label for="method">{{ $t("method") }}</label>
-              <select id="method" v-model="method" @change="methodChange">
+              <span class="select-wrapper">
-                <option value="GET">GET</option>
+                <select id="method" v-model="method" @change="methodChange">
-                <option value="HEAD">HEAD</option>
+                  <option value="GET">GET</option>
-                <option value="POST">POST</option>
+                  <option value="HEAD">HEAD</option>
-                <option value="PUT">PUT</option>
+                  <option value="POST">POST</option>
-                <option value="DELETE">DELETE</option>
+                  <option value="PUT">PUT</option>
-                <option value="CONNECT">CONNECT</option>
+                  <option value="DELETE">DELETE</option>
-                <option value="OPTIONS">OPTIONS</option>
+                  <option value="CONNECT">CONNECT</option>
-                <option value="TRACE">TRACE</option>
+                  <option value="OPTIONS">OPTIONS</option>
-                <option value="PATCH">PATCH</option>
+                  <option value="TRACE">TRACE</option>
-              </select>
+                  <option value="PATCH">PATCH</option>
+                </select>
+              </span>
             </li>
             <li>
               <label for="url">{{ $t("url") }}</label>
@@ -330,11 +332,13 @@
                       </button>
                     </div>
                   </div>
-                  <select id="auth" v-model="auth">
+                  <span class="select-wrapper">
-                    <option>None</option>
+                    <select id="auth" v-model="auth">
-                    <option>Basic</option>
+                      <option>None</option>
-                    <option>Bearer Token</option>
+                      <option>Basic</option>
-                  </select>
+                      <option>Bearer Token</option>
+                    </select>
+                  </span>
                 </li>
               </ul>
               <ul v-if="auth === 'Basic'">
@@ -678,10 +682,7 @@
           <input id="history-tab" type="radio" name="side" checked="checked" />
           <label for="history-tab">{{ $t("history") }}</label>
           <div class="tab">
-            <history
+            <history @useHistory="handleUseHistory" ref="historyComponent" />
-              @useHistory="handleUseHistory"
-              ref="historyComponent"
-            ></history>
           </div>
           <input id="collection-tab" type="radio" name="side" />
           <label for="collection-tab">{{ $t("collections") }}</label>
@@ -694,10 +695,10 @@
       </aside>
 
       <save-request-as
-        v-bind:show="showRequestModal"
+        :show="showRequestModal"
-        v-on:hide-model="hideRequestModal"
+        @hide-model="hideRequestModal"
-        v-bind:editing-request="editRequest"
+        :editing-request="editRequest"
-      ></save-request-as>
+      />
 
       <pw-modal v-if="showModal" @close="showModal = false">
         <div slot="header">
@@ -757,11 +758,13 @@
           <ul>
             <li>
               <label for="requestType">{{ $t("request_type") }}</label>
-              <select id="requestType" v-model="requestType">
+              <span class="select-wrapper">
-                <option>JavaScript XHR</option>
+                <select id="requestType" v-model="requestType">
-                <option>Fetch</option>
+                  <option>JavaScript XHR</option>
-                <option>cURL</option>
+                  <option>Fetch</option>
-              </select>
+                  <option>cURL</option>
+                </select>
+              </span>
             </li>
           </ul>
           <ul>
@@ -1488,8 +1491,9 @@ export default {
   },
   methods: {
     checkCollections() {
-      const checkCollectionAvailability = 
+      const checkCollectionAvailability =
-        this.$store.state.postwoman.collections && this.$store.state.postwoman.collections.length > 0 ;
+        this.$store.state.postwoman.collections &&
+        this.$store.state.postwoman.collections.length > 0;
       return checkCollectionAvailability;
     },
     scrollInto(view) {
@@ -2100,7 +2104,7 @@ export default {
         });
         return;
       }
-      
+
       this.editRequest = {
         url: this.url,
         path: this.path,

pages/settings.vue

@@ -156,17 +156,17 @@ export default {
       //        set the relevant values.
       themes: [
         {
-          color: "#252628",
+          color: "#121212",
           name: "Kinda Dark",
           class: "",
-          aceEditor: "dracula"
+          aceEditor: "twilight"
         },
         {
           color: "#ffffff",
           name: "Clearly White",
           vibrant: true,
           class: "light",
-          aceEditor: "xcode"
+          aceEditor: "iplastic"
         },
         {
           color: "#000000",
@@ -180,8 +180,8 @@ export default {
           vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
           class: "auto",
           aceEditor: window.matchMedia("(prefers-color-scheme: light)").matches
-            ? "xcode"
+            ? "iplastic"
-            : "dracula"
+            : "twilight"
         }
       ],
       // You can define a new color here! It will simply store the color value.
@@ -273,7 +273,7 @@ export default {
       document.documentElement.style.setProperty("--ac-color", color);
       document.documentElement.style.setProperty(
         "--act-color",
-        vibrant ? "rgb(37, 38, 40)" : "#f8f8f2"
+        vibrant ? "rgba(18, 18, 18, 1)" : "rgba(255, 255, 255, 1)"
       );
       this.applySetting("THEME_COLOR", color.toUpperCase());
       this.applySetting("THEME_COLOR_VIBRANT", vibrant);