@things-factory/worklist 7.0.1-alpha.4 → 7.0.1-alpha.40

package/client/bootstrap.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './templates/activity-approval-context-template.js'
 import './templates/activity-thread-context-template.js'
 import './templates/activity-instance-context-template.js'
@@ -46,13 +46,13 @@ export default function bootstrap() {
       tool: {
         position: TOOL_POSITION.FRONT,
         template: html`
-          <mwc-icon
+          <md-icon
             @click=${async e => {
               openOverlay('context-toolbar-overlay', {
                 template
               })
             }}
-            >info</mwc-icon
+            >info</md-icon
           >
         `,
         context

package/client/components/activity-/bowner-view.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-button'
+import '@material/web/button/elevated-button.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'

package/client/components/activity-approval-ribon.ts

@@ -1,4 +1,3 @@
-import '@material/mwc-button'
 import '@operato/property-editor/ox-properties-dynamic-view.js'
 import '@things-factory/organization/dist-client/component/approval-line-brief.js'
 import '../templates/activity-approval-context-template.js'
@@ -60,7 +59,7 @@ export class ActivityApprovalRibon extends localize(i18next)(LitElement) {
         --worklist-status-color: #cb3a33;
       }
 
-      mwc-icon {
+      md-icon {
         font-size: 24px;
       }
 
@@ -103,7 +102,7 @@ export class ActivityApprovalRibon extends localize(i18next)(LitElement) {
         [assignee] {
           display: none;
         }
-        mwc-icon {
+        md-icon {
           padding: 0;
         }
         approval-line-brief {
@@ -122,16 +121,13 @@ export class ActivityApprovalRibon extends localize(i18next)(LitElement) {
 
     return html`
       <div desc>
-        <mwc-icon
+        <md-icon
           @click=${() => {
             toggleOverlay('activity-info-overlay', {
-              template: html`<activity-approval-context-template
-                .activityApproval=${this.activityApproval}
-                state=${state}
-              ></activity-approval-context-template>`
+              template: html`<activity-approval-context-template .activityApproval=${this.activityApproval} state=${state}></activity-approval-context-template>`
             })
           }}
-          >description</mwc-icon
+          >description</md-icon
         >
         ${description}
       </div>
@@ -143,12 +139,7 @@ export class ActivityApprovalRibon extends localize(i18next)(LitElement) {
             </div>
           `
         : html``}
-      ${approvalLine
-        ? html`<approval-line-brief
-            .model=${approvalLine}
-            .current=${this.activityApproval.order}
-          ></approval-line-brief>`
-        : html``}
+      ${approvalLine ? html`<approval-line-brief .model=${approvalLine} .current=${this.activityApproval.order}></approval-line-brief>` : html``}
 
       <div state>${i18next.t('label.activity-state-' + state)}</div>
     `

package/client/components/activity-instance-preview.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-button'
+import '@material/web/button/elevated-button.js'
 import '@operato/property-editor/ox-properties-dynamic-view.js'
 
 import gql from 'graphql-tag'
@@ -45,7 +45,7 @@ class ActivityInstancePreview extends localize(i18next)(LitElement) {
         padding: var(--padding-default);
       }
 
-      mwc-button {
+      md-elevated-button {
         margin-left: var(--margin-default);
       }
     `
@@ -58,16 +58,7 @@ class ActivityInstancePreview extends localize(i18next)(LitElement) {
   @state() picked: boolean = false
 
   render() {
-    const {
-      id,
-      name,
-      description,
-      input,
-      state,
-      threadsMin = 0,
-      threadsMax = 0,
-      activity
-    } = this.activityInstance || {}
+    const { id, name, description, input, state, threadsMin = 0, threadsMax = 0, activity } = this.activityInstance || {}
     const { model, thumbnail } = activity || {}
 
     const inputSpec = (model || [])
@@ -107,12 +98,8 @@ class ActivityInstancePreview extends localize(i18next)(LitElement) {
       </content>
 
       <div class="button-container">
-        <mwc-button raised @click=${e => history.back()}>${i18next.t('button.close')}</mwc-button>
-        ${pickable
-          ? html`<mwc-button raised @click=${this.pickActivityInstance.bind(this)}
-              >${i18next.t('button.pick')}</mwc-button
-            >`
-          : html``}
+        <md-elevated-button raised @click=${e => history.back()}>${i18next.t('button.close')}</md-elevated-button>
+        ${pickable ? html`<md-elevated-button raised @click=${this.pickActivityInstance.bind(this)}>${i18next.t('button.pick')}</md-elevated-button>` : html``}
       </div>
     `
   }

package/client/components/activity-instance-ribon.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-button'
+import '@material/web/button/elevated-button.js'
 import '@operato/property-editor/ox-properties-dynamic-view.js'
 import '@things-factory/organization/dist-client/component/approval-line-brief.js'
 import '../templates/activity-instance-context-template.js'
@@ -60,7 +60,7 @@ export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
         --worklist-status-color: #cb3a33;
       }
 
-      mwc-icon {
+      md-icon {
         font-size: 24px;
       }
 
@@ -103,7 +103,7 @@ export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
         [assignee] {
           display: none;
         }
-        mwc-icon {
+        md-icon {
           padding: 0;
         }
         approval-line-brief {
@@ -121,16 +121,13 @@ export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
 
     return html`
       <div desc>
-        <mwc-icon
+        <md-icon
           @click=${() => {
             toggleOverlay('activity-info-overlay', {
-              template: html`<activity-instance-context-template
-                .activityInstance=${this.activityInstance}
-                state=${state}
-              ></activity-instance-context-template>`
+              template: html`<activity-instance-context-template .activityInstance=${this.activityInstance} state=${state}></activity-instance-context-template>`
             })
           }}
-          >description</mwc-icon
+          >description</md-icon
         >
         ${description}
       </div>

package/client/components/activity-intro-view.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-button'
+import '@material/web/button/elevated-button.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'

package/client/components/activity-reporter-view.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-button'
+import '@material/web/button/elevated-button.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'

package/client/components/activity-starter-form.ts

@@ -1,6 +1,5 @@
-import '@material/mwc-icon-button'
+import '@material/web/button/elevated-button.js'
 import '@operato/property-editor/ox-properties-dynamic-view.js'
-import '@material/mwc-button'
 import '@things-factory/organization'
 
 import gql from 'graphql-tag'
@@ -67,7 +66,7 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
         padding: var(--padding-default);
       }
 
-      mwc-button {
+      md-elevated-button {
         margin-left: var(--margin-default);
       }
     `
@@ -112,8 +111,8 @@ export class ActivityStarterForm extends localize(i18next)(LitElement) {
       </content>
 
       <div class="button-container">
-        <mwc-button raised @click=${this.draftActivityInstance.bind(this)}>${i18next.t('button.draft')}</mwc-button>
-        <mwc-button raised @click=${e => history.back()}>${i18next.t('button.close')}</mwc-button>
+        <md-elevated-button raised @click=${this.draftActivityInstance.bind(this)}>${i18next.t('button.draft')}</md-elevated-button>
+        <md-elevated-button raised @click=${e => history.back()}>${i18next.t('button.close')}</md-elevated-button>
       </div>
     `
   }

package/client/components/activity-thread-ribon.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-button'
+import '@material/web/button/elevated-button.js'
 import '@operato/property-editor/ox-properties-dynamic-view.js'
 import '@things-factory/organization/dist-client/component/approval-line-brief.js'
 import '../templates/activity-thread-context-template.js'
@@ -60,7 +60,7 @@ export class ActivityThreadRibon extends localize(i18next)(LitElement) {
         --worklist-status-color: #cb3a33;
       }
 
-      mwc-icon {
+      md-icon {
         font-size: 24px;
       }
 
@@ -96,7 +96,7 @@ export class ActivityThreadRibon extends localize(i18next)(LitElement) {
         [assignee] {
           display: none;
         }
-        mwc-icon {
+        md-icon {
           padding: 0;
         }
         approval-line-brief {
@@ -115,16 +115,13 @@ export class ActivityThreadRibon extends localize(i18next)(LitElement) {
 
     return html`
       <div desc>
-        <mwc-icon
+        <md-icon
           @click=${() => {
             toggleOverlay('activity-info-overlay', {
-              template: html`<activity-thread-context-template
-                .activityThread=${this.activityThread}
-                state=${state}
-              ></activity-thread-context-template>`
+              template: html`<activity-thread-context-template .activityThread=${this.activityThread} state=${state}></activity-thread-context-template>`
             })
           }}
-          >description</mwc-icon
+          >description</md-icon
         >
         ${description}
       </div>

package/client/components/activity-thread-timeline.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@things-factory/organization/dist-client/component/approval-line-view.js'
 
 import { html, css, LitElement, nothing } from 'lit'
@@ -53,7 +53,7 @@ export class ActivityThreadTimeline extends connect(store)(LitElement) {
           opacity: 0.7;
         }
 
-        mwc-icon {
+        md-icon {
           position: relative;
           top: 3px;
           font-size: var(--fontsize-large);
@@ -163,7 +163,7 @@ export class ActivityThreadTimeline extends connect(store)(LitElement) {
 
         <span info>
           ${i18next.t('label.activity-transaction-' + transaction)}
-          <div><mwc-icon>account_circle</mwc-icon>${name}</div>
+          <div><md-icon>account_circle</md-icon>${name}</div>
           <p>${reason ? reason : output ? this.renderOutput(output) : nothing}</p>
         </span>
       </li>
@@ -180,7 +180,7 @@ export class ActivityThreadTimeline extends connect(store)(LitElement) {
         <span status></span>
         <span info>
           ${i18next.t('label.activity-state-' + judgment)}
-          <div><mwc-icon>account_circle</mwc-icon>${name}</div>
+          <div><md-icon>account_circle</md-icon>${name}</div>
           <p>${comment}</p>
         </span>
       </li>

package/client/grist-editor/grist-editor-activity-search-key.ts

@@ -16,9 +16,7 @@ export class GristEditorActivitySearchKeys extends OxGristEditor {
   private popup?: PopupHandle
 
   get editorTemplate() {
-    return this.value && this.value instanceof Array && this.value.length > 0
-      ? html`<mwc-icon style="--mdc-icon-size:1.3em">key</mwc-icon>`
-      : html``
+    return this.value && this.value instanceof Array && this.value.length > 0 ? html`<md-icon style="--mdc-icon-size:1.3em">key</md-icon>` : html``
   }
 
   _onclick(e: Event): void {
@@ -65,10 +63,7 @@ export class GristEditorActivitySearchKeys extends OxGristEditor {
       만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
       따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
     */
-    var template = html`
-      <popup-activity-search-keys-input .value=${this.value} .confirmCallback=${confirmCallback}>
-      </popup-activity-search-keys-input>
-    `
+    var template = html` <popup-activity-search-keys-input .value=${this.value} .confirmCallback=${confirmCallback}> </popup-activity-search-keys-input> `
 
     this.popup = openPopup(template, {
       backdrop: true,

package/client/grist-editor/grist-renderer-activity-search-key.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import { html } from 'lit'
 import { FieldRenderer } from '@operato/data-grist'
 
@@ -15,11 +15,6 @@ function onmouseout(e: MouseEvent) {
 
 export const GristRendererActivitySearchKeys: FieldRenderer = (value, column, record, rowIndex, field) => {
   return value && value instanceof Array && value.length > 0
-    ? html`<mwc-icon
-        style="--mdc-icon-size:1.3em"
-        @mouseover=${(e: MouseEvent) => onmouseover(e, value)}
-        @mouseout=${onmouseout}
-        >key</mwc-icon
-      >`
+    ? html`<md-icon style="--mdc-icon-size:1.3em" @mouseover=${(e: MouseEvent) => onmouseover(e, value)} @mouseout=${onmouseout}>key</md-icon>`
     : html``
 }

package/client/grist-editor/popup-activity-search-keys-input.ts

@@ -3,7 +3,7 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
 import { closePopup } from '@operato/popup'
-import { ScrollbarStyles } from '@operato/styles'
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 import { getEditor, getRenderer, ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
 import { ActivitySearchKeyItem } from '../types/activity-search-key-item-type'
@@ -11,6 +11,7 @@ import { ActivitySearchKeyItem } from '../types/activity-search-key-item-type'
 @customElement('popup-activity-search-keys-input')
 export class PopupActivitySearchKeysInput extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     ScrollbarStyles,
     css`
       :host {
@@ -26,12 +27,6 @@ export class PopupActivitySearchKeysInput extends LitElement {
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
     `
   ]
 
@@ -124,15 +119,11 @@ export class PopupActivitySearchKeysInput extends 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 @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+        <button @click=${this.onCancel.bind(this)} danger><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/pages/activity/activity-list-page.ts

@@ -111,8 +111,8 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
         </div>
       </ox-grist>
@@ -156,15 +156,12 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
           handlers: {
             click: (columns, data, column, record, rowIndex) => {
               if (!record.id) return
-              const popup = openPopup(
-                html` <activity-model-item-list .activity=${record}></activity-model-item-list> `,
-                {
-                  backdrop: true,
-                  help: 'worklist/activity/activity-model-item-list',
-                  size: 'large',
-                  title: i18next.t('title.activity model item list')
-                }
-              )
+              const popup = openPopup(html` <activity-model-item-list .activity=${record}></activity-model-item-list> `, {
+                backdrop: true,
+                help: 'worklist/activity/activity-model-item-list',
+                size: 'large',
+                title: i18next.t('title.activity model item list')
+              })
               popup.onclosed = () => {
                 this.grist?.fetch()
               }
@@ -272,7 +269,7 @@ export class ActivityListPage extends connect(store)(localize(i18next)(PageView)
             renderer: function (value, column, record, rowIndex, field) {
               const color = ['', '#98FB98', '#87CEEB', '#FF6B6B', '#8B0000'][value || 0]
               const count = new Array(value > 4 ? 4 : value || 0).fill('')
-              return html`${count.map(() => html`<mwc-icon style="color:${color};">star</mwc-icon>`)}`
+              return html`${count.map(() => html`<md-icon style="color:${color};">star</md-icon>`)}`
             }
           },
           width: 75

package/client/pages/activity/activity-model-item-list.ts

@@ -7,52 +7,47 @@ import { i18next, localize } from '@operato/i18n'
 import { OxPropertyEditor } from '@operato/property-editor'
 import { isMobileDevice } from '@operato/utils'
 
-
 @customElement('activity-model-item-list')
 export class ActivityModelItemList extends localize(i18next)(LitElement) {
   static styles = [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
 
-          background-color: #fff;
-        }
+        background-color: #fff;
+      }
 
-        ox-grist {
-          flex: 1;
-        }
+      ox-grist {
+        flex: 1;
+      }
 
-        .button-container {
-          display: flex;
-          margin-left: auto;
-          padding: var(--padding-default);
-        }
+      .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);
-        }
-      `
-    ]
+      [danger] {
+        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
+      }
+      md-elevated-button {
+        margin-left: var(--margin-default);
+      }
+    `
+  ]
 
-  @property({ type: Object }) gristConfig?:any
+  @property({ type: Object }) gristConfig?: any
   @property({ type: Object }) activity: any
 
   @query('ox-grist') grist?: HTMLElement & { fetch: any; commit: any; deleteSelectedRecords: any; data: any }
 
   render() {
     return html`
-      <ox-grist
-        .mode=${isMobileDevice() ? 'CARD' : 'GRID'}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-      ></ox-grist>
+      <ox-grist .mode=${isMobileDevice() ? 'CARD' : '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>
+        <md-elevated-button raised danger @click=${this._deleteDataItems.bind(this)}>${i18next.t('button.delete')}</md-elevated-button>
+        <md-elevated-button raised @click=${this._updateDataItems.bind(this)}>${i18next.t('button.save')}</md-elevated-button>
       </div>
     `
   }

package/client/pages/activity-approval/activity-approval-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -7,9 +8,11 @@ import { property } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
+import { ButtonContainerStyles } from '@operato/styles'
 
 export class ActivityApprovalImporter extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
@@ -21,16 +24,6 @@ export class ActivityApprovalImporter extends LitElement {
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -60,21 +53,18 @@ export class ActivityApprovalImporter extends LitElement {
     ]
   }
 
-
   render() {
     return html`
       <ox-grist
         .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
         .config=${this.columns}
-        .data=${
-          { 
-            records: this.activityApprovals 
-          }
-        }
+        .data=${{
+          records: this.activityApprovals
+        }}
       ></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>
     `
   }
@@ -94,4 +84,3 @@ export class ActivityApprovalImporter extends LitElement {
     this.dispatchEvent(new CustomEvent('imported'))
   }
 }
-

package/client/pages/activity-approval/activity-approval-list-page.ts

@@ -100,7 +100,7 @@ export class ActivityApprovalListPage extends connect(store)(localize(i18next)(S
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.sortersControl.open({
@@ -108,7 +108,7 @@ export class ActivityApprovalListPage extends connect(store)(localize(i18next)(S
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -116,9 +116,9 @@ export class ActivityApprovalListPage extends connect(store)(localize(i18next)(S
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
         </div>
       </ox-grist>

package/client/pages/activity-instance/activity-instance-list-page.ts

@@ -71,7 +71,7 @@ export class ActivityInstanceListPage extends connect(store)(localize(i18next)(P
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${(e: MouseEvent) => {
                 const target = e.currentTarget as HTMLElement
                 this.sorterControl.open({
@@ -79,7 +79,7 @@ export class ActivityInstanceListPage extends connect(store)(localize(i18next)(P
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -87,9 +87,9 @@ export class ActivityInstanceListPage extends connect(store)(localize(i18next)(P
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
         </div>
       </ox-grist>
@@ -136,7 +136,7 @@ export class ActivityInstanceListPage extends connect(store)(localize(i18next)(P
             renderer: function (value, column, record, rowIndex, field) {
               const color = ['', '#98FB98', '#87CEEB', '#FF6B6B', '#8B0000'][value || 0]
               const count = new Array(value > 4 ? 4 : value || 0).fill('')
-              return html`${count.map(() => html`<mwc-icon style="color:${color};">star</mwc-icon>`)}`
+              return html`${count.map(() => html`<md-icon style="color:${color};">star</md-icon>`)}`
             }
           },
           width: 60