Homepage style improvements

app/soapbox/features/about/index.js

@@ -33,7 +33,7 @@ class AboutPage extends ImmutablePureComponent {
   render() {
     return (
       <div className='content'>
-        <div className='box-widget'>
+        <div className='about-page'>
           <div
             className='rich-formatting'
             dangerouslySetInnerHTML={{ __html: this.state.pageHtml }}

app/soapbox/features/landing_page/components/registration_form.js

@@ -73,7 +73,6 @@ class RegistrationForm extends ImmutablePureComponent {
     const isLoading = this.state.captchaLoading || this.state.submissionLoading;
 
     return (
-      <div className='box-widget'>
       <SimpleForm onSubmit={this.onSubmit}>
         <fieldset disabled={isLoading}>
           <div className='simple_form__overlay-area'>
@@ -132,7 +131,6 @@ class RegistrationForm extends ImmutablePureComponent {
           </div>
         </fieldset>
       </SimpleForm>
-      </div>
     );
   }
 

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);
+}

app/styles/soapbox/components.scss

@@ -53,7 +53,7 @@
 
   &:disabled,
   &.disabled {
-    background-color: $ui-primary-color;
+    background-color: var(--brand-color-med);
     cursor: default;
   }
 

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);
             }
           }

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;

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 {