From 55c958c7adcd5bd6e7e96fa5a35ca2a64111c907 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 31 May 2020 19:22:08 -0500
Subject: [PATCH] Homepage style improvements

---
 app/soapbox/features/about/index.js           | Bin 1199 -> 1199 bytes
 .../components/registration_form.js           | Bin 4346 -> 4182 bytes
 app/styles/soapbox/about.scss                 |  11 +++++++++++
 app/styles/soapbox/components.scss            |   2 +-
 app/styles/soapbox/containers.scss            |   6 +++++-
 app/styles/soapbox/footer.scss                |  11 +++--------
 app/styles/soapbox/forms.scss                 |  11 ++---------
 7 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/app/soapbox/features/about/index.js b/app/soapbox/features/about/index.js
index 89d952f72f38a4cb45b042facae478ab85d5eaa3..de2475eac121af3f0c4e591737d3ba72121cde5a 100644
GIT binary patch
delta 22
ecmZ3_xt?>w31+Uur2Ntn-GapQ)XA5a?*ag0aS0#*

delta 22
ecmZ3_xt?>w31+UO{0iOj%#`%hlF65t?*ag0zX>$}

diff --git a/app/soapbox/features/landing_page/components/registration_form.js b/app/soapbox/features/landing_page/components/registration_form.js
index fd525fb0d6d6e5c099fc10a35b7ceb33d375d247..2fc0c8a5319dafb4db8b638ea6ef583bbc365689 100644
GIT binary patch
delta 318
zcmeyRcuir$LH5bd*mWn1a%fF1=M$J5$e}U0nq$FaSx()_KAh5%^LThCmvKr>p3lQJ
zc?OU^$E`g1Ca2zHPA>7u`rLw({dr`;Y7)5=z-l^y;s=0gR{&{TYV)`u=1l<72Y3{4
zsM80UCyzy*fASgu!O11Oa+9a<>P$YwYXWqS&SW({yU8{@{9t!4<CB_vh%bAxKEEPR
zPH=KEzXH^~5WR=^oq*~DCW{G3Og0cm2bw25dA0zro{fH5W@=7KacYSjmjW2r=m%%!
W7UZP5<rn2b#5ApeQng%MwOjxzo?pfQ

delta 366
zcmcbn@Jn&SL3X*6%rb@KoW$Z{zr@^BTlJ*;3f=O|l=RdRbvrHvg~_|vO(wr#*O~l_
zS7@>ZhsI<-jzvJW{$y!R*~z>-{F7Zdr6$L6Dow8CRGmDJ$6)d~PRYryc?Bnb;Zy|6
zD{(0R<vAvMaEVWj<&wv#PM#ZN4##AB5Y5FgIUY!3H`5TT&V@%3r#f)~!O4ugN|P6G
zvP@Rx)dJIjyhcFUVDfriJFxpeeo*I=ne51y3pQ^HpES_@!jm8HDZu>zGRK(T4ea+$
zeu>HR`7<Yj#6$&zC#wmFXe%h#=m%%!7UZP5<rn3Gf(ry}^npPN;b>X|#cH{@YPkTU
C>Tosy

diff --git a/app/styles/soapbox/about.scss b/app/styles/soapbox/about.scss
index e931ff00e0..6e081bc0f1 100644
--- a/app/styles/soapbox/about.scss
+++ b/app/styles/soapbox/about.scss
@@ -729,6 +729,13 @@ $small-breakpoint: 960px;
     &--right {
       margin-left: auto;
       width: 395px;
+      background-color: #fff;
+      border-radius: 6px;
+
+      .simple_form {
+        padding: 20px;
+        background-color: var(--brand-color-faint);
+      }
     }
 
     @media (min-width: 767px) and (max-width: 1024px) {
@@ -1005,3 +1012,7 @@ $small-breakpoint: 960px;
 .public-layout pre.canary {
   white-space: pre-wrap;
 }
+
+.about-page {
+  background: var(--brand-color-faint);
+}
diff --git a/app/styles/soapbox/components.scss b/app/styles/soapbox/components.scss
index ffd098048c..ac420cfd33 100644
--- a/app/styles/soapbox/components.scss
+++ b/app/styles/soapbox/components.scss
@@ -53,7 +53,7 @@
 
   &:disabled,
   &.disabled {
-    background-color: $ui-primary-color;
+    background-color: var(--brand-color-med);
     cursor: default;
   }
 
diff --git a/app/styles/soapbox/containers.scss b/app/styles/soapbox/containers.scss
index 073bc216b8..030c17940c 100644
--- a/app/styles/soapbox/containers.scss
+++ b/app/styles/soapbox/containers.scss
@@ -203,6 +203,8 @@
   .content {
     display: block;
     margin: 40px 0;
+    background: #fff;
+    border-radius: 6px;
 
     @media screen and (max-width: 767px) {
       margin-top: 0;
@@ -270,10 +272,12 @@
             position: absolute;
             top: 30px;
             left: 160px;
+            border-radius: 4px;
+            background: #fff;
+            overflow: hidden;
 
             a {
               padding: 4px;
-              border-radius: 4px;
               background-color: var(--brand-color-med);
             }
           }
diff --git a/app/styles/soapbox/footer.scss b/app/styles/soapbox/footer.scss
index 167595478b..1a2b2f5787 100644
--- a/app/styles/soapbox/footer.scss
+++ b/app/styles/soapbox/footer.scss
@@ -6,8 +6,8 @@
     justify-content: center;
     align-items: center;
     margin-top: auto;
-    background-color: lighten($ui-base-color, 5%);
-    border-top: darken($ui-base-color, 10%);
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.15);
 
     @media screen and (max-width: 1024px) {
       padding: 40px 20px;
@@ -48,14 +48,9 @@
       margin-right: auto;
 
       span {
-        color: var(--primary-text-color);
         font-size: 1.3rem;
         font-weight: 500;
         line-height: 1.5;
-
-        &:last-of-type {
-          color: var(--primary-text-color-faint);
-        }
       }
     }
 
@@ -67,7 +62,7 @@
       li {
         a {
           text-decoration: none;
-          color: lighten($ui-base-color, 34%);
+          color: #fff;
           font-size: 1.3rem;
           font-weight: 500;
           line-height: 1.5;
diff --git a/app/styles/soapbox/forms.scss b/app/styles/soapbox/forms.scss
index b55ae17f8c..5bbf634cfb 100644
--- a/app/styles/soapbox/forms.scss
+++ b/app/styles/soapbox/forms.scss
@@ -409,17 +409,10 @@ code {
       margin-right: 0;
     }
 
-    &:hover {
-      background-color: lighten($ui-highlight-color, 5%);
-    }
-
+    &:hover,
     &:active,
     &:focus {
-      background-color: darken($ui-highlight-color, 5%);
-    }
-
-    &:disabled:hover {
-      background-color: $ui-primary-color;
+      background-color: var(--brand-color-hicontrast);
     }
 
     &.negative {