From 441bd2d307dc93a07684910bcf386f066e70d710 Mon Sep 17 00:00:00 2001
From: silverpill <silverpill@firemail.cc>
Date: Wed, 29 Mar 2023 19:59:18 +0000
Subject: [PATCH] Define SCSS variables for all colors

---
 src/App.vue                             |  2 +-
 src/components/CryptoAddress.vue        |  2 +-
 src/components/Loader.vue               |  1 -
 src/components/Post.vue                 |  6 +++---
 src/components/ProfileCard.vue          |  2 +-
 src/components/Search.vue               |  1 +
 src/components/SidebarLayout.vue        |  4 ++--
 src/components/SubscriptionEthereum.vue |  1 +
 src/components/SubscriptionMonero.vue   |  1 +
 src/styles/_layout.scss                 |  5 +++++
 src/styles/_mixins.scss                 |  2 +-
 src/styles/_theme.scss                  | 15 ++++++++++-----
 src/views/LandingPage.vue               | 16 ++++++++--------
 src/views/PostOverlay.vue               |  2 +-
 src/views/Profile.vue                   |  8 +++++++-
 src/views/ProfileForm.vue               | 19 ++++++++++++-------
 16 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8871e0a..d5bb16d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -165,7 +165,7 @@ button {
   background-color: $btn-background-color;
   border: none;
   border-radius: $btn-border-radius;
-  box-shadow: $btn-shadow;
+  box-shadow: $btn-shadow-size $shadow-color;
   color: $btn-text-color;
   cursor: pointer;
   display: inline-block;
diff --git a/src/components/CryptoAddress.vue b/src/components/CryptoAddress.vue
index 5e5f432..5613dc0 100644
--- a/src/components/CryptoAddress.vue
+++ b/src/components/CryptoAddress.vue
@@ -23,7 +23,7 @@ function copyAddress() {
 @import "../styles/theme";
 
 .crypto-address {
-  background-color: #eee;
+  background-color: $widget-background-color;
   border-radius: 10px;
   display: flex;
 
diff --git a/src/components/Loader.vue b/src/components/Loader.vue
index 00e184d..6eed0e0 100644
--- a/src/components/Loader.vue
+++ b/src/components/Loader.vue
@@ -10,7 +10,6 @@
 
 /* https://github.com/loadingio/css-spinner/blob/master/dist/ripple.html */
 
-$loader-color: #999;
 $loader-size: 80px;
 $loader-width: 4px;
 
diff --git a/src/components/Post.vue b/src/components/Post.vue
index b8ef8eb..1b8d3a0 100644
--- a/src/components/Post.vue
+++ b/src/components/Post.vue
@@ -584,7 +584,7 @@ async function onMintToken() {
   text-align: left;
 
   &.highlighted {
-    outline: 1px solid #FFA500;
+    outline: 1px solid $highlight-color;
   }
 }
 
@@ -707,7 +707,7 @@ async function onMintToken() {
 
   .icon {
     &.tokenized img {
-      filter: invert(51%) sepia(48%) saturate(437%) hue-rotate(222deg) brightness(92%) contrast(84%);
+      filter: $gem-colorizer;
     }
 
     &.tokenize-progress img {
@@ -744,7 +744,7 @@ async function onMintToken() {
 }
 
 .post-form {
-  border-top: 1px solid #f3f2ed;
+  border-top: 1px solid $separator-color;
 }
 
 @media screen and (max-width: $screen-breakpoint-small) {
diff --git a/src/components/ProfileCard.vue b/src/components/ProfileCard.vue
index 63cafd0..bf92da0 100644
--- a/src/components/ProfileCard.vue
+++ b/src/components/ProfileCard.vue
@@ -53,7 +53,7 @@ $profile-padding: calc($block-inner-padding / 2);
   border-radius: $block-border-radius;
 
   .profile-header {
-    background-color: $text-color;
+    background-color: $btn-background-color;
     border-radius: $block-border-radius $block-border-radius 0 0;
     height: 100px;
 
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 2dae71f..37ae185 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -27,6 +27,7 @@ function search() {
 </script>
 
 <style scoped lang="scss">
+@import "../styles/layout";
 @import "../styles/theme";
 
 .search {
diff --git a/src/components/SidebarLayout.vue b/src/components/SidebarLayout.vue
index e6f701c..a6b62cc 100644
--- a/src/components/SidebarLayout.vue
+++ b/src/components/SidebarLayout.vue
@@ -99,7 +99,7 @@ header {
     align-items: center;
     background-color: $block-background-color;
     border-radius: $btn-border-radius;
-    box-shadow: $shadow;
+    box-shadow: $menu-shadow-size $shadow-color;
     box-sizing: border-box;
     color: $text-color;
     display: flex;
@@ -131,7 +131,7 @@ header {
 
   .search {
     background-color: $block-background-color;
-    box-shadow: $shadow;
+    box-shadow: $menu-shadow-size $shadow-color;
     height: 100%;
     margin: 0 0 0 auto;
     width: 250px;
diff --git a/src/components/SubscriptionEthereum.vue b/src/components/SubscriptionEthereum.vue
index f3c798d..5c54a88 100644
--- a/src/components/SubscriptionEthereum.vue
+++ b/src/components/SubscriptionEthereum.vue
@@ -390,6 +390,7 @@ async function onCancelSubscription() {
   }
 
   .separator img {
+    filter: $text-colorizer;
     height: $icon-size;
     min-width: $icon-size;
     object-fit: contain;
diff --git a/src/components/SubscriptionMonero.vue b/src/components/SubscriptionMonero.vue
index 408f006..d836093 100644
--- a/src/components/SubscriptionMonero.vue
+++ b/src/components/SubscriptionMonero.vue
@@ -331,6 +331,7 @@ function getPaymentMinutesLeft(invoice: Invoice): number {
   }
 
   .separator img {
+    filter: $text-colorizer;
     height: $icon-size;
     min-width: $icon-size;
     object-fit: contain;
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
index 0c4b6c9..e26375b 100644
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
@@ -9,7 +9,12 @@ $content-gap: 50px;
 
 $block-outer-padding: 20px;
 $block-inner-padding: 20px;
+$block-border-radius: 15px;
+
 $input-padding: 10px;
+$btn-border-radius: 8px;
+$btn-shadow-size: 2px 5px 10px -5px;
+$menu-shadow-size: 0 2px 16px -9px;
 
 $wide-content-width: 650px;
 $wide-sidebar-width: 400px;
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index be59fce..1efbaad 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -101,7 +101,7 @@
     background-color: $block-background-color;
     border: 1px solid $separator-color;
     border-radius: $btn-border-radius;
-    box-shadow: $shadow;
+    box-shadow: $menu-shadow-size $shadow-color;
     display: flex;
     flex-direction: column;
     gap: calc($block-inner-padding / 2);
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
index cbd4dd6..c54c141 100644
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@@ -1,7 +1,10 @@
 /* color-to-filter converter https://codepen.io/sosuke/pen/Pjoqqp */
 
+$background-color: #f3f2ed;
+
 $text-font: Helvetica, Arial, sans-serif;
 $text-font-size: 15px;
+
 $text-color: #333;
 $text-colorizer: invert(17%) sepia(0%) saturate(0%) hue-rotate(356deg) brightness(101%) contrast(91%);
 $secondary-text-color: #999;
@@ -15,23 +18,25 @@ $link-hover-colorizer: invert(0%) sepia(0%) saturate(0%) hue-rotate(324deg) brig
 $error-color: #FF4D4D;
 $greentext-color: #789922;
 
-$background-color: #f3f2ed;
 $btn-background-color: $text-color;
 $btn-background-hover-color: #fff;
 $btn-text-color: #fff;
 $btn-text-colorizer: invert(99%) sepia(74%) saturate(252%) hue-rotate(137deg) brightness(116%) contrast(100%);
 $btn-text-hover-color: $text-color;
 $btn-text-hover-colorizer: $text-colorizer;
-$btn-border-radius: 8px;
-$btn-shadow: 2px 5px 10px -5px #B7B5B5;
 $btn-secondary-background-color: #CCCBC6;
 $btn-secondary-text-color: $text-color;
 $btn-disabled-background-color: #ddd;
 $btn-disabled-text-color: #999;
 
-$block-border-radius: 15px;
 $block-background-color: #fff;
 $block-link-color: #6c491c;
 $block-link-hover-color: #1A0000;
 $separator-color: $background-color;
-$shadow: 0 2px 16px -9px #C3C4C7;
+$widget-background-color: #eee;
+$highlight-color: #FFA500;
+$loader-color: #999;
+$shadow-color: #B7B5B5;
+
+$gem-color: #9678c3;
+$gem-colorizer: invert(51%) sepia(48%) saturate(437%) hue-rotate(222deg) brightness(92%) contrast(84%);
diff --git a/src/views/LandingPage.vue b/src/views/LandingPage.vue
index 42bac08..67dcad1 100644
--- a/src/views/LandingPage.vue
+++ b/src/views/LandingPage.vue
@@ -273,7 +273,7 @@ async function login() {
 @import "../styles/layout";
 @import "../styles/theme";
 
-$text-color: #fff;
+$landing-text-color: #fff;
 
 .landing-page {
   background-color: #000;
@@ -281,7 +281,7 @@ $text-color: #fff;
   background-repeat: no-repeat;
   background-size: cover;
   box-sizing: border-box;
-  color: $text-color;
+  color: $landing-text-color;
   min-height: 100vh;
   padding-top: 20vh;
 }
@@ -314,14 +314,14 @@ $text-color: #fff;
   line-height: 1.75;
 
   a {
-    color: $text-color;
+    color: $landing-text-color;
   }
 
   .arrow {
     color: #7DFF54;
 
     &:hover {
-      color: $text-color;
+      color: $landing-text-color;
     }
   }
 }
@@ -381,7 +381,7 @@ $text-color: #fff;
 
   input {
     border-radius: 10px;
-    color: $text-color;
+    color: $landing-text-color;
     min-width: 100px;
 
     &::placeholder {
@@ -427,7 +427,7 @@ $text-color: #fff;
     border: none;
     border-radius: 10px;
     box-shadow: 0 2px 16px -5px #BB5CC7;
-    color: $text-color;
+    color: $landing-text-color;
     cursor: pointer;
     display: block;
     font-size: 20px;
@@ -460,7 +460,7 @@ $text-color: #fff;
     }
 
     a {
-      color: $text-color;
+      color: $landing-text-color;
       text-decoration: underline;
     }
   }
@@ -484,7 +484,7 @@ $text-color: #fff;
   text-align: center;
 
   button {
-    color: $text-color;
+    color: $landing-text-color;
     text-decoration: underline;
   }
 }
diff --git a/src/views/PostOverlay.vue b/src/views/PostOverlay.vue
index e3c2449..b84b6c8 100644
--- a/src/views/PostOverlay.vue
+++ b/src/views/PostOverlay.vue
@@ -130,7 +130,7 @@ const imageUrl = $computed<string | null>(() => {
 $page-width: $wide-content-width + $content-gap + $wide-sidebar-width;
 
 .post-overlay {
-  background-color: #fff;
+  background-color: $block-background-color;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 77410b8..d2290e3 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -647,7 +647,7 @@ $avatar-size: 170px;
   margin-bottom: $block-outer-padding;
 
   .profile-header {
-    background-color: $text-color;
+    background-color: $btn-background-color;
     border-radius: $block-border-radius $block-border-radius 0 0;
     height: 200px;
 
@@ -710,10 +710,16 @@ $avatar-size: 170px;
 
     /* stylelint-disable-next-line selector-max-compound-selectors */
     button img {
+      filter: $link-colorizer;
       height: 32px;
       min-width: 20px;
       object-fit: none;
       width: 20px;
+
+      /* stylelint-disable-next-line selector-max-compound-selectors */
+      &:hover {
+        filter: $link-hover-colorizer;
+      }
     }
 
     .dropdown-menu {
diff --git a/src/views/ProfileForm.vue b/src/views/ProfileForm.vue
index 1d05519..3608794 100644
--- a/src/views/ProfileForm.vue
+++ b/src/views/ProfileForm.vue
@@ -60,7 +60,9 @@
               title="Remove item"
               @click="removeExtraField(index)"
             >
-              <img src="@/assets/feather/x-circle.svg">
+              <div class="remove-icon">
+                <img src="@/assets/feather/x-circle.svg">
+              </div>
             </a>
           </div>
           <button
@@ -256,27 +258,30 @@ async function save() {
   .remove-extra-field {
     $icon-size: 15px;
 
+    align-items: center;
     display: none;
     height: $icon-size * 2;
-    line-height: $icon-size * 2;
+    justify-content: center;
     position: absolute;
     right: -$icon-size;
-    text-align: center;
     top: -$icon-size;
     width: $icon-size * 2;
 
-    img {
+    .remove-icon {
       background-color: $block-background-color;
       border-radius: 50%;
-      filter: $link-hover-colorizer;
       height: $icon-size;
-      vertical-align: middle;
       width: $icon-size;
+
+      /* stylelint-disable-next-line selector-max-compound-selectors */
+      img {
+        filter: $link-hover-colorizer;
+      }
     }
   }
 
   &:hover .remove-extra-field {
-    display: block;
+    display: flex;
   }
 
   &.error input {