💄 Minor UI improvements (#300)

💄 Minor UI improvements

Co-authored-by: Liyas Thomas <liyasthomas@gmail.com>

assets/css/styles.scss

@@ -58,7 +58,6 @@ body {
 
 // Make theme transition smoother.
 body.afterLoad {
-
   &,
   & * {
     transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;

components/autocomplete.vue

@@ -47,7 +47,7 @@
     margin: 0 4px;
     left: 0;
     padding: 0;
-    border-radius: 0 0 4px 4px;
+    border-radius: 0 0 8px 8px;
     z-index: 9999;
     transition: transform 0.2s ease-out;
 
@@ -59,7 +59,7 @@
       font-family: "Roboto Mono", monospace;
 
       &:last-child {
-        border-radius: 0 0 4px 4px;
+        border-radius: 0 0 8px 8px;
       }
 
       &:hover,
@@ -196,8 +196,8 @@ export default {
           })
           // Cut off the part that's already been typed.
           .map(entry => entry.substring(this.selectionStart))
-          // We only want the top 3 suggestions.
-          .slice(0, 3)
+          // We only want the top 6 suggestions.
+          .slice(0, 6)
       );
     }
   },

components/logo.vue

@@ -35,7 +35,7 @@
   </svg>
 </template>
 
-<style>
+<style lang="scss" scoped>
 #circle3814 {
   /* fill: var(--fg-color); */
   fill: transparent;

layouts/default.vue

@@ -11,16 +11,24 @@
           <a
             href="https://github.com/liyasthomas/postwoman"
             target="_blank"
+            aria-label="GitHub"
             rel="noopener"
-            v-tooltip="'GitHub'"
           >
-            <button class="icon">
-              <img
-                id="imgGitHub"
-                src="~static/icons/github.svg"
-                alt="GitHub"
-                :style="logoStyle()"
-              />
+            <button
+              class="icon"
+              aria-label="GitHub"
+              v-tooltip="'GitHub'"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+                />
+              </svg>
             </button>
           </a>
           <button
@@ -236,14 +244,6 @@ export default {
       // that can be called to show the user the installation
       // prompt.
       showInstallPrompt: null,
-      logoStyle() {
-        return (
-          this.$store.state.postwoman.settings.THEME_CLASS || ""
-        ).includes("light")
-          ? " filter: invert(100%); -webkit-filter: invert(100%);"
-          : "";
-      },
-
       version: {}
     };
   },

pages/settings.vue

@@ -247,13 +247,6 @@ export default {
         .setAttribute("content", color);
       this.applySetting("THEME_TAB_COLOR", color);
       document.documentElement.className = name;
-      let imgGitHub = document.getElementById("imgGitHub");
-      imgGitHub.style["filter"] = "";
-      imgGitHub.style["webkit-filter"] = "invert(100%)";
-      if (name.includes("light")) {
-        imgGitHub.style["filter"] = "invert(100%)";
-        imgGitHub.style["webkit-filter"] = "invert(100%)";
-      }
     },
     setActiveColor(color, vibrant) {
       // By default, the color is vibrant.

static/icons/github.svg

@@ -13,10 +13,10 @@
    id="Layer_1"
    x="0px"
    y="0px"
-   viewBox="0 0 20 20"
+   viewBox="0 0 24 24"
    xml:space="preserve"
-   width="20"
-   height="20"
+   width="24"
+   height="24"
    sodipodi:docname="github.svg"
    inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
    id="metadata13"><rdf:RDF><cc:Work
@@ -59,4 +59,4 @@
    id="path6"
    inkscape:connector-curvature="0"
    style="fill:#fff" />
-</svg>
+</svg>