From 86b24990ee69e541e1651b6ba032b963186ea14f Mon Sep 17 00:00:00 2001
From: Mark H <70579116+mark-dr@users.noreply.github.com>
Date: Tue, 13 Jul 2021 09:53:30 +0100
Subject: [PATCH] Update styles for dark mode, add general bootstrap overrides

---
 _scss/_landing.scss     |  1 -
 _scss/_night-mode.scss  |  2 +-
 _scss/_overrides.scss   | 20 ++++++++++++++++++++
 _scss/_upgrade-cta.scss | 16 ++++++++++++----
 test.md                 |  2 +-
 5 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/_scss/_landing.scss b/_scss/_landing.scss
index 6a147528bb..63199c7b7e 100644
--- a/_scss/_landing.scss
+++ b/_scss/_landing.scss
@@ -271,7 +271,6 @@ body.landing {
       background:  #FF3F73;
       color:       white;
       font-size:   17px;
-      font-weight: bold;
       margin-top:  50px;
       padding:     20px 60px;
 
diff --git a/_scss/_night-mode.scss b/_scss/_night-mode.scss
index f72cc5777e..48147d2e12 100755
--- a/_scss/_night-mode.scss
+++ b/_scss/_night-mode.scss
@@ -25,7 +25,7 @@ body.night {
     div#side-toc-title {
         color: $white;
     }
-    a:not(.btn) {
+    a:not(.btn):not(.button) {
         color: $primary-links-night;
     }
     .header {
diff --git a/_scss/_overrides.scss b/_scss/_overrides.scss
index 657e175fca..fc84431e63 100755
--- a/_scss/_overrides.scss
+++ b/_scss/_overrides.scss
@@ -29,6 +29,26 @@
     display: block;
 }
 
+.btn {
+  font-weight: bold;
+}
+
+.btn-primary {
+  background-color: $marine-50;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 10px 15px 6px;
+
+  &:hover {
+    opacity: 0.8;
+
+    // override default bootstrap behaviour
+    background-color: $marine-50;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
+  font-family: $buttons;
+}
+
 .btn-default:hover {
     color: #fff!important;
     background-color: transparent!important;
diff --git a/_scss/_upgrade-cta.scss b/_scss/_upgrade-cta.scss
index 7b0e2814c7..a56735593e 100644
--- a/_scss/_upgrade-cta.scss
+++ b/_scss/_upgrade-cta.scss
@@ -1,12 +1,20 @@
 .docker-upgrade-cta {
-  background-color: $orange-10;
-  color: $body-text; // we want this irrespective of light/dark mode
+  body.night & {
+    background-color: change-color($orange-10, $alpha: 0.3);
+    border: 1px solid $orange-10;
+    p, .docker-upgrade-cta__heading { color: $orange-10; }
+  }
+
+  body:not(.night) & {
+    background-color: $orange-10;
+    border: 1px solid $orange-20;
+    p, .docker-upgrade-cta__heading { color: inherit; }
+  }
 
   padding: 16px 25px;
   margin: 0 0 20px;
 
-  border-radius: 4px;
-  border: 1px solid $orange-20;
+  border-radius: 3px;
 
   .docker-upgrade-cta__heading {
     font-weight: bold;
diff --git a/test.md b/test.md
index 6da765c2df..4b6a2166e4 100644
--- a/test.md
+++ b/test.md
@@ -672,7 +672,7 @@ Use the `upgrade-cta.html` include to render a CTA asking the user to upgrade th
 {% include upgrade-cta.html
   body="Upgrade to gain access to this feature"
   header-text="This feature is restricted to X and Y plans"
-  target-url="https://www.example.com/
+  target-url="https://www.example.com/"
 %}
 ```
 {% endraw %}