@things-factory/dataset 7.0.1-alpha.5 → 7.0.1-alpha.51

package/client/activities/activity-ooc-resolve-edit.ts

@@ -1,5 +1,5 @@
+import '@material/web/icon/icon.js'
 import '@operato/dataset/ox-data-ooc-brief-view.js'
-// import '@operato/dataset/ox-data-ooc-correction-part.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement, nothing } from 'lit'
@@ -51,7 +51,7 @@ class OocResolveActivityEdit extends localize(i18next)(LitElement) {
         align-items: center;
       }
 
-      mwc-icon {
+      md-icon {
         color: var(--status-danger-color);
       }
 
@@ -92,7 +92,7 @@ class OocResolveActivityEdit extends localize(i18next)(LitElement) {
       ${editable
         ? html`
             <label action>
-              <h2><mwc-icon>build_circle</mwc-icon>&nbsp;<span>${i18next.t('label.corrective action')}</span></h2>
+              <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.corrective action')}</span></h2>
               <textarea placeholder=${String(i18next.t('text.corrective action placeholder'))} .value=${action || ''} @change=${this.onChangeAction}></textarea>
             </label>
           `

package/client/activities/activity-ooc-review-edit.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/dataset/ox-data-sample-view.js'
 
 import gql from 'graphql-tag'
@@ -54,7 +55,7 @@ class OocReviewActivityEdit extends localize(i18next)(LitElement) {
           font: var(--input-field-font);
         }
 
-        mwc-icon {
+        md-icon {
           color: var(--status-danger-color);
         }
 
@@ -90,7 +91,7 @@ class OocReviewActivityEdit extends localize(i18next)(LitElement) {
       </div>
 
       <label instruction>
-        <h2><mwc-icon>build_circle</mwc-icon>&nbsp;<span>${i18next.t('label.corrective instruction')}</span></h2>
+        <h2><md-icon>build_circle</md-icon>&nbsp;<span>${i18next.t('label.corrective instruction')}</span></h2>
         ${editable
           ? html`
               <textarea

package/client/components/data-entry-form.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/dataset/ox-data-entry-form.js'
 
 import gql from 'graphql-tag'
@@ -6,13 +7,14 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
-import { ScrollbarStyles } from '@operato/styles'
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
 import { OxDataEntryForm } from '@operato/dataset/ox-data-entry-form.js'
 import { DataSet } from '@operato/dataset'
 
 @customElement('data-entry-form')
 export class DataEntryForm extends localize(i18next)(LitElement) {
   static styles = [
+    ButtonContainerStyles,
     ScrollbarStyles,
     css`
       :host {
@@ -28,12 +30,6 @@ export class DataEntryForm extends localize(i18next)(LitElement) {
         overflow: auto;
       }
 
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
       .button-container span {
         font-size: 14px;
         color: #333;
@@ -52,11 +48,10 @@ export class DataEntryForm extends localize(i18next)(LitElement) {
   render() {
     return html`
       <ox-data-entry-form .dataSet=${this.dataSet}></ox-data-entry-form>
+
       <div class="button-container">
         ${!this.dataSample
-          ? html`
-              <mwc-button raised @click=${this.updateDataItems.bind(this)}>${i18next.t('button.save')}</mwc-button>
-            `
+          ? html` <button @click=${this.updateDataItems.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button> `
           : html` <span>${i18next.t('field.collected-at')}: ${this.dataSample.collectedAt.toLocaleString()}</span> `}
       </div>
     `
@@ -101,9 +96,7 @@ export class DataEntryForm extends localize(i18next)(LitElement) {
         collectedAt: new Date(collectedAt)
       }
 
-      document.dispatchEvent(
-        new CustomEvent('notify', { detail: { message: i18next.t('text.data sample created successfully') } })
-      )
+      document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.data sample created successfully') } }))
     }
   }
 }

package/client/pages/data-archive/data-archive-list-page.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 
@@ -77,17 +78,9 @@ export class DataArchiveListPage extends connect(store)(localize(i18next)(PageVi
     const mode = this.mode || (isMobileDevice() ? 'LIST' : 'GRID')
 
     return html`
-      <ox-grist
-        .mode=${mode}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-        ?url-params-sensitive=${false /* this.active */}
-      >
+      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${false /* this.active */}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.data-archive list')}
-          </div>
+          <div class="title">${i18next.t('title.data-archive list')}</div>
 
           <!-- <div class="filters">
             <ox-filters-form class="filter" autofocus without-search></ox-filters-form>
@@ -185,10 +178,7 @@ export class DataArchiveListPage extends connect(store)(localize(i18next)(PageVi
 
   async openArchivePopup() {
     this.popup = openPopup(
-      html` <data-archive-request-popup
-        @requested=${this.closePopupAndRefesh.bind(this)}
-        @created=${this.closePopupAndRefesh.bind(this)}
-      ></data-archive-request-popup>`,
+      html` <data-archive-request-popup @requested=${this.closePopupAndRefesh.bind(this)} @created=${this.closePopupAndRefesh.bind(this)}></data-archive-request-popup>`,
       {
         backdrop: true,
         size: 'small',
@@ -264,9 +254,7 @@ export class DataArchiveListPage extends connect(store)(localize(i18next)(PageVi
           .filter(column => column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined)
           .reduce((record, column) => {
             const key = column.imex === true ? column.name : column.imex.key
-            record[key] = key
-              .split('.')
-              .reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
+            record[key] = key.split('.').reduce((obj, key) => (obj && obj[key] !== 'undefined' ? obj[key] : undefined), item)
             return record
           }, {})
       }

package/client/pages/data-archive/data-archive-request-popup.ts

@@ -1,10 +1,13 @@
+import '@material/web/icon/icon.js'
+
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { client } from '@operato/graphql'
-import { SingleColumnFormStyles } from '@things-factory/form-ui'
+import { SingleColumnFormStyles } from '@operato/form'
+import { ButtonContainerStyles } from '@operato/styles'
 
 import moment from 'moment-timezone'
 import { CustomAlert } from '@operato/shell'
@@ -12,6 +15,7 @@ import { CustomAlert } from '@operato/shell'
 @customElement('data-archive-request-popup')
 class DataArchiveRequestPopup extends localize(i18next)(LitElement) {
   static styles = [
+    ButtonContainerStyles,
     SingleColumnFormStyles,
     css`
       :host {
@@ -25,13 +29,6 @@ class DataArchiveRequestPopup extends localize(i18next)(LitElement) {
       form {
         overflow: auto;
       }
-
-      .button-container {
-        display: flex;
-        margin-top: auto;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
     `
   ]
 
@@ -53,7 +50,7 @@ class DataArchiveRequestPopup extends localize(i18next)(LitElement) {
       </form>
 
       <div class="button-container">
-        <mwc-button raised @click=${this.requestArchive} label=${String(i18next.t('button.submit'))}></mwc-button>
+        <button @click=${this.requestArchive}><md-icon>archive</md-icon>${String(i18next.t('button.submit'))}</button>
       </div>
     `
   }

package/client/pages/data-entry/data-entry-list-page.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 import '@operato/board/ox-board-viewer.js'
@@ -120,10 +121,7 @@ export class DataEntryListPage extends connect(store)(localize(i18next)(PageView
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${this.active}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.data-entry list')}
-          </div>
+          <div class="title">${i18next.t('title.data-entry list')}</div>
 
           <div class="filters">
             <ox-filters-form autofocus without-search></ox-filters-form>

package/client/pages/data-key-set/data-key-item-list.ts

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
@@ -6,10 +8,12 @@ import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
 import { DataGrist, FetchOption } from '@operato/data-grist'
+import { ButtonContainerStyles } from '@operato/styles'
 
 @customElement('data-key-item-list')
 export class DataKeyItemList extends localize(i18next)(LitElement) {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
@@ -21,19 +25,6 @@ export class DataKeyItemList extends localize(i18next)(LitElement) {
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      [danger] {
-        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-      }
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -43,16 +34,11 @@ export class DataKeyItemList extends localize(i18next)(LitElement) {
 
   render() {
     return html`
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-      ></ox-grist>
+      <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist>
+
       <div class="button-container">
-        <mwc-button raised danger @click=${this._deleteDataKeyItems.bind(this)}
-          >${i18next.t('button.delete')}</mwc-button
-        >
-        <mwc-button raised @click=${this._updateDataKeyItems.bind(this)}>${i18next.t('button.save')}</mwc-button>
+        <button danger @click=${this._deleteDataKeyItems.bind(this)}><md-icon>delete_forever</md-icon>${i18next.t('button.delete')}</button>
+        <button @click=${this._updateDataKeyItems.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

package/client/pages/data-key-set/data-key-set-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -7,10 +8,12 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
+import { ButtonContainerStyles } from '@operato/styles'
 
 @customElement('data-key-set-importer')
 export class DataKeySetImporter extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
@@ -22,16 +25,6 @@ export class DataKeySetImporter extends LitElement {
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -73,7 +66,7 @@ export class DataKeySetImporter extends LitElement {
       ></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
+        <button @click="${this.save.bind(this)}"><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

package/client/pages/data-key-set/data-key-set-list-page.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 import './data-key-set-importer.js'
@@ -102,7 +103,10 @@ export class DataKeySetListPage extends connect(store)(localize(i18next)(PageVie
         {
           title: i18next.t('button.delete'),
           action: this._deleteDataKeySet.bind(this),
-          icon: 'delete'
+          icon: 'delete',
+          emphasis: {
+            danger: true
+          }
         }
       ],
       exportable: {
@@ -122,10 +126,7 @@ export class DataKeySetListPage extends connect(store)(localize(i18next)(PageVie
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.data-key-set list')}
-          </div>
+          <div class="title">${i18next.t('title.data-key-set list')}</div>
 
           <div class="filters">
             <ox-filters-form autofocus without-search></ox-filters-form>

package/client/pages/data-ooc/data-ooc-list-page.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 import '@operato/input/ox-input-select-buttons.js'
@@ -100,10 +101,7 @@ export class DataOocListPage extends connect(store)(localize(i18next)(PageView))
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.data-ooc list')}
-          </div>
+          <div class="title">${i18next.t('title.data-ooc list')}</div>
 
           <div class="filters">
             <ox-input-select-buttons

package/client/pages/data-ooc/data-ooc-view.ts

@@ -1,5 +1,6 @@
+import '@material/web/icon/icon.js'
+import '@material/web/fab/fab.js'
 import '@operato/dataset/ox-data-ooc-brief-view.js'
-import '@material/mwc-fab'
 import '@things-factory/worklist/dist-client/components/activity-thread-timeline.js'
 
 import gql from 'graphql-tag'
@@ -32,7 +33,7 @@ export class DataOocView extends localize(i18next)(LitElement) {
         margin: var(--margin-default);
       }
 
-      mwc-fab {
+      md-fab {
         position: fixed;
         bottom: 15px;
         right: 16px;
@@ -41,7 +42,7 @@ export class DataOocView extends localize(i18next)(LitElement) {
       }
 
       @media print {
-        mwc-fab {
+        md-fab {
           display: none;
         }
       }
@@ -87,15 +88,15 @@ export class DataOocView extends localize(i18next)(LitElement) {
           `
         : nothing}
 
-      <mwc-fab
-        icon="print"
+      <md-fab
         title="print"
         @click=${() =>
           GhostPrint.print({
             src: `./data-ooc/${this.dataOoc.id}`
           })}
-        >print</mwc-fab
       >
+        <md-icon slot="icon">print</md-icon>
+      </md-fab>
     `
   }
 

package/client/pages/data-report/data-report-list-page.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 import '@operato/board/ox-board-viewer.js'
@@ -44,23 +45,12 @@ const showMonitorView = (columns, data, column, record, rowIndex) => {
       const board = {
         id: monitorView
       }
-      openPopup(
-        html`
-          <ox-board-viewer
-            style="background-color: white;"
-            .board=${board}
-            .provider=${provider}
-            hide-fullscreen
-            hide-navigation
-          ></ox-board-viewer>
-        `,
-        {
-          closable: true,
-          backdrop: true,
-          size: 'large',
-          title
-        }
-      )
+      openPopup(html` <ox-board-viewer style="background-color: white;" .board=${board} .provider=${provider} hide-fullscreen hide-navigation></ox-board-viewer> `, {
+        closable: true,
+        backdrop: true,
+        size: 'large',
+        title
+      })
 
       // navigate(`board-viewer/${monitorView}?interactive=true&title=${title}`)
       break
@@ -166,17 +156,9 @@ export class DataReportListPage extends connect(store)(localize(i18next)(PageVie
     const mode = 'CARD'
 
     return html`
-      <ox-grist
-        .mode=${mode}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-        ?url-params-sensitive=${this.active}
-      >
+      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${this.active}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.data-report list')}
-          </div>
+          <div class="title">${i18next.t('title.data-report list')}</div>
 
           <div class="filters">
             <ox-filters-form class="filter" autofocus without-search></ox-filters-form>

package/client/pages/data-sample/data-sample-list-page.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 import './data-sample-view.js'
@@ -80,10 +81,7 @@ export class DataSampleListPage extends connect(store)(localize(i18next)(PageVie
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${false /* this.active */}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.data-sample list')}
-          </div>
+          <div class="title">${i18next.t('title.data-sample list')}</div>
 
           <div class="filters">
             <ox-filters-form class="filter" autofocus without-search></ox-filters-form>

package/client/pages/data-sample/data-sample-search-page.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 import './data-sample-view.js'
@@ -82,10 +83,7 @@ export class DataSampleSearchPage extends connect(store)(localize(i18next)(PageV
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.data-sample search')}
-          </div>
+          <div class="title">${i18next.t('title.data-sample search')}</div>
 
           <div class="filters">
             <ox-filters-form class="filter" autofocus without-search></ox-filters-form>

package/client/pages/data-sample/data-sample-view.ts

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+import '@material/web/fab/fab.js'
 import '@operato/dataset/ox-data-sample-view.js'
 import '@operato/dataset/ox-data-ooc-brief-view.js'
 import '@things-factory/worklist/dist-client/components/activity-thread-timeline.js'
@@ -33,7 +35,7 @@ export class DataSampleView extends localize(i18next)(LitElement) {
         margin: var(--margin-default);
       }
 
-      mwc-fab {
+      md-fab {
         position: fixed;
         bottom: 15px;
         right: 16px;
@@ -42,7 +44,7 @@ export class DataSampleView extends localize(i18next)(LitElement) {
       }
 
       @media print {
-        mwc-fab {
+        md-fab {
           display: none;
         }
       }
@@ -96,15 +98,15 @@ export class DataSampleView extends localize(i18next)(LitElement) {
           `
         : nothing}
 
-      <mwc-fab
-        icon="print"
+      <md-fab
         title="print"
         @click=${() =>
           GhostPrint.print({
             src: `./data-sample/${this.dataSampleId}`
           })}
-        >print</mwc-fab
       >
+        <md-icon slot="icon">print</md-icon>
+      </md-fab>
     `
   }
 

package/client/pages/data-sensor/data-sensor-list-page.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import '@operato/context/ox-context-page-toolbar.js'
 
@@ -33,15 +34,6 @@ export class DataSensorListPage extends connect(store)(localize(i18next)(PageVie
         overflow-y: auto;
         flex: 1;
       }
-
-      @media (max-width: 450px) {
-        .header {
-          display: grid;
-          grid-template-areas:
-            'title actions'
-            'filters filters';
-        }
-      }
     `
   ]
 
@@ -79,7 +71,10 @@ export class DataSensorListPage extends connect(store)(localize(i18next)(PageVie
         {
           icon: 'delete',
           title: i18next.t('button.delete'),
-          action: this._deleteDataSensor.bind(this)
+          action: this._deleteDataSensor.bind(this),
+          emphasis: {
+            danger: true
+          }
         }
       ],
       toolbar: false
@@ -92,10 +87,7 @@ export class DataSensorListPage extends connect(store)(localize(i18next)(PageVie
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)} ?url-params-sensitive=${this.active}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.data-sensor list')}
-          </div>
+          <div class="title">${i18next.t('title.data-sensor list')}</div>
 
           <div class="filters">
             <ox-filters-form class="filter" autofocus without-search></ox-filters-form>

package/client/pages/data-set/data-item-list.ts

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import gql from 'graphql-tag'
 
 import { css, html, LitElement } from 'lit'
@@ -7,6 +9,7 @@ import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
 import { DataGrist, FetchOption } from '@operato/data-grist'
+import { ButtonContainerStyles } from '@operato/styles'
 
 const DataItemStats = ['sum', 'mean', 'stddev', 'variance', 'min', 'max', 'range', 'median', 'mode']
 
@@ -17,6 +20,7 @@ class DataItemList extends localize(i18next)(LitElement) {
   @state() gristConfig: any
 
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
@@ -28,19 +32,6 @@ class DataItemList extends localize(i18next)(LitElement) {
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      [danger] {
-        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-      }
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -49,9 +40,10 @@ class DataItemList extends localize(i18next)(LitElement) {
   render() {
     return html`
       <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist>
+
       <div class="button-container">
-        <mwc-button raised danger @click=${this._deleteDataItems.bind(this)}>${i18next.t('button.delete')}</mwc-button>
-        <mwc-button raised @click=${this._updateDataItems.bind(this)}>${i18next.t('button.save')}</mwc-button>
+        <button danger @click=${this._deleteDataItems.bind(this)}><md-icon>delete_forever</md-icon>${i18next.t('button.delete')}</button>
+        <button @click=${this._updateDataItems.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }