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

package/client/pages/manifest/create-loading-manifest.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, navigate, PageView, CustomAlert } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 import { ORDER_STATUS } from '../constants'
 
 class CreateLoadingManifest extends localize(i18next)(PageView) {
@@ -28,7 +28,7 @@ class CreateLoadingManifest extends localize(i18next)(PageView) {
           min-height: 50vh;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -48,7 +48,7 @@ class CreateLoadingManifest 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/manifest/dispatcher-verification-popup.js

@@ -3,7 +3,7 @@ import '@operato/data-grist'
 import { css, html, LitElement } from 'lit'
 
 import { SingleColumnFormStyles } from '@things-factory/form-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 
 class DispatcherVerificationPopup extends localize(i18next)(LitElement) {
   static get styles() {
@@ -15,7 +15,7 @@ class DispatcherVerificationPopup extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow-x: overlay;
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
         }
         .button-container {
           padding: var(--button-container-padding);

package/client/pages/manifest/loading-manifest-detail.js

@@ -7,11 +7,11 @@ import { css, html } from 'lit'
 
 import { GhostPrint } from '@operato/ghost-print'
 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, navigate, PageView, CustomAlert } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 import { MANIFEST_STATUS, ORDER_STATUS } from '../constants'
 
@@ -32,7 +32,7 @@ class LoadingManifestDetail extends localize(i18next)(PageView) {
           min-height: 50vh;
         }
         .grist {
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -52,7 +52,7 @@ class LoadingManifestDetail 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/manifest/loading-manifest-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 LoadingManifestList extends localize(i18next)(PageView) {
   static get styles() {

package/client/pages/master/generate-location-list.js

@@ -2,9 +2,9 @@ import { getCodeByName } from '@things-factory/code-base'
 import '@things-factory/form-ui'
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { isMobileDevice } from '@things-factory/utils'
-import { ScrollbarStyles } from '@things-factory/styles'
+import { i18next, localize } from '@operato/i18n'
+import { isMobileDevice } from '@operato/utils'
+import { ScrollbarStyles } from '@operato/styles'
 import { css, html, LitElement } from 'lit'
 
 export class GenerateLocationList extends localize(i18next)(LitElement) {
@@ -46,7 +46,7 @@ export class GenerateLocationList extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow-x: overlay;
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
         }
         h2 {
           margin: var(--subtitle-margin);
@@ -80,7 +80,7 @@ export class GenerateLocationList extends localize(i18next)(LitElement) {
           margin: var(--button-container-button-margin);
 
           padding: var(--button-padding);
-          color: var(--theme-white-color);
+          color: var(--md-sys-color-on-primary);
           font: var(--button-font);
           text-transform: var(--button-text-transform);
         }
@@ -102,12 +102,11 @@ export class GenerateLocationList extends localize(i18next)(LitElement) {
             <select name="locationFormat" @change="${e => this._validateForm(e.currentTarget.value)}">
               <option value="">-- ${i18next.t('text.select_location_format')} --</option>
               ${(this._formatsFromCode || []).map(
-                format =>
-                  html`
-                    <option value="${format && format.name}">
-                      ${format && format.name} ${format && format.description ? ` ${format && format.description}` : ''}
-                    </option>
-                  `
+                format => html`
+                  <option value="${format && format.name}">
+                    ${format && format.name} ${format && format.description ? ` ${format && format.description}` : ''}
+                  </option>
+                `
               )}
             </select>
 

package/client/pages/master/location-list.js

@@ -9,11 +9,11 @@ import { css, html } from 'lit'
 import { connect } from 'pwa-helpers/connect-mixin'
 
 import { DirectPrinter } from '@things-factory/barcode-base'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert, PageView, store } from '@things-factory/shell'
 import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 import { LOCATION_LABEL_SETTING_KEY, LOCATION_STATUS, LOCATION_TYPE } from '../constants'
 

package/client/pages/master/pallet-list.js

@@ -6,8 +6,8 @@ import { connect } from 'pwa-helpers/connect-mixin'
 import { css, html } from 'lit'
 import { getCodeByName } from '@things-factory/code-base'
 import { ScrollbarStyles, CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { isMobileDevice } from '@operato/utils'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { REUSABLE_PALLET_LABEL_SETTING_KEY } from '../constants'
 import { DirectPrinter } from '@things-factory/barcode-base'

package/client/pages/master/print-location-label.js

@@ -5,10 +5,10 @@ import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
 
 import { MultiColumnFormStyles } from '@things-factory/form-ui'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { client } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
+import { ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
 
 export class PrintLocationLabel extends localize(i18next)(LitElement) {
   static get properties() {
@@ -36,7 +36,7 @@ export class PrintLocationLabel extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow-x: overlay;
-          background-color: var(--main-section-background-color);
+          background-color: var(--md-sys-color-background);
         }
         h2 {
           margin: var(--subtitle-margin);
@@ -73,7 +73,7 @@ export class PrintLocationLabel extends localize(i18next)(LitElement) {
           margin: var(--button-container-button-margin);
 
           padding: var(--button-padding);
-          color: var(--theme-white-color);
+          color: var(--md-sys-color-on-primary);
           font: var(--button-font);
           text-transform: var(--button-text-transform);
         }
@@ -237,8 +237,8 @@ export class PrintLocationLabel extends localize(i18next)(LitElement) {
             location.type === 'BUFFER'
               ? ''
               : this._fullLocationFormat // check if full location format is true
-              ? `${location.zone}-${location.row}-${location.column}-${location.shelf}`
-              : `${location.zone}-${location.row}-${location.column}`
+                ? `${location.zone}-${location.row}-${location.column}-${location.shelf}`
+                : `${location.zone}-${location.row}-${location.column}`
         }
       })
     }

package/client/pages/master/product/product-detail-bizplace-setting-popup.js

@@ -4,9 +4,9 @@ import '@operato/data-grist'
 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 { client, CustomAlert, gqlContext } from '@things-factory/shell'
-import { ScrollbarStyles } from '@things-factory/styles'
+import { ScrollbarStyles } from '@operato/styles'
 import { flattenObject, isMobileDevice } from '@things-factory/utils'
 
 export class ProductDetailBizplaceSettingPopup extends localize(i18next)(LitElement) {
@@ -18,7 +18,7 @@ export class ProductDetailBizplaceSettingPopup extends localize(i18next)(LitElem
           display: flex;
           flex-direction: column;
           overflow: hidden;
-          background-color: white;
+          background-color: var(--md-sys-color-surface);
 
           --grid-record-emphasized-background-color: #ffdbdb;
           --grid-record-emphasized-color: #703f3f;

package/client/pages/master/product/product-details-popup.js

@@ -8,10 +8,10 @@ import isNaN from 'lodash-es/isNaN'
 import isNumber from 'lodash-es/isNumber'
 
 import { getCodeByName } from '@things-factory/code-base'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { client, CustomAlert, gqlContext } 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'
 
 export class ProductDetailsPopup extends localize(i18next)(LitElement) {
   static get styles() {
@@ -22,7 +22,7 @@ export class ProductDetailsPopup extends localize(i18next)(LitElement) {
           display: flex;
           flex-direction: column;
           overflow: hidden;
-          background-color: white;
+          background-color: var(--md-sys-color-surface);
 
           --grid-record-emphasized-background-color: #ffdbdb;
           --grid-record-emphasized-color: #703f3f;

package/client/pages/master/product/product-list.js

@@ -10,12 +10,12 @@ import isNaN from 'lodash-es/isNaN'
 import isNumber from 'lodash-es/isNumber'
 
 import { getCodeByName } from '@things-factory/code-base'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import { openImportPopUp } from '@things-factory/import-ui'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert, gqlContext, PageView } from '@things-factory/shell'
 import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 class ProductList extends localize(i18next)(PageView) {
   static get properties() {

package/client/pages/master/tote-list.js

@@ -7,8 +7,8 @@ import { connect } from 'pwa-helpers/connect-mixin'
 import { css, html } from 'lit'
 import { getCodeByName } from '@things-factory/code-base'
 import { ScrollbarStyles, CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { isMobileDevice } from '@operato/utils'
+import { i18next, localize } from '@operato/i18n'
 import { openPopup } from '@operato/layout'
 import { TOTE_LABEL_SETTING_KEY } from '../constants'
 import { DirectPrinter } from '@things-factory/barcode-base'

package/client/pages/master/transport-driver.js

@@ -5,11 +5,11 @@ import '@things-factory/import-ui'
 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 { openPopup } from '@operato/layout'
 import { client, CustomAlert, PageView } from '@things-factory/shell'
 import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 class TransportDriver extends localize(i18next)(PageView) {
   static get properties() {

package/client/pages/master/transport-vehicle.js

@@ -5,11 +5,11 @@ import '@things-factory/import-ui'
 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 { openPopup } from '@operato/layout'
 import { client, CustomAlert, PageView } from '@things-factory/shell'
 import { CommonButtonStyles, ScrollbarStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 class TransportVehicle extends localize(i18next)(PageView) {
   static get styles() {

package/client/pages/master/warehouse-list.js

@@ -1,12 +1,12 @@
 import { getCodeByName } from '@things-factory/code-base'
 import '@things-factory/form-ui'
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import '@things-factory/import-ui'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert, navigate, PageView } from '@things-factory/shell'
 import { ScrollbarStyles, 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'
 

package/client/pages/master/worker-list.js

@@ -1,12 +1,12 @@
 import { getCodeByName } from '@things-factory/code-base'
 import '@things-factory/form-ui'
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
+import { i18next, localize } from '@operato/i18n'
 import '@things-factory/import-ui'
 import { openPopup } from '@operato/layout'
 import { client, CustomAlert, PageView } from '@things-factory/shell'
 import { ScrollbarStyles, 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'
 

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

@@ -14,11 +14,11 @@ import { css, html } from 'lit'
 import { getCodeByName } from '@things-factory/code-base'
 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 } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 import { BufferLocationSelector } from '@things-factory/warehouse-ui'
 import { fetchSettingRule } from '../../../fetch-setting-value'
 
@@ -84,7 +84,7 @@ class ArrivalNoticeDetail 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;
@@ -109,7 +109,7 @@ class ArrivalNoticeDetail 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;
@@ -152,7 +152,7 @@ class ArrivalNoticeDetail 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] {
@@ -491,12 +491,9 @@ class ArrivalNoticeDetail extends localize(i18next)(PageView) {
             <select name="containerSize" ?hidden="${!this._hasContainer}" ?disabled=${this.determineStatus()}>
               <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>
 
@@ -513,14 +510,13 @@ class ArrivalNoticeDetail 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/arrival-notice-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 ArrivalNoticeList extends localize(i18next)(PageView) {
   static get styles() {

package/client/pages/order/arrival-notice/arrival-notice-requests.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'
 
 import { ORDER_STATUS } from '../../constants'
 

package/client/pages/order/arrival-notice/assign-buffer-location.js

@@ -9,11 +9,11 @@ import { css, html } from 'lit'
 
 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 } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
-import { isMobileDevice } from '@things-factory/utils'
+import { isMobileDevice } from '@operato/utils'
 
 import {
   ORDER_STATUS,
@@ -55,7 +55,7 @@ class AssignBufferLocation 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;
@@ -80,7 +80,7 @@ class AssignBufferLocation 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 {
@@ -113,7 +113,7 @@ class AssignBufferLocation 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] {
@@ -229,14 +229,13 @@ class AssignBufferLocation 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/check-arrived-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, 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'
@@ -50,7 +50,7 @@ class CheckArrivedNotice 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;
@@ -75,7 +75,7 @@ class CheckArrivedNotice 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 {
@@ -108,7 +108,7 @@ class CheckArrivedNotice 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] {
@@ -225,14 +225,13 @@ class CheckArrivedNotice 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/create-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'
@@ -90,10 +90,10 @@ class CreateArrivalNotice 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;
@@ -117,7 +117,7 @@ class CreateArrivalNotice 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;
@@ -314,10 +314,9 @@ class CreateArrivalNotice 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 value="${containerSize && containerSize.name}">${containerSize && containerSize.name}</option>
-                `
+              containerSize => html`
+                <option value="${containerSize && containerSize.name}">${containerSize && containerSize.name}</option>
+              `
             )}
           </select>