update design

src/app/components/contacts/contact-edit-new/contact-edit-new.component.html

@@ -28,6 +28,7 @@ firebaseService.getUserDataFromId(currentUserId); track user) {
           (inititalsEmitter)="inititalsEmitter($event)"
           [currentUserId]="currentUserId"
           [newColor]="newColor"
+          [currentColor]="user.color"
         ></app-contact-form>
       </div>
     </div>

src/app/components/contacts/contact-edit-new/contact-edit-new.component.scss

@@ -53,12 +53,12 @@ section {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  position: relative;
   width: 30%;
   margin-bottom: 115px;
 }
 
 .picker {
+  position: relative;
   input {
     display: flex;
     justify-content: center;
@@ -75,12 +75,15 @@ section {
 .initials {
   position: absolute;
   top: 30%;
-  left: 35%;
-  width: fit-content;
+  left: 0;
+  right: 0;
+  width: 120px;
   height: fit-content;
+  text-align: center;
   font-size: 47px;
   font-weight: 500;
   color: var(--white);
+  padding-left: 4px;
   text-shadow: 1px 1px 2px var(--black);
   z-index: 2;
 }
@@ -118,7 +121,6 @@ section {
 
   .initials {
     font-size: 42px;
-    left: 33%;
   }
 
   .header {
@@ -162,7 +164,7 @@ section {
 
   .initials {
     font-size: 32px;
-    left: 28%;
+    width: 80px;
   }
 
   .header {

src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.html

@@ -100,7 +100,7 @@
           : ('contactDialogForm.phone' | translate)
       }}"
       [(ngModel)]="contactData.phone"
-      pattern="[0-9]{7,10}"
+      pattern="[0-9]{7,15}"
       autocomplete="off"
       required
     />

src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.ts

@@ -25,6 +25,7 @@ export class ContactFormComponent implements OnInit, OnChanges {
   @Input() currentUserId: string = '';
   @Input() randomColor: string = '';
   @Input() newColor: string = '';
+  @Input() currentColor: string = '';
   @Output() inititalsEmitter = new EventEmitter<string>();
 
   constructor(
@@ -154,13 +155,19 @@ export class ContactFormComponent implements OnInit, OnChanges {
   onSubmit(ngForm: NgForm) {
     if (ngForm.submitted && ngForm.form.valid) {
       if (this.currentUserId) {
-        this.contactData.color = this.newColor;
+        console.log(this.newColor, this.currentColor);
+
+        this.newColor !== ''
+          ? (this.contactData.color = this.newColor)
+          : (this.contactData.color = this.currentColor);
         this.firebaseService.updateUserData(
           this.currentUserId,
           this.contactData
         );
       } else {
-        this.userData.color = this.newColor;
+        this.newColor !== ''
+          ? (this.userData.color = this.newColor)
+          : (this.userData.color = this.randomColor);
         const { id, ...taskWithoutIds } = this.userData;
         this.firebaseService.addNewUser(taskWithoutIds);
       }