From 766cd02774755a97e65c0ad9638cc8474482c969 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Sun, 19 May 2024 09:08:51 +0200
Subject: [PATCH] update design

---
 .../contact-edit-new/contact-edit-new.component.html |  1 +
 .../contact-edit-new/contact-edit-new.component.scss | 12 +++++++-----
 .../contact-form/contact-form.component.html         |  2 +-
 .../contact-form/contact-form.component.ts           | 11 +++++++++--
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/app/components/contacts/contact-edit-new/contact-edit-new.component.html b/src/app/components/contacts/contact-edit-new/contact-edit-new.component.html
index 90d64cf..74abe33 100644
--- a/src/app/components/contacts/contact-edit-new/contact-edit-new.component.html
+++ b/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>
diff --git a/src/app/components/contacts/contact-edit-new/contact-edit-new.component.scss b/src/app/components/contacts/contact-edit-new/contact-edit-new.component.scss
index 92018ab..342471c 100644
--- a/src/app/components/contacts/contact-edit-new/contact-edit-new.component.scss
+++ b/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 {
diff --git a/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.html b/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.html
index ae6b373..5654c52 100644
--- a/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.html
+++ b/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
     />
diff --git a/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.ts b/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.ts
index 8e2b012..17dff2e 100644
--- a/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.ts
+++ b/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);
       }