From bc6ea34f145c511f4eec086df6b4f13efe9a4d7a Mon Sep 17 00:00:00 2001 From: Liyas Thomas Date: Wed, 18 Dec 2019 00:43:15 +0530 Subject: [PATCH] :art: Various UI tweaks --- README.md | 4 +- assets/css/styles.scss | 42 ++++++++++--------- assets/css/themes.scss | 20 +++++---- components/collections/addCollection.vue | 17 ++++---- components/collections/addFolder.vue | 17 ++++---- components/collections/editCollection.vue | 23 +++++----- components/collections/editFolder.vue | 17 ++++---- components/collections/editRequest.vue | 17 ++++---- .../collections/importExportCollections.vue | 36 +++++++++------- components/collections/saveRequestAs.vue | 17 ++++---- components/graphql/field.vue | 2 +- components/history.vue | 2 +- components/logo.vue | 4 +- components/modal.vue | 2 +- layouts/default.vue | 10 ++--- nuxt.config.js | 8 ++-- pages/index.vue | 17 ++++---- pages/settings.vue | 4 +- static/icons/alien-head.svg | 4 +- 19 files changed, 150 insertions(+), 113 deletions(-) diff --git a/README.md b/README.md index fa383ffcc..e1a1a9a72 100644 --- a/README.md +++ b/README.md @@ -360,13 +360,13 @@ This project is licensed under the [MIT License](https://opensource.org/licenses

-[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-121212?logo=Postwoman)](https://postwoman.io) +[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-202124?logo=Postwoman)](https://postwoman.io)

Default

``` -[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-121212?logo=Postwoman)](https://postwoman.io) +[![Postwoman](https://img.shields.io/badge/Tested_on-Postwoman-202124?logo=Postwoman)](https://postwoman.io) ```

diff --git a/assets/css/styles.scss b/assets/css/styles.scss index cc02e327a..d19cb85ea 100644 --- a/assets/css/styles.scss +++ b/assets/css/styles.scss @@ -146,6 +146,7 @@ footer { z-index: 1; height: 100vh; padding: 0 8px; + background-color: var(--bg-light-color); } .main { @@ -155,7 +156,6 @@ footer { order: 2; position: relative; padding: 0 16px; - background-color: var(--bg-light-color); height: 100%; } @@ -257,14 +257,14 @@ h3 { } .tooltip { - $bgcolor: var(--bg-color); + $bgcolor: var(--tt-color); $fgcolor: var(--fg-color); display: block !important; z-index: 10000; .tooltip-inner { - background: black; - color: white; + background: $bgcolor; + color: $fgcolor; border-radius: 8px; padding: 8px 16px; font-size: 12px; @@ -278,7 +278,7 @@ h3 { border-style: solid; position: absolute; margin: 5px; - border-color: black; + border-color: $bgcolor; z-index: 1; } @@ -424,6 +424,17 @@ button { transition: all 0.2s ease-in-out; } } + + &.primary { + color: var(--ac-color); + + &:not([disabled]):hover, + &:not([disabled]):active, + &:not([disabled]):focus { + background-color: var(--ac-color); + color: var(--act-color); + } + } } @keyframes beat { @@ -444,7 +455,6 @@ button { fieldset { margin: 16px 0; - // border: 1px solid var(--brd-color); border-radius: 16px; transition: all 0.2s ease-in-out; background-color: var(--bg-dark-color); @@ -503,6 +513,11 @@ fieldset.yellow legend { color: #f1fa8c; } +input[type="file"], +input[type="radio"], +.tab, +.hide-on-large-screen, +#installPWA, .hidden { display: none; } @@ -669,18 +684,10 @@ ol li { display: flex; } -.hide-on-large-screen { - display: none; -} - .show-on-large-screen { display: inline-flex; } -#installPWA { - display: none; -} - .info-response { color: #ffeb3b; } @@ -774,12 +781,6 @@ section { order: 1; } -input[type="file"], -input[type="radio"], -.tab { - display: none; -} - input[type="radio"] + label { padding: 8px 16px; border-bottom: 2px solid transparent; @@ -856,6 +857,7 @@ input[type="radio"]:checked + label + .tab { width: 100%; background-color: var(--bg-color); transition: all 0.2s ease-in-out; + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.45); } nav.primary-nav { diff --git a/assets/css/themes.scss b/assets/css/themes.scss index f0dc2058a..5bd10c541 100644 --- a/assets/css/themes.scss +++ b/assets/css/themes.scss @@ -9,13 +9,13 @@ // Dark is the default theme variant. @mixin darkTheme { // Background color - --bg-color: rgba(18, 18, 18, 1); + --bg-color: rgba(32, 33, 36, 1); // Light Background color --bg-light-color: rgba(255, 255, 255, 0.02); // Dark Background color --bg-dark-color: rgba(0, 0, 0, 0.1); // Text color - --fg-color: rgba(255, 255, 255, 1); + --fg-color: rgba(255, 255, 255, 0.9); // Light Text color --fg-light-color: rgba(255, 255, 255, 0.5); // Border color @@ -25,9 +25,11 @@ // Acent color --ac-color: rgba(80, 250, 123, 1); // Active text color - --act-color: rgba(18, 18, 18, 1); + --act-color: rgba(32, 33, 36, 1); // Auto-complete color - --atc-color: rgba(18, 18, 18, 1); + --atc-color: rgba(32, 33, 36, 1); + // Tooltip color + --tt-color: rgba(53, 53, 53, 1); } @mixin lightTheme { @@ -38,7 +40,7 @@ // Dark Background color --bg-dark-color: rgba(0, 0, 0, 0.02); // Text color - --fg-color: rgba(0, 0, 0, 1); + --fg-color: rgba(0, 0, 0, 0.9); // Light Text color --fg-light-color: rgba(0, 0, 0, 0.6); // Border color @@ -51,17 +53,19 @@ --act-color: rgba(255, 255, 255, 1); // Auto-complete color --atc-color: rgba(255, 255, 255, 1); + // Tooltip color + --tt-color: rgba(220, 220, 220, 1); } @mixin blackTheme { // Background color --bg-color: rgba(0, 0, 0, 1); // Light Background color - --bg-light-color: rgba(255, 255, 255, 0); + --bg-light-color: rgba(255, 255, 255, 0.02); // Dark Background color --bg-dark-color: rgba(255, 255, 255, 0.02); // Text color - --fg-color: rgba(255, 255, 255, 1); + --fg-color: rgba(255, 255, 255, 0.9); // Light Text color --fg-light-color: rgba(255, 255, 255, 0.5); // Border color @@ -74,6 +78,8 @@ --act-color: rgba(0, 0, 0, 1); // Auto-complete color --atc-color: rgba(0, 0, 0, 1); + // Tooltip color + --tt-color: rgba(18, 18, 18, 1); } :root { diff --git a/components/collections/addCollection.vue b/components/collections/addCollection.vue index 9a00ed2a6..2c68f630f 100644 --- a/components/collections/addCollection.vue +++ b/components/collections/addCollection.vue @@ -22,14 +22,17 @@
- + + +
diff --git a/components/collections/addFolder.vue b/components/collections/addFolder.vue index 3a582c13a..40ec5c574 100644 --- a/components/collections/addFolder.vue +++ b/components/collections/addFolder.vue @@ -22,14 +22,17 @@
- + + +
diff --git a/components/collections/editCollection.vue b/components/collections/editCollection.vue index 34e2b0999..3a3feac53 100644 --- a/components/collections/editCollection.vue +++ b/components/collections/editCollection.vue @@ -1,12 +1,12 @@ @@ -66,7 +69,7 @@ export default { }); this.$emit("hide-modal"); }, - hideModel() { + hideModal() { this.$emit("hide-modal"); } } diff --git a/components/collections/editFolder.vue b/components/collections/editFolder.vue index b5c8ef03c..17388fd34 100644 --- a/components/collections/editFolder.vue +++ b/components/collections/editFolder.vue @@ -27,14 +27,17 @@
- + + +
diff --git a/components/collections/editRequest.vue b/components/collections/editRequest.vue index 46323d10e..12d818909 100644 --- a/components/collections/editRequest.vue +++ b/components/collections/editRequest.vue @@ -71,14 +71,17 @@
- + + +
diff --git a/components/collections/importExportCollections.vue b/components/collections/importExportCollections.vue index b70f97f70..e6396bc66 100644 --- a/components/collections/importExportCollections.vue +++ b/components/collections/importExportCollections.vue @@ -1,12 +1,12 @@ @@ -76,7 +84,7 @@ export default { } }, methods: { - hideModel() { + hideModal() { this.$emit("hide-modal"); }, openDialogChooseFileToReplaceWith() { diff --git a/components/collections/saveRequestAs.vue b/components/collections/saveRequestAs.vue index 05424c62e..26a174d31 100644 --- a/components/collections/saveRequestAs.vue +++ b/components/collections/saveRequestAs.vue @@ -88,14 +88,17 @@
- + + +
diff --git a/components/graphql/field.vue b/components/graphql/field.vue index 0da0f522f..b5acb1b54 100644 --- a/components/graphql/field.vue +++ b/components/graphql/field.vue @@ -15,7 +15,7 @@ .field-box { padding: 16px; margin: 4px; - border-bottom: 1px solid var(--brd-color); + border-bottom: 1px dashed var(--brd-color); } .field-deprecated { diff --git a/components/history.vue b/components/history.vue index 9b9ac14d5..67c0ac258 100644 --- a/components/history.vue +++ b/components/history.vue @@ -308,7 +308,7 @@ ol li { .entry { border-bottom: 1px dashed var(--brd-color); - padding: 16px 0; + padding: 0 0 8px; } .bg-color { diff --git a/components/logo.vue b/components/logo.vue index 6d605047a..57e957e61 100644 --- a/components/logo.vue +++ b/components/logo.vue @@ -24,9 +24,9 @@ diff --git a/components/modal.vue b/components/modal.vue index da088612c..24a79dd23 100644 --- a/components/modal.vue +++ b/components/modal.vue @@ -25,7 +25,7 @@ left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(0, 0, 0, 0.87); display: flex; align-items: center; justify-content: center; diff --git a/layouts/default.vue b/layouts/default.vue index 51073d09b..add992d05 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -441,7 +441,7 @@ rel="noopener" > @@ -453,7 +453,7 @@ rel="noopener" > @@ -465,7 +465,7 @@ rel="noopener" > @@ -525,7 +525,7 @@ export default { document.documentElement.style.setProperty("--ac-color", color); document.documentElement.style.setProperty( "--act-color", - vibrant ? "rgba(18, 18, 18, 1)" : "rgba(255, 255, 255, 1)" + vibrant ? "rgba(32, 33, 36, 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 || "#121212" + this.$store.state.postwoman.settings.THEME_TAB_COLOR || "#202124" ); // Initializes the PWA code - checks if the app is installed, diff --git a/nuxt.config.js b/nuxt.config.js index fe737ff12..a79f82d2c 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -100,7 +100,7 @@ export default { }, { name: "msapplication-TileColor", - content: "#121212" + content: "#202124" }, { name: "msapplication-tap-highlight", @@ -257,14 +257,14 @@ export default { display: "standalone", - theme_color: "#121212", - background_color: "#121212", + theme_color: "#202124", + background_color: "#202124", start_url: `${routerBase.router.base}` }, meta: { description: meta.shortDescription, - theme_color: "#121212" + theme_color: "#202124" }, icons: (sizes => { diff --git a/pages/index.vue b/pages/index.vue index 1dbce6e03..bad1b6afe 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -728,14 +728,17 @@
-
    -
  • - -
    • -
+ + +
diff --git a/pages/settings.vue b/pages/settings.vue index 8e543dd6e..e76587b94 100644 --- a/pages/settings.vue +++ b/pages/settings.vue @@ -156,7 +156,7 @@ export default { // set the relevant values. themes: [ { - color: "#121212", + color: "#202124", name: "Kinda Dark", class: "", aceEditor: "twilight" @@ -273,7 +273,7 @@ export default { document.documentElement.style.setProperty("--ac-color", color); document.documentElement.style.setProperty( "--act-color", - vibrant ? "rgba(18, 18, 18, 1)" : "rgba(255, 255, 255, 1)" + vibrant ? "rgba(32, 33, 36, 1)" : "rgba(255, 255, 255, 1)" ); this.applySetting("THEME_COLOR", color.toUpperCase()); this.applySetting("THEME_COLOR_VIBRANT", vibrant); diff --git a/static/icons/alien-head.svg b/static/icons/alien-head.svg index e31f9d5c2..a3491c108 100644 --- a/static/icons/alien-head.svg +++ b/static/icons/alien-head.svg @@ -54,9 +54,9 @@ transform="translate(516.40798,163.89028)"> \ No newline at end of file