css: factor out button css.

Factor out the buttons from the user upgrades page into a general
UI component.

app/javascript/src/styles/base/020_base.scss

@@ -63,25 +63,6 @@ textarea {
   font-size: var(--text-sm);
 }
 
-input[type="button"], input[type="submit"], button {
-  border-radius: 3px;
-  padding: 0.25em 1em;
-
-  background: var(--form-button-background);
-  border: var(--form-button-border);
-  color: var(--form-button-text-color);
-
-  &:hover {
-    box-shadow: var(--form-button-hover-box-shadow);
-    background: var(--form-button-hover-background);
-  }
-
-  &:active {
-    box-shadow: var(--form-button-hover-box-shadow);
-    background: var(--form-button-active-background);
-  }
-}
-
 /* placeholder text in <input type="text"> elements */
 ::placeholder {
   color: var(--form-input-placeholder-text-color);

app/javascript/src/styles/base/040_colors.css

@@ -25,6 +25,7 @@
   --form-input-border: 1px solid #CCC;
   --form-input-placeholder-text-color: grey;
   --form-input-validation-error-border-color: red;
+
   --form-button-text-color: var(--form-input-text-color);
   --form-button-background: #EEE;
   --form-button-border: var(--form-input-border);
@@ -33,15 +34,17 @@
   --form-button-active-background: #DDD;
   --form-button-active-border: var(--form-button-border);
   --form-button-active-color: var(--form-button-text-color);
+  --button-primary-text-color: white;
+  --button-primary-background-color: var(--link-color);
+  --button-primary-hover-background-color: hsl(213, 100%, 40%);
+  --button-primary-disabled-color: grey;
+  --button-outline-primary-color: var(--link-color);
 
   --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-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;
@@ -331,6 +334,7 @@ body[data-current-user-theme="dark"] {
   --form-input-border: 1px solid var(--grey-4);
   --form-input-placeholder-text-color: var(--grey-4);
   --form-input-validation-error-border-color: var(--red-1);
+
   --form-button-text-color: var(--grey-1);
   --form-button-background: var(--grey-5);
   --form-button-border: 1px solid var(--grey-4);
@@ -339,6 +343,10 @@ body[data-current-user-theme="dark"] {
   --form-button-active-background: var(--grey-5);
   --form-button-active-border: 1px solid var(--grey-5);
   --form-button-active-color: white;
+  --button-primary-text-color: white;
+  --button-primary-background-color: var(--link-color);
+  --button-primary-hover-background-color: var(--link-hover-color);
+  --button-primary-disabled-color: var(--grey-4);
 
   --forum-vote-up-color: var(--green-1);
   --forum-vote-meh-color: var(--yellow-1);
@@ -430,9 +438,6 @@ body[data-current-user-theme="dark"] {
   --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-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);

app/javascript/src/styles/common/buttons.scss

@@ -0,0 +1,89 @@
+%button {
+  display: inline-block;
+  white-space: nowrap;
+  border-radius: 4px;
+  padding: 0.5em 1em;
+
+  &[disabled] {
+    cursor: default;
+  }
+}
+
+input[type="button"], input[type="submit"], button {
+  border-radius: 3px;
+  padding: 0.25em 1em;
+
+  background: var(--form-button-background);
+  border: var(--form-button-border);
+  color: var(--form-button-text-color);
+
+  &:hover {
+    box-shadow: var(--form-button-hover-box-shadow);
+    background: var(--form-button-hover-background);
+  }
+
+  &:active {
+    box-shadow: var(--form-button-hover-box-shadow);
+    background: var(--form-button-active-background);
+  }
+}
+
+/* Buttons, modeled after Material Design and Bootstrap. */
+a, button, input[type="submit"] {
+  /* A solid blue button. */
+  &.button-primary {
+    @extend %button;
+
+    color: var(--button-primary-text-color);
+    background-color: var(--button-primary-background-color);
+    border: none;
+
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
+
+    &:hover:not([disabled]) {
+      background-color: var(--button-primary-hover-background-color);
+      box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)
+    }
+
+    &[disabled] {
+      background-color: var(--button-primary-disabled-color);
+    }
+  }
+
+  /* An outlined blue button. */
+  &.button-outline-primary {
+    @extend %button;
+
+    color: var(--button-outline-primary-color);
+    background-color: transparent;
+    border: 1px solid var(--button-outline-primary-color);
+
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    &:hover:not([disabled]) {
+      color: var(--inverse-text-color);
+      background-color: var(--button-outline-primary-color);
+    }
+
+    &[disabled] {
+      color: var(--button-primary-disabled-color);
+      border: 1px solid var(--button-primary-disabled-color);
+    }
+  }
+
+  /* A small button. */
+  &.button-sm {
+    padding: 0.25em 1em;
+  }
+
+  /* A medium button. */
+  &.button-md {
+    padding: 0.50em 1em;
+  }
+
+  /* A large button. */
+  &.button-lg {
+    padding: 0.75em 1em;
+  }
+}

app/javascript/src/styles/specific/user_upgrades.scss

@@ -10,30 +10,6 @@ div#c-user-upgrades {
       text-align: center;
     }
 
-    .login-button, form.button_to input[type="submit"] {
-      display: inline-block;
-
-      color: var(--user-upgrade-button-text-color);
-      background-color: var(--user-upgrade-button-background-color);
-
-      border: none;
-      border-radius: 4px;
-      padding: 0.75em;
-
-      transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-      box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
-
-      &:hover:not([disabled]) {
-        background-color: var(--user-upgrade-button-hover-background-color);
-        box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)
-      }
-
-      &[disabled] {
-        background-color: grey;
-        cursor: default;
-      }
-    }
-
     table#feature-comparison {
       width: 100%;
 

app/views/user_upgrades/new.html.erb

@@ -97,21 +97,21 @@
         <tr>
           <td></td>
           <% if @user_upgrade.purchaser.is_anonymous? %>
-            <td><%= link_to "Login", login_path(url: new_user_upgrade_path), class: "login-button" %></td>
-            <td><%= link_to "Get #{Danbooru.config.canonical_app_name} Gold", login_path(url: new_user_upgrade_path), class: "login-button" %></td>
-            <td><%= link_to "Get #{Danbooru.config.canonical_app_name} Platinum", login_path(url: new_user_upgrade_path), class: "login-button" %></td>
+            <td><%= link_to "Login", login_path(url: new_user_upgrade_path), class: "login-button button-primary" %></td>
+            <td><%= link_to "Get #{Danbooru.config.canonical_app_name} Gold", login_path(url: new_user_upgrade_path), class: "login-button button-primary" %></td>
+            <td><%= link_to "Get #{Danbooru.config.canonical_app_name} Platinum", login_path(url: new_user_upgrade_path), class: "login-button button-primary" %></td>
           <% elsif @recipient.level == User::Levels::MEMBER %>
             <td></td>
-            <td><%= button_to "Get #{Danbooru.config.canonical_app_name} Gold", user_upgrades_path(user_id: @recipient.id, upgrade_type: "gold", country: params[:country], promo: params[:promo]), remote: true, disable_with: "Redirecting..." %></td>
-            <td><%= button_to "Get #{Danbooru.config.canonical_app_name} Platinum", user_upgrades_path(user_id: @recipient.id, upgrade_type: "platinum", country: params[:country], promo: params[:promo]), remote: true, disable_with: "Redirecting..." %></td>
+            <td><%= button_to "Get #{Danbooru.config.canonical_app_name} Gold", user_upgrades_path(user_id: @recipient.id, upgrade_type: "gold", country: params[:country], promo: params[:promo]), class: "button-primary", remote: true, disable_with: "Redirecting..." %></td>
+            <td><%= button_to "Get #{Danbooru.config.canonical_app_name} Platinum", user_upgrades_path(user_id: @recipient.id, upgrade_type: "platinum", country: params[:country], promo: params[:promo]), class: "button-primary", remote: true, disable_with: "Redirecting..." %></td>
           <% elsif @recipient.level == User::Levels::GOLD %>
             <td></td>
-            <td><%= button_to "Get #{Danbooru.config.canonical_app_name} Gold", nil, disabled: true %></td>
-            <td><%= button_to "Get #{Danbooru.config.canonical_app_name} Platinum", user_upgrades_path(user_id: @recipient.id, upgrade_type: "gold_to_platinum", country: params[:country], promo: params[:promo]), remote: true, disable_with: "Redirecting..." %></td>
+            <td><%= button_to "Get #{Danbooru.config.canonical_app_name} Gold", nil, class: "button-primary", disabled: true %></td>
+            <td><%= button_to "Get #{Danbooru.config.canonical_app_name} Platinum", user_upgrades_path(user_id: @recipient.id, upgrade_type: "gold_to_platinum", country: params[:country], promo: params[:promo]), class: "button-primary", remote: true, disable_with: "Redirecting..." %></td>
           <% else %>
             <td></td>
-            <td><%= button_to "Get #{Danbooru.config.canonical_app_name} Gold", nil, disabled: true %></td>
-            <td><%= button_to "Get #{Danbooru.config.canonical_app_name} Platinum", nil, disabled: true %></td>
+            <td><%= button_to "Get #{Danbooru.config.canonical_app_name} Gold", nil, class: "button-primary", disabled: true %></td>
+            <td><%= button_to "Get #{Danbooru.config.canonical_app_name} Platinum", nil, class: "button-primary", disabled: true %></td>
           <% end %>
         </tr>
       </tbody>