update design & translation

src/app/app.component.html

@@ -1,7 +1,11 @@
 @if (this.isLoggedIn === undefined) {
 <router-outlet></router-outlet>
 } @else {
-<div [ngClass]="{ 'blur-background': sharedService.isAnyDialogOpen }">
+<div
+  [ngClass]="{
+    'blur-background': sharedService.isAnyDialogOpen
+  }"
+>
   <div class="container">
     <app-sidebar></app-sidebar>
     <app-header></app-header>

src/app/app.component.scss

@@ -4,7 +4,9 @@
 
 app-header {
   position: fixed;
+  top: 0;
   left: 232px;
+  right: 0;
   height: 96px;
   width: 100%;
   background-color: var(--white);
@@ -38,6 +40,7 @@ app-sidebar-mobile {
 
 .blur-background {
   filter: blur(5px);
+  overflow: hidden;
 }
 
 .d-none {

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

@@ -31,6 +31,7 @@ firebaseService.getUserDataFromId(currentUserId); track user) {
         ></app-contact-form>
       </div>
     </div>
+    <div class="notice">{{ "contacts.notice" | translate }}</div>
   </div>
 </section>
 } } @else {
@@ -60,6 +61,7 @@ firebaseService.getUserDataFromId(currentUserId); track user) {
         ></app-contact-form>
       </div>
     </div>
+    <div class="notice">{{ "contacts.notice" | translate }}</div>
   </div>
 </section>
 }

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

@@ -55,6 +55,7 @@ section {
   align-items: center;
   position: relative;
   width: 30%;
+  margin-bottom: 115px;
 }
 
 .picker {
@@ -84,6 +85,13 @@ section {
   z-index: 2;
 }
 
+.notice {
+  font-size: 14px;
+  font-weight: 400;
+  text-align: center;
+  padding: 0 12px 12px 12px;
+}
+
 .form {
   display: flex;
   justify-content: center;
@@ -99,8 +107,9 @@ section {
 
   .badge {
     position: absolute;
-    top: 105px;
+    top: 115px;
     right: 40px;
+    padding-bottom: 0;
   }
 
   .content {

src/assets/i18n/de.json

@@ -132,6 +132,7 @@
   "contacts": {
     "headline": "Kontakte",
     "headlineDescription": "Besser mit einem Team",
+    "notice": "Hinweis: Klicken Sie in den Kreis, um die Farbe zu ändern.",
     "btnNew": "Neuer Kontakt",
     "btnEdit0": "bearbeiten",
     "btnEdit1": "Bearbeiten",

src/assets/i18n/en.json

@@ -132,6 +132,7 @@
   "contacts": {
     "headline": "Contacts",
     "headlineDescription": "Better with a team",
+    "notice": "Notice: Click in the circle to change the colour.",
     "btnNew": "Add new contact",
     "btnEdit0": "edit",
     "btnEdit1": "Edit",