Merge branch 'master' into i18n

2019-12-17 05:50:19 +05:30
parent 3ffe5559e7 feb782270b
commit ffed1dbc90
19 changed files with 1555 additions and 1719 deletions
--- a/README.md
+++ b/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>
--- a/assets/css/styles.scss
+++ b/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;
  }
 }
--- a/assets/css/themes.scss
+++ b/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);
-  //Dark Background color
+  --bg-light-color: rgba(255, 255, 255, 0.02);
+  // 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
-  --bg-dark-color: #eeeeee;
+  // Background color
+  --bg-color: rgba(255, 255, 255, 1);
  // Light Background color
  --bg-light-color: rgba(0, 0, 0, 0.02);
-  //Dark Background color
-  --bg-dark-color: rgba(0, 0, 0, 0.05);
-  // Background color
-  --bg-color: #ffffff;
-  // Auto-complete color
-  --atc-color: #ebebeb;
+  // Dark Background color
+  --bg-dark-color: rgba(0, 0, 0, 0.02);
  // 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;
-  // Auto-complete color
-  --atc-color: rgb(18, 18, 18);
+  --bg-color: rgba(0, 0, 0, 1);
+  // Light Background color
+  --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 {
--- a/components/ace-editor.vue
+++ b/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";
--- a/components/autocomplete.vue
+++ b/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%;
--- a/components/collections/collection.vue
+++ b/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"
-            v-bind:folderIndex="index"
-            v-bind:collection-index="collectionIndex"
-            v-on:edit-folder="editFolder(collectionIndex, folder, index)"
-            v-on:edit-request="$emit('edit-request', $event)"
+            :folder="folder"
+            :folderIndex="index"
+            :collection-index="collectionIndex"
+            @edit-folder="editFolder(collectionIndex, folder, index)"
+            @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"
-            v-bind:collection-index="collectionIndex"
-            v-bind:folder-index="-1"
-            v-bind:request-index="index"
-            v-on:edit-request="
+            :request="request"
+            :collection-index="collectionIndex"
+            :folder-index="-1"
+            :request-index="index"
+            @edit-request="
              $emit('edit-request', {
                request,
                collectionIndex,
@@ -74,7 +74,7 @@
                requestIndex: index
              })
            "
-          ></request>
+          />
        </li>
      </ul>
    </div>
--- a/components/collections/editCollection.vue
+++ b/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>
--- a/components/collections/editFolder.vue
+++ b/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>
--- a/components/collections/editRequest.vue
+++ b/components/collections/editRequest.vue
@@ -26,35 +26,47 @@
            :placeholder="request.name"
          />
          <label for="selectCollection">Collection</label>
-          <select
-            type="text"
-            id="selectCollection"
-            v-model="requestUpdateData.collectionIndex"
-          >
-            <option :key="undefined" :value="undefined" hidden disabled selected
-              >Current Collection</option
+          <span class="select-wrapper">
+            <select
+              type="text"
+              id="selectCollection"
+              v-model="requestUpdateData.collectionIndex"
            >
-            <option
-              v-for="(collection, index) in $store.state.postwoman.collections"
-              :key="index"
-              :value="index"
-              >{{ collection.name }}</option
-            >
-          </select>
+              <option
+                :key="undefined"
+                :value="undefined"
+                hidden
+                disabled
+                selected
+                >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
-            type="text"
-            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
+          <span class="select-wrapper">
+            <select
+              type="text"
+              id="selectFolder"
+              v-model="requestUpdateData.folderIndex"
            >
-          </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>
--- a/components/collections/folder.vue
+++ b/components/collections/folder.vue
@@ -34,11 +34,11 @@
      <ul>
        <li v-for="(request, index) in folder.requests" :key="index">
          <request
-            v-bind:request="request"
-            v-bind:collection-index="collectionIndex"
-            v-bind:folder-index="folderIndex"
-            v-bind:request-index="index"
-            v-on:edit-request="
+            :request="request"
+            :collection-index="collectionIndex"
+            :folder-index="folderIndex"
+            :request-index="index"
+            @edit-request="
              $emit('edit-request', {
                request,
                collectionIndex,
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -6,40 +6,40 @@ TODO:
 <template>
  <div class="collections-wrapper">
    <addCollection
-      v-bind:show="showModalAdd"
-      v-on:hide-modal="displayModalAdd(false)"
+      :show="showModalAdd"
+      @hide-modal="displayModalAdd(false)"
    />
    <editCollection
-      v-bind:show="showModalEdit"
-      v-bind:editingCollection="editingCollection"
-      v-bind:editingCollectionIndex="editingCollectionIndex"
-      v-on:hide-modal="displayModalEdit(false)"
+      :show="showModalEdit"
+      :editingCollection="editingCollection"
+      :editingCollectionIndex="editingCollectionIndex"
+      @hide-modal="displayModalEdit(false)"
    />
    <addFolder
-      v-bind:show="showModalAddFolder"
-      v-bind:collection="editingCollection"
-      v-bind:collectionIndex="editingCollectionIndex"
-      v-on:hide-modal="displayModalAddFolder(false)"
+      :show="showModalAddFolder"
+      :collection="editingCollection"
+      :collectionIndex="editingCollectionIndex"
+      @hide-modal="displayModalAddFolder(false)"
    />
    <editFolder
-      v-bind:show="showModalEditFolder"
-      v-bind:collection="editingCollection"
-      v-bind:collectionIndex="editingCollectionIndex"
-      v-bind:folder="editingFolder"
-      v-bind:folderIndex="editingFolderIndex"
-      v-on:hide-modal="displayModalEditFolder(false)"
+      :show="showModalEditFolder"
+      :collection="editingCollection"
+      :collectionIndex="editingCollectionIndex"
+      :folder="editingFolder"
+      :folderIndex="editingFolderIndex"
+      @hide-modal="displayModalEditFolder(false)"
    />
    <editRequest
-      v-bind:show="showModalEditRequest"
-      v-bind:collectionIndex="editingCollectionIndex"
-      v-bind:folderIndex="editingFolderIndex"
-      v-bind:request="editingRequest"
-      v-bind:requestIndex="editingRequestIndex"
-      v-on:hide-modal="displayModalEditRequest(false)"
+      :show="showModalEditRequest"
+      :collectionIndex="editingCollectionIndex"
+      :folderIndex="editingFolderIndex"
+      :request="editingRequest"
+      :requestIndex="editingRequestIndex"
+      @hide-modal="displayModalEditRequest(false)"
    />
    <importExportCollections
-      v-bind:show="showModalImportExport"
-      v-on:hide-modal="displayModalImportExport(false)"
+      :show="showModalImportExport"
+      @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"
-            v-bind:collection="collection"
-            v-on:edit-collection="editCollection(collection, index)"
-            v-on:add-folder="addFolder(collection, index)"
-            v-on:edit-folder="editFolder($event)"
-            v-on:edit-request="editRequest($event)"
-          ></collection>
+            :collection-index="index"
+            :collection="collection"
+            @edit-collection="editCollection(collection, index)"
+            @add-folder="addFolder(collection, index)"
+            @edit-folder="editFolder($event)"
+            @edit-request="editRequest($event)"
+          />
        </li>
        <li v-if="collections.length === 0">
          <label>Collections are empty</label>
--- a/components/collections/saveRequestAs.vue
+++ b/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
-            type="text"
-            id="selectCollection"
-            v-model="requestData.collectionIndex"
-          >
-            <option :key="undefined" :value="undefined" hidden disabled selected
-              >Select a Collection</option
+          <span class="select-wrapper">
+            <select
+              type="text"
+              id="selectCollection"
+              v-model="requestData.collectionIndex"
            >
-            <option
-              v-for="(collection, index) in $store.state.postwoman.collections"
-              :key="index"
-              :value="index"
-              >{{ collection.name }}</option
-            >
-          </select>
+              <option
+                :key="undefined"
+                :value="undefined"
+                hidden
+                disabled
+                selected
+                >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
-            type="text"
-            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
+          <span class="select-wrapper">
+            <select
+              type="text"
+              id="selectFolder"
+              v-model="requestData.folderIndex"
            >
-          </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
-            type="text"
-            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
+          <span class="select-wrapper">
+            <select
+              type="text"
+              id="selectRequest"
+              v-model="requestData.requestIndex"
            >
-          </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 = 
-        this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex] !== undefined;
+
+      const noCollectionAvailable =
+        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 = 
-          this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex] !== undefined;
+        const noCollectionAvailable =
+          this.$store.state.postwoman.collections[
+            this.$data.requestData.collectionIndex
+          ] !== undefined;
        if (!noCollectionAvailable) return [];

        const requests = collection.requests;
--- a/components/history.vue
+++ b/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;
 }

--- a/layouts/default.vue
+++ b/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,
--- a/nuxt.config.js
+++ b/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",
-      background_color: "#252628",
+      theme_color: "#121212",
+      background_color: "#121212",
      start_url: `${routerBase.router.base}`
    },

    meta: {
      description: meta.shortDescription,
-      theme_color: "#252628"
+      theme_color: "#121212"
    },

    icons: (sizes => {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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"
    }
 }
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -44,17 +44,19 @@
          <ul>
            <li>
              <label for="method">{{ $t("method") }}</label>
-              <select id="method" v-model="method" @change="methodChange">
-                <option value="GET">GET</option>
-                <option value="HEAD">HEAD</option>
-                <option value="POST">POST</option>
-                <option value="PUT">PUT</option>
-                <option value="DELETE">DELETE</option>
-                <option value="CONNECT">CONNECT</option>
-                <option value="OPTIONS">OPTIONS</option>
-                <option value="TRACE">TRACE</option>
-                <option value="PATCH">PATCH</option>
-              </select>
+              <span class="select-wrapper">
+                <select id="method" v-model="method" @change="methodChange">
+                  <option value="GET">GET</option>
+                  <option value="HEAD">HEAD</option>
+                  <option value="POST">POST</option>
+                  <option value="PUT">PUT</option>
+                  <option value="DELETE">DELETE</option>
+                  <option value="CONNECT">CONNECT</option>
+                  <option value="OPTIONS">OPTIONS</option>
+                  <option value="TRACE">TRACE</option>
+                  <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">
-                    <option>None</option>
-                    <option>Basic</option>
-                    <option>Bearer Token</option>
-                  </select>
+                  <span class="select-wrapper">
+                    <select id="auth" v-model="auth">
+                      <option>None</option>
+                      <option>Basic</option>
+                      <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
-              @useHistory="handleUseHistory"
-              ref="historyComponent"
-            ></history>
+            <history @useHistory="handleUseHistory" ref="historyComponent" />
          </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"
-        v-on:hide-model="hideRequestModal"
-        v-bind:editing-request="editRequest"
-      ></save-request-as>
+        :show="showRequestModal"
+        @hide-model="hideRequestModal"
+        :editing-request="editRequest"
+      />

      <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">
-                <option>JavaScript XHR</option>
-                <option>Fetch</option>
-                <option>cURL</option>
-              </select>
+              <span class="select-wrapper">
+                <select id="requestType" v-model="requestType">
+                  <option>JavaScript XHR</option>
+                  <option>Fetch</option>
+                  <option>cURL</option>
+                </select>
+              </span>
            </li>
          </ul>
          <ul>
@@ -1488,8 +1491,9 @@ export default {
  },
  methods: {
    checkCollections() {
-      const checkCollectionAvailability = 
-        this.$store.state.postwoman.collections && this.$store.state.postwoman.collections.length > 0 ;
+      const checkCollectionAvailability =
+        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,
--- a/pages/settings.vue
+++ b/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"
-            : "dracula"
+            ? "iplastic"
+            : "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);