@things-factory/operato-wms 7.0.0-alpha.9 → 7.0.0

package/client/pages/order/arrival-notice/duplicate-arrival-notice.js

@@ -9,11 +9,11 @@ import { css, html } from 'lit'
 
 import { getCodeByName } from '@things-factory/code-base'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert, navigate, PageView } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 import { fetchSettingRule } from '../../../fetch-setting-value'
 import { VAS_BATCH_AND_PRODUCT_TYPE, VAS_BATCH_NO_TYPE, VAS_PRODUCT_TYPE } from '../../constants'
@@ -97,11 +97,11 @@ class DuplicateArrivalNotice extends localize(i18next)(PageView) {
         }
         [attachment-wrap] file-uploader {
           flex: 1;
-          margin: 0 var(--margin-wide) 0 var(--margin-narrow);
+          margin: 0 var(--spacing-large) 0 var(--spacing-small);
         }
 
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -125,7 +125,7 @@ class DuplicateArrivalNotice extends localize(i18next)(PageView) {
           margin: var(--grist-title-margin);
           border: var(--grist-title-border);
           font: var(--grist-title-font);
-          color: var(--secondary-color);
+          color: var(--md-sys-color-secondary);
         }
         .grist h2 mwc-icon {
           vertical-align: middle;
@@ -319,15 +319,14 @@ class DuplicateArrivalNotice extends localize(i18next)(PageView) {
           <select name="containerSize" ?hidden="${!this._hasContainer}">
             <option value="">--${i18next.t('label.please_select_a_container_size')}--</option>
             ${(this.containerSizes || []).map(
-              containerSize =>
-                html`
-                  <option
-                    ?selected=${this._containerSize === containerSize.name}
-                    value="${containerSize && containerSize.name}"
-                  >
-                    ${containerSize && containerSize.name}
-                  </option>
-                `
+              containerSize => html`
+                <option
+                  ?selected=${this._containerSize === containerSize.name}
+                  value="${containerSize && containerSize.name}"
+                >
+                  ${containerSize && containerSize.name}
+                </option>
+              `
             )}
           </select>
 

package/client/pages/order/arrival-notice/edit-product-popup.js

@@ -4,11 +4,11 @@ import '../../components/select-product-popup'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
 
 import { ORDER_PRODUCT_STATUS } from '../../constants'
 
@@ -21,7 +21,7 @@ export class EditProductPopup extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow: hidden;
-          background-color: white;
+          background-color: var(--md-sys-color-surface);
         }
         .grist {
           display: flex;

package/client/pages/order/arrival-notice/proceed-edit-product-popup.js

@@ -1,8 +1,8 @@
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, CustomAlert } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 import { ORDER_PRODUCT_STATUS } from '../../constants'
@@ -16,7 +16,7 @@ export class ProceedEditProductPopup extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow: hidden;
-          background-color: white;
+          background-color: var(--md-sys-color-surface);
         }
         .grist-container {
           overflow-y: auto;

package/client/pages/order/arrival-notice/receive-arrival-notice.js

@@ -1,11 +1,11 @@
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 import '@operato/data-grist'
 import { getRenderer } from '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert, navigate, PageView } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import '../../components/attachment-viewer'
@@ -52,7 +52,7 @@ class ReceiveArrivalNotice extends localize(i18next)(PageView) {
           display: flex;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -77,7 +77,7 @@ class ReceiveArrivalNotice extends localize(i18next)(PageView) {
           margin: var(--grist-title-margin);
           border: var(--grist-title-border);
           font: var(--grist-title-font);
-          color: var(--secondary-color);
+          color: var(--md-sys-color-secondary);
         }
 
         .grist h2 mwc-icon {
@@ -109,7 +109,7 @@ class ReceiveArrivalNotice extends localize(i18next)(PageView) {
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;
-          color: var(--primary-color);
+          color: var(--md-sys-color-primary);
           font-size: var(--fontsize-default);
         }
         [attachment-wrap] {
@@ -238,14 +238,13 @@ class ReceiveArrivalNotice extends localize(i18next)(PageView) {
                 <label>${i18next.t('label.attachment')}</label>
                 <ul attachment-wrap>
                   ${(this._attachments || []).map(
-                    attachment =>
-                      html`
-                        <li>
-                          <a href="${location.origin}/attachment/${attachment.path}" download
-                            ><mwc-icon>attach_file</mwc-icon> ${attachment.name}</a
-                          >
-                        </li>
-                      `
+                    attachment => html`
+                      <li>
+                        <a href="${location.origin}/attachment/${attachment.path}" download
+                          ><mwc-icon>attach_file</mwc-icon> ${attachment.name}</a
+                        >
+                      </li>
+                    `
                   )}
                 </ul>
               `

package/client/pages/order/arrival-notice/rejected-arrival-notice.js

@@ -1,10 +1,10 @@
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 import '@operato/data-grist'
 import { getRenderer } from '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, PageView } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import '../../components/attachment-viewer'
@@ -55,7 +55,7 @@ class RejectedArrivalNotice extends localize(i18next)(PageView) {
           flex: 4;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -79,7 +79,7 @@ class RejectedArrivalNotice extends localize(i18next)(PageView) {
           margin: var(--grist-title-margin);
           border: var(--grist-title-border);
           font: var(--grist-title-font);
-          color: var(--secondary-color);
+          color: var(--md-sys-color-secondary);
         }
 
         .grist h2 mwc-icon {
@@ -111,7 +111,7 @@ class RejectedArrivalNotice extends localize(i18next)(PageView) {
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;
-          color: var(--primary-color);
+          color: var(--md-sys-color-primary);
           font-size: var(--fontsize-default);
         }
         [attachment-wrap] {
@@ -236,14 +236,13 @@ class RejectedArrivalNotice extends localize(i18next)(PageView) {
                 <label>${i18next.t('label.attachment')}</label>
                 <ul attachment-wrap>
                   ${(this._attachments || []).map(
-                    attachment =>
-                      html`
-                        <li>
-                          <a href="${location.origin}/attachment/${attachment.path}" download
-                            ><mwc-icon>attach_file</mwc-icon> ${attachment.name}</a
-                          >
-                        </li>
-                      `
+                    attachment => html`
+                      <li>
+                        <a href="${location.origin}/attachment/${attachment.path}" download
+                          ><mwc-icon>attach_file</mwc-icon> ${attachment.name}</a
+                        >
+                      </li>
+                    `
                   )}
                 </ul>
               `

package/client/pages/order/arrival-notice/view-product-changes-popup.js

@@ -1,7 +1,7 @@
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
 import { css, html, LitElement } from 'lit'
 import { ORDER_PRODUCT_STATUS } from '../../constants'
 
@@ -14,7 +14,7 @@ export class ViewProductChangesPopup extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow: hidden;
-          background-color: white;
+          background-color: var(--md-sys-color-surface);
         }
         .grist-container {
           display: flex;

package/client/pages/order/draft-release-good/draft-release-good-detail.js

@@ -8,7 +8,7 @@ import { connect } from 'pwa-helpers/connect-mixin'
 
 import { getCodeByName } from '@things-factory/code-base'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { fetchSettingRule } from '@things-factory/setting-ui'
 import { client, CustomAlert, navigate, PageView, store } from '@things-factory/shell'
@@ -85,7 +85,7 @@ class DraftReleaseGoodDetail extends connect(store)(localize(i18next)(PageView))
         }
         [attachment-wrap] file-uploader {
           flex: 1;
-          margin: 0 var(--margin-wide) 0 var(--margin-narrow);
+          margin: 0 var(--spacing-large) 0 var(--spacing-small);
         }
 
         [attachment-wrap] ul a * {
@@ -99,7 +99,7 @@ class DraftReleaseGoodDetail extends connect(store)(localize(i18next)(PageView))
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;
-          color: var(--primary-color);
+          color: var(--md-sys-color-primary);
           font-size: var(--fontsize-default);
         }
         [attachment-wrap] ul {
@@ -112,7 +112,7 @@ class DraftReleaseGoodDetail extends connect(store)(localize(i18next)(PageView))
         }
 
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -132,7 +132,7 @@ class DraftReleaseGoodDetail extends connect(store)(localize(i18next)(PageView))
           margin: var(--grist-title-margin);
           border: var(--grist-title-border);
           font: var(--grist-title-font);
-          color: var(--secondary-color);
+          color: var(--md-sys-color-secondary);
         }
 
         .grist h2 mwc-icon {
@@ -288,8 +288,8 @@ class DraftReleaseGoodDetail extends connect(store)(localize(i18next)(PageView))
       <form name="draftReleaseOrder" class="multi-column-form" autocomplete="off">
         <fieldset>
           <legend>${i18next.t('title.draft_release_order')} (${this._orderNo || 'NEW'}) [${
-      this._draftOrderData?.status
-    }]</legend>
+            this._draftOrderData?.status
+          }]</legend>
 
           <label>${i18next.t('label.options')}</label>
           <div options-wrap>

package/client/pages/order/draft-release-good/draft-release-good-list.js

@@ -5,10 +5,10 @@ import gql from 'graphql-tag'
 import { css, html } from 'lit'
 
 import { GhostPrint } from '@operato/ghost-print'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, CustomAlert, navigate, PageView } from '@things-factory/shell'
 import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 import { DRAFT_RELEASE_ORDER_STATUS } from '../../../constants'
 

package/client/pages/order/goods-received-note/customer-grn-list.js

@@ -1,9 +1,9 @@
 import '@things-factory/form-ui'
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, navigate, PageView } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { getCodeByName } from '@things-factory/code-base'

package/client/pages/order/goods-received-note/customer-received-note.js

@@ -1,7 +1,7 @@
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, CustomAlert, navigate, PageView } from '@things-factory/shell'
 import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
 import { getPathInfo } from '@things-factory/utils'

package/client/pages/order/goods-received-note/received-note-detail.js

@@ -1,7 +1,7 @@
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, navigate, PageView } from '@things-factory/shell'
 import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
 import { getPathInfo } from '@things-factory/utils'

package/client/pages/order/goods-received-note/received-note-list.js

@@ -5,10 +5,10 @@ import gql from 'graphql-tag'
 import { css, html } from 'lit'
 
 import { getCodeByName } from '@things-factory/code-base'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, navigate, PageView } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
 
 class ReceivedNoteList extends localize(i18next)(PageView) {
   static get styles() {

package/client/pages/order/release-order/b2b/b2b-order-list.js

@@ -7,7 +7,7 @@ import gql from 'graphql-tag'
 import { css, html } from 'lit'
 
 import { getCodeByName } from '@things-factory/code-base'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, navigate, PageView, CustomAlert } from '@things-factory/shell'
 import { openPopup } from '@operato/layout'
 import { ScrollbarStyles, CommonButtonStyles } from '@things-factory/styles'

package/client/pages/order/release-order/b2b/b2b-order-requests.js

@@ -7,11 +7,11 @@ import gql from 'graphql-tag'
 import { css, html } from 'lit'
 
 import { getCodeByName } from '@things-factory/code-base'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { client, navigate, PageView } from '@things-factory/shell'
 import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 class B2bOrderRequests extends localize(i18next)(PageView) {
   static get styles() {

package/client/pages/order/release-order/b2c/b2c-order-requests.js

@@ -10,7 +10,7 @@ import { connect } from 'pwa-helpers/connect-mixin'
 import { GhostPrint } from '@operato/ghost-print'
 import { DirectPrinter } from '@things-factory/barcode-base'
 import { getCodeByName } from '@things-factory/code-base'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert, navigate, PageView, store } from '@things-factory/shell'
 import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'

package/client/pages/order/release-order/batch-generate-single-picking-worksheet-popup.js

@@ -2,11 +2,11 @@ import '@operato/data-grist'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert } from '@things-factory/shell'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { isMobileDevice } from '@things-factory/utils'
+import { i18next, localize } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
 import { css, html, LitElement } from 'lit'
 import gql from 'graphql-tag'
-import { ScrollbarStyles } from '@things-factory/styles'
+import { ScrollbarStyles } from '@operato/styles'
 import { ORDER_STATUS } from '../../constants'
 import '@things-factory/biz-ui'
 
@@ -28,8 +28,8 @@ class BatchGenerateSinglePickingWorksheetPopup extends localize(i18next)(LitElem
           display: flex;
           flex-direction: column;
           overflow: hidden;
-          background-color: white;
-          padding: var(--padding-default);
+          background-color: var(--md-sys-color-surface);
+          padding: var(--spacing-medium);
         }
         search-form {
           overflow: visible;

package/client/pages/order/release-order/batch-picking-popup.js

@@ -2,11 +2,11 @@ import '@operato/data-grist'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert } from '@things-factory/shell'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { isMobileDevice } from '@things-factory/utils'
+import { i18next, localize } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
 import { css, html, LitElement } from 'lit'
 import gql from 'graphql-tag'
-import { ScrollbarStyles } from '@things-factory/styles'
+import { ScrollbarStyles } from '@operato/styles'
 import { ORDER_STATUS, RO_TYPES } from '../../constants'
 import { fetchSettingRule } from '../../../fetch-setting-value'
 import '@things-factory/biz-ui'
@@ -32,7 +32,7 @@ class BatchPickingPopup extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow: hidden;
-          background-color: white;
+          background-color: var(--md-sys-color-surface);
         }
         search-form {
           overflow: visible;

package/client/pages/order/release-order/bulk-print-packing-list.js

@@ -5,10 +5,10 @@ import gql from 'graphql-tag'
 import { css, html } from 'lit'
 
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, PageView } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 class BulkPrintPackingList extends localize(i18next)(PageView) {
   static get properties() {
@@ -42,7 +42,7 @@ class BulkPrintPackingList extends localize(i18next)(PageView) {
           margin: 10px;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: row;
           flex: 1;
@@ -68,7 +68,7 @@ class BulkPrintPackingList extends localize(i18next)(PageView) {
           margin: var(--grist-title-margin);
           border: var(--grist-title-border);
           font: var(--grist-title-font);
-          color: var(--secondary-color);
+          color: var(--md-sys-color-secondary);
         }
 
         .grist h2 mwc-icon {

package/client/pages/order/release-order/create-release-order.js

@@ -12,11 +12,11 @@ import { css, html } from 'lit'
 
 import { getCodeByName } from '@things-factory/code-base'
 import { MultiColumnFormStyles, SingleColumnFormStyles } from '@things-factory/form-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert, navigate, PageView } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 import { fetchLocationSortingRule } from '../../../fetch-location-sorting-rule'
 import { fetchSettingRule } from '../../../fetch-setting-value'
@@ -164,10 +164,10 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
         }
         [attachment-wrap] file-uploader {
           flex: 1;
-          margin: 0 var(--margin-wide) 0 var(--margin-narrow);
+          margin: 0 var(--spacing-large) 0 var(--spacing-small);
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -187,7 +187,7 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
           margin: var(--grist-title-margin);
           border: var(--grist-title-border);
           font: var(--grist-title-font);
-          color: var(--secondary-color);
+          color: var(--md-sys-color-secondary);
         }
 
         .grist h2 mwc-icon {
@@ -202,7 +202,7 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
         }
 
         .summary {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           overflow-y: auto;
@@ -646,10 +646,9 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
           <select name="containerSize" required>
             <option value="">--${i18next.t('label.please_select_a_container_size')}--</option>
             ${(this.containerSizes || []).map(
-              containerSize =>
-                html`
-                  <option value="${containerSize && containerSize.name}">${containerSize && containerSize.name}</option>
-                `
+              containerSize => html`
+                <option value="${containerSize && containerSize.name}">${containerSize && containerSize.name}</option>
+              `
             )}
           </select>
 
@@ -779,8 +778,8 @@ class CreateReleaseOrder extends localize(i18next)(PageView) {
         <div class="grist">
           <h2>
             <mwc-icon>list_alt</mwc-icon>${i18next.t('title.release_product_list')}${` [${i18next.t(
-      PICKING_STANDARD[this._pickingStd].name
-    )}]`}
+              PICKING_STANDARD[this._pickingStd].name
+            )}]`}
           </h2>
 
           <ox-grist

package/client/pages/order/release-order/receive-release-order-request.js

@@ -9,11 +9,11 @@ import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 import { getRenderer } from '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert, navigate, PageView, store } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 import {
   ORDER_STATUS,
@@ -60,7 +60,7 @@ class ReceiveReleaseOrderRequest extends connect(store)(localize(i18next)(PageVi
           overflow-y: auto;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -85,7 +85,7 @@ class ReceiveReleaseOrderRequest extends connect(store)(localize(i18next)(PageVi
           margin: var(--grist-title-margin);
           border: var(--grist-title-border);
           font: var(--grist-title-font);
-          color: var(--secondary-color);
+          color: var(--md-sys-color-secondary);
         }
 
         .grist h2 mwc-icon {
@@ -117,7 +117,7 @@ class ReceiveReleaseOrderRequest extends connect(store)(localize(i18next)(PageVi
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;
-          color: var(--primary-color);
+          color: var(--md-sys-color-primary);
           font-size: var(--fontsize-default);
         }
         [attachment-wrap] {
@@ -283,14 +283,13 @@ class ReceiveReleaseOrderRequest extends connect(store)(localize(i18next)(PageVi
                 <label>${i18next.t('label.attachment')}</label>
                 <ul attachment-wrap>
                   ${(this._attachments || []).map(
-                    attachment =>
-                      html`
-                        <li>
-                          <a href="${location.origin}/attachment/${attachment.path}" download
-                            ><mwc-icon>attach_file</mwc-icon> ${attachment.name}</a
-                          >
-                        </li>
-                      `
+                    attachment => html`
+                      <li>
+                        <a href="${location.origin}/attachment/${attachment.path}" download
+                          ><mwc-icon>attach_file</mwc-icon> ${attachment.name}</a
+                        >
+                      </li>
+                    `
                   )}
                 </ul>
               `