Preferences page rehaul: use React components, UI improvements

static/css/components/Button.css

@@ -0,0 +1,76 @@
+.Button {
+  -webkit-app-region: no-drag;
+  background: transparent;
+  border-radius: 3px;
+  border: none;
+  color: #aaa;
+  cursor: default;
+  font-size: 14px;
+  font-weight: bold;
+  margin-left: 10px;
+  outline: none;
+  padding: 0;
+  padding: 7px 18px;
+  text-transform: uppercase;
+}
+
+/**
+ * Default button
+ */
+
+.Button.default {
+  color: #222;
+  background-color: rgba(153, 153, 153, 0.1);
+}
+
+.Button.default.dark {
+  color: #eee;
+}
+
+.Button.default:hover,
+.Button.default:focus { /* Material design: focused */
+  background-color: rgba(153, 153, 153, 0.2);
+}
+
+.Button.default:active { /* Material design: pressed */
+  background-color: rgba(153, 153, 153, 0.4);
+}
+
+/**
+ * Flat button
+ */
+
+.Button.flat {
+  color: #222;
+}
+
+.Button.flat.dark {
+  color: #eee;
+}
+
+.Button.flat:hover,
+.Button.flat:focus {
+  background-color: rgba(153, 153, 153, 0.2);
+}
+
+.Button.flat:active {
+  background-color: rgba(153, 153, 153, 0.4);
+}
+
+/**
+ * Raised button
+ */
+
+.Button.raised {
+  background-color: #2196f3;
+  color: #eee;
+}
+
+.Button.raised:hover,
+.Button.raised:focus {
+  background-color: #38a0f5;
+}
+
+.Button.raised:active {
+  background-color: #51abf6;
+}