fix design of notification & erro-icon in inputs

Author: Awakich

projects/social_platform/src/app/ui/components/input/input.component.scss

@@ -114,7 +114,7 @@
     justify-content: center;
     padding: 0 4px;
     color: var(--red) !important;
-    background: var(--ligth-white);
+    background: var(--white);
     transform: translateY(-50%);
   }
 

projects/ui/src/lib/components/layout/invite-manage-card/invite-manage-card.component.html

@@ -5,14 +5,15 @@
   <div class="invite__main">
     <div class="invite__avatars">
       <app-avatar [size]="52" [url]="invite.user.avatar"></app-avatar>
-      <app-avatar [size]="52" [url]="invite.project.imageAddress"></app-avatar>
     </div>
     <div class="invite__info">
       <div class="text-body-12 invite__text">
         <a [routerLink]="['/office/profile', invite.user.id]"
           >{{ invite.user.firstName }} {{ invite.user.lastName }}</a
-        >, вас пригласили в проект
-        <a [routerLink]="['/office/projects', invite.project.id]">"{{ invite.project.name }}"</a>
+        ><br />приглашает вас в проект <br />
+        <a [routerLink]="['/office/projects', invite.project.id]"
+          >"{{ invite.project.name | truncate: 20 }}"</a
+        >
       </div>
       <div class="text-body-12 invite__time">
         {{ invite.datetimeCreated | dayjs: "fromX" }} назад в
@@ -26,10 +27,10 @@
       size="medium"
       appearance="outline"
       (click)="reject.emit(invite.id)"
-      >Отклонить</app-button
+      >отклонить</app-button
     >
     <app-button customTypographyClass="text-body-12" size="medium" (click)="accept.emit(invite.id)"
-      >Принять</app-button
+      >принять</app-button
     >
   </div>
 </div>

projects/ui/src/lib/components/layout/invite-manage-card/invite-manage-card.component.scss

@@ -1,7 +1,18 @@
 .invite {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  gap: 30px;
+  background-color: var(--light-white);
+  border: 0.5px solid var(--medium-grey-for-outline);
+  border-radius: var(--rounded-xl);
+  width: 100%;
+  padding: 24px;
+
   &__main {
     display: flex;
     align-items: flex-start;
+    gap: 15px;
   }
 
   &__avatars {
@@ -42,6 +53,7 @@
 
   &__actions {
     display: flex;
+
     gap: 12px;
     margin-top: 16px;
   }

projects/ui/src/lib/components/layout/invite-manage-card/invite-manage-card.component.ts

@@ -6,6 +6,7 @@ import { DayjsPipe } from "projects/core";
 import { ButtonComponent } from "@ui/components";
 import { RouterLink } from "@angular/router";
 import { AvatarComponent } from "@ui/components/avatar/avatar.component";
+import { TruncatePipe } from "projects/core/src/lib/pipes/truncate.pipe";
 
 /**
  * Компонент карточки управления приглашением
@@ -30,7 +31,7 @@ import { AvatarComponent } from "@ui/components/avatar/avatar.component";
   templateUrl: "./invite-manage-card.component.html",
   styleUrl: "./invite-manage-card.component.scss",
   standalone: true,
-  imports: [AvatarComponent, RouterLink, ButtonComponent, DayjsPipe],
+  imports: [AvatarComponent, RouterLink, ButtonComponent, DayjsPipe, TruncatePipe],
 })
 export class InviteManageCardComponent implements OnInit {
   constructor() {}

projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.html

@@ -12,7 +12,6 @@
     </div>
     @if (showNotifications) {
     <div class="control-panel__notifications notifications">
-      <p class="text-body-12 notifications__title">Уведомления</p>
       <ul class="notifications__invites">
         @for (invite of invites; track invite.id) {
         <li class="notifications__invite">

projects/ui/src/lib/components/layout/profile-control-panel/profile-control-panel.component.scss

@@ -27,10 +27,8 @@
   &__notifications {
     position: absolute;
     top: 100%;
-    right: 0;
+    right: -10%;
     z-index: 20;
-    width: 120px;
-    max-height: 240px;
     margin-top: 10px;
   }
 }