Major CSS revamp

- Get rid of Bootstrap (except we still rely on some JS)
- Use BEM class names
- Rework variables/theme config
- Fix various bugs, including some on mobile

The CSS is still not ideal – it needs to be cleaned up some more. But
that can be a focus for after beta.

js/lib/components/Modal.js

@@ -0,0 +1,139 @@
+import Component from 'flarum/Component';
+import LoadingIndicator from 'flarum/components/LoadingIndicator';
+import Alert from 'flarum/components/Alert';
+import Button from 'flarum/components/Button';
+import icon from 'flarum/helpers/icon';
+
+/**
+ * The `Modal` component displays a modal dialog, wrapped in a form. Subclasses
+ * should implement the `className`, `title`, and `content` methods.
+ *
+ * @abstract
+ */
+export default class Modal extends Component {
+  constructor(...args) {
+    super(...args);
+
+    /**
+     * An alert component to show below the header.
+     *
+     * @type {Alert}
+     */
+    this.alert = null;
+
+    /**
+     * Whether or not the form is processing.
+     *
+     * @type {Boolean}
+     */
+    this.loading = false;
+  }
+
+  view() {
+    if (this.alert) {
+      this.alert.props.dismissible = false;
+    }
+
+    return (
+      <div className={'Modal modal-dialog ' + this.className()}>
+        <div className="Modal-content">
+          <div className="Modal-close Page-backControl">
+            {Button.component({
+              icon: 'times',
+              onclick: this.hide.bind(this),
+              className: 'Button Button--icon Button--link'
+            })}
+          </div>
+
+          <form onsubmit={this.onsubmit.bind(this)}>
+            <div className="Modal-header">
+              <h3 className="Page-titleControl Page-titleControl--text">{this.title()}</h3>
+            </div>
+
+            {alert ? <div className="Modal-alert">{this.alert}</div> : ''}
+
+            {this.content()}
+          </form>
+        </div>
+
+        {LoadingIndicator.component({
+          className: 'Modal-loading ' + (this.loading ? 'active' : '')
+        })}
+      </div>
+    );
+  }
+
+  /**
+   * Get the class name to apply to the modal.
+   *
+   * @return {String}
+   * @abstract
+   */
+  className() {
+  }
+
+  /**
+   * Get the title of the modal dialog.
+   *
+   * @return {String}
+   * @abstract
+   */
+  title() {
+  }
+
+  /**
+   * Get the content of the modal.
+   *
+   * @return {VirtualElement}
+   * @abstract
+   */
+  content() {
+  }
+
+  /**
+   * Handle the modal form's submit event.
+   *
+   * @param {Event} e
+   */
+  onsubmit() {
+  }
+
+  /**
+   * Focus on the first input when the modal is ready to be used.
+   */
+  onready() {
+    this.$('form :input:first').select();
+  }
+
+  /**
+   * Hide the modal.
+   */
+  hide() {
+    app.modal.close();
+  }
+
+  /**
+   * Show an alert describing errors returned from the API, and give focus to
+   * the first relevant field.
+   *
+   * @param {Object} response
+   */
+  handleErrors(response) {
+    const errors = response && response.errors;
+
+    if (errors) {
+      this.alert(new Alert({
+        type: 'warning',
+        message: errors.map((error, k) => [error.detail, k < errors.length - 1 ? m('br') : ''])
+      }));
+    }
+
+    m.redraw();
+
+    if (errors) {
+      this.$('form [name=' + errors[0].path + ']').select();
+    } else {
+      this.$('form :input:first').select();
+    }
+  }
+}