Merge pull request #2774 from kobotoolbox/cleanup-colors

Cleanup colors to prepare for design system
kobotoolbox · Sep 17, 2020 · 8d5bbab · 8d5bbab
2 parents ad725fe + 2a44bf6
commit 8d5bbab
Show file tree

Hide file tree

Showing 105 changed files with 4,058 additions and 5,754 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -51,7 +51,6 @@
         ],
         "color-no-invalid-hex": true,
         "color-hex-case": ["lower", { "severity": "warning" }],
-        "color-hex-length": ["short", { "severity": "warning" }],
         "comment-no-empty": true,
         "comment-empty-line-before": [
             "always",

diff --git a/jsapp/js/app.es6 b/jsapp/js/app.es6
@@ -51,13 +51,9 @@ import {
   assign,
   currentLang
 } from './utils';
-import {keymap} from './keymap';
-import { ShortcutManager, Shortcuts } from 'react-shortcuts';
 import LibrarySearchableList from './lists/library';
 import FormsSearchableList from './lists/forms';
 
-const shortcutManager = new ShortcutManager(keymap);
-
 class App extends React.Component {
   constructor(props) {
     super(props);
@@ -84,16 +80,6 @@ class App extends React.Component {
   onGetConfigCompleted() {
     this.setState({isConfigReady: true});
   }
-  _handleShortcuts(action) {
-    switch (action) {
-      case 'EDGE':
-        document.body.classList.toggle('hide-edge');
-        break;
-    }
-  }
-  getChildContext() {
-    return { shortcuts: shortcutManager };
-  }
   render() {
     var assetid = this.props.params.assetid || null;
 
@@ -120,19 +106,10 @@ class App extends React.Component {
 
     return (
       <DocumentTitle title='KoBoToolbox'>
-        <Shortcuts
-          name='APP_SHORTCUTS'
-          handler={this._handleShortcuts}
-          className='mdl-wrapper'
-          global
-          isolate>
-
-        <PermValidator/>
-        <IntercomHandler/>
-
-          { !this.isFormBuilder() &&
-            <div className='k-header__bar' />
-          }
+        <React.Fragment>
+          <PermValidator/>
+          <IntercomHandler/>
+          <div className='header-stretch-bg'/>
           <bem.PageWrapper m={pageWrapperModifiers} className='mdl-layout mdl-layout--fixed-header'>
               { this.state.pageState.modal &&
                 <Modal params={this.state.pageState.modal} />
@@ -155,7 +132,7 @@ class App extends React.Component {
 
               </bem.PageWrapper__content>
           </bem.PageWrapper>
-        </Shortcuts>
+        </React.Fragment>
       </DocumentTitle>
     );
   }
@@ -165,10 +142,6 @@ App.contextTypes = {
   router: PropTypes.object
 };
 
-App.childContextTypes = {
-  shortcuts: PropTypes.object.isRequired
-};
-
 reactMixin(App.prototype, Reflux.connect(stores.pageState, 'pageState'));
 reactMixin(App.prototype, mixins.contextRouter);
 

diff --git a/jsapp/js/bem.es6 b/jsapp/js/bem.es6
@@ -9,6 +9,8 @@ export const bem = BEM.init();
 
 bem.Button = BEM('mdl-button', '<button>');
 
+bem.KoboButton = BEM('kobo-button', '<button>');
+
 bem.PageWrapper = BEM('page-wrapper');
 bem.PageWrapper__content = bem.PageWrapper.__('content');
 
@@ -60,10 +62,6 @@ bem.FormBuilderHeader__item = bem.FormBuilderHeader.__('item', '<span>');
 bem.FormBuilderHeader__button = bem.FormBuilderHeader.__('button', '<button>');
 bem.FormBuilderHeader__close = bem.FormBuilderHeader.__('close', '<button>');
 
-bem.FormMeta = bem('form-meta');
-bem.FormMeta__content = bem.FormMeta.__('content');
-bem.FormMeta__button = bem.FormMeta.__('button');
-
 bem.Search = BEM('search');
 bem.Search__icon = bem.Search.__('icon', '<i>');
 bem.Search__cancel = bem.Search.__('cancel', '<i>');
@@ -182,7 +180,6 @@ bem.FormTitle__submissions = bem.FormTitle.__('submissions');
 
 bem.ReportView = BEM('report-view');
 bem.ReportView__wrap = bem.ReportView.__('wrap');
-bem.ReportView__warning = bem.ReportView.__('warning');
 bem.ReportView__item = bem.ReportView.__('item');
 bem.ReportView__itemHeading = bem.ReportView.__('itemHeading');
 bem.ReportView__headingMeta = bem.ReportView.__('headingMeta');
@@ -209,7 +206,6 @@ bem.Modal__header = bem.Modal.__('header', '<header>');
 bem.Modal__title = bem.Modal.__('title', '<h4>');
 bem.Modal__subheader = bem.Modal.__('subheader', '<header>');
 bem.Modal__footer = bem.Modal.__('footer', '<footer>');
-bem.Modal__footerButton = bem.Modal.__('footer-button', '<button>');
 bem.Modal__tabs = bem.Modal.__('tabs');
 bem.Modal__hr = bem.Modal.__('hr', '<hr>');
 
@@ -225,8 +221,6 @@ bem.Header = BEM('header');
 bem.Header__logo = bem.Header.__('logo', '<span>');
 
 bem.AccountBox = BEM('account-box');
-bem.AccountBox__notifications = bem.AccountBox.__('notifications');
-bem.AccountBox__notifications__count = bem.AccountBox.__('notifications__count', '<span>');
 bem.AccountBox__name = bem.AccountBox.__('name', '<div>');
 bem.AccountBox__initials = bem.AccountBox.__('initials', '<span>');
 bem.AccountBox__menu = bem.AccountBox.__('menu', '<ul>');
@@ -263,7 +257,6 @@ bem.HelpBubble__close = bem.HelpBubble.__('close', 'button');
 bem.HelpBubble__back = bem.HelpBubble.__('back', 'button');
 bem.HelpBubble__trigger = bem.HelpBubble.__('trigger', 'button');
 bem.HelpBubble__triggerCounter = bem.HelpBubble.__('trigger-counter', 'span');
-bem.HelpBubble__triggerBadge = bem.HelpBubble.__('trigger-badge', 'span');
 bem.HelpBubble__popup = bem.HelpBubble.__('popup');
 bem.HelpBubble__popupContent = bem.HelpBubble.__('popup-content');
 bem.HelpBubble__row = bem.HelpBubble.__('row');

diff --git a/jsapp/js/components/RESTServices/RESTServicesForm.es6 b/jsapp/js/components/RESTServices/RESTServicesForm.es6
@@ -357,24 +357,25 @@ export default class RESTServicesForm extends React.Component {
                 onKeyPress={this.onCustomHeaderInputKeyPress}
               />
 
-              <button
+              <bem.Button
+                m='icon'
                 className='http-header-row-remove'
                 data-index={n}
                 onClick={this.removeCustomHeaderRow}
               >
                 <i className='k-icon k-icon-trash'/>
-              </button>
+              </bem.Button>
             </bem.FormModal__item>
           );
         })}
 
-        <button
-          className='http-header-add'
+        <bem.KoboButton
+          m='small'
           onClick={this.addNewCustomHeaderRow}
         >
           <i className='k-icon k-icon-plus' />
           {t('Add header')}
-        </button>
+        </bem.KoboButton>
       </bem.FormModal__item>
     );
   }
@@ -539,13 +540,13 @@ export default class RESTServicesForm extends React.Component {
           </bem.FormModal__item>
 
           <bem.Modal__footer>
-            <bem.Modal__footerButton
-              m='primary'
+            <bem.KoboButton
+              m='blue'
               onClick={this.onSubmit}
               disabled={this.state.isSubmitPending}
             >
               { isEditingExistingHook ? t('Save') : t('Create') }
-            </bem.Modal__footerButton>
+            </bem.KoboButton>
           </bem.Modal__footer>
         </bem.FormModal__form>
       );

diff --git a/jsapp/js/components/RESTServices/RESTServicesList.es6 b/jsapp/js/components/RESTServices/RESTServicesList.es6
@@ -98,14 +98,14 @@ export default class RESTServicesList extends React.Component {
     }
   }
 
-  renderModalButton(additionalClassNames) {
+  renderModalButton() {
     return (
-      <button
-        className={`mdl-button mdl-button--raised mdl-button--colored ${additionalClassNames}`}
+      <bem.KoboButton
+        m='blue'
         onClick={this.openNewRESTServiceModal}
       >
         {t('Register a New Service')}
-      </button>
+      </bem.KoboButton>
     );
   }
 
@@ -125,7 +125,7 @@ export default class RESTServicesList extends React.Component {
             <a href={this.getSupportUrl()} target='_blank'>{t('Learn more')}</a>
           </bem.EmptyContent__message>
 
-          {this.renderModalButton('empty-content__button')}
+          {this.renderModalButton()}
         </bem.EmptyContent>
       </bem.FormView>
     );

diff --git a/jsapp/js/components/accountSettings.es6 b/jsapp/js/components/accountSettings.es6
@@ -14,7 +14,6 @@ import TextBox from './textBox';
 import Checkbox from './checkbox';
 import ApiTokenDisplay from './apiTokenDisplay';
 import {hashHistory} from 'react-router';
-import ui from '../ui';
 import {
   t,
   stringToColor,
@@ -226,18 +225,16 @@ export default class AccountSettings extends React.Component {
       !stores.session.environment
     ) {
       return (
-        <ui.Panel>
-          <bem.AccountSettings>
-            <bem.AccountSettings__item>
-              <bem.Loading>
-                <bem.Loading__inner>
-                  <i />
-                  {t('loading...')}
-                </bem.Loading__inner>
-              </bem.Loading>
-            </bem.AccountSettings__item>
-          </bem.AccountSettings>
-        </ui.Panel>
+        <bem.AccountSettings>
+          <bem.AccountSettings__item>
+            <bem.Loading>
+              <bem.Loading__inner>
+                <i />
+                {t('loading...')}
+              </bem.Loading__inner>
+            </bem.Loading>
+          </bem.AccountSettings__item>
+        </bem.AccountSettings>
       );
     }
 
@@ -248,23 +245,23 @@ export default class AccountSettings extends React.Component {
 
     return (
       <DocumentTitle title={`${accountName} | KoboToolbox`}>
-      <ui.Panel>
         <bem.AccountSettings>
           <bem.AccountSettings__actions>
-            <button
+            <bem.KoboButton
               onClick={this.updateProfile}
-              className='mdl-button mdl-button--raised mdl-button--colored'
+              m={['blue']}
             >
               {t('Save Changes')}
               {!this.state.isPristine && ' *'}
-            </button>
+            </bem.KoboButton>
 
-            <button
+            <bem.Button
               onClick={this.safeClose}
-              className='account-settings-close mdl-button mdl-button--icon'
+              m='icon'
+              className='account-settings-close'
             >
               <i className='k-icon k-icon-close'/>
-            </button>
+            </bem.Button>
           </bem.AccountSettings__actions>
 
           <bem.AccountSettings__item m={'column'}>
@@ -313,7 +310,7 @@ export default class AccountSettings extends React.Component {
               <bem.AccountSettings__item m='password'>
                 <a
                   href='/#/change-password'
-                  className='mdl-button mdl-button--raised mdl-button--colored'
+                  className='kobo-button kobo-button--teal'
                 >
                   {t('Modify Password')}
                 </a>
@@ -338,10 +335,6 @@ export default class AccountSettings extends React.Component {
                   value={this.state.organizationWebsite}
                   onChange={this.organizationWebsiteChange}
                 />
-
-                <bem.AccountSettings__desc className='is-edge'>
-                  {t('This will be used to create a hyperlink for your organization name. ')}
-                </bem.AccountSettings__desc>
               </bem.AccountSettings__item>
 
               <bem.AccountSettings__item m='primary-sector'>
@@ -432,21 +425,6 @@ export default class AccountSettings extends React.Component {
                 </label>
               </bem.AccountSettings__item>
 
-              <bem.AccountSettings__item className='is-edge'>
-                <label>
-                  {t('Default Form Language')}
-
-                  <Select
-                    value={this.state.defaultLanguage}
-                    options={this.state.languageChoices}
-                    onChange={this.defaultLanguageChange}
-                    className='kobo-select'
-                    classNamePrefix='kobo-select'
-                    menuPlacement='auto'
-                  />
-                </label>
-              </bem.AccountSettings__item>
-
               <bem.AccountSettings__item m='social'>
                 <label>{t('Social')}</label>
 
@@ -492,7 +470,6 @@ export default class AccountSettings extends React.Component {
             </bem.AccountSettings__item>
           </bem.AccountSettings__item>
         </bem.AccountSettings>
-      </ui.Panel>
       </DocumentTitle>
     );
   }

diff --git a/jsapp/js/components/apiTokenDisplay.es6 b/jsapp/js/components/apiTokenDisplay.es6
@@ -63,15 +63,15 @@ class ApiTokenDisplay extends React.Component {
           readOnly
         />
 
-        <button
+        <bem.Button
           onClick={this.toggleApiTokenVisibility}
           disabled={this.state.isLoadingToken}
-          className='mdl-button mdl-button--icon'
+          m='icon'
         >
           <i className={this.state.isTokenVisible ? 'k-icon k-icon-view-no'
                                                   : 'k-icon k-icon-view'}
           />
-        </button>
+        </bem.Button>
       </bem.FormModal__item>
     );
   }