From 24979c9461ff963d4aef95559e1119aed9422697 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 7 Jun 2020 13:14:18 -0500
Subject: [PATCH] Use --accent-color more through UI

---
 app/styles/accounts.scss                  | 2 +-
 app/styles/components/account-header.scss | 6 +++---
 app/styles/components/columns.scss        | 2 +-
 app/styles/components/tabs-bar.scss       | 5 +++++
 app/styles/themes.scss                    | 9 +++++----
 5 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index ccfe298eb..02dec30f8 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -580,7 +580,7 @@ a .account__avatar {
 }
 
 .account__section-headline {
-  background: var(--brand-color--faint);
+  background: var(--accent-color--faint);
 
   button,
   a {
diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss
index ce5bc26bb..380f6f646 100644
--- a/app/styles/components/account-header.scss
+++ b/app/styles/components/account-header.scss
@@ -36,14 +36,14 @@
     min-height: 74px;
     width: 100%;
     position: relative;
-    background: var(--brand-color--med);
+    background: var(--accent-color--med);
     @media (min-width: 895px) {height: 74px;}
   }
 
   &__avatar {
     display: block;
     position: absolute;
-    border: 5px solid var(--brand-color--faint);
+    border: 5px solid var(--accent-color--faint);
     left: 0;
     top: -90px;
     border-radius: 50%;
@@ -162,7 +162,7 @@
   @media screen and (max-width: 895px) {
     .account-mobile-container {
       display: block;
-      background: var(--brand-color--faint);
+      background: var(--accent-color--faint);
       margin-top: 10px;
       position: relative;
       padding: 10px 10px 0;
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 42f367df7..0c6a94202 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -203,7 +203,7 @@
 }
 
 .column-back-button {
-  background: var(--brand-color--med);
+  background: var(--accent-color--med);
   color: var(--highlight-text-color);
   cursor: pointer;
   flex: 0 0 auto;
diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
index 645b34041..fd2e3e55e 100644
--- a/app/styles/components/tabs-bar.scss
+++ b/app/styles/components/tabs-bar.scss
@@ -122,6 +122,10 @@
     font-size: 16px;
     transition: 0.2s;
 
+    > span {
+      text-shadow: 0 0 3px hsla(0, 0%, 0%, 0.15);
+    }
+
     &:hover {
       background-color: var(--accent-color--bright);
     }
@@ -151,6 +155,7 @@
   font-weight: bold;
   transition: 0.1s;
   outline: none;
+  text-shadow: 0 0 3px hsla(0, 0%, 0%, 0.15);
 
   @media screen and (max-width: 895px) {
     width: 36px;
diff --git a/app/styles/themes.scss b/app/styles/themes.scss
index 9a7930c44..1a717e243 100644
--- a/app/styles/themes.scss
+++ b/app/styles/themes.scss
@@ -36,14 +36,15 @@ body {
   --accent-color_hsl: var(--accent-color_h), var(--accent-color_s), var(--accent-color_l);
   --primary-text-color_hsl: var(--primary-text-color_h), var(--primary-text-color_s), var(--primary-text-color_l);
   --background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l);
-  --accent-color_h: calc(var(--brand-color_h) - 20);
-  --accent-color_s: calc(var(--brand-color_s) + 10%);
-  --accent-color_l: calc(var(--brand-color_l) + 5%);
+  --accent-color_h: calc(var(--brand-color_h) - 15);
+  --accent-color_s: 86%;
+  --accent-color_l: 44%;
 
   // Modifiers
   --brand-color--faint: hsla(var(--brand-color_hsl), 0.1);
   --brand-color--med: hsla(var(--brand-color_hsl), 0.2);
-  --accent-color--faint: hsla(var(--accent-color_hsl), 0.1);
+  --accent-color--faint: hsla(var(--accent-color_hsl), 0.15);
+  --accent-color--med: hsla(var(--accent-color_hsl), 0.25);
   --accent-color--bright: hsl(
     var(--accent-color_h),
     var(--accent-color_s),