feat(singup): u#2887 design review

kaleidos-ventures · Sep 5, 2023 · 0aad749 · 0aad749
1 parent 13a0e71
commit 0aad749
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 11 deletions.
diff --git a/...pt/apps/taiga/src/app/modules/auth/feature-sign-up/components/signup/signup.component.css b/...pt/apps/taiga/src/app/modules/auth/feature-sign-up/components/signup/signup.component.css
@@ -17,7 +17,7 @@ Copyright (c) 2023-present Kaleidos INC
 }
 
 .input-email {
-  margin-block-end: var(--input-gap);
+  margin-block: var(--input-gap);
 }
 
 .input-password {
@@ -36,3 +36,7 @@ Copyright (c) 2023-present Kaleidos INC
 .auth-options {
   justify-content: center;
 }
+
+.fullname-only-emojis {
+  display: inline;
+}
diff --git a/...t/apps/taiga/src/app/modules/auth/feature-sign-up/components/signup/signup.component.html b/...t/apps/taiga/src/app/modules/auth/feature-sign-up/components/signup/signup.component.html
@@ -29,14 +29,20 @@
         </tg-ui-error>
       </ng-container>
     </tg-ui-input>
-    <tg-ui-inline-notification
-      aria-live="polite"
+
+    <tg-ui-context-notification
+      *ngIf="fullNameOnlyEmojis && !dismissedEmojiNotification"
       status="warning"
-      *ngIf="fullNameOnlyEmojis">
-      <p>
+      class="fullname-only-emojis"
+      data-test="fullname-only-emojis"
+      alertLevel="polite"
+      size="s"
+      [hasClose]="true"
+      (closed)="dismissedEmojiNotification = true">
+      <span>
         {{ t('signup.warnings.only_emojis') }}
-      </p>
-    </tg-ui-inline-notification>
+      </span>
+    </tg-ui-context-notification>
 
     <tg-ui-input
       class="input-email"

diff --git a/...ipt/apps/taiga/src/app/modules/auth/feature-sign-up/components/signup/signup.component.ts b/...ipt/apps/taiga/src/app/modules/auth/feature-sign-up/components/signup/signup.component.ts
@@ -32,7 +32,7 @@ import { Actions, ofType } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 import { TuiLinkModule } from '@taiga-ui/core';
 import { InvitationParams, SignUpError } from '@taiga/data';
-import { InlineNotificationComponent } from '@taiga/ui/inline-notification';
+import { ContextNotificationModule } from '@taiga/ui/context-notification/context-notification.module';
 import { InputsModule } from '@taiga/ui/inputs/inputs.module';
 import { PasswordStrengthComponent } from '@taiga/ui/inputs/password-strength/password-strength.component';
 import {
@@ -61,7 +61,7 @@ import { GetUrlPipeModule } from '~/app/shared/pipes/get-url/get-url.pipe.module
     ButtonLoadingModule,
     TuiLinkModule,
     ExternalLinkModule,
-    InlineNotificationComponent,
+    ContextNotificationModule,
   ],
   providers: [
     {
@@ -93,6 +93,7 @@ export class SignupComponent implements OnInit {
 
   public signUpForm!: FormGroup;
   public fullNameOnlyEmojis = false;
+  public dismissedEmojiNotification = false;
 
   constructor(
     private fb: FormBuilder,

diff --git a/javascript/libs/ui/src/lib/context-notification/context-notification.component.css b/javascript/libs/ui/src/lib/context-notification/context-notification.component.css
@@ -62,8 +62,8 @@ Copyright (c) 2023-present Kaleidos INC
 }
 
 :host([size="s"]) .wrapper {
-  padding-block: var(--spacing-8);
-  padding-inline: var(--spacing-8) var(--spacing-16);
+  padding-block: var(--spacing-4);
+  padding-inline: var(--spacing-8);
 }
 
 :host([size="l"]) .wrapper {