user upgrades: update upgrade landing page.

* Add a frequently asked questions section.
* Add nicer looking upgrade buttons.
* Format the page nicer.
* Prevent users from attempting invalid upgrades on users that are
  already Platinum or above.
This commit is contained in:
evazion
2020-12-25 00:27:08 -06:00
parent 058d71aa30
commit 069231a33b
9 changed files with 283 additions and 147 deletions

View File

@@ -118,6 +118,17 @@ table tfoot {
margin-top: 2em;
}
details {
border-bottom: 1px solid var(--details-border);
summary {
cursor: pointer;
user-select: none;
outline: none;
line-height: 2em;
}
}
.fineprint {
color: var(--muted-text-color);
font-style: italic;

View File

@@ -35,9 +35,12 @@
--quick-search-form-background: var(--body-background-color);
--user-upgrade-basic-background-color: #F5F5FF;
--user-upgrade-gold-background-color: #FFF380;
--user-upgrade-platinum-background-color: #EEE;
--user-upgrade-table-row-hover-background-color: #FEF;
--user-upgrade-button-text-color: white;
--user-upgrade-button-background-color: var(--link-color);
--user-upgrade-button-hover-background-color: hsl(213, 100%, 40%);
--table-header-border: 2px solid #666;
--table-row-border: 1px solid #CCC;
@@ -72,6 +75,8 @@
--comment-sticky-background-color: var(--subnav-menu-background-color);
--details-border: #DDD;
--post-tooltip-background-color: var(--body-background-color);
--post-tooltip-border-color: hsla(210, 100%, 3%, 0.15);
--post-tooltip-box-shadow: 0 4px 14px -2px hsla(210, 100%, 3%, 0.10);
@@ -157,7 +162,8 @@
--bulk-update-request-failed-color: red;
--login-link-color: #E00;
--footer-border: 1px solid #EEE;
--footer-border: 1px solid #DDD;
--details-border: #DDD;
--jquery-ui-widget-content-background: var(--body-background-color);
--jquery-ui-widget-content-text-color: var(--text-color);
@@ -255,6 +261,7 @@ body[data-current-user-theme="dark"] {
--subnav-menu-background-color: var(--grey-2);
--responsive-menu-background-color: var(--grey-3);
--footer-border: 1px solid var(--grey-3);
--details-border: var(--grey-3);
--table-header-border: 2px solid var(--grey-3);
--table-even-row-background: var(--grey-2);
@@ -419,9 +426,12 @@ body[data-current-user-theme="dark"] {
--uploads-dropzone-progress-bar-foreground-color: var(--link-color);
--uploads-dropzone-progress-bar-background-color: var(--link-hover-color);
--user-upgrade-gold-background-color: var(--yellow-0);
--user-upgrade-basic-background-color: var(--grey-2);
--user-upgrade-gold-background-color: var(--indigo-0);
--user-upgrade-platinum-background-color: var(--blue-0);
--user-upgrade-table-row-hover-background-color: transparent;
--user-upgrade-button-text-color: white;
--user-upgrade-button-background-color: var(--link-color);
--user-upgrade-button-hover-background-color: var(--link-hover-color);
--wiki-page-other-name-background-color: var(--grey-3);
--wiki-page-versions-diff-del-background: var(--red-0);