@things-factory/integration-pos 7.0.1-alpha.10 → 7.0.1-alpha.100

package/client/pages/create-pos-store-popup.js

@@ -1,8 +1,8 @@
 import { SingleColumnFormStyles } from '@things-factory/form-ui'
 import { getCodeByName } from '@things-factory/code-base'
 import '@operato/data-grist'
-import { i18next, localize } from '@things-factory/i18n-base'
-import { client } from '@things-factory/shell'
+import { i18next, localize } from '@operato/i18n'
+import { client } from '@operato/graphql'
 import { gqlBuilder } from '@things-factory/utils'
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
@@ -24,7 +24,7 @@ class CreatePosStorePopup 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);
@@ -49,8 +49,9 @@ class CreatePosStorePopup extends localize(i18next)(LitElement) {
           <select name="platform">
             <option value="">--${i18next.t('label.please_select_a_platform')}--</option>
             ${(this._platforms || []).map(
-              platform =>
-                html` <option value="${platform && platform.name}">${platform && platform.description}</option> `
+              platform => html`
+                <option value="${platform && platform.name}">${platform && platform.description}</option>
+              `
             )}
           </select>
 

package/client/pages/integration-pos.js

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

package/client/pages/pos-xilnex.js

@@ -19,7 +19,7 @@ class PosXilnex extends connect(store)(PageView) {
     return css`
       :host {
         padding: var(--padding-wide, 15px);
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
       }
       [overview] {
         background-color: var(--theme-white-color, #fff);

package/client/themes/app-theme.css

@@ -6,7 +6,6 @@ body {
   --focus-color: var(--theme-white-color);
   --primary-background-color: var(--secondary-color);
   --secondary-background-color: #283644;
-  --main-section-background-color: #f4f7fb;
   --theme-white-color: #fff;
   --theme-black-color: rgba(0, 0, 0, 0.9);
 
@@ -75,6 +74,16 @@ body {
   --mdc-theme-on-secondary: white;
   --mdc-theme-secondary: var(--primary-color);
 
+  --md-theme-on-primary: var(--theme-white-color);
+  --md-theme-primary: var(--secondary-text-color);
+  --md-theme-on-secondary: var(--theme-white-color);
+  --md-theme-secondary: var(--primary-color);
+  --md-button-outline-color: var(--primary-color);
+  --md-danger-button-primary-color: var(--status-danger-color);
+  --md-danger-button-outline-color: var(--status-danger-color);
+  --md-button-outline-width: 1px;
+  --md-button-horizontal-padding: 16px;
+
   /* button style */
   --button-background-color: #fafbfc;
   --button-border: var(--border-dark-color);
@@ -82,10 +91,13 @@ body {
   --button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;
   --button-padding: var(--margin-default);
   --button-color: var(--secondary-color);
-  --button-font: normal 15px var(--theme-font);
+  --button-font: 600 var(--fontsize-default) var(--theme-font);
   --button-text-transform: capitalize;
   --button-active-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
   --button-activ-border: 1px solid var(--primary-color);
+  --button-activ-background-color: var(--primary-color);
+  --button-activ-color: var(--theme-white-color);
+  --iconbtn-padding: var(--padding-narrow);
 
   --button-primary-background-color: var(--primary-color);
   --button-primary-active-background-color: var(--status-success-color);
@@ -106,7 +118,7 @@ body {
   --label-color: var(--secondary-color);
   --label-text-transform: capitalize;
   --input-margin: var(--margin-narrow) 0;
-  --input-padding: var(--padding-default);
+  --input-padding: 6px 2px;
   --input-font: normal var(--fontsize-default) var(--theme-font);
   --input-hint-font: normal var(--fontsize-small) var(--theme-font);
   --input-hint-color: #666;

package/client/themes/layout-theme.css

@@ -35,7 +35,7 @@ body {
   --button-container-button-height: initial;
   --button-container-button-border: var(--button-border);
 
-  --popup-content-background-color: var(--main-section-background-color);
+  --popup-content-background-color: var(--md-sys-color-background);
   --popup-content-padding: 10px 20px;
 
   /* components - floating overlay style */
@@ -54,7 +54,7 @@ body {
 
   /* components - resize splitter style */
   --splitter-background-color: rgba(0, 0, 0, 0.1);
-  --splitter-hover-background-color: var(--primary-color);
+  --splitter-hover-background-color: rgba(0, 0, 0, 0.1);
 }
 
 @media only screen and (max-width: 460px) {