refactor: simplify button code by removing editor-button class

Author: domoritz

src/components/app.css

@@ -98,9 +98,7 @@ html {
   display: none;
 }
 
-button,
-.editor-button {
-  cursor: pointer;
+button {
   padding: 0.3em 1em;
   border-style: solid;
   border-width: 1px;
@@ -113,34 +111,24 @@ button,
   justify-content: center;
   align-items: center;
   font-size: 0.9em;
-}
-
-.editor-button {
-  user-select: none;
-  margin-right: 8px;
+  cursor: pointer;
 }
 
 button:hover,
-.editor-button:hover,
-button:focus,
-.editor-button:focus {
+button:focus {
   border-color: hsl(0, 0%, 70%);
 }
 
-.editor-button:focus {
-  outline: 0;
-}
-
-button:active,
-.editor-button:active {
+button:active {
   border-color: hsl(0, 0%, 40%);
 }
 
-button:disabled,
-.editor-button:disabled {
+button:disabled {
   opacity: 0.7;
   background-color: var(--light-gray-color);
   color: var(--extra-dark-gray-color);
+  cursor: default;
+  border-color: hsl(0, 0%, 80%);
 }
 
 /* Scrollbar Styles */

src/components/header/share-modal/index.css

@@ -4,13 +4,17 @@
   padding: 2em 0;
 }
 
-.sharing-buttons .editor-button svg {
+.sharing-buttons button svg {
   width: 22px;
   height: 22px;
   stroke: var(--black-color);
   padding-right: 5px;
 }
 
+.sharing-buttons button {
+  margin-right: 8px;
+}
+
 .user-pref {
   display: flex;
   align-items: center;

src/components/header/share-modal/renderer.tsx

@@ -259,20 +259,20 @@ class ShareModal extends React.PureComponent<Props, State> {
           </label>
         </div>
         <div className="sharing-buttons">
-          <button className="editor-button" onClick={() => this.previewURL()}>
+          <button onClick={() => this.previewURL()}>
             <Link />
             <span>Open Link</span>
           </button>
           <Clipboard
-            className="editor-button copy-icon"
+            className="copy-icon"
             data-clipboard-text={this.state.generatedURL}
             onSuccess={this.onCopy.bind(this)}
           >
             <Copy />
             <span>Copy Link to Clipboard</span>
           </Clipboard>
           <Clipboard
-            className="editor-button copy-icon"
+            className="copy-icon"
             data-clipboard-text={`[Open the Chart in the Vega Editor](${this.state.generatedURL})`}
             onSuccess={this.onCopy.bind(this)}
           >
@@ -330,15 +330,14 @@ class ShareModal extends React.PureComponent<Props, State> {
               )}
               <div className="sharing-buttons">
                 <button
-                  className="editor-button"
                   onClick={this.updateGist.bind(this)}
                   disabled={!this.state.gistFileNameSelected || this.state.updating}
                 >
                   <Save />
                   {this.state.updating ? 'Updating...' : 'Update'}
                 </button>
                 {this.state.gistEditorURL && this.state.updating !== undefined && (
-                  <Clipboard className="editor-button copy-icon" data-clipboard-text={this.state.gistEditorURL}>
+                  <Clipboard className="copy-icon" data-clipboard-text={this.state.gistEditorURL}>
                     <Copy />
                     <span>Copy Link to Clipboard</span>
                   </Clipboard>
@@ -389,12 +388,12 @@ class ShareModal extends React.PureComponent<Props, State> {
                 </label>
               </div>
               <div className="sharing-buttons">
-                <button className="editor-button" onClick={this.createGist.bind(this)} disabled={this.state.creating}>
+                <button onClick={this.createGist.bind(this)} disabled={this.state.creating}>
                   <Save />
                   {this.state.creating ? 'Creating...' : 'Create'}
                 </button>
                 {this.state.gistEditorURL && this.state.creating !== undefined && (
-                  <Clipboard className="editor-button copy-icon" data-clipboard-text={this.state.gistEditorURL}>
+                  <Clipboard className="copy-icon" data-clipboard-text={this.state.gistEditorURL}>
                     <Copy />
                     <span>Copy Link to Clipboard</span>
                   </Clipboard>