@things-factory/auth-ui 7.0.1-beta.9 → 7.0.1-rc.1

package/client/components/contact-us.ts

@@ -16,10 +16,6 @@ export class ContactUs extends localize(i18next)(LitElement) {
   static get styles() {
     return [
       css`
-        :host {
-          --md-theme-primary: var(--md-sys-color-primary);
-        }
-
         * {
           box-sizing: border-box;
         }

package/client/components/delete-user-popup.ts

@@ -14,6 +14,7 @@ export class DeleteUserPopup extends localize(i18next)(LitElement) {
       :host {
         display: flex;
         flex-direction: column;
+        color: var(--popup-content-color);
         background-color: var(--popup-content-background-color);
         padding: var(--popup-content-padding);
       }
@@ -52,7 +53,7 @@ export class DeleteUserPopup extends localize(i18next)(LitElement) {
       }
 
       button {
-        background-color: var(--status-danger-color, red);
+        background-color: var(--status-danger-color, #d14946);
         margin: 2px 2px 10px 2px;
         height: var(--button-height, 28px);
         color: var(--button-color, #fff);

package/client/components/domain-switch.ts

@@ -15,7 +15,7 @@ export class DomainSwitch extends connect(store)(LitElement) {
       :host {
         display: flex;
         max-width: 100%;
-        background-color: rgba(var(--primary-color-rgb), 0.1);
+        background-color: var(--md-sys-color-primary-container, rgb(215 231 241));
         border-bottom: var(--border-dim-color);
       }
 
@@ -27,21 +27,21 @@ export class DomainSwitch extends connect(store)(LitElement) {
         flex: 1;
         display: flex;
         flex-direction: row;
-        padding: var(--padding-default);
+        padding: var(--padding-narrow);
       }
 
       md-icon {
-        background-color: rgba(var(--primary-color-rgb), 0.8);
+        background-color: var(--md-sys-color-primary, rgb(46 121 190));
         margin-right: var(--margin-narrow);
         padding: 2px;
         border-radius: 50%;
         font-size: var(--fontsize-large);
-        color: var(--md-sys-color-on-primary);
+        color: var(--md-sys-color-on-primary, rgba(255,255,255,.9));
       }
       span,
       select {
         flex: 1;
-        color: var(--md-sys-color-secondary);
+        color: var(--md-sys-color-on-primary-container, rgb(50 66 82));
         font: bold 14px/20px var(--theme-font);
       }
 

package/client/components/partner-role-editor.ts

@@ -30,10 +30,6 @@ class PartnerRoleEditor extends localize(i18next)(LitElement) {
       md-elevated-button {
         margin-right: var(--padding-narrow);
       }
-
-      [danger] {
-        --md-theme-primary: var(--md-danger-button-primary-color);
-      }
     `
   ]
 

package/client/components/profile-component.ts

@@ -86,10 +86,6 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
         margin: var(--change-password-field-margin);
       }
 
-      [danger] {
-        --md-theme-primary: var(--md-danger-button-primary-color);
-      }
-
       footer {
         padding: 20px;
         text-align: center;
@@ -98,6 +94,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
       footer p {
         font-size: 14px;
         margin-bottom: 5px;
+        color: var(--md-sys-color-on-background);
       }
 
       footer a {

package/client/components/role-privilege-editor.ts

@@ -56,9 +56,6 @@ class RolePrivilegeEditor extends localize(i18next)(LitElement) {
         background-color: var(--md-sys-color-surface-variant);
       }
 
-      [danger] {
-        --md-theme-primary: var(--md-danger-button-primary-color);
-      }
       md-outlined-button {
         background-color: var(--md-sys-color-surface-variant);
       }

package/client/components/user-role-editor.ts

@@ -53,7 +53,7 @@ class UserRoleEditor extends connect(store)(LitElement) {
         padding: var(--padding-narrow);
       }
       [detail] {
-        background-color: rgba(var(--primary-color-rgb), 0.05);
+        background-color: var(--md-sys-color-surface);
       }
       [detail] md-icon {
         --md-icon-size: var(--fontsize-default);
@@ -71,10 +71,6 @@ class UserRoleEditor extends connect(store)(LitElement) {
         margin: 5px;
       }
 
-      [danger] {
-        --md-theme-primary: var(--md-danger-button-primary-color);
-      }
-
       md-outlined-button {
         background-color: var(--md-sys-color-surface-variant);
       }
@@ -194,10 +190,14 @@ class UserRoleEditor extends connect(store)(LitElement) {
             `
           : ''}
         ${this.isActivatable(user)
-          ? html`<md-elevated-button danger @click=${() => this.onActivate(user)}>activate</md-elevated-button>`
+          ? html`<md-elevated-button danger @click=${() => this.onActivate(user)}
+              >${String(i18next.t('button.activate'))}</md-elevated-button
+            >`
           : ''}
         ${this.isInactivatable(user)
-          ? html`<md-elevated-button danger @click=${() => this.onInactivate(user)}>inactivate</md-elevated-button>`
+          ? html`<md-elevated-button danger @click=${() => this.onInactivate(user)}
+              >${String(i18next.t('button.deactivate'))}</md-elevated-button
+            >`
           : ''}
       </div>
     `

package/client/entries/auth/activate.ts

@@ -69,10 +69,8 @@ export class AuthActivate extends localize(i18next)(LitElement) {
       }
 
       md-elevated-button {
-        --md-theme-primary: var(--md-sys-color-on-primary);
-        --md-theme-on-primary: var(--md-sys-color-primary);
-        --md-button-horizontal-padding: var(--spacing-medium);
-        --md-button-ink-color: var(--md-sys-color-primary);
+        --md-elevated-button-horizontal-padding: var(--spacing-medium);
+        --md-elevated-button-ink-color: var(--md-sys-color-primary);
       }
 
       contact-us {

package/client/entries/auth/checkin.ts

@@ -53,12 +53,11 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
         cursor: pointer;
       }
       li:hover {
-        background-color: rgba(var(--primary-color-rgb), 0.2);
+        background-color: var(--md-sys-color-primary-container);
       }
       li span {
         display: block;
         font: normal var(--fontsize-default) var(--theme-font);
-        color: var(--secondary-text-color);
       }
       li md-icon {
         float: right;

package/client/entries/auth/result.ts

@@ -70,16 +70,17 @@ export class AuthResult extends localize(i18next)(LitElement) {
         font: bold 14px var(--theme-font);
         color: var(--md-sys-color-primary);
       }
+
       #button-area {
         border-top: 1px dashed rgba(0, 0, 0, 0.1);
         padding-top: 10px;
       }
+
       md-elevated-button {
-        --md-theme-primary: var(--auth-button-background-color);
-        --md-theme-on-primary: var(--md-sys-color-primary);
         --md-button-horizontal-padding: var(--padding-default);
         --md-button-ink-color: var(--md-sys-color-primary);
       }
+
       .lottie-container {
         width: 100%;
         height: 300px;

package/client/entries/oauth2/oauth2-decision-page.ts

@@ -61,10 +61,6 @@ class OAuth2DecisionPage extends LitElement {
       md-elevated-button {
         margin-right: var(--padding-narrow);
       }
-
-      [danger] {
-        --md-theme-primary: var(--md-danger-button-primary-color);
-      }
     `
   ]
 

package/client/pages/app-binding/app-binding.ts

@@ -25,16 +25,19 @@ class AppBinding extends connect(store)(PageView) {
         background-color: var(--md-sys-color-background);
         padding: var(--padding-wide);
       }
+
       h2 {
         margin: var(--title-margin);
         font: var(--title-font);
         color: var(--title-text-color);
       }
+
       [page-description] {
         margin: var(--page-description-margin);
         font: var(--page-description-font);
         color: var(--page-description-color);
       }
+
       [icon] {
         position: absolute;
         top: 10px;
@@ -42,68 +45,77 @@ class AppBinding extends connect(store)(PageView) {
 
         max-width: 80px;
       }
+
       [icon] img {
         max-width: 100%;
         max-height: 100%;
       }
 
-      label {
-        font: var(--label-font);
-        color: var(--label-color, var(--md-sys-color-on-surface));
-        text-transform: var(--label-text-transform);
-      }
-      input {
-        border: var(--border-dim-color);
-        border-radius: var(--border-radius);
-        margin: var(--input-margin);
-        padding: var(--input-padding);
-        font: var(--input-font);
-
-        flex: 1;
-      }
-      select:focus,
-      input:focus,
-      button {
-        outline: none;
-      }
-      form {
-        max-width: var(--content-container-max-width);
-      }
       [fieldset-container] {
         background-color: var(--md-sys-color-surface);
         margin: var(--margin-wide) 0 var(--margin-default) 0;
         padding: var(--padding-default);
         border-radius: var(--border-radius);
         box-shadow: var(--box-shadow);
+
+        label {
+          font: var(--label-font);
+          color: var(--label-color, var(--md-sys-color-on-surface));
+          text-transform: var(--label-text-transform);
+        }
+        input {
+          border: var(--border-dim-color);
+          border-radius: var(--border-radius);
+          margin: var(--input-margin);
+          padding: var(--input-padding);
+          font: var(--input-font);
+
+          flex: 1;
+        }
+        select:focus,
+        input:focus,
+        button {
+          outline: none;
+        }
+        form {
+          max-width: var(--content-container-max-width);
+        }
       }
+
       [fieldset-container] fieldset {
         margin: 0;
         margin-top: -15px;
       }
+
       fieldset {
         border-radius: var(--border-radius);
         border: var(--border-dim-color);
         margin: var(--fieldset-margin);
         padding: var(--fieldset-padding);
       }
+
       legend {
         padding: var(--legend-padding);
         font-weight: bold;
         color: var(--legend-color);
       }
+
       [field-2column] {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-gap: 15px;
       }
+
       [field] {
         display: flex;
         flex-direction: column;
         position: relative;
       }
+
       [grid-span] {
         grid-column: span 2;
       }
+
       button,
       [button-in-field] {
         background-color: var(--button-background-color);
@@ -118,10 +130,12 @@ class AppBinding extends connect(store)(PageView) {
         float: right;
         text-decoration: none;
       }
+
       button:hover {
         border: var(--button-activ-border);
         box-shadow: var(--button-active-box-shadow);
       }
+
       [button-in-field] {
         border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
         position: absolute;
@@ -129,10 +143,12 @@ class AppBinding extends connect(store)(PageView) {
         right: 0;
         max-height: 36px;
       }
+
       [input-hint] {
         font: var(--input-hint-font);
         color: var(--input-hint-color);
       }
+
       @media screen and (max-width: 480px) {
         [field] {
           grid-column: span 2;

package/client/pages/app-binding/app-bindings.ts

@@ -1,3 +1,6 @@
+import '@material/web/button/elevated-button.js'
+import '@material/web/button/outlined-button.js'
+
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -16,15 +19,23 @@ class AppBindings extends connect(store)(PageView) {
 
         overflow: auto;
       }
+
       md-elevated-button {
-        margin-right: 0;
+        text-transform: capitalize;
+      }
+
+      md-outlined-button {
         float: right;
+        margin-top: var(--margin-default);
+        text-transform: capitalize;
       }
+
       h2 {
         margin: var(--title-margin);
         font: var(--title-font);
         color: var(--title-text-color);
       }
+
       [page-description] {
         margin: var(--page-description-margin);
         font: var(--page-description-font);
@@ -36,15 +47,19 @@ class AppBindings extends connect(store)(PageView) {
         margin: var(--margin-wide) 0;
         border-collapse: collapse;
       }
+
       tr {
         background-color: var(--tr-background-color);
       }
+
       tr:nth-child(odd) {
         background-color: var(--tr-background-odd-color);
       }
+
       tr:hover {
         background-color: var(--tr-background-hover-color);
       }
+
       th {
         border-top: var(--th-border-top);
         border-bottom: var(--td-border-bottom);
@@ -55,12 +70,14 @@ class AppBindings extends connect(store)(PageView) {
         text-transform: var(--th-text-transform);
         text-align: left;
       }
+
       td {
         padding: var(--td-padding);
         border-bottom: var(--td-border-bottom);
         font: var(--td-font);
         color: var(--td-color);
       }
+
       td a {
         color: var(--md-sys-color-primary);
         font: bold 16px var(--theme-font);
@@ -68,9 +85,11 @@ class AppBindings extends connect(store)(PageView) {
         display: block;
         text-decoration: none;
       }
+
       .text-align-center {
         text-align: center;
       }
+
       .text-align-right {
         text-align: right;
       }

package/client/pages/appliance/appliance.ts

@@ -20,79 +20,131 @@ class Appliance extends connect(store)(PageView) {
         display: flex;
         flex-direction: column;
         overflow-y: auto;
+        position: relative;
 
         background-color: var(--md-sys-color-background);
         padding: var(--padding-wide);
       }
+
       h2 {
         margin: var(--title-margin);
         font: var(--title-font);
         color: var(--title-text-color);
       }
+
       [page-description] {
         margin: var(--page-description-margin);
         font: var(--page-description-font);
         color: var(--page-description-color);
       }
 
-      label {
-        font: var(--label-font);
-        color: var(--label-color, var(--md-sys-color-on-surface));
-        text-transform: var(--label-text-transform);
+      [icon] {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        max-width: 80px;
       }
-      input {
-        border: var(--border-dim-color);
-        border-radius: var(--border-radius);
-        margin: var(--input-margin);
-        padding: var(--input-padding);
-        font: var(--input-font);
 
-        flex: 1;
+      [icon] img {
+        max-width: 100%;
+        max-height: 100%;
       }
-      select:focus,
-      input:focus,
-      button {
-        outline: none;
+
+      [button-primary] {
+        background-color: var(--button-primary-background-color);
+        border: var(--button-border);
+        border-radius: var(--button-border-radius);
+        margin: var(--button-margin);
+        padding: var(--button-primary-padding);
+        color: var(--button-primary-color);
+        font: var(--button-primary-font);
+        text-transform: var(--button-text-transform);
+
+        text-decoration: none;
       }
-      form {
-        max-width: var(--content-container-max-width);
+
+      [button-primary]:hover {
+        background-color: var(--button-primary-active-background-color);
+        box-shadow: var(--button-active-box-shadow);
       }
+
       [fieldset-container] {
         background-color: var(--md-sys-color-surface);
         margin: var(--margin-wide) 0 var(--margin-default) 0;
         padding: var(--padding-default);
         border-radius: var(--border-radius);
         box-shadow: var(--box-shadow);
+
+        label {
+          font: var(--label-font);
+          color: var(--label-color, var(--md-sys-color-on-surface));
+          text-transform: var(--label-text-transform);
+        }
+
+        input,
+        select {
+          border: var(--border-dim-color);
+          border-radius: var(--border-radius);
+          margin: var(--input-margin);
+          padding: var(--input-padding);
+          font: var(--input-font);
+
+          flex: 1;
+        }
+
+        select:focus,
+        input:focus,
+        button {
+          outline: none;
+        }
+
+        form {
+          max-width: var(--content-container-max-width);
+        }
       }
+
       [fieldset-container] fieldset {
         margin: 0;
         margin-top: -15px;
       }
+
       fieldset {
         border-radius: var(--border-radius);
         border: var(--border-dim-color);
         margin: var(--fieldset-margin);
         padding: var(--fieldset-padding);
       }
+
       legend {
         padding: var(--legend-padding);
         font-weight: bold;
         color: var(--legend-color);
       }
+
       [field-2column] {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-gap: 15px;
       }
+
       [field] {
         display: flex;
         flex-direction: column;
         position: relative;
       }
+
       [grid-span] {
         grid-column: span 2;
       }
+
+      button {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-small);
+      }
+
       button,
+      input[type='submit'],
       [button-in-field] {
         background-color: var(--button-background-color);
         border: var(--button-border);
@@ -106,10 +158,13 @@ class Appliance extends connect(store)(PageView) {
         float: right;
         text-decoration: none;
       }
-      button:hover {
+
+      button:hover,
+      input[type='submit']:hover {
         border: var(--button-activ-border);
         box-shadow: var(--button-active-box-shadow);
       }
+
       [button-in-field] {
         border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
         position: absolute;
@@ -117,10 +172,12 @@ class Appliance extends connect(store)(PageView) {
         right: 0;
         max-height: 36px;
       }
+
       [input-hint] {
         font: var(--input-hint-font);
         color: var(--input-hint-color);
       }
+
       @media screen and (max-width: 480px) {
         [field] {
           grid-column: span 2;

package/client/pages/appliance/home.ts

@@ -1,3 +1,6 @@
+import '@material/web/button/elevated-button.js'
+import '@material/web/button/outlined-button.js'
+
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -17,11 +20,22 @@ class Appliances extends connect(store)(PageView) {
         overflow: auto;
       }
 
+      md-elevated-button {
+        text-transform: capitalize;
+      }
+
+      md-outlined-button {
+        float: right;
+        margin-top: var(--margin-default);
+        text-transform: capitalize;
+      }
+
       h2 {
         margin: var(--title-margin);
         font: var(--title-font);
         color: var(--title-text-color);
       }
+
       [page-description] {
         margin: var(--page-description-margin);
         font: var(--page-description-font);
@@ -33,15 +47,19 @@ class Appliances extends connect(store)(PageView) {
         margin: var(--margin-wide) 0;
         border-collapse: collapse;
       }
+
       tr {
         background-color: var(--tr-background-color);
       }
+
       tr:nth-child(odd) {
         background-color: var(--tr-background-odd-color);
       }
+
       tr:hover {
         background-color: var(--tr-background-hover-color);
       }
+
       th {
         border-top: var(--th-border-top);
         border-bottom: var(--td-border-bottom);
@@ -52,22 +70,26 @@ class Appliances extends connect(store)(PageView) {
         text-transform: var(--th-text-transform);
         text-align: left;
       }
+
       td {
         padding: var(--td-padding);
         border-bottom: var(--td-border-bottom);
         font: var(--td-font);
         color: var(--td-color);
       }
+
       td a {
-        color: var(--secondary-text-color);
+        color: var(--md-sys-color-primary);
         font: bold 16px var(--theme-font);
 
         display: block;
         text-decoration: none;
       }
+
       .text-align-center {
         text-align: center;
       }
+
       .text-align-right {
         text-align: right;
       }