make some css class names more generic

css/base.css

@@ -143,7 +143,6 @@ button.round.small {
   line-height: 2rem;
   box-shadow: 0 2px 0.35rem 0 rgba(0, 0, 0, 0.25);
 }
-
 button:focus, button:hover, button:active {
   color: #fff;
 }
@@ -154,27 +153,19 @@ button:active.round.small {
   box-shadow: inset 0 2px 0.35rem rgba(0, 0, 0, 0.125);
 }
 
-button.blue {
+button.primary {
   background-color: #1e88e5; /* blue 600 */
   color: white;
 }
-button.blue:focus, button.blue:hover, button.blue:active {
-  background-color: #1976d2;
-}
-
-button.blue {
-  background-color: #1e88e5; /* blue 600 */
-  color: white;
-}
-button.blue:focus, button.blue:hover, button.blue:active {
+button.primary:focus, button.primary:hover, button.primary:active {
   background-color: #2962ff;
 }
 
-button.white {
+button.secondary {
   background-color: #FFF;
   color: #2196f3; /* blue 500 */
 }
-button.white:focus, button.white:hover, button.blue:active {
+button.secondary:focus, button.secondary:hover, button.secondary:active {
   background-color: #e3f2fd;
 }
 

src/views/create-account-view.jsx

@@ -70,7 +70,7 @@ export default class CreateAccountView extends React.PureComponent {
   }
 
   render() {
-    let submitClasses = 'blue';
+    let submitClasses = 'primary';
     if (this.props.disabled) {
       submitClasses += ' disabled';
     }

src/views/login-view.jsx

@@ -42,7 +42,7 @@ export default class LoginView extends React.Component {
   }
 
   render() {
-    var submitClasses = 'blue';
+    let submitClasses = 'primary';
     if (this.props.disabled) {
       submitClasses += ' disabled';
     }

src/views/password-reset-view.jsx

@@ -75,7 +75,7 @@ export default class PasswordResetView extends React.PureComponent {
           </>
         }
         <div className="dialog-buttons">
-          <button className="blue" type="submit">{reset ?
+          <button className="primary" type="submit">{reset ?
             <FormattedMessage id="button_reset" defaultMessage="Reset" description="Button [Reset]" /> :
             <FormattedMessage id="button_send_request" defaultMessage="Send request"
               description="Button [Send request]" />

src/views/settings-view.jsx

@@ -73,7 +73,7 @@ export default class SettingsView extends React.PureComponent {
           </ul>
         </div>
         <div className="dialog-buttons">
-          <button type="submit" className="blue">
+          <button type="submit" className="primary">
             <FormattedMessage id="button_update" defaultMessage="Update"
               description="Button [Update]" />
           </button>

src/views/validation-view.jsx

@@ -78,10 +78,10 @@ class ValidationView extends React.PureComponent {
         }</FormattedMessage>
         </div>
         <div className="dialog-buttons">
-          <button className="blue" onClick={this.handleSubmit}>
+          <button className="primary" onClick={this.handleSubmit}>
             <FormattedMessage id="button_confirm" defaultMessage="Confirm" description="Button [Confirm]" />
           </button>
-          <button className="white" onClick={this.handleCancel}>
+          <button className="secondary" onClick={this.handleCancel}>
             <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
           </button>
         </div>

src/widgets/alert.jsx

@@ -16,7 +16,7 @@ export default class Alert extends React.PureComponent {
               :
               null
             }
-            <button className="blue" onClick={this.props.onConfirm}>
+            <button className="primary" onClick={this.props.onConfirm}>
               {this.props.confirm || <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]"  />}
             </button>
           </div>

src/widgets/group-manager.jsx

@@ -188,10 +188,10 @@ class GroupManager extends React.Component {
           showUnread={false}
           onTopicSelected={this.handleContactSelected} />
         <div id="group-manager-buttons" className="panel-form-row">
-          <button className="blue" onClick={this.handleSubmit}>
+          <button className="primary" onClick={this.handleSubmit}>
             <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />
           </button>
-          <button className="white" onClick={this.handleCancel}>
+          <button className="secondary" onClick={this.handleCancel}>
             <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
           </button>
         </div>

src/widgets/invitation.jsx

@@ -23,15 +23,15 @@ export default class Invitation extends React.PureComponent {
             description="New chat invitation message: [Accept] [Ignore] [Block]." />
         </div>
         <div className="footer">
-          <button className="blue" onClick={event => { this.handleButtonAction(event, "accept"); }}>
+          <button className="primary" onClick={event => { this.handleButtonAction(event, "accept"); }}>
             <FormattedMessage id="chat_invitation_accept"
               defaultMessage="Accept" description="Action [Accept] for chat invitation." />
           </button>
-          <button className="white" onClick={event => { this.handleButtonAction(event, "delete"); }}>
+          <button className="secondary" onClick={event => { this.handleButtonAction(event, "delete"); }}>
             <FormattedMessage id="chat_invitation_ignore"
               defaultMessage="Ignore" description="Action [Ignore] for chat invitation." />
           </button>
-          <button className="white" onClick={event => { this.handleButtonAction(event, "block"); }}>
+          <button className="secondary" onClick={event => { this.handleButtonAction(event, "block"); }}>
             <FormattedMessage id="chat_invitation_block"
               defaultMessage="Block" description="Action [Block] for chat invitation." />
           </button>

src/widgets/new-topic-by-id.jsx

@@ -57,7 +57,7 @@ class NewTopicById extends React.PureComponent {
         }</FormattedMessage>
         </div>
         <div className="dialog-buttons">
-          <button className="blue" onClick={this.handleSubmit}>
+          <button className="primary" onClick={this.handleSubmit}>
             <FormattedMessage id="button_subscribe" defaultMessage="Subscribe"
               description="Button [Subscribe]" />
           </button>

src/widgets/new-topic-group.jsx

@@ -58,7 +58,7 @@ export default class NewTopicGroup extends React.PureComponent {
   }
 
   render() {
-    var submitClasses = 'blue';
+    let submitClasses = 'primary';
     if (this.props.disabled) {
       submitClasses += ' disabled';
     }

src/widgets/permissions-editor.jsx

@@ -153,7 +153,7 @@ class PermissionsEditor extends React.Component {
           <button className="outline" onClick={this.handleCancel}>
             <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
           </button>
-          <button className="blue" onClick={this.handleSubmit}>
+          <button className="primary" onClick={this.handleSubmit}>
             <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />
           </button>
         </div>

src/widgets/tag-manager.jsx

@@ -130,7 +130,7 @@ export default class TagManager extends React.Component {
               <button className="outline" onClick={this.handleCancel}>
                 <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />
               </button>
-              <button className="blue" onClick={this.handleSubmit}>
+              <button className="primary" onClick={this.handleSubmit}>
                 <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />
               </button>
             </div>