[TASK-915] Simplify button component (even more)

jsapp/js/account/accountSettingsRoute.tsx

@@ -142,9 +142,8 @@ const AccountSettings = observer(() => {
     <bem.AccountSettings onSubmit={updateProfile}>
       <bem.AccountSettings__actions>
         <Button
-          type={'full'}
+          type='primary'
           className='account-settings-save'
-          color={'blue'}
           size={'l'}
           isSubmit
           label={t('Save Changes') + (form.isPristine ? '' : ' *')}

jsapp/js/account/changePasswordRoute.component.tsx

@@ -35,8 +35,7 @@ const ChangePasswordRoute = class ChangePassword extends React.Component<WithRou
         <bem.AccountSettings>
           <bem.AccountSettings__actions>
             <Button
-              type='bare'
-              color='dark-blue'
+              type='text'
               size='l'
               startIcon='close'
               onClick={this.close.bind(this)}

jsapp/js/account/plans/billingButton.component.tsx

@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import type {ButtonProps} from 'js/components/common/button';
+import type {ButtonProps, ButtonType} from 'js/components/common/button';
 import Button from 'js/components/common/button';
 import React from 'react';
 import styles from './billingButton.module.scss';
@@ -10,10 +10,14 @@ import styles from './billingButton.module.scss';
  * page that need reusable logic extend this component.
  */
 export default function BillingButton(props: Partial<ButtonProps>) {
+  let buttonType: ButtonType = 'primary';
+  if (props.type) {
+    buttonType = props.type;
+  }
+
   return (
     <Button
-      type='full'
-      color='blue'
+      type={buttonType}
       size='l'
       {...props}
       className={cx([styles.button, props.className])}

jsapp/js/account/plans/confirmChangeModal.component.tsx

@@ -202,7 +202,7 @@ const ConfirmChangeModal = ({
           label={t('Submit')}
         />
         <BillingButton
-          color='red'
+          type='danger'
           isDisabled={isLoading}
           onClick={onClickCancel}
           label={t('Cancel')}

jsapp/js/account/plans/plan.component.tsx

@@ -428,8 +428,7 @@ export default function Plan(props: PlanProps) {
     hasMetaFeatures() && (
       <div className={styles.comparisonButton}>
         <Button
-          type='bare'
-          color='dark-blue'
+          type='text'
           size='m'
           label={
             expandComparison

jsapp/js/account/security/apiToken/apiTokenSection.component.tsx

@@ -59,8 +59,7 @@ export default function ApiTokenDisplay() {
       <Button
         label='Display'
         size='m'
-        color='blue'
-        type='frame'
+        type='secondary'
         onClick={toggleTokenVisibility}
       />
     </div>

jsapp/js/account/security/email/emailSection.component.tsx

@@ -140,8 +140,7 @@ export default function EmailSection() {
                 <Button
                   label='Resend'
                   size='m'
-                  color='blue'
-                  type='frame'
+                  type='secondary'
                   onClick={resendNewUserEmail.bind(
                     resendNewUserEmail,
                     unverifiedEmail.email
@@ -150,8 +149,7 @@ export default function EmailSection() {
                 <Button
                   label='Remove'
                   size='m'
-                  color='red'
-                  type='frame'
+                  type='secondary-danger'
                   onClick={deleteNewUserEmail}
                 />
               </div>
@@ -186,8 +184,7 @@ export default function EmailSection() {
         <Button
           label='Change'
           size='m'
-          color='blue'
-          type='frame'
+          type='secondary'
           onClick={handleSubmit}
         />
       </form>

jsapp/js/account/security/mfa/mfaSection.component.tsx

@@ -219,8 +219,7 @@ export default class SecurityRoute extends React.Component<{}, SecurityState> {
 
                 <bem.MFAOptions__buttons>
                   <Button
-                    type='frame'
-                    color='dark-blue'
+                    type='secondary'
                     label={t('Reconfigure')}
                     size='m'
                     onClick={(evt: React.ChangeEvent<HTMLInputElement>) => {
@@ -237,8 +236,7 @@ export default class SecurityRoute extends React.Component<{}, SecurityState> {
 
                 <bem.MFAOptions__buttons>
                   <Button
-                    type='frame'
-                    color='dark-blue'
+                    type='secondary'
                     label={t('Generate new')}
                     size='m'
                     onClick={(evt: React.ChangeEvent<HTMLInputElement>) => {

jsapp/js/account/security/password/passwordSection.component.tsx

@@ -21,15 +21,11 @@ export default function PasswordSection() {
       <div className={styles.optionsSection}>
         <a href={PATHS.RESET}>{t('forgot password')}</a>
 
-        <NavLink
-          to={`${ACCOUNT_ROUTES.CHANGE_PASSWORD}`}
-          className={styles.passwordLink}
-        >
+        <NavLink to={`${ACCOUNT_ROUTES.CHANGE_PASSWORD}`}>
           <Button
             label='Update'
             size='m'
-            color='blue'
-            type='frame'
+            type='secondary'
             onClick={() => {
               /*TODO: Handle NavLink and Button*/
             }}

jsapp/js/account/security/password/updatePasswordForm.component.tsx

@@ -173,8 +173,7 @@ export default function UpdatePasswordForm(props: UpdatePasswordFormProps) {
 
       <div className={styles.row}>
         <Button
-          type='full'
-          color='blue'
+          type='primary'
           size='l'
           label={t('Save Password')}
           isSubmit

jsapp/js/account/security/sso/ssoSection.component.tsx

@@ -66,8 +66,7 @@ const SsoSection = observer(() => {
               <Button
                 label={socialApp.name}
                 size='m'
-                color='blue'
-                type='frame'
+                type='secondary'
                 onClick={() => {
                   /*TODO: Handle NavLink and Button*/
                 }}
@@ -80,8 +79,7 @@ const SsoSection = observer(() => {
           <Button
             label={t('Disable')}
             size='m'
-            color='blue'
-            type='frame'
+            type='secondary'
             onClick={disconnectSocialAccount}
           />
         </div>

jsapp/js/account/usage/usageProjectBreakdown.tsx

@@ -176,9 +176,8 @@ const ProjectBreakdown = () => {
             </div>
           </div>
           <Button
-            color='dark-blue'
             size='s'
-            type='bare'
+            type='text'
             startIcon='close'
             onClick={dismissIntervalBanner}
           />

jsapp/js/account/usage/yourPlan.component.tsx

@@ -130,15 +130,12 @@ export const YourPlan = () => {
         <nav>
           <BillingButton
             label={'See plans'}
-            type={'frame'}
-            color={'blue'}
+            type='secondary'
             onClick={() => window.location.assign('#' + ACCOUNT_ROUTES.PLAN)}
           />
           {/* This is commented out until the add-ons tab on the Plans page is implemented
         <BillingButton
           label={'get add-ons'}
-          type={'full'}
-          color={'blue'}
           // TODO: change this to point to the add-ons tab
           onClick={() => window.location.assign('#' + ACCOUNT_ROUTES.PLAN)}
         />

jsapp/js/components/RESTServices/RESTServiceLogs.es6

@@ -204,8 +204,7 @@ export default class RESTServiceLogs extends React.Component {
     return (
       <header className='rest-services-list__header'>
         <Button
-          type='frame'
-          color='dark-blue'
+          type='secondary'
           size='m'
           onClick={() => {
             window.location.assign(`/#/forms/${this.state.assetUid}/settings/rest`);
@@ -228,8 +227,7 @@ export default class RESTServiceLogs extends React.Component {
 
     return (
       <Button
-        type='frame'
-        color='blue'
+        type='secondary'
         size='l'
         isPending={this.state.isLoadingLogs}
         onClick={this.loadMore.bind(this)}
@@ -267,8 +265,7 @@ export default class RESTServiceLogs extends React.Component {
                 {t('Status')}
                 { this.hasAnyFailedLogs() &&
                   <Button
-                    type='bare'
-                    color='dark-blue'
+                    type='text'
                     size='m'
                     onClick={this.retryAll.bind(this)}
                     tooltip={t('Retry all submissions')}
@@ -318,8 +315,7 @@ export default class RESTServiceLogs extends React.Component {
 
                     {log.status === HOOK_LOG_STATUSES.FAILED &&
                       <Button
-                        type='bare'
-                        color='dark-blue'
+                        type='text'
                         size='m'
                         isDisabled={!this.state.isHookActive}
                         onClick={this.retryLog.bind(this, log)}
@@ -330,8 +326,7 @@ export default class RESTServiceLogs extends React.Component {
 
                     {this.hasInfoToDisplay(log) &&
                       <Button
-                        type='bare'
-                        color='dark-blue'
+                        type='text'
                         size='m'
                         onClick={this.showLogInfo.bind(this, log)}
                         tooltip={t('More info')}

jsapp/js/components/RESTServices/RESTServicesForm.es6

@@ -362,8 +362,7 @@ export default class RESTServicesForm extends React.Component {
               />
 
               <Button
-                type='bare'
-                color='red'
+                type='secondary-danger'
                 size='m'
                 className='http-header-row-remove'
                 data-index={n}
@@ -375,8 +374,7 @@ export default class RESTServicesForm extends React.Component {
         })}
 
         <Button
-          type='frame'
-          color='dark-blue'
+          type='secondary'
           size='s'
           startIcon='plus'
           onClick={this.addNewCustomHeaderRow.bind(this)}
@@ -526,8 +524,7 @@ export default class RESTServicesForm extends React.Component {
 
           <bem.Modal__footer>
             <Button
-              type='full'
-              color='blue'
+              type='primary'
               size='l'
               onClick={this.onSubmit.bind(this)}
               isDisabled={this.state.isSubmitPending}

jsapp/js/components/RESTServices/RESTServicesList.es6

@@ -107,8 +107,7 @@ export default class RESTServicesList extends React.Component {
   renderModalButton() {
     return (
       <Button
-        type='full'
-        color='blue'
+        type='primary'
         size='l'
         onClick={this.openNewRESTServiceModal}
         label={t('Register a New Service')}
@@ -182,8 +181,7 @@ export default class RESTServicesList extends React.Component {
 
                   <bem.ServiceRow__column m='actions'>
                     <Button
-                      type='bare'
-                      color='dark-blue'
+                      type='secondary'
                       size='m'
                       onClick={() => this.editHook(hook.uid)}
                       tooltip={t('Edit')}
@@ -192,8 +190,7 @@ export default class RESTServicesList extends React.Component {
                     />
 
                     <Button
-                      type='bare'
-                      color='red'
+                      type='secondary-danger'
                       size='m'
                       onClick={() => this.deleteHookSafe(hook.uid, hook.name)}
                       tooltip={t('Delete')}