From 86e14e1a361dea397b823c6eb4a3358dd077ef6d Mon Sep 17 00:00:00 2001
From: Leszek <smutnyleszek@gmail.com>
Date: Thu, 20 Jun 2024 18:53:40 +0200
Subject: [PATCH] replaced almost all mdl-buttons (including @extend) with
 Button component

---
 jsapp/js/bemComponents.ts                     |   2 -
 .../components/assetsTable/assetsTable.scss   |  16 --
 jsapp/js/components/common/modal.scss         |  39 ++++
 jsapp/js/components/map.scss                  |  39 ----
 jsapp/js/components/mapSettings.es6           |   8 +-
 .../components/permissions/sharingForm.scss   |   4 -
 .../reports/questionGraphSettings.es6         |  16 +-
 .../reports/reportStyleSettings.es6           |  15 +-
 jsapp/js/components/reports/reports.scss      |   1 +
 jsapp/js/editorMixins/cascadeMixin.es6        |  16 +-
 jsapp/js/editorMixins/editableForm.es6        | 186 ++++++++++--------
 jsapp/scss/components/_kobo.bem.ui.scss       |  25 +--
 jsapp/scss/components/_kobo.drawer.scss       |   4 -
 jsapp/scss/components/_kobo.form-builder.scss | 177 ++---------------
 14 files changed, 187 insertions(+), 361 deletions(-)

diff --git a/jsapp/js/bemComponents.ts b/jsapp/js/bemComponents.ts
index 47f557a3a9..d46c88e162 100644
--- a/jsapp/js/bemComponents.ts
+++ b/jsapp/js/bemComponents.ts
@@ -46,8 +46,6 @@ bem.FormBuilderHeader = makeBem(null, 'form-builder-header');
 bem.FormBuilderHeader__row = makeBem(bem.FormBuilderHeader, 'row');
 bem.FormBuilderHeader__cell = makeBem(bem.FormBuilderHeader, 'cell');
 bem.FormBuilderHeader__item = makeBem(bem.FormBuilderHeader, 'item', 'span');
-bem.FormBuilderHeader__button = makeBem(bem.FormBuilderHeader, 'button', 'button');
-bem.FormBuilderHeader__close = makeBem(bem.FormBuilderHeader, 'close', 'button');
 
 bem.FormMedia = makeBem(null, 'form-media');
 bem.FormMedia__title = makeBem(bem.FormMedia, 'title');
diff --git a/jsapp/js/components/assetsTable/assetsTable.scss b/jsapp/js/components/assetsTable/assetsTable.scss
index 08dd4384c2..92b9b8bb64 100644
--- a/jsapp/js/components/assetsTable/assetsTable.scss
+++ b/jsapp/js/components/assetsTable/assetsTable.scss
@@ -70,22 +70,6 @@ $assets-table-hover-bg: colors.$kobo-gray-98;
   color: colors.$kobo-gray-40;
   background-color: colors.$kobo-gray-96;
   height: 40px;
-
-  .mdl-button {
-    margin-left: 0;
-    margin-right: 0;
-    padding-right: 0;
-    padding-left: 12px;
-    line-height: 32px;
-    height: 32px;
-    min-height: 32px;
-
-    .k-icon {
-      font-size: 24px;
-      margin: 0 3px;
-      float: right;
-    }
-  }
 }
 
 .assets-table--MY_LIBRARY,
diff --git a/jsapp/js/components/common/modal.scss b/jsapp/js/components/common/modal.scss
index 1d5785d730..dc8fffbf66 100644
--- a/jsapp/js/components/common/modal.scss
+++ b/jsapp/js/components/common/modal.scss
@@ -684,6 +684,45 @@ $modal-custom-header-height: sizes.$x60;
   gap: 5px;
 }
 
+// Tab button - styles were copied from the deprecated `mdl-button`
+.legacy-modal-tab-button {
+  text-decoration: none;
+  text-align: center;
+  font-weight: normal;
+  font-size: variables.$base-font-size;
+  letter-spacing: 0;
+  margin: 0;
+  border: none;
+  vertical-align: middle;
+  background: transparent;
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  cursor: pointer;
+  color: colors.$kobo-white;
+  opacity: 0.7;
+  border-radius: 0;
+  border-bottom: 2px solid transparent;
+  text-transform: uppercase;
+  height: 50px;
+  line-height: 50px;
+  padding: 0 32px;
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &:hover {
+    opacity: 1;
+    color: colors.$kobo-white;
+  }
+
+  &.legacy-modal-tab-button--active {
+    opacity: 1;
+    border-bottom: 2px solid white;
+  }
+}
+
 // TODO: rework all these media queries to mobile first
 @media screen and (width < 480px) {
   .table-media-preview-header {
diff --git a/jsapp/js/components/map.scss b/jsapp/js/components/map.scss
index 45eb710a56..7bb6c97c66 100644
--- a/jsapp/js/components/map.scss
+++ b/jsapp/js/components/map.scss
@@ -472,45 +472,6 @@ body .leaflet-control-layers,
   line-height: 20px;
 }
 
-// Tab button - styles were copied from the deprecated `mdl-button`
-.map-modal-tab-button {
-  text-decoration: none;
-  text-align: center;
-  font-weight: normal;
-  font-size: variables.$base-font-size;
-  letter-spacing: 0;
-  margin: 0;
-  border: none;
-  vertical-align: middle;
-  background: transparent;
-  position: relative;
-  display: inline-block;
-  overflow: hidden;
-  cursor: pointer;
-  color: colors.$kobo-white;
-  opacity: 0.7;
-  border-radius: 0;
-  border-bottom: 2px solid transparent;
-  text-transform: uppercase;
-  height: 50px;
-  line-height: 50px;
-  padding: 0 32px;
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &:hover {
-    opacity: 1;
-    color: colors.$kobo-white;
-  }
-
-  &.active {
-    opacity: 1;
-    border-bottom: 2px solid white;
-  }
-}
-
 @include breakpoints.breakpoint(mediumAndUp) {
   .popover-menu--viewby-menu .popover-menu__toggle {
     max-width: 340px;
diff --git a/jsapp/js/components/mapSettings.es6 b/jsapp/js/components/mapSettings.es6
index 7da013b4f1..c186c9912e 100644
--- a/jsapp/js/components/mapSettings.es6
+++ b/jsapp/js/components/mapSettings.es6
@@ -15,6 +15,7 @@ import {
 import { dataInterface } from '../dataInterface';
 import {userCan} from 'js/components/permissions/utils';
 import Button from 'js/components/common/button';
+import cx from 'classnames';
 
 // see kobo.map.marker-colors.scss for styling details of each set
 const COLOR_SETS = ['a', 'b', 'c', 'd', 'e'];
@@ -273,9 +274,10 @@ class MapSettings extends React.Component {
     var modalTabs = tabs.map(function(tabId, i) {
       return (
         <button
-          className={`map-modal-tab-button ${
-            this.state.activeModalTab === tabId ? 'active' : ''
-          }`}
+          className={cx({
+            'legacy-modal-tab-button': true,
+            'legacy-modal-tab-button--active': this.state.activeModalTab === tabId,
+          })}
           onClick={this.switchTab}
           data-tabid={tabId}
           key={i}
diff --git a/jsapp/js/components/permissions/sharingForm.scss b/jsapp/js/components/permissions/sharingForm.scss
index c05936244c..6396090b0d 100644
--- a/jsapp/js/components/permissions/sharingForm.scss
+++ b/jsapp/js/components/permissions/sharingForm.scss
@@ -89,10 +89,6 @@ $s-gray-row-spacing: 10px;
     flex-direction: row;
     align-items: center;
     min-height: 50px;
-
-    > .mdl-button {
-      min-width: 32px;
-    }
   }
 
   .user-row__avatar {
diff --git a/jsapp/js/components/reports/questionGraphSettings.es6 b/jsapp/js/components/reports/questionGraphSettings.es6
index f62968115a..78a9705009 100644
--- a/jsapp/js/components/reports/questionGraphSettings.es6
+++ b/jsapp/js/components/reports/questionGraphSettings.es6
@@ -6,6 +6,7 @@ import Modal from 'js/components/common/modal';
 import ChartTypePicker from './chartTypePicker.component';
 import ChartColorsPicker from './chartColorsPicker';
 import Button from 'js/components/common/button';
+import cx from 'classnames';
 
 export default class QuestionGraphSettings extends React.Component {
   constructor(props) {
@@ -92,18 +93,13 @@ export default class QuestionGraphSettings extends React.Component {
 
     var tabs = [t('Chart Type'), t('Colors')];
     var modalTabs = tabs.map(function (tab, i) {
-      let tabClassNames = [
-        'mdl-button',
-        'mdl-button--tab',
-      ];
-      if (this.state.activeModalTab === i) {
-        tabClassNames.push('active');
-      }
-
       return (
         <button
-          className={tabClassNames.join(' ')}
-          onClick={this.toggleTab}
+          className={cx({
+            'legacy-modal-tab-button': true,
+            'legacy-modal-tab-button--active': this.state.activeModalTab === i,
+          })}
+          onClick={this.toggleTab.bind(this)}
           data-index={i}
           key={i}
         >
diff --git a/jsapp/js/components/reports/reportStyleSettings.es6 b/jsapp/js/components/reports/reportStyleSettings.es6
index 14cd0c068e..463ababde0 100644
--- a/jsapp/js/components/reports/reportStyleSettings.es6
+++ b/jsapp/js/components/reports/reportStyleSettings.es6
@@ -7,6 +7,7 @@ import Modal from 'js/components/common/modal';
 import ChartTypePicker from './chartTypePicker.component';
 import ChartColorsPicker from './chartColorsPicker';
 import Button from 'js/components/common/button';
+import cx from 'classnames';
 
 export default class ReportStyleSettings extends React.Component {
   constructor(props) {
@@ -123,17 +124,13 @@ export default class ReportStyleSettings extends React.Component {
     }
 
     var modalTabs = tabs.map(function (tab, i) {
-      let tabClassNames = [
-        'mdl-button',
-        'mdl-button--tab',
-      ];
-      if (this.state.activeModalTab === i) {
-        tabClassNames.push('active');
-      }
       return (
         <button
-          className={tabClassNames.join(' ')}
-          onClick={this.toggleTab}
+          className={cx({
+            'legacy-modal-tab-button': true,
+            'legacy-modal-tab-button--active': this.state.activeModalTab === i,
+          })}
+          onClick={this.toggleTab.bind(this)}
           data-index={i}
           key={i}
         >
diff --git a/jsapp/js/components/reports/reports.scss b/jsapp/js/components/reports/reports.scss
index bb14108508..323b07da10 100644
--- a/jsapp/js/components/reports/reports.scss
+++ b/jsapp/js/components/reports/reports.scss
@@ -117,6 +117,7 @@
 
 .form-view__report-buttons-left {
   @include mixins.centerRowFlex;
+  gap: 5px;
   flex: 1;
 }
 
diff --git a/jsapp/js/editorMixins/cascadeMixin.es6 b/jsapp/js/editorMixins/cascadeMixin.es6
index c1bbff2eae..d10d2c0bd4 100644
--- a/jsapp/js/editorMixins/cascadeMixin.es6
+++ b/jsapp/js/editorMixins/cascadeMixin.es6
@@ -7,11 +7,11 @@ import bem, {makeBem} from 'js/bem';
 import dkobo_xlform from '../../xlform/src/_xlform.init';
 import last from 'lodash.last';
 import envStore from 'js/envStore';
+import Button from 'js/components/common/button';
 
 bem.CascadePopup = makeBem(null, 'cascade-popup');
 bem.CascadePopup__message = makeBem(bem.CascadePopup, 'message');
 bem.CascadePopup__buttonWrapper = makeBem(bem.CascadePopup, 'buttonWrapper');
-bem.CascadePopup__button = makeBem(bem.CascadePopup, 'button', 'button');
 
 const CHOICE_LIST_SUPPORT_URL = 'cascading_select.html';
 
@@ -118,15 +118,19 @@ export const cascadeMixin = {
             }
 
             <bem.CascadePopup__buttonWrapper>
-              <bem.CascadePopup__button disabled={!this.state.cascadeReady}
-                onClick={()=>{
+              <Button
+                type='full'
+                color='blue'
+                size='l'
+                isDisabled={!this.state.cascadeReady}
+                onClick={() => {
                   var survey = this.app.survey;
                   survey.insertSurvey(this.state.cascadeReadySurvey,
                     this.state.cascadeLastSelectedRowIndex);
                   this.cancelCascade();
-                }}>
-                {t('DONE')}
-              </bem.CascadePopup__button>
+                }}
+                label={t('DONE')}
+              />
             </bem.CascadePopup__buttonWrapper>
           </bem.CascadePopup>
       );
diff --git a/jsapp/js/editorMixins/editableForm.es6 b/jsapp/js/editorMixins/editableForm.es6
index cdb4c87cac..989b41a477 100644
--- a/jsapp/js/editorMixins/editableForm.es6
+++ b/jsapp/js/editorMixins/editableForm.es6
@@ -4,6 +4,7 @@ import clonedeep from 'lodash.clonedeep';
 import Select from 'react-select';
 import debounce from 'lodash.debounce';
 import DocumentTitle from 'react-document-title';
+import cx from 'classnames';
 import SurveyScope from '../models/surveyScope';
 import {cascadeMixin} from './cascadeMixin';
 import AssetNavigator from './assetNavigator';
@@ -48,6 +49,7 @@ import {
 import envStore from 'js/envStore';
 import {unstable_usePrompt as usePrompt} from 'react-router-dom';
 import Icon from 'js/components/common/icon';
+import Button from 'js/components/common/button';
 
 const ErrorMessage = makeBem(null, 'error-message');
 const ErrorMessage__strong = makeBem(null, 'error-message__header', 'strong');
@@ -615,71 +617,87 @@ export default Object.assign({
           </bem.FormBuilderHeader__cell>
 
           <bem.FormBuilderHeader__cell m={'buttonsTopRight'} >
-            <bem.FormBuilderHeader__button
-              m={['save', {
-                savepending: this.state.asset_updated === update_states.PENDING_UPDATE,
-                savefailed: this.state.asset_updated === update_states.SAVE_FAILED,
-                saveneeded: this.needsSave(),
-              }]}
-              onClick={this.saveForm}
-              disabled={!this.state.surveyAppRendered || !!this.state.surveyLoadError}
-              data-cy='save'
-            >
-              <i />
-              {saveButtonText}
-            </bem.FormBuilderHeader__button>
-
-            <bem.FormBuilderHeader__close
-              m={[{'close-warning': this.needsSave()}]}
-              onClick={this.safeNavigateToAsset}
-            >
-              <i className='k-icon k-icon-close'/>
-            </bem.FormBuilderHeader__close>
+            <Button
+              type='full'
+              color='blue'
+              size='l'
+              isPending={this.state.asset_updated === update_states.PENDING_UPDATE}
+              isDisabled={!this.state.surveyAppRendered || !!this.state.surveyLoadError}
+              onClick={this.saveForm.bind(this)}
+              isUpperCase
+              label={(
+                <>
+                  {saveButtonText}
+                  {
+                    this.state.asset_updated === update_states.SAVE_FAILED ||
+                    this.needsSave() &&
+                    <>&nbsp;*</>
+                  }
+                </>
+              )}
+            />
+
+            <Button
+              type='bare'
+              color='storm'
+              size='l'
+              onClick={this.safeNavigateToAsset.bind(this)}
+              startIcon='close'
+            />
           </bem.FormBuilderHeader__cell>
         </bem.FormBuilderHeader__row>
 
         <bem.FormBuilderHeader__row m={'secondary'} >
           <bem.FormBuilderHeader__cell m={'toolsButtons'} >
-            <bem.FormBuilderHeader__button
-              m={['preview', {previewdisabled: previewDisabled}]}
-              onClick={this.previewForm}
-              disabled={previewDisabled}
-              data-tip={t('Preview form')}
-              className='left-tooltip'
-            >
-              <i className='k-icon k-icon-view' />
-            </bem.FormBuilderHeader__button>
-
-            <bem.FormBuilderHeader__button m={['show-all', {
-                  open: showAllOpen,
-            }]}
-              onClick={this.showAll}
-              disabled={!showAllAvailable}
-              className = 'left-tooltip'
-              data-tip={t('Expand / collapse questions')}>
-              <i className='k-icon k-icon-view-all' />
-            </bem.FormBuilderHeader__button>
-
-            <bem.FormBuilderHeader__button
-              m={['group', {groupable: groupable}]}
-              onClick={this.groupQuestions}
-              disabled={!groupable}
-              className={'left-tooltip ' + (this.isAddingGroupsRestricted() ? LOCKING_UI_CLASSNAMES.DISABLED : '')}
-              data-tip={groupable ? t('Create group with selected questions') : t('Grouping disabled. Please select at least one question.')}
-            >
-              <i className='k-icon k-icon-group' />
-            </bem.FormBuilderHeader__button>
-
-            { this.toggleCascade !== undefined &&
-              <bem.FormBuilderHeader__button
-                m={['cascading']}
-                onClick={this.toggleCascade}
-                data-tip={t('Insert cascading select')}
-                className={'left-tooltip ' + (this.isAddingQuestionsRestricted() ? LOCKING_UI_CLASSNAMES.DISABLED : '')}
-              >
-                <i className='k-icon k-icon-cascading' />
-              </bem.FormBuilderHeader__button>
-            }
+            <Button
+              type='bare'
+              color='storm'
+              size='m'
+              isDisabled={previewDisabled}
+              onClick={this.previewForm.bind(this)}
+              tooltip={t('Preview form')}
+              tooltipPosition='left'
+              startIcon='view'
+            />
+
+            <Button
+              type='bare'
+              color='storm'
+              size='m'
+              isDisabled={!showAllAvailable}
+              onClick={this.showAll.bind(this)}
+              tooltip={t('Expand / collapse questions')}
+              tooltipPosition='left'
+              startIcon='view-all'
+            />
+
+            <Button
+              type='bare'
+              color='storm'
+              size='m'
+              isDisabled={!groupable}
+              onClick={this.groupQuestions.bind(this)}
+              tooltip={groupable ? t('Create group with selected questions') : t('Grouping disabled. Please select at least one question.')}
+              tooltipPosition='left'
+              startIcon='group'
+              className={cx({
+                [LOCKING_UI_CLASSNAMES.DISABLED]: this.isAddingGroupsRestricted(),
+              })}
+            />
+
+            <Button
+              type='bare'
+              color='storm'
+              size='m'
+              isDisabled={this.toggleCascade === undefined}
+              onClick={this.toggleCascade.bind(this)}
+              tooltip={t('Insert cascading select')}
+              tooltipPosition='left'
+              startIcon='cascading'
+              className={cx({
+                [LOCKING_UI_CLASSNAMES.DISABLED]: this.isAddingGroupsRestricted(),
+              })}
+            />
           </bem.FormBuilderHeader__cell>
 
           <bem.FormBuilderHeader__cell m='verticalRule'/>
@@ -689,33 +707,37 @@ export default Object.assign({
           <bem.FormBuilderHeader__cell m='verticalRule'/>
 
           <bem.FormBuilderHeader__cell>
-            <bem.FormBuilderHeader__button
-              m={['panel-toggle', this.state.asideLibrarySearchVisible ? 'active' : null]}
-              onClick={this.toggleAsideLibrarySearch}
-              className={this.isAddingQuestionsRestricted() ? LOCKING_UI_CLASSNAMES.DISABLED : ''}
-            >
-              <i className={['k-icon', this.state.asideLibrarySearchVisible ? 'k-icon-close' : 'k-icon-library' ].join(' ')} />
-              <span className='panel-toggle-name'>{t('Add from Library')}</span>
-            </bem.FormBuilderHeader__button>
+            <Button
+              type='bare'
+              color='storm'
+              size='m'
+              onClick={this.toggleAsideLibrarySearch.bind(this)}
+              tooltip={t('Insert cascading select')}
+              tooltipPosition='left'
+              startIcon={this.state.asideLibrarySearchVisible ? 'close' : 'library'}
+              label={t('Add from Library')}
+              className={cx({
+                [LOCKING_UI_CLASSNAMES.DISABLED]: this.isAddingGroupsRestricted(),
+              })}
+            />
           </bem.FormBuilderHeader__cell>
 
           <bem.FormBuilderHeader__cell m={'verticalRule'} />
 
           <bem.FormBuilderHeader__cell>
-            <bem.FormBuilderHeader__button
-              m={['panel-toggle', this.state.asideLayoutSettingsVisible ? 'active' : null]}
-              onClick={this.toggleAsideLayoutSettings}
-            >
-              <i className={['k-icon', this.state.asideLayoutSettingsVisible ? 'k-icon-close' : 'k-icon-settings' ].join(' ')} />
-              <span className='panel-toggle-name'>
-                {this.hasMetadataAndDetails() &&
-                  t('Layout & Settings')
-                }
-                {!this.hasMetadataAndDetails() &&
-                  t('Layout')
-                }
-              </span>
-            </bem.FormBuilderHeader__button>
+            <Button
+              type='bare'
+              color='storm'
+              size='m'
+              onClick={this.toggleAsideLayoutSettings.bind(this)}
+              tooltip={t('Insert cascading select')}
+              tooltipPosition='left'
+              startIcon={this.state.asideLayoutSettingsVisible ? 'close' : 'settings'}
+              label={this.hasMetadataAndDetails() ? t('Layout & Settings') : t('Layout')}
+              className={cx({
+                [LOCKING_UI_CLASSNAMES.DISABLED]: this.isAddingGroupsRestricted(),
+              })}
+            />
           </bem.FormBuilderHeader__cell>
         </bem.FormBuilderHeader__row>
       </bem.FormBuilderHeader>
diff --git a/jsapp/scss/components/_kobo.bem.ui.scss b/jsapp/scss/components/_kobo.bem.ui.scss
index 4b49d82ec9..d1e3e4925f 100644
--- a/jsapp/scss/components/_kobo.bem.ui.scss
+++ b/jsapp/scss/components/_kobo.bem.ui.scss
@@ -204,23 +204,6 @@
   }
 }
 
-.popover-menu--new-menu {
-  width: 100%;
-  margin-bottom: 10px;
-
-  .popover-menu__content {
-    right: 0px;
-    width: 100%;
-  }
-}
-
-.popover-menu--new-menu .popover-menu__toggle {
-  @extend .mdl-button, .mdl-button--raised, .mdl-button--colored;
-  border-radius: 6px;
-
-  width: 100%;
-}
-
 .popover-menu--assets-table {
   .popover-menu__content {
     max-height: 26px * 7.5;
@@ -252,10 +235,12 @@
 
 .popover-menu--custom-reports {
   .popover-menu__toggle {
-    @extend .mdl-button;
-
+    border-radius: 6px;
+    border: 1px solid currentcolor;
     text-transform: uppercase;
-    padding-left: 0px;
+    padding: 0 12px;
+    line-height: 38px;
+    height: 38px;
 
     &::after {
       content: '\25BC';
diff --git a/jsapp/scss/components/_kobo.drawer.scss b/jsapp/scss/components/_kobo.drawer.scss
index afe34f3f77..9cf50119a2 100644
--- a/jsapp/scss/components/_kobo.drawer.scss
+++ b/jsapp/scss/components/_kobo.drawer.scss
@@ -88,10 +88,6 @@
   padding: 0;
   display: flex;
   flex-direction: column;
-
-  button.mdl-button {
-    width: 100%;
-  }
 }
 
 @media screen and (min-width: breakpoints.$bMobileMenu) {
diff --git a/jsapp/scss/components/_kobo.form-builder.scss b/jsapp/scss/components/_kobo.form-builder.scss
index 7ae0d43c55..f0fdac28e5 100644
--- a/jsapp/scss/components/_kobo.form-builder.scss
+++ b/jsapp/scss/components/_kobo.form-builder.scss
@@ -1,6 +1,7 @@
 @use 'scss/z-indexes';
 @use 'scss/breakpoints';
 @use '~kobo-common/src/styles/colors';
+@use 'scss/mixins';
 
 $s-form-builder-header: 125px;
 $s-form-builder-aside: 400px;
@@ -70,24 +71,6 @@ $s-form-builder-content-width: 1024px;
       border: 1px solid black;
       padding-right: 12px;
     }
-
-    &__link {
-      @extend .mdl-button;
-
-      margin-right: 5px;
-
-      &--raised {
-        @extend .mdl-button--colored, .mdl-button--raised;
-      }
-
-      &--help {
-        float: right;
-
-        i {
-          @extend .k-icon-help;
-        }
-      }
-    }
   }
 }
 
@@ -119,6 +102,7 @@ $s-form-builder-content-width: 1024px;
       position: relative;
       z-index: 1;
       box-shadow: 0 0 3px 0 rgba(colors.$kobo-gray-24, 0.2), 0 0 10px 0 rgba(colors.$kobo-gray-24, 0.1);
+      padding: 0 20px;
     }
   }
 
@@ -208,30 +192,8 @@ $s-form-builder-content-width: 1024px;
 
     // second row
     &.form-builder-header__cell--toolsButtons {
-      margin: 0 10px;
-
-      button {
-        color: colors.$kobo-gray-40;
-        // for tooltip
-        overflow: visible;
-        padding: 0;
-
-        &:hover,
-        &:focus,
-        &:focus:not(:active) {
-          background-color: transparent;
-        }
-
-        &:hover {
-          color: colors.$kobo-gray-24;
-        }
-
-        i {
-          font-size: 24px;
-          margin: 3px;
-          vertical-align: middle;
-        }
-      }
+      @include mixins.centerRowFlex;
+      gap: 10px;
     }
 
     &.form-builder-header__cell--spacer {
@@ -247,107 +209,6 @@ $s-form-builder-content-width: 1024px;
   }
 }
 
-.form-builder-header__close {
-  border: none;
-  color: colors.$kobo-gray-40;
-  cursor: pointer;
-
-  @extend .mdl-button, .mdl-button--icon;
-
-  &:hover {
-    color: colors.$kobo-gray-24;
-  }
-
-  &:focus {
-    i {
-      @include form-builder-focus();
-    }
-  }
-}
-
-.form-builder-header__button {
-  @extend .mdl-button;
-
-  &:focus {
-    i {
-      @include form-builder-focus();
-    }
-  }
-
-  &.form-builder-header__button--create,
-  &.form-builder-header__button--save {
-    text-transform: uppercase;
-    min-width: 85px;
-
-    @extend .mdl-button--colored, .mdl-button--raised;
-
-    > i {
-      display: none;
-    }
-
-    &:focus {
-      background-color: darken(colors.$kobo-blue, 10%);
-      font-weight: bold;
-    }
-  }
-
-  &.form-builder-header__button--savepending,
-  &.form-builder-header__button--create-pending {
-    > i {
-      @extend .k-spin, .k-icon, .k-icon-spinner;
-
-      font-size: 24px;
-      display: inline-block;
-      vertical-align: middle;
-      margin-right: 3px;
-      margin-left: -2px;
-    }
-
-    > i + span {
-      display: none;
-    }
-  }
-
-  &.form-builder-header__button--savefailed::after,
-  &.form-builder-header__button--saveneeded::after {
-    content: '*';
-    color: colors.$kobo-white;
-  }
-
-  &.form-builder-header__button--panel-toggle {
-    padding: 0 10px;
-
-    &.form-builder-header__button--active {
-      i.k-icon {
-        color: colors.$kobo-blue;
-      }
-    }
-
-    .panel-toggle-name {
-      margin-right: 10px;
-    }
-
-    i.k-icon {
-      font-size: 24px;
-      margin-right: 3px;
-      vertical-align: middle;
-    }
-
-    &:focus {
-      @include form-builder-focus();
-
-      i {
-        outline: none;
-      }
-    }
-  }
-
-  &[disabled] {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-}
-
 // FORM STYLE SETTINGS
 
 .form-builder-aside {
@@ -410,12 +271,6 @@ $s-form-builder-content-width: 1024px;
   .cascade-popup__buttonWrapper {
     padding-top: 10px;
     text-align: right;
-
-    button {
-      @extend .mdl-button, .mdl-button--colored, .mdl-button--raised;
-
-      min-width: 100px;
-    }
   }
 
   .cascade-popup__message {
@@ -465,24 +320,19 @@ $s-form-builder-content-width: 1024px;
 @media screen and (width < breakpoints.$b768) {
   .form-builder-header {
     .form-builder-header__row {
-      gap: 10px;
+      gap: 5px;
     }
 
-    .form-builder-header__cell.form-builder-header__cell--logo {
-      width: 50px;
+    .form-builder-header__row.form-builder-header__row--secondary {
+      padding: 0 5px;
     }
 
-    .form-builder-header__cell--buttonsTopRight {
-      .form-builder-header__button--save {
-        max-width: 120px;
-        text-overflow: ellipsis;
-      }
+    .form-builder-header__cell--verticalRule {
+      display: none;
     }
 
-    .form-builder-header__button--panel-toggle {
-      .panel-toggle-name {
-        display: none;
-      }
+    .form-builder-header__cell.form-builder-header__cell--logo {
+      width: 50px;
     }
   }
 }
@@ -500,11 +350,6 @@ $s-form-builder-content-width: 1024px;
 }
 
 @media screen and (max-width: 480px) {
-  .form-builder-header__cell--toolsButtons button {
-    padding: 0;
-    border-radius: 0;
-  }
-
   .card--selectquestion__expansion {
     padding-right: 5px;
     padding-left: 25px;