⬆️ Bumped dependencies

🎨 Improved UI contrast

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;
@@ -787,6 +789,7 @@ input[type="radio"]:checked + label + .tab {
 .toasted.info {
   background-color: var(--ac-color) !important;
   color: var(--act-color) !important;
+  font-weight: 700 !important;
 }
 
 .toasted.bubble .action {
@@ -824,6 +827,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 +841,7 @@ input[type="radio"]:checked + label + .tab {
 
     a {
       background-color: transparent;
+      margin: 8px;
 
       &.nuxt-link-exact-active {
         background-color: transparent;
@@ -889,7 +895,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/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/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

@@ -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 ? "rgb(18, 18, 18)" : "#ffffff"
       );
     })();
   },
@@ -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

@@ -38,7 +38,7 @@
     "devDependencies": {
         "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/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);