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,66 +73,64 @@ 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'>
-              <p className='lead'>With an account on <strong>{instance.get('title')}</strong> you'll be able to follow people on any server in the fediverse.</p>
-              <div className='fields-group'>
-                <TextInput
-                  placeholder='Username'
-                  name='username'
-                  autoComplete='off'
-                  onChange={this.onInputChange}
-                  required
-                />
-                <SimpleInput
-                  placeholder='E-mail address'
-                  name='email'
-                  type='email'
-                  autoComplete='off'
-                  onChange={this.onInputChange}
-                  required
-                />
-                <SimpleInput
-                  placeholder='Password'
-                  name='password'
-                  type='password'
-                  autoComplete='off'
-                  onChange={this.onInputChange}
-                  required
-                />
-                <SimpleInput
-                  placeholder='Confirm password'
-                  name='confirm'
-                  type='password'
-                  autoComplete='off'
-                  onChange={this.onInputChange}
-                  required
-                />
-              </div>
-              <CaptchaField
-                onFetch={this.onFetchCaptcha}
-                onFetchFail={this.onFetchCaptchaFail}
+      <SimpleForm onSubmit={this.onSubmit}>
+        <fieldset disabled={isLoading}>
+          <div className='simple_form__overlay-area'>
+            <p className='lead'>With an account on <strong>{instance.get('title')}</strong> you'll be able to follow people on any server in the fediverse.</p>
+            <div className='fields-group'>
+              <TextInput
+                placeholder='Username'
+                name='username'
+                autoComplete='off'
                 onChange={this.onInputChange}
-                idempotencyKey={this.state.captchaIdempotencyKey}
+                required
+              />
+              <SimpleInput
+                placeholder='E-mail address'
+                name='email'
+                type='email'
+                autoComplete='off'
+                onChange={this.onInputChange}
+                required
+              />
+              <SimpleInput
+                placeholder='Password'
+                name='password'
+                type='password'
+                autoComplete='off'
+                onChange={this.onInputChange}
+                required
+              />
+              <SimpleInput
+                placeholder='Confirm password'
+                name='confirm'
+                type='password'
+                autoComplete='off'
+                onChange={this.onInputChange}
+                required
               />
-              <div className='fields-group'>
-                <Checkbox
-                  label={<>I agree to the <Link to='/about/tos' target='_blank'>Terms of Service</Link>.</>}
-                  name='agreement'
-                  onChange={this.onCheckboxChange}
-                  required
-                />
-              </div>
-              <input type='hidden' name='locale' value='en_US' />
-              <div className='actions'>
-                <button name='button' type='submit' className='btn button button-primary'>Sign up</button>
-              </div>
             </div>
-          </fieldset>
-        </SimpleForm>
-      </div>
+            <CaptchaField
+              onFetch={this.onFetchCaptcha}
+              onFetchFail={this.onFetchCaptchaFail}
+              onChange={this.onInputChange}
+              idempotencyKey={this.state.captchaIdempotencyKey}
+            />
+            <div className='fields-group'>
+              <Checkbox
+                label={<>I agree to the <Link to='/about/tos' target='_blank'>Terms of Service</Link>.</>}
+                name='agreement'
+                onChange={this.onCheckboxChange}
+                required
+              />
+            </div>
+            <input type='hidden' name='locale' value='en_US' />
+            <div className='actions'>
+              <button name='button' type='submit' className='btn button button-primary'>Sign up</button>
+            </div>
+          </div>
+        </fieldset>
+      </SimpleForm>
     );
   }
 

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 {