Minor UI changes

assets/css/styles.scss

@@ -127,10 +127,6 @@ footer {
   color: var(--ac-color);
 }
 
-.tagline {
-  font-size: 18px;
-}
-
 .nav-first {
   display: flex;
   order: 1;
@@ -268,6 +264,8 @@ h3 {
 }
 
 .tooltip {
+  $bgcolor: var(--brd-color);
+  $fgcolor: var(--fg-color);
   display: block !important;
   z-index: 10000;
 
@@ -350,18 +348,16 @@ h3 {
   }
 
   &.popover {
-    $color: #f9f9f9;
-
     .popover-inner {
-      background: $color;
+      background: $bgcolor;
-      color: black;
+      color: $fgcolor;
-      padding: 24px;
+      padding: 4px;
-      border-radius: 5px;
+      border-radius: 8px;
       box-shadow: 0 5px 30px rgba(black, 0.1);
     }
 
     .popover-arrow {
-      border-color: $color;
+      border-color: $bgcolor;
     }
   }
 
@@ -414,9 +410,10 @@ button {
   }
 
   &.icon {
-    background-color: var(--bg-color);
+    background-color: transparent;
     color: var(--fg-light-color);
     fill: var(--fg-light-color);
+    border-radius: 8px;
 
     &:not([disabled]):hover,
     &:not([disabled]):active,
@@ -534,13 +531,6 @@ code {
   border-radius: 8px;
 }
 
-.hljs,
-.hljs-subst {
-  background-color: var(--bg-dark-color) !important;
-  color: var(--fg-color) !important;
-  font-family: 'Roboto Mono', monospace;
-}
-
 select,
 option {
   height: 40px;

layouts/default.vue

@@ -1,19 +1,75 @@
 <template>
   <div class="wrapper">
     <header class="header">
-      <div>
+      <div class="flex-wrap">
         <div class="slide-in">
           <nuxt-link to="/">
             <h1 class="logo">Postwoman</h1>
           </nuxt-link>
-          <h3 class="tagline">API request builder</h3>
         </div>
-        <a href="https://github.com/liyasthomas/postwoman" target="_blank" rel="noopener">
+        <div class="flex-wrap">
+          <a
+            href="https://github.com/liyasthomas/postwoman"
+            target="_blank"
+            rel="noopener"
+          >
             <button class="icon">
-            <img id="imgGitHub" src="~static/icons/github.svg" alt="GitHub" :style="logoStyle()" />
+              <img
-            <span>GitHub</span>
+                id="imgGitHub"
+                src="~static/icons/github.svg"
+                alt="GitHub"
+                :style="logoStyle()"
+              />
             </button>
           </a>
+          <v-popover>
+            <button class="tooltip-target icon">
+              <i class="material-icons">more_vert</i>
+            </button>
+            <template slot="popover">
+              <div>
+                <button
+                  class="icon"
+                  id="installPWA"
+                  @click.prevent="showInstallPrompt()"
+                >
+                  <i class="material-icons">offline_bolt</i>
+                  <span>Install PWA</span>
+                </button>
+              </div>
+              <div>
+                <a
+                  href="https://opencollective.com/postwoman"
+                  target="_blank"
+                  rel="noopener"
+                >
+                  <button class="icon">
+                    <i class="material-icons">favorite</i>
+                    <span>Donate</span>
+                  </button>
+                </a>
+              </div>
+              <div>
+                <button
+                  class="icon"
+                  onClick="window.open('https://twitter.com/share?text=👽 Postwoman • API request builder - Helps you create your requests faster, saving you precious time on your development&url=https://postwoman.io&hashtags=postwoman&via=liyasthomas');"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
+                    />
+                  </svg>
+                  <span>Tweet</span>
+                </button>
+              </div>
+            </template>
+          </v-popover>
+        </div>
       </div>
     </header>
     <div class="content">
@@ -24,7 +80,12 @@
               We're using manual checks for linkActive because the query string
               seems to mess up the nuxt-link active class.
             -->
-            <nuxt-link to="/" :class="linkActive('/')" v-tooltip.right="'Home'" aria-label="Home">
+            <nuxt-link
+              to="/"
+              :class="linkActive('/')"
+              v-tooltip.right="'Home'"
+              aria-label="Home"
+            >
               <logo alt style="height: 24px;"></logo>
             </nuxt-link>
             <nuxt-link
@@ -112,32 +173,18 @@
       </div>
     </div>
     <footer class="footer">
-      <!-- Top section of footer: GitHub/install links -->
-      <div class="flex-wrap">
-        <button class="icon" id="installPWA" @click.prevent="showInstallPrompt()">
-          <i class="material-icons">add_to_home_screen</i>
-          <span>Install PWA</span>
-        </button>
-        <button
-          class="icon"
-          onClick="window.open('https://twitter.com/share?text=👽 Postwoman • API request builder - Helps you create your requests faster, saving you precious time on your development&url=https://postwoman.io&hashtags=postwoman&via=liyasthomas');"
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-            <path
-              d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
-            />
-          </svg>
-          <span>Tweet</span>
-        </button>
-      </div>
       <!-- Bottom section of footer: version/author information -->
       <p class="align-center mono">
         <span v-if="version.name">
           <a
-            v-bind:href="'https://github.com/liyasthomas/postwoman/releases/tag/' + version.name"
+            v-bind:href="
+              'https://github.com/liyasthomas/postwoman/releases/tag/' +
+                version.name
+            "
             target="_blank"
             rel="noopener"
-          >{{version.name}}</a>
+            >{{ version.name }}</a
+          >
           <!-- <span v-if="version.hash">
             -
             <a
@@ -149,22 +196,26 @@
           <!-- <span v-if="version.variant">({{version.variant}})</span> -->
           &#x2022;
         </span>
-        <a href="https://liyasthomas.web.app" target="_blank" rel="noopener">🦄</a> &#x2022;
+        <a href="https://liyasthomas.web.app" target="_blank" rel="noopener"
-        <a href="https://postwoman.launchaco.com" target="_blank" rel="noopener">Subscribe</a>
+          >🦄</a
+        >
+        &#x2022;
+        <a href="https://postwoman.launchaco.com" target="_blank" rel="noopener"
+          >Subscribe</a
+        >
       </p>
     </footer>
   </div>
 </template>
 
-<style lang="scss">
+<style lang="scss"></style>
-</style>
 
 <script>
-  import intializePwa from "../assets/js/pwa";
+import intializePwa from "../assets/js/pwa";
-  import logo from "../components/logo";
+import logo from "../components/logo";
-  import * as version from "../.postwoman/version.json";
+import * as version from "../.postwoman/version.json";
 
-  export default {
+export default {
   components: {
     logo
   },
@@ -276,5 +327,5 @@
       this.$toast.clear();
     }
   }
-  };
+};
 </script>

pages/settings.vue

@@ -142,7 +142,7 @@ export default {
           color: "#000000",
           name: "Just Black",
           class: "black",
-          aceEditor: "tomorrow_night_blue"
+          aceEditor: "vibrant_ink"
         },
         {
           color: "var(--bg-color)",