From 78497bd9244ba5bf79039b273618f7b936242599 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 31 May 2020 15:51:20 -0500
Subject: [PATCH] Improve dropdown menu style

---
 app/styles/soapbox-light/diff.scss            | 28 -------------------
 app/styles/soapbox/_mixins.scss               |  4 +--
 app/styles/soapbox/components.scss            |  6 ++--
 .../soapbox/components/compose-form.scss      |  4 +--
 .../soapbox/components/dropdown-menu.scss     | 13 ++++-----
 5 files changed, 13 insertions(+), 42 deletions(-)

diff --git a/app/styles/soapbox-light/diff.scss b/app/styles/soapbox-light/diff.scss
index f5a093dad..48fb9b393 100644
--- a/app/styles/soapbox-light/diff.scss
+++ b/app/styles/soapbox-light/diff.scss
@@ -39,10 +39,6 @@ body {
     }
   }
 
-  .compose-form__buttons-wrapper {
-    background: darken($ui-base-color, 6%);
-  }
-
   .autosuggest-textarea__suggestions {
     background: darken($ui-base-color, 6%);
   }
@@ -105,26 +101,6 @@ body {
 
 // Change the colors used in the dropdown menu
 .dropdown-menu {
-  background: $ui-base-color;
-
-  &__arrow {
-    &.left {
-      border-left-color: $ui-base-color;
-    }
-
-    &.top {
-      border-top-color: $ui-base-color;
-    }
-
-    &.bottom {
-      border-bottom-color: $ui-base-color;
-    }
-
-    &.right {
-      border-right-color: $ui-base-color;
-    }
-  }
-
   &__item {
     a {
       color: $darker-text-color;
@@ -350,10 +326,6 @@ body {
   color: #fff;
 }
 
-.timeline-compose-block .compose-form .compose-form__autosuggest-wrapper .autosuggest-textarea__textarea {
-  background: $gab-background-base-light;
-}
-
 .promo-panel-item {
   @include light-theme-shadow;
   background: $gab-background-container-light;
diff --git a/app/styles/soapbox/_mixins.scss b/app/styles/soapbox/_mixins.scss
index 49eb090b8..ef5a1f7b5 100644
--- a/app/styles/soapbox/_mixins.scss
+++ b/app/styles/soapbox/_mixins.scss
@@ -48,7 +48,7 @@
   box-shadow: none;
   font-family: inherit;
   background: $nav-ui-search-bg-color;
-  color: $nav-ui-highlight-color;
+  color: var(--highlight-text-color);
   margin: 0;
   border-radius: 4px;
 
@@ -92,7 +92,7 @@
 
     li {
       margin: 0 0 2px;
-      em {color: $nav-ui-highlight-color;}
+      em {color: var(--brand-color);}
     }
   }
 }
diff --git a/app/styles/soapbox/components.scss b/app/styles/soapbox/components.scss
index 83f0e754e..baed24839 100644
--- a/app/styles/soapbox/components.scss
+++ b/app/styles/soapbox/components.scss
@@ -796,7 +796,7 @@
 .account__avatar {
   @include avatar-radius;
   position: relative;
-  background-color: $ui-base-color;
+  background-color: var(--accent-color);
 
   &-inline {
     display: inline-block;
@@ -3342,8 +3342,8 @@ a.status-card.compact:hover {
   .fa-times-circle {
     @include font-size(17);
     cursor: pointer;
-    color: $nav-ui-highlight-color;
-    &:hover {color: lighten($nav-ui-highlight-color, 7%);}
+    color: var(--highlight-text-color);
+    &:hover {color: var(--brand-color);}
   }
 }
 
diff --git a/app/styles/soapbox/components/compose-form.scss b/app/styles/soapbox/components/compose-form.scss
index b112ec739..42f8b0b80 100644
--- a/app/styles/soapbox/components/compose-form.scss
+++ b/app/styles/soapbox/components/compose-form.scss
@@ -98,7 +98,7 @@
     width: 100%;
     margin: 0;
     color: $inverted-text-color;
-    background: $simple-background-color;
+    background: $gab-background-base-light;
     padding: 10px;
     font-family: inherit;
     font-size: 14px;
@@ -283,7 +283,7 @@
 
   .compose-form__buttons-wrapper {
     padding: 10px;
-    background: darken($simple-background-color, 8%);
+    background: $gab-background-base-light;
     border-radius: 0 0 4px 4px;
     display: flex;
     justify-content: space-between;
diff --git a/app/styles/soapbox/components/dropdown-menu.scss b/app/styles/soapbox/components/dropdown-menu.scss
index 371577cc4..20156a193 100644
--- a/app/styles/soapbox/components/dropdown-menu.scss
+++ b/app/styles/soapbox/components/dropdown-menu.scss
@@ -4,9 +4,8 @@
   @include font-weight(normal);
   z-index: 9999;
   position: absolute;
-  background: $gab-background-container;
-  border-radius: 4px;
-  border: 1px solid $gab-placeholder-accent;
+  background: $gab-background-base-light;
+  border-radius: 6px;
   padding: 4px 0;
   color: $gab-secondary-text;
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
@@ -25,28 +24,28 @@
       right: -5px;
       margin-top: -5px;
       border-width: 5px 0 5px 5px;
-      border-left-color: $gab-placeholder-accent;
+      border-left-color: $gab-background-base-light;
     }
 
     &.top {
       bottom: -5px;
       margin-left: -5px;
       border-width: 5px 5px 0;
-      border-top-color: $gab-placeholder-accent;
+      border-top-color: $gab-background-base-light;
     }
 
     &.bottom {
       top: -5px;
       margin-left: -5px;
       border-width: 0 5px 5px;
-      border-bottom-color: $gab-placeholder-accent;
+      border-bottom-color: $gab-background-base-light;
     }
 
     &.right {
       left: -5px;
       margin-top: -5px;
       border-width: 5px 5px 5px 0;
-      border-right-color: $gab-placeholder-accent;
+      border-right-color: $gab-background-base-light;
     }
   }