@yoobic/yobi 8.3.1-2 → 8.3.1-20

package/dist/collection/components/form-creator/form-creator-live-preview/form-creator-live-preview.css

@@ -202,16 +202,20 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 :host {
-  display: block;
+  display: flex;
+  flex-direction: column;
   height: 100%;
 }
 :host h1, :host p {
   margin: 0;
 }
-:host yoo-navbar {
+:host yoo-navbar.device-preview, :host yoo-navbar.top-navbar {
   --bottom-shadow: 0;
 }
-:host yoo-navbar:not(.device-preview) {
+:host yoo-navbar.no-heading {
+  --top-container-min-height: auto;
+}
+:host yoo-navbar.top-navbar {
   --top-container-padding: 0;
   --center-padding: 0;
 }
@@ -219,12 +223,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100%;
   overflow: hidden;
   background: var(--light, #ffffff);
 }
 :host .outer-container.not-closable {
-  height: 100%;
+  flex: 1;
   border-top-left-radius: var(--border-radius-04, 0.25rem);
   border-top-right-radius: var(--border-radius-04, 0.25rem);
 }
@@ -370,12 +373,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   cursor: pointer;
 }
 
+:host(.panel) > .outer-container {
+  padding-top: var(--spacing-16, 1rem);
+  padding-bottom: var(--spacing-16, 1rem);
+}
 :host(.panel) .outer-container {
   display: flex;
+  flex: 1;
   flex-direction: column;
   justify-content: flex-start;
   width: 21.875rem;
-  padding: 0 var(--spacing-24, 1.5rem);
+  padding-right: var(--spacing-24, 1.5rem);
+  padding-left: var(--spacing-24, 1.5rem);
   background: var(--light, #ffffff);
   border-left: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
   transition: 0.3s;

package/dist/collection/components/form-creator/form-creator-live-preview/form-creator-live-preview.js

@@ -41,13 +41,13 @@ export class YooFormCreatorLivePreviewComponent {
   renderHeader() {
     var _a;
     return [
-      h("yoo-header", null,
-        h("yoo-navbar", null,
+      h("yoo-header", { class: "secondary" },
+        h("yoo-navbar", { class: { 'top-navbar': true, 'no-heading': this.hideHeading } },
           h("div", { class: { 'outer-container': true, 'not-closable': !this.closable } },
             !this.hideHeading && h("div", { class: "heading" },
               this.mode === 'fullscreen' && this.renderFullscreenHeader(),
               this.mode === 'panel' && this.renderPanelHeader()),
-            ((_a = this.availableLanguages) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.renderLanguageSelector(),
+            ((_a = this.availableLanguages) === null || _a === void 0 ? void 0 : _a.length) > 0 && !this.hidden && this.renderLanguageSelector(),
             this.showDevices && this.renderSubheader())))
     ];
   }
@@ -107,7 +107,7 @@ export class YooFormCreatorLivePreviewComponent {
   }
   render() {
     return (h(Host, { class: { panel: this.mode === 'panel', ...getAppContext(this.host) } },
-      !this.hideHeading && this.renderHeader(),
+      this.renderHeader(),
       h("div", { class: { 'outer-container': true, 'not-closable': !this.closable } },
         this.renderContent(),
         !!this.logo && (h("div", { class: "image-container" },

package/dist/collection/components/form-creator/form-creator-overlay/form-creator-overlay.css

@@ -215,6 +215,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .overlay .overlay-background {
   z-index: -1;
+  margin-top: -1px;
+  margin-left: -2px;
   background: var(--dark, #000000);
   opacity: 0.8;
   position: absolute;
@@ -257,7 +259,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   right: 0;
   bottom: auto;
   left: 0;
-  height: 3.0625rem;
+  height: 3rem;
+  margin-left: 25.05rem;
   background: var(--dark, #000000);
   opacity: 0.8;
 }

package/dist/collection/feature-communicate/chat/card-chat/card-chat.css

@@ -210,7 +210,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-alt-40, rgba(208, 208, 208, 0.4));
 }
 :host #content {
-  width: 100%;
+  width: calc(100% - var(--spacing-64, 4rem));
+  overflow: hidden;
 }
 :host #content #heading {
   display: flex;
@@ -236,6 +237,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   gap: var(--spacing-04, 0.25rem);
   align-items: center;
   width: 100%;
+  overflow: hidden;
 }
 :host #content #message yoo-truncated-line {
   width: 100%;

package/dist/collection/feature-communicate/chat/chat/chat.css

@@ -350,7 +350,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: var(--spacing-32, 2rem);
   height: var(--spacing-32, 2rem);
   padding-right: var(--spacing-16, 1rem);
-  --stroke-width-circle: var(--spacing-04, 0.25rem);
+  --stroke-width-circle: 6;
 }
 :host .heading-container {
   width: calc(100% - var(--logo-05, 3rem));

package/dist/collection/feature-learn/learning/lesson-detail-card/lesson-detail-card.css

@@ -283,6 +283,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --svg-width: 1.8rem;
   --svg-height: 1.8rem;
   --progress-bar-color: var(--app-color, #5a30f4);
+  --stroke-width-circle: 2;
   padding: 0 var(--spacing-08, 0.5rem);
 }
 :host .card-container .content-container .footer .time-indicator .time-text {

package/dist/collection/feature-learn/learning/lesson-question-result/lesson-question-result.css

@@ -330,10 +330,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-top: calc(var(--safe-area-inset-top) + var(--spacing-32, 2rem));
 }
 :host .answers {
-  width: 100%;
-  padding-bottom: var(--spacing-16, 1rem);
+  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
 }
 :host .answers .title {
-  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
+  padding-bottom: var(--spacing-08, 0.5rem);
   font-size: var(--font-size-24, 1.5rem);
 }

package/dist/collection/feature-operate/mission/announcement-heading/announcement-heading.css

@@ -226,22 +226,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --line-height: initial;
 }
 :host .outer-container .progress {
-  display: flex;
-  justify-content: space-between;
-}
-:host .outer-container .progress .quick-task-progress {
-  display: flex;
+  display: grid;
+  grid-template-columns: var(--spacing-16, 1rem) auto;
   align-items: center;
   max-width: 12rem;
 }
-:host .outer-container .progress .quick-task-progress yoo-progress-bar {
-  --svg-width: 1rem;
+:host .outer-container .progress yoo-progress-bar {
   --trail-bar-color: var(--app-color-20, rgba(90, 48, 244, 0.2));
 }
-:host .outer-container .progress .quick-task-progress yoo-truncate {
+:host .outer-container .progress yoo-truncate {
   margin: 0 var(--spacing-08, 0.5rem);
 }
-:host .outer-container .progress .quick-task-progress yoo-truncate.app-color {
+:host .outer-container .progress yoo-truncate.app-color {
   color: var(--app-color, #5a30f4);
 }
 :host .outer-container .tags yoo-tag {
@@ -250,22 +246,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .outer-container .progress-separator {
   margin-bottom: var(--spacing-08, 0.5rem);
-  border-bottom: 1px solid var(--announcement-color);
-}
-
-:host(.campaign-photos-mission-details) .outer-container {
-  color: #fff;
-  background-color: transparent;
-}
-:host(.campaign-photos-mission-details) .outer-container .progress .quick-task-progress yoo-progress-bar {
-  --trail-bar-color: var(--light-40, rgba(255, 255, 255, 0.4));
-  --progress-bar-color: var(--light, #ffffff);
-}
-:host(.campaign-photos-mission-details) .outer-container .progress .quick-task-progress yoo-truncate {
-  color: var(--light, #ffffff);
-}
-:host(.campaign-photos-mission-details) .outer-container .progress-separator {
-  border-bottom: var(--border-width-01, 0.0625rem) solid var(--announcement-background-color);
+  border-bottom: var(--border-width-01, 0.0625rem) solid var(--announcement-color);
 }
 
 :host(.feed) {
@@ -308,4 +289,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   color: var(--light, #ffffff);
   font-size: var(--font-size-16, 1rem);
   background-color: var(--announcement-color);
+}
+
+:host([is-preview]) .outer-container .progress .quick-task-progress yoo-progress-bar {
+  --svg-width: 1.5rem;
 }

package/dist/collection/feature-operate/mission/announcement-heading/announcement-heading.js

@@ -71,10 +71,9 @@ export class YooAnnouncementHeadingComponent {
     const renderProgress = ((_b = (_a = this.announcement.todo) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.length) > 0;
     if ((announcementProgress === null || announcementProgress === void 0 ? void 0 : announcementProgress.value) >= 0 && renderProgress) {
       return h("div", { class: "progress" },
-        h("div", { class: "quick-task-progress" },
-          h("yoo-progress-bar", { class: "app-color", shape: "circle", hideProgressValue: true, value: announcementProgress.value, metric: announcementProgress.unit, maxValue: announcementProgress.max }),
-          h("yoo-truncate", { class: "app-color", style: { cssText: '--max-lines: 1' } },
-            h("span", null, translate('ACTIONSCOMPLETED', { smart_count: announcementProgress.value, total: announcementProgress.max })))));
+        h("yoo-progress-bar", { class: "app-color", shape: "circle", hideProgressValue: true, value: announcementProgress.value, metric: announcementProgress.unit, maxValue: announcementProgress.max }),
+        h("yoo-truncate", { class: "app-color", style: { cssText: '--max-lines: 1' } },
+          h("span", null, translate('ACTIONSCOMPLETED', { smart_count: announcementProgress.value, total: announcementProgress.max }))));
     }
   }
   renderDueDate(dueDate) {
@@ -176,7 +175,7 @@ export class YooAnnouncementHeadingComponent {
         "text": ""
       },
       "attribute": "is-preview",
-      "reflect": false
+      "reflect": true
     },
     "viewAllHandler": {
       "type": "unknown",

package/dist/collection/feature-operate/mission/card-inbox/card-inbox.css

@@ -253,8 +253,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .content yoo-progress-bar {
   --font-size-16: var(--font-size-12, 0.75rem);
   --progress-bar-color: var(--app-color, #5a30f4);
-  --svg-width: 1rem;
-  --stroke-width-circle: 2;
+  --svg-width: var(--spacing-16, 1rem);
   margin: 0;
 }
 :host .outer-container .content .tags {

package/dist/collection/feature-operate/mission/healthscore/healthscore.css

@@ -319,7 +319,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: grid;
   grid-template-areas: "header header" "overview cards";
   grid-template-rows: auto 1fr;
-  grid-template-columns: calc(40% - var(--spacing-08)) 1fr;
+  grid-template-columns: calc(40% - var(--spacing-08, 0.5rem)) 1fr;
   align-items: center;
   background-color: var(--light, #ffffff);
 }
@@ -358,12 +358,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host([display-mode=large]) .overview {
   position: relative;
-  display: inline-grid;
-  grid-template-columns: auto 1fr auto;
   align-items: baseline;
-  width: 100%;
+  width: calc(100% - var(--spacing-16, 1rem));
+  margin: 0 auto;
   text-align: center;
 }
+:host([display-mode=large]) .overview.with-indicators {
+  display: inline-grid;
+  grid-template-columns: auto 1fr auto;
+}
+:host([display-mode=large]) .overview:not(.with-indicators) yoo-progress-bar {
+  max-width: 85%;
+}
 :host([display-mode=large]) .overview .indicator {
   min-width: 2rem;
   padding: var(--spacing-08, 0.5rem);
@@ -382,7 +388,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host([display-mode=large]) .overview yoo-progress-bar {
   --stroke-width-circle: 6;
-  --svg-width: calc(100% - var(--spacing-04));
   --progress-value-font-size: var(--font-size-54, 3.375rem);
 }
 :host([display-mode=large]) .overview yoo-progress-bar[metric=points].show-bar-points {
@@ -390,16 +395,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --trail-bar-display: block;
 }
 :host([display-mode=large]) .overview .sub-value {
-  bottom: var(--spacing-04, 0.25rem);
+  bottom: 0;
+  transform: translateY(50%);
 }
 :host([display-mode=large]) .subtitle {
+  margin: var(--spacing-16, 1rem) 0;
   color: var(--stable, #adadad);
   font-size: var(--font-size-16, 1rem);
   text-align: center;
 }
 :host([display-mode=large]) yoo-numbers-display {
   display: block;
-  width: calc(100% - var(--spacing-16));
+  width: calc(100% - var(--spacing-16, 1rem));
   margin: var(--spacing-16, 1rem);
 }
 :host([display-mode=large]) yoo-button {

package/dist/collection/feature-operate/mission/healthscore/healthscore.js

@@ -54,20 +54,21 @@ export class YooHealthscoreComponent {
     const subValue = (flipScoreDisplay ? [scoreDisplay, extraScore].reverse() : [scoreDisplay, extraScore]).join(' ');
     return (h("yoo-progress-bar", { shape: progressShape, class: { 'show-bar-points': hasMaxPoints }, animated: this.animated, value: globalScore, metric: globalScoreUnit, horizontalAlign: "center", allowNonAvailableValue: true, maxValue: globalMaxScore, numberDecimalAfterComaProgressValue: numberDecimalAfterComa, progressAnimationDuration: progressAnimationDelay }, isFinite(subScore) && h("span", { class: "sub-value" }, subValue)));
   }
-  renderIndicator(hasChanges, showIndicator, type) {
+  renderIndicator(hasChanges, type) {
     const isHigh = type === 'HIGH';
     const getIndicatorStyle = (color) => ({ 'change-indicator': true, [color]: hasChanges, 'dark': !hasChanges });
-    return h("section", { class: "indicator" }, showIndicator && h("span", { class: getIndicatorStyle(type === 'HIGH' ? 'success' : 'danger') }, hasChanges ? translate(`YOOBIC${type}`) : isHigh ? this.overviewProgressConfig.globalMaxScore : 0));
+    return h("section", { class: "indicator" },
+      h("span", { class: getIndicatorStyle(type === 'HIGH' ? 'success' : 'danger') }, hasChanges ? translate(`YOOBIC${type}`) : isHigh ? this.overviewProgressConfig.globalMaxScore : 0));
   }
   renderOverview() {
     const { helpDescriptionTK, change, globalMaxScore, globalScoreUnit } = this.overviewProgressConfig;
     const hasChanges = !!isFinite(change) && this.isLargeMode;
     const hasMaxPoints = isFinite(globalMaxScore) && globalScoreUnit === 'points';
     const showIndicator = hasChanges || hasMaxPoints;
-    return h("section", { class: "overview" },
-      this.renderIndicator(hasChanges, showIndicator, 'LOW'),
+    return h("section", { class: { overview: true, 'with-indicators': showIndicator } },
+      showIndicator && this.renderIndicator(hasChanges, 'LOW'),
       this.renderProgressOverview(hasMaxPoints),
-      this.renderIndicator(hasChanges, showIndicator, 'HIGH'),
+      showIndicator && this.renderIndicator(hasChanges, 'HIGH'),
       hasChanges && [
         helpDescriptionTK && this.renderHelpButton(),
         h("yoo-display-increment", { changeValue: change })

package/dist/collection/feature-operate/mission/mission-heading/mission-heading.css

@@ -239,7 +239,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-right: var(--spacing-08, 0.5rem);
 }
 :host .sub-heading .action-plan-progress {
-  display: flex;
+  display: grid;
+  grid-template-columns: var(--spacing-16, 1rem) auto;
   align-items: center;
   max-width: 12rem;
 }

package/dist/collection/feature-platform/login/login/login.css

@@ -210,19 +210,17 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
   height: 100%;
 }
-.outer-login-container h1, .outer-login-container h3 {
+.outer-login-container .login-main-title, .outer-login-container .login-sub-title {
   font-weight: 900;
 }
-.outer-login-container h1 {
-  font-size: 2.25rem;
+.outer-login-container .login-main-title {
+  margin: 0;
   transition: all ease-in-out 0.2s;
 }
-.outer-login-container h3 {
+.outer-login-container .login-sub-title {
   width: fit-content;
-  max-width: 80%;
   margin-top: 0;
   margin-bottom: 0.875rem;
-  font-size: var(--font-size-24, 1.5rem);
   transition: all ease-in-out 0.2s;
 }
 .outer-login-container .content-container {
@@ -253,7 +251,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-top: var(--spacing-96, 6rem);
 }
 
-@media screen and (max-height: 699px) {
+@media screen and (max-height: 649px) {
   .outer-login-container:not(.emulated).keyboard-closed .content-container {
     padding-top: 0;
   }
@@ -440,10 +438,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
   margin-top: var(--spacing-24, 1.5rem);
   text-align: center;
+  transform: scale(100%) translateY(0);
   transition: all ease-in-out 0.2s;
 }
-.outer-login-container .header h1 {
+.outer-login-container .header .login-main-title {
   margin: 0;
+  padding: 0 0.3rem;
 }
 .outer-login-container .header img {
   max-width: 80%;
@@ -454,7 +454,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 6rem;
   max-height: 6rem;
 }
-.outer-login-container[is-whitelabel] .header h1 {
+.outer-login-container[is-whitelabel] .header .login-main-title {
   display: none;
 }
 
@@ -481,7 +481,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   .outer-login-container:not(.emulated) .header img {
     margin: 2rem 0;
   }
-  .outer-login-container:not(.emulated) .header h1 {
+  .outer-login-container:not(.emulated) .header .login-main-title {
     display: none;
   }
   .outer-login-container:not(.emulated) #error-alert {
@@ -512,7 +512,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     height: 4rem;
     max-height: 4rem;
   }
-  .outer-login-container[is-whitelabel]:not(.emulated) header h1 {
+  .outer-login-container[is-whitelabel]:not(.emulated) header .login-main-title {
     display: none;
   }
   .outer-login-container[is-whitelabel]:not(.emulated) header img {
@@ -531,7 +531,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 4rem;
   max-height: 4rem;
 }
-.outer-login-container[is-whitelabel].emulated header h1 {
+.outer-login-container[is-whitelabel].emulated header .login-main-title {
   display: none;
 }
 .outer-login-container[is-whitelabel].emulated header img {
@@ -588,19 +588,39 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     margin-top: var(--spacing-32, 2rem);
   }
 }
+@media screen and (max-height: 739px) {
+  .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img {
+    margin-top: var(--spacing-16, 1rem);
+  }
+}
 @media screen and (max-height: 699px) {
-  .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header h1 {
+  .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img {
+    margin-top: var(--spacing-08, 0.5rem);
+    margin-bottom: var(--spacing-08, 0.5rem);
+  }
+}
+@media screen and (max-height: 649px) {
+  .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header .login-main-title {
     display: none;
   }
 }
-@media screen and (max-height: 665px) {
-  .outer-login-container.keyboard-closed:not(.emulated) .header h1,
+@media screen and (max-height: 599px) {
+  .outer-login-container.keyboard-closed:not(.emulated) .header .login-main-title,
 .outer-login-container.keyboard-closed:not(.emulated) .header img {
     display: none;
   }
 }
 @media screen and (max-height: 500px) {
   .outer-login-container.keyboard-open:not(.emulated) .header {
+    transform: scale(80%) translateY(-10%);
+  }
+  .outer-login-container.keyboard-open:not(.emulated) .header img {
+    margin-top: var(--spacing-32, 2rem);
+  }
+}
+@media screen and (max-height: 400px) {
+  .outer-login-container.keyboard-open:not(.emulated) .header .login-main-title,
+.outer-login-container.keyboard-open:not(.emulated) .header img {
     display: none;
   }
 }
@@ -805,26 +825,27 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   }
 }
 @media screen and (max-width: 899px) {
-  .outer-login-container:not([is-whitelabel]) .main-content h3 {
+  .outer-login-container:not([is-whitelabel]) .main-content .login-sub-title {
     display: none;
   }
 
-  .outer-login-container.focused h3 {
+  .outer-login-container.focused .login-sub-title {
     transform: scale(1.2) translateX(10%);
   }
 }
-.outer-login-container.emulated:not([is-whitelabel]) .main-content h3 {
+.outer-login-container.emulated:not([is-whitelabel]) .main-content .login-sub-title {
   display: none;
 }
-.outer-login-container.emulated.focused h3 {
+.outer-login-container.emulated.focused .login-sub-title {
   transform: scale(1.2) translateX(10%);
 }
 
 .outer-login-container .sidepanel {
   margin-right: var(--spacing-64, 4rem);
 }
-.outer-login-container .sidepanel h1 {
+.outer-login-container .sidepanel .login-main-title {
   margin-top: 0;
+  margin-bottom: var(--spacing-24, 1.5rem);
 }
 
 @media screen and (min-width: 1000px) {

package/dist/collection/feature-platform/login/login/parts/Header.js

@@ -1,5 +1,6 @@
 import { isWeb, translate } from '@shared/utils';
 import { h } from '@stencil/core';
+import { LoginTitle } from './LoginTitle';
 export const Header = ({ logo, title, textColor, error, closeClick }) => [
   error && (h("yoo-banner", { id: "error-alert", class: {
       'center header': true,
@@ -17,5 +18,5 @@ export const Header = ({ logo, title, textColor, error, closeClick }) => [
       h("a", { class: "link", style: { color: `var(--${isWeb() ? 'danger' : 'light'})` }, href: "mailto:support@yoobic.com" }, translate('YOOBICNEEDHELP'))))),
   h("header", { class: "header" },
     h("img", { src: logo, alt: "app logo" }),
-    h("h1", { style: { color: textColor } }, title))
+    h(LoginTitle, { style: { color: textColor }, title: title }))
 ];

package/dist/collection/feature-platform/login/login/parts/LoginTitle.js

@@ -0,0 +1,10 @@
+import { h } from '@stencil/core';
+export const LoginTitle = ({ style = {}, title, type = 'main' }) => {
+  if (type === 'main') {
+    style.fontSize = title.length > 60 ? '18px' : title.length > 50 ? '24px' : title.length > 36 ? '28px' : title.length > 30 ? '32px' : '36px';
+  }
+  else {
+    style.fontSize = title.length > 40 ? '12px' : title.length > 30 ? '14px' : title.length > 25 ? '18px' : title.length > 18 ? '20px' : '24px';
+  }
+  return type === 'main' ? (h("h1", { class: 'login-main-title', style: style }, title)) : (h("h3", { class: 'login-sub-title', style: style }, title));
+};

package/dist/collection/feature-platform/login/login/parts/MainContent.js

@@ -1,5 +1,6 @@
 import { translate } from '@shared/utils';
 import { h } from '@stencil/core';
+import { LoginTitle } from './LoginTitle';
 export const MainContent = ({ subtitle, textColor }, children) => (h("div", { class: "main-content" },
-  h("h3", { style: { color: textColor } }, translate(subtitle)),
+  h(LoginTitle, { style: { color: textColor }, title: translate(subtitle), type: "sub" }),
   children));

package/dist/collection/feature-platform/login/login/parts/Sidepanel.js

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { LoginTitle } from './LoginTitle';
 export const Sidepanel = ({ image, title, textColor }) => (h("div", { class: "sidepanel" },
-  h("h1", { style: { color: textColor } }, title),
+  h(LoginTitle, { style: { color: textColor }, title: title }),
   image && h("img", { src: image })));

package/dist/collection/feature-platform/login/reset-password/reset-password.css

@@ -225,8 +225,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 15rem;
   margin-top: var(--spacing-08, 0.5rem);
 }
-:host yoo-form-input {
+:host yoo-form-input-container {
   display: block;
   max-width: 18.75rem;
   margin: auto;
+}
+:host yoo-form-input-container.web {
+  font-size: var(--font-size-12, 0.75rem);
 }

package/dist/collection/feature-platform/login/reset-password/reset-password.js

@@ -52,13 +52,13 @@ export class YooResetPasswordComponent {
   }
   renderRequest() {
     return [
-      !!this.instruction && h("p", null, this.instruction),
+      !!this.instruction && h("p", { style: { maxWidth: '350px', margin: '0 auto' } }, this.instruction),
       h("yoo-empty-state", { ref: (el) => (this.emptyState = el), type: this.isMagicLink ? 'magic-link' : 'password' }),
-      h("yoo-form-input-container", { field: { title: translate('YOOBICUSERNAME') }, hideOptional: true, hideLabel: true },
-        h("yoo-form-input", { ref: (el) => (this.emailInput = el), validators: [{ name: 'required' }], type: "email", uiValidation: { valid: false, invalid: false }, onInputChanged: (event) => this.onInputChanged(event), placeholder: translate('YOOBICUSERNAMEENTER'), 
-          //! Do not set up onInputBlur without confirming on mobile device (We don't want to have to press submit more than once)
+      h("yoo-form-input-container", { field: { title: 'YOOBICUSERNAME' }, hideOptional: true, useUppercaseLabel: true },
+        h("yoo-form-input", { ref: (el) => (this.emailInput = el), iconPrefixColor: 'app-color', validators: [{ name: 'required' }], type: "email", uiValidation: { valid: false, invalid: false }, onInputChanged: (event) => this.onInputChanged(event), placeholder: translate('YOOBICUSERNAMEENTER'), 
+          //! Do not set up onInputBlur without confirming on mobile device. We don't want to have to press submit more than once
           size: isWeb(this.host) ? 'medium' : 'large' })),
-      h("yoo-button", { ref: (el) => (this.submitButton = el), size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, class: "expanded", onClick: () => this.onSubmit() }, translate('SUBMIT'))
+      h("yoo-button", { ref: (el) => (this.submitButton = el), size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, class: "expanded", onClick: () => this.onSubmit() }, this.isMagicLink ? translate('YOOBICMAGICLINK') : translate('YOOBICRESETPASSWORD'))
     ];
   }
   renderResetForm() {
@@ -80,6 +80,7 @@ export class YooResetPasswordComponent {
           },
           {
             type: FormFieldType.password,
+            iconPrefixColor: 'app-color',
             name: 'newpassword',
             placeholder: 'NEWPASSWORD',
             required: true,
@@ -88,6 +89,7 @@ export class YooResetPasswordComponent {
           },
           {
             type: FormFieldType.password,
+            iconPrefixColor: 'app-color',
             name: 'verify',
             placeholder: 'CONFIRMPASSWORD',
             required: true,
@@ -97,9 +99,9 @@ export class YooResetPasswordComponent {
         ]
       }
     ];
-    return h("yoo-form-dynamic", { class: "margin-top", animated: false, slides: slides, showRecap: false, showSave: true, skipValidation: true, onDataChanged: (ev) => this.onDataChanged(ev), onFormValidityChanged: (ev) => this.onValidityChanged(ev), onSave: () => this.onSubmit() },
+    return (h("yoo-form-dynamic", { class: "margin-top", animated: false, slides: slides, showRecap: false, showSave: true, skipValidation: true, onDataChanged: (ev) => this.onDataChanged(ev), onFormValidityChanged: (ev) => this.onValidityChanged(ev), onSave: () => this.onSubmit() },
       h("div", { slot: "footer" },
-        h("yoo-button", { size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, onClick: () => this.onSubmit() }, translate('SUBMIT'))));
+        h("yoo-button", { size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, onClick: () => this.onSubmit() }, translate('SUBMIT')))));
   }
   render() {
     return h("div", null, this.token ? this.renderResetForm() : this.renderRequest());