@things-factory/organization 7.0.0-alpha.8 → 7.0.0

package/client/component/approval-line-brief.ts

@@ -52,7 +52,7 @@ export class ApprovalLineBrief extends localize(i18next)(LitElement) {
         margin: auto;
         background-color: rgba(0, 0, 0, 0.4);
         border-radius: 50%;
-        color: var(--theme-white-color);
+        color: var(--md-sys-color-on-primary);
         line-height: 1.2;
       }
 
@@ -63,12 +63,12 @@ export class ApprovalLineBrief extends localize(i18next)(LitElement) {
 
       [current] span {
         background-color: #84d600;
-        color: var(--theme-white-color);
+        color: var(--md-sys-color-on-primary);
       }
 
       [current] {
         font-weight: bold;
-        color: var(--theme-white-color);
+        color: var(--md-sys-color-on-primary);
       }
 
       [past] span:before,

package/client/component/approval-line-items-editor-popup.ts

@@ -1,9 +1,11 @@
+import '@material/web/icon/icon.js'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { ButtonContainerStyles } from '@operato/styles'
 import { closePopup } from '@operato/popup'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
 
 import { ApprovalLineItemsEditor } from './approval-line-items-editor'
 import { ApprovalLineItem } from '../types/approval-line'
@@ -20,7 +22,7 @@ export class ApprovalLineItemsEditorPopup extends localize(i18next)(LitElement)
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       approval-line-items-editor {
@@ -46,10 +48,13 @@ export class ApprovalLineItemsEditorPopup extends localize(i18next)(LitElement)
         }}
       ></approval-line-items-editor>
 
-      <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <div class="button-container" style="margin-left:unset;">
+        <button @click=${this.onEmpty.bind(this)}>
+          <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
+        </button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }
@@ -58,9 +63,18 @@ export class ApprovalLineItemsEditorPopup extends localize(i18next)(LitElement)
     this.changedValue = this.value
   }
 
-  onEmpty() {
-    this.confirmCallback && this.confirmCallback(null)
-    closePopup(this)
+  async onEmpty() {
+    const reaction = await OxPrompt.open({
+      title: i18next.t('text.are_you_sure'),
+      text: i18next.t('prompt.sure to empty approval line ?'),
+      confirmButton: { text: i18next.t('button.confirm') },
+      cancelButton: { text: i18next.t('button.cancel') }
+    })
+
+    if (reaction) {
+      this.confirmCallback && this.confirmCallback(null)
+      closePopup(this)
+    }
   }
 
   onCancel() {

package/client/component/approval-line-items-editor.ts

@@ -7,7 +7,7 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { DataGrist, getEditor, getRenderer } from '@operato/data-grist'
 import { isMobileDevice } from '@operato/utils'
-import { ButtonContainerStyles } from '@operato/styles'
+import { ButtonContainerStyles, CommonHeaderStyles } from '@operato/styles'
 import { openPopup, PopupHandle } from '@operato/layout'
 
 import { ApprovalLineView } from './approval-line-view'
@@ -19,13 +19,14 @@ import { ApprovalLine, ApprovalLineItem } from '../types/approval-line'
 @customElement('approval-line-items-editor')
 export class ApprovalLineItemsEditor extends localize(i18next)(LitElement) {
   static styles = [
+    CommonHeaderStyles,
     ButtonContainerStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       approval-line-view {
@@ -44,7 +45,7 @@ export class ApprovalLineItemsEditor extends localize(i18next)(LitElement) {
     `
   ]
 
-  @property({ type: Object }) value?: ApprovalLineItem[]
+  @property({ type: Array }) value?: ApprovalLineItem[]
 
   @state() gristConfig?: any
 
@@ -76,10 +77,14 @@ export class ApprovalLineItemsEditor extends localize(i18next)(LitElement) {
           )
         }}
       >
-        <div slot="headroom">
-          <div id="select">
-            <mwc-button @click=${this.openSelector.bind(this)}>${i18next.t('button.copy from')}</mwc-button>
-            <mwc-button raised danger @click=${() => this.deleteDataItems()}>${i18next.t('button.delete')}</mwc-button>
+        <div slot="headroom" class="header">
+          <div class="actions">
+            <button @click=${this.openSelector.bind(this)}>
+              <md-icon>content_copy</md-icon>${i18next.t('button.copy from')}
+            </button>
+            <button danger @click=${() => this.deleteDataItems()}>
+              <md-icon>delete</md-icon>${i18next.t('button.delete')}
+            </button>
           </div>
         </div>
       </ox-grist>
@@ -132,7 +137,7 @@ export class ApprovalLineItemsEditor extends localize(i18next)(LitElement) {
                 case 'Employee':
                   options = {
                     title: i18next.t('title.employee list'),
-                    pagination: { pages : [50, 100, 200] },
+                    pagination: { pages: [50, 100, 200] },
                     basicArgs: { filters: [{ name: 'active', operator: 'eq', value: 'true' }] },
                     queryName: 'employees',
                     columns: [
@@ -144,54 +149,54 @@ export class ApprovalLineItemsEditor extends localize(i18next)(LitElement) {
                         filter: 'search',
                         sortable: true
                       },
-                      { 
+                      {
                         name: 'name',
                         width: 120,
-                        header: { renderer: () => i18next.t('field.name') }, 
+                        header: { renderer: () => i18next.t('field.name') },
                         filter: 'search',
                         sortable: true
                       },
-                      { 
-                        name: 'alias', 
+                      {
+                        name: 'alias',
                         width: 150,
-                        header: { renderer: () => i18next.t('label.alias') }, 
+                        header: { renderer: () => i18next.t('label.alias') },
                         filter: 'search',
                         sortable: true
                       },
-                      { 
-                        type: 'code', 
-                        name: 'type', 
+                      {
+                        type: 'code',
+                        name: 'type',
                         width: 110,
-                        header: { renderer: () => i18next.t('label.type') }, 
-                        record: { 
-                          editable: false, 
-                          codeName: 'EMPLOYEE_TYPE' 
+                        header: { renderer: () => i18next.t('label.type') },
+                        record: {
+                          editable: false,
+                          codeName: 'EMPLOYEE_TYPE'
                         }
                       },
-                      { 
-                        type: 'code', 
-                        name: 'jobPosition', 
+                      {
+                        type: 'code',
+                        name: 'jobPosition',
                         width: 110,
-                        header: { renderer: () => i18next.t('label.job-position') }, 
-                        record: { 
-                          editable: false, 
-                          codeName: 'JOB_POSITION' 
+                        header: { renderer: () => i18next.t('label.job-position') },
+                        record: {
+                          editable: false,
+                          codeName: 'JOB_POSITION'
                         }
                       },
-                      { 
-                        type: 'code', 
-                        name: 'jobResponsibility', 
+                      {
+                        type: 'code',
+                        name: 'jobResponsibility',
                         width: 200,
-                        header: { renderer: () => i18next.t('label.job-responsibility') }, 
-                        record: { 
-                          editable: false, 
-                          codeName: 'JOB_RESPONSIBILITY' 
+                        header: { renderer: () => i18next.t('label.job-responsibility') },
+                        record: {
+                          editable: false,
+                          codeName: 'JOB_RESPONSIBILITY'
                         }
                       },
                       {
                         type: 'date',
                         name: 'hiredOn',
-                        header: { renderer: () => i18next.t('field.hired-on') }, 
+                        header: { renderer: () => i18next.t('field.hired-on') },
                         width: 100
                       }
                     ],

package/client/component/approval-line-selector.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import './approval-line-view'
 
@@ -31,7 +32,7 @@ export class ApprovalLineSelector extends LitElement {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
 
         width: var(--overlay-center-normal-width, 50%);
         height: var(--overlay-center-normal-height, 50%);
@@ -44,11 +45,6 @@ export class ApprovalLineSelector extends LitElement {
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
@@ -76,10 +72,13 @@ export class ApprovalLineSelector extends LitElement {
       >
       </ox-grist>
 
-      <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <div class="button-container" style="margin-left:unset;">
+        <button @click=${this.onEmpty.bind(this)}>
+          <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
+        </button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/client/component/approval-line-templates-manager.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 } from 'lit/decorators.js'
@@ -8,7 +10,7 @@ import { getEditor, getRenderer } from '@operato/data-grist'
 import { isMobileDevice } from '@operato/utils'
 import { ButtonContainerStyles } from '@operato/styles'
 
-import { ApprovalLine, ApprovalLineItem } from '../types/approval-line'
+import { ApprovalLine } from '../types/approval-line'
 
 /**
  * 결재선 관리를 위해서
@@ -24,7 +26,7 @@ export class ApprovalLineTemplatesManager extends localize(i18next)(LitElement)
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       ox-grist {
@@ -45,9 +47,12 @@ export class ApprovalLineTemplatesManager extends localize(i18next)(LitElement)
         .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</md-icon>${i18next.t('button.delete')}
+        </button>
+        <button @click=${this._updateDataItems.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

package/client/component/approval-line-view.ts

@@ -17,8 +17,9 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
         justify-content: center;
         align-items: center;
 
-        --mdc-icon-size: 3em;
-        color: var(--secondary-color, black);
+        --md-icon-size: 3em;
+        color: var(--md-sys-color-on-surface);
+        background-color: var(--md-sys-color-surface-variant);
       }
 
       ol {
@@ -54,19 +55,19 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
       span {
         display: block;
         margin: auto;
-        margin-bottom: var(--margin-narrow);
-        background-color: var(--theme-white-color);
+        margin-bottom: var(--spacing-small);
+        background-color: var(--md-sys-color-surface-variant);
         border-radius: 5px;
         border: 2px solid var(--secondary-text-color);
         font-size: var(--fontsize-small);
         color: var(--secondary-text-color);
         line-height: 1;
-        padding: var(--padding-narrow) var(--padding-default);
+        padding: var(--spacing-small) var(--spacing-medium);
       }
       [approver][current] span {
         background-color: var(--secondary-text-color);
         border-color: var(--secondary-text-color);
-        color: var(--theme-white-color);
+        color: var(--md-sys-color-on-primary);
       }
       [approver][current] {
         font-weight: bold;
@@ -74,7 +75,7 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
       [approver][current] ~ li span {
         background-color: rgba(0, 0, 0, 0.5);
         border-color: transparent;
-        color: var(--theme-white-color);
+        color: var(--md-sys-color-on-primary);
       }
       [approver][current] ~ li:before {
         background-color: rgba(0, 0, 0, 0.4);
@@ -91,7 +92,8 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
 
     return html`
       <ol>
-        ${this.model ? html` <li approver><span>ME</span>${i18next.t('label.myself')}</li> ` : html``} ${items.map((item, order) => this.renderItem(item, order + 1))}
+        ${this.model ? html` <li approver><span>ME</span>${i18next.t('label.myself')}</li> ` : html``}
+        ${items.map((item, order) => this.renderItem(item, order + 1))}
       </ol>
     `
   }
@@ -99,7 +101,11 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
   renderItem(item: ApprovalLineItem, order: number): TemplateResult {
     const { type, approver } = item
     const { name } = approver || {
-      name: [OrgMemberTargetType.Myself, OrgMemberTargetType.MySupervisor, OrgMemberTargetType.MyDepartment].includes(type!) ? i18next.t(`label.${type}`) : ''
+      name: [OrgMemberTargetType.Myself, OrgMemberTargetType.MySupervisor, OrgMemberTargetType.MyDepartment].includes(
+        type!
+      )
+        ? i18next.t(`label.${type}`)
+        : ''
     }
 
     return html`

package/client/component/assignees-editor-popup.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
@@ -20,7 +21,7 @@ export class AssigneesEditorPopup extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       assignees-editor {
@@ -29,7 +30,7 @@ export class AssigneesEditorPopup extends localize(i18next)(LitElement) {
     `
   ]
 
-  @property({ type: Object }) value?: AssigneeItem[]
+  @property({ type: Array }) value?: AssigneeItem[]
 
   @property({ type: Object }) confirmCallback?: (value?: AssigneeItem[] | null) => void
   @query('assignees-editor') editor!: AssigneesEditor
@@ -46,10 +47,13 @@ export class AssigneesEditorPopup extends localize(i18next)(LitElement) {
         }}
       ></assignees-editor>
 
-      <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <div class="button-container" style="margin-left:unset;">
+        <button @click=${this.onEmpty.bind(this)}>
+          <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
+        </button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/client/component/assignees-editor.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import './assignees-view'
 
 import { css, html, LitElement } from 'lit'
@@ -22,7 +23,7 @@ export class AssigneesEditor extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       assignees-view {
@@ -73,7 +74,9 @@ export class AssigneesEditor extends localize(i18next)(LitElement) {
       >
         <div slot="headroom">
           <div id="select">
-            <mwc-button raised danger @click=${() => this.deleteDataItems()}>${i18next.t('button.delete')}</mwc-button>
+            <button danger @click=${() => this.deleteDataItems()}>
+              <md-icon>delete</md-icon>${i18next.t('button.delete')}
+            </button>
           </div>
         </div>
       </ox-grist>

package/client/component/assignees-view.ts

@@ -18,9 +18,9 @@ export class AssigneesView extends localize(i18next)(LitElement) {
 
         align-items: center;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
 
-        --mdc-icon-size: 3em;
+        --md-icon-size: 3em;
         color: var(--secondary-color, black);
       }
 

package/client/component/department-selector.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-tree'
 
 import gql from 'graphql-tag'
@@ -46,7 +47,7 @@ export class DepartmentSelector extends LitElement {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
 
         width: var(--overlay-center-normal-width, 50%);
         height: var(--overlay-center-normal-height, 50%);
@@ -55,11 +56,6 @@ export class DepartmentSelector extends LitElement {
       ox-tree-vertical {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
@@ -77,10 +73,13 @@ export class DepartmentSelector extends LitElement {
         label-property="name"
       ></ox-tree-vertical>
 
-      <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <div class="button-container" style="margin-left:unset;">
+        <button @click=${this.onEmpty.bind(this)}>
+          <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
+        </button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/client/component/department-view.ts

@@ -6,7 +6,6 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
-import { getCodeByName } from '@things-factory/code-base'
 
 @customElement('department-view')
 export class DepartmentView extends localize(i18next)(ScopedElementsMixin(LitElement)) {
@@ -22,6 +21,9 @@ export class DepartmentView extends localize(i18next)(ScopedElementsMixin(LitEle
 
       ox-properties-dynamic-view {
         flex: 1;
+
+        display: flex;
+        flex-direction: column;
       }
     `
   ]

package/client/component/recipients-editor-popup.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
@@ -20,7 +21,7 @@ export class RecipientsEditorPopup extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       recipients-editor {
@@ -29,7 +30,7 @@ export class RecipientsEditorPopup extends localize(i18next)(LitElement) {
     `
   ]
 
-  @property({ type: Object }) value?: AssigneeItem[]
+  @property({ type: Array }) value?: AssigneeItem[]
 
   @property({ type: Object }) confirmCallback?: (value?: AssigneeItem[] | null) => void
   @query('recipients-editor') editor!: RecipientsEditor
@@ -46,10 +47,13 @@ export class RecipientsEditorPopup extends localize(i18next)(LitElement) {
         }}
       ></recipients-editor>
 
-      <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <div class="button-container" style="margin-left:unset;">
+        <button @click=${this.onEmpty.bind(this)}>
+          <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
+        </button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }

package/client/component/recipients-editor.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import './recipients-view'
 
 import { css, html, LitElement } from 'lit'
@@ -5,8 +6,8 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { DataGrist, getEditor, getRenderer } from '@operato/data-grist'
+import { ButtonContainerStyles, CommonHeaderStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
-import { ButtonContainerStyles } from '@operato/styles'
 
 import { AssigneeItem } from '../types/org-member'
 
@@ -16,13 +17,14 @@ import { AssigneeItem } from '../types/org-member'
 @customElement('recipients-editor')
 export class RecipientsEditor extends localize(i18next)(LitElement) {
   static styles = [
+    CommonHeaderStyles,
     ButtonContainerStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       recipients-view {
@@ -32,16 +34,10 @@ export class RecipientsEditor extends localize(i18next)(LitElement) {
       ox-grist {
         flex: 1;
       }
-
-      #select {
-        display: flex;
-        justify-content: end;
-        padding: 10px;
-      }
     `
   ]
 
-  @property({ type: Object }) value?: AssigneeItem[]
+  @property({ type: Array }) value?: AssigneeItem[]
 
   @state() gristConfig?: any
 
@@ -71,9 +67,11 @@ export class RecipientsEditor extends localize(i18next)(LitElement) {
           )
         }}
       >
-        <div slot="headroom">
-          <div id="select">
-            <mwc-button raised danger @click=${() => this.deleteDataItems()}>${i18next.t('button.delete')}</mwc-button>
+        <div slot="headroom" class="header">
+          <div id="actions">
+            <button danger @click=${() => this.deleteDataItems()}>
+              <md-icon>delete</md-icon>${i18next.t('button.delete')}
+            </button>
           </div>
         </div>
       </ox-grist>

package/client/component/recipients-view.ts

@@ -18,9 +18,9 @@ export class RecipientsView extends localize(i18next)(LitElement) {
 
         align-items: center;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
 
-        --mdc-icon-size: 3em;
+        --md-icon-size: 3em;
         color: var(--secondary-color, black);
       }