Refactor CSS classes a bit

* Rename output-options to editor-options (will have input ones later).
* Refactor common button properties into a button class.

Change-Id: I2d44818eb878630f98d7229965876c1d158c78db
Reviewed-on: https://fuchsia-review.googlesource.com/c/fidlbolt/+/557963
Reviewed-by: Mitchell Kember <mkember@google.com>
diff --git a/frontend/src/elm/Editors.elm b/frontend/src/elm/Editors.elm
index a7e3f5b..a61e929 100644
--- a/frontend/src/elm/Editors.elm
+++ b/frontend/src/elm/Editors.elm
@@ -349,7 +349,7 @@
 optionsView : Form -> Form.Model -> (Msg -> msg) -> Html msg
 optionsView form options toMsg =
     Html.div
-        [ Attributes.class "output-options" ]
+        [ Attributes.class "editor-options" ]
         [ Form.view
             form
             []
diff --git a/frontend/src/elm/Form.elm b/frontend/src/elm/Form.elm
index 6c32399..180ef33 100644
--- a/frontend/src/elm/Form.elm
+++ b/frontend/src/elm/Form.elm
@@ -523,7 +523,7 @@
     -- handler, which we don't want.
     Html.button
         [ Attributes.type_ "button"
-        , Attributes.class "form-button"
+        , Attributes.class "button form-button"
         , Events.custom "click"
             (Decode.succeed
                 { message = msg
diff --git a/frontend/src/elm/Main.elm b/frontend/src/elm/Main.elm
index ba14c5e..a1bfbef 100644
--- a/frontend/src/elm/Main.elm
+++ b/frontend/src/elm/Main.elm
@@ -323,7 +323,7 @@
     let
         button title msg =
             Html.button
-                [ Attributes.class "controls-button"
+                [ Attributes.class "button controls-button"
                 , Attributes.type_ "button"
                 , Events.onClick msg
                 ]
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 894c79c..c870cdb 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -105,6 +105,20 @@
   text-decoration: underline;
 }
 
+.button {
+  background: var(--intense);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  cursor: pointer;
+  display: inline-block;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.button:hover {
+  background: var(--intense-hover);
+}
+
 .heading-fidl {
   margin-left: 10px;
 }
@@ -305,29 +319,20 @@
 }
 
 .form-button {
-  background: var(--intense);
   padding: 8px;
   margin: 0 5px;
-  border: 1px solid var(--border);
-  border-radius: 5px;
-  cursor: pointer;
-  display: inline-block;
   font: inherit;
   color: inherit;
   font-size: 14px;
 }
 
-.form-button:hover {
-  background: var(--intense-hover);
-}
-
-.output-options {
+.editor-options {
   border-top: 1px solid var(--border);
   background: var(--element);
   min-height: 36px;
 }
 
-.output-options .form-control {
+.editor-options .form-control {
   display: inline-block;
   padding: 10px 15px;
 }