From 53cb73634db85e25f1e39cc9f549f2adf2f8ab29 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 31 May 2020 16:27:35 -0500
Subject: [PATCH] Color replace --brand-color-med

---
 app/soapbox/reducers/theme.js                 | Bin 1349 -> 1349 bytes
 app/styles/soapbox-light/diff.scss            |   4 ---
 app/styles/soapbox/about.scss                 |   4 +--
 app/styles/soapbox/basics.scss                |   2 +-
 app/styles/soapbox/components.scss            |  23 ++++++++++++------
 .../soapbox/components/account-header.scss    |   2 +-
 .../soapbox/components/hotkeys-modal.scss     |   2 +-
 app/styles/soapbox/forms.scss                 |   4 +--
 app/styles/soapbox/tables.scss                |   4 +--
 9 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/app/soapbox/reducers/theme.js b/app/soapbox/reducers/theme.js
index 3bbd71a30f4febebdd57e7b32b19838631623729..122a1d7693c7e53c9833e3b0f2932ad41856a0a1 100644
GIT binary patch
delta 15
WcmX@gb(CvE1T&MN>E<Zr*NgxwCIt=v

delta 15
WcmX@gb(CvE1T&M7!R9FD*Ngxw4+RPU

diff --git a/app/styles/soapbox-light/diff.scss b/app/styles/soapbox-light/diff.scss
index 48fb9b393b..daa84f3f8c 100644
--- a/app/styles/soapbox-light/diff.scss
+++ b/app/styles/soapbox-light/diff.scss
@@ -95,10 +95,6 @@ body {
   background: $ui-base-color;
 }
 
-.account-gallery__item a {
-  background-color: $ui-base-color;
-}
-
 // Change the colors used in the dropdown menu
 .dropdown-menu {
   &__item {
diff --git a/app/styles/soapbox/about.scss b/app/styles/soapbox/about.scss
index 33797855f7..fa9e2d1a85 100644
--- a/app/styles/soapbox/about.scss
+++ b/app/styles/soapbox/about.scss
@@ -170,7 +170,7 @@ $small-breakpoint: 960px;
 }
 
 .information-board {
-  background: darken($ui-base-color, 4%);
+  background: var(--brand-color-med);
   padding: 20px 0;
 
   .container-alt {
@@ -428,7 +428,7 @@ $small-breakpoint: 960px;
   }
 
   &__call-to-action {
-    background: darken($ui-base-color, 4%);
+    background: var(--brand-color-med);
     border-radius: 4px;
     padding: 25px 40px;
     overflow: hidden;
diff --git a/app/styles/soapbox/basics.scss b/app/styles/soapbox/basics.scss
index d9d797852e..54afa45664 100644
--- a/app/styles/soapbox/basics.scss
+++ b/app/styles/soapbox/basics.scss
@@ -85,7 +85,7 @@ body {
   }
 
   &.admin {
-    background: darken($ui-base-color, 4%);
+    background: var(--brand-color-med);
     position: fixed;
     width: 100%;
     height: 100%;
diff --git a/app/styles/soapbox/components.scss b/app/styles/soapbox/components.scss
index 8f389aadf1..6a7d38ed0a 100644
--- a/app/styles/soapbox/components.scss
+++ b/app/styles/soapbox/components.scss
@@ -25,11 +25,12 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   width: auto;
+  transition: 0.2s;
 
   &:active,
   &:focus,
   &:hover {
-    background-color: lighten($ui-highlight-color, 10%);
+    background-color: var(--brand-color-hicontrast);
   }
 
   &--destructive {
@@ -391,7 +392,7 @@
   }
 
   a {
-    color: var(--brand-color-hicontrast);
+    color: var(--highlight-text-color);
     text-decoration: none;
 
     &:hover {
@@ -548,6 +549,10 @@
   &.status-direct:not(.read) {
     background: var(--brand-color-med);
     border-bottom-color: var(--brand-color-med);
+
+    .status__content a {
+      color: var(--brand-color-hicontrast);
+    }
   }
 
   &.light {
@@ -796,7 +801,7 @@
 .account__avatar {
   @include avatar-radius;
   position: relative;
-  background-color: var(--accent-color);
+  background-color: var(--brand-color-faint);
 
   &-inline {
     display: inline-block;
@@ -3366,7 +3371,7 @@ a.status-card.compact:hover {
   margin-bottom: 5px;
 
   h5 {
-    background: darken($ui-base-color, 4%);
+    background: var(--brand-color-med);
     border-bottom: 1px solid var(--brand-color-med);
     cursor: default;
     display: flex;
@@ -4018,6 +4023,10 @@ a.status-card.compact:hover {
   overflow: hidden;
   margin: 2px;
 
+  a {
+    background: var(--brand-color-faint);
+  }
+
   &__icons {
     position: absolute;
     top: 50%;
@@ -4029,14 +4038,14 @@ a.status-card.compact:hover {
 
 .notification__filter-bar,
 .account__section-headline {
-  background: darken($ui-base-color, 4%);
+  background: var(--brand-color-med);
   border-bottom: 1px solid var(--brand-color-med);
   cursor: default;
   display: flex;
   flex-shrink: 0;
 
   button {
-    background: darken($ui-base-color, 4%);
+    background: var(--brand-color-med);
     border: 0;
     margin: 0;
   }
@@ -4546,7 +4555,7 @@ noscript {
   &__header {
     color: $dark-text-color;
     background: lighten($ui-base-color, 2%);
-    border-bottom: 1px solid darken($ui-base-color, 4%);
+    border-bottom: 1px solid var(--brand-color-med);
     font-weight: 500;
     padding: 15px;
     font-size: 16px;
diff --git a/app/styles/soapbox/components/account-header.scss b/app/styles/soapbox/components/account-header.scss
index 3ecc8f2cfb..9ff925681b 100644
--- a/app/styles/soapbox/components/account-header.scss
+++ b/app/styles/soapbox/components/account-header.scss
@@ -18,7 +18,7 @@
     overflow: hidden;
     height: 350px;
     position: relative;
-    background: darken($ui-base-color, 4%);
+    background: var(--brand-color-med);
     @media screen and (max-width: 895px) {height: 225px;}
     &--none {height: 125px;}
 
diff --git a/app/styles/soapbox/components/hotkeys-modal.scss b/app/styles/soapbox/components/hotkeys-modal.scss
index d6f47b6483..62e17521c5 100644
--- a/app/styles/soapbox/components/hotkeys-modal.scss
+++ b/app/styles/soapbox/components/hotkeys-modal.scss
@@ -44,7 +44,7 @@
       display: inline-block;
       padding: 2px 8px;
       background-color: var(--brand-color-med);
-      border: 1px solid darken($ui-base-color, 4%);
+      border: 1px solid var(--brand-color-med);
       border-radius: 4px;
     }
   }
diff --git a/app/styles/soapbox/forms.scss b/app/styles/soapbox/forms.scss
index b19e6109b6..19742f9d42 100644
--- a/app/styles/soapbox/forms.scss
+++ b/app/styles/soapbox/forms.scss
@@ -864,7 +864,7 @@ code {
   margin-bottom: 25px;
 
   .fa-link {
-    background-color: darken($ui-base-color, 4%);
+    background-color: var(--brand-color-med);
     border-radius: 100%;
     font-size: 24px;
     padding: 10px;
@@ -904,7 +904,7 @@ code {
     text-align: center;
 
     &::after {
-      background-color: darken($ui-base-color, 4%);
+      background-color: var(--brand-color-med);
       content: '';
       display: block;
       height: 100%;
diff --git a/app/styles/soapbox/tables.scss b/app/styles/soapbox/tables.scss
index f90406ca51..0c756c0230 100644
--- a/app/styles/soapbox/tables.scss
+++ b/app/styles/soapbox/tables.scss
@@ -11,7 +11,7 @@
     vertical-align: top;
     border-top: 1px solid $ui-base-color;
     text-align: left;
-    background: darken($ui-base-color, 4%);
+    background: var(--brand-color-med);
   }
 
   & > thead > tr > th {
@@ -183,7 +183,7 @@ a.table-action-link {
   &__row {
     border: 1px solid darken($ui-base-color, 8%);
     border-top: 0;
-    background: darken($ui-base-color, 4%);
+    background: var(--brand-color-med);
 
     @media screen and (max-width: $no-gap-breakpoint) {
       &:first-child {