@yoobic/yobi 8.3.1-4 → 8.3.1-7

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-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-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());