diff --git a/app/soapbox/features/about/index.js b/app/soapbox/features/about/index.js index 89d952f72..de2475eac 100644 --- a/app/soapbox/features/about/index.js +++ b/app/soapbox/features/about/index.js @@ -33,7 +33,7 @@ class AboutPage extends ImmutablePureComponent { render() { return (
-
+
- -
-
-

With an account on {instance.get('title')} you'll be able to follow people on any server in the fediverse.

-
- - - - -
- +
+
+

With an account on {instance.get('title')} you'll be able to follow people on any server in the fediverse.

+
+ -
- I agree to the Terms of Service.} - name='agreement' - onChange={this.onCheckboxChange} - required - /> -
- -
- -
+ + + +
+ +
+ I agree to the Terms of Service.} + name='agreement' + onChange={this.onCheckboxChange} + required + /> +
+ +
+
-
- -
+
+ + ); } diff --git a/app/styles/soapbox/about.scss b/app/styles/soapbox/about.scss index e931ff00e..6e081bc0f 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 ffd098048..ac420cfd3 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 073bc216b..030c17940 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 167595478..1a2b2f578 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 b55ae17f8..5bbf634cf 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 {