From 1b163ac134ec67723f7129f46a82ad1aeb2bcf46 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Mon, 2 Sep 2024 19:27:27 +0200
Subject: [PATCH] update btn contacts

---
 .../contact-detail.component.html             | 14 ++++----
 .../contact-detail.component.scss             | 32 +++++++++++++------
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.html b/src/app/components/contacts/contact-detail/contact-detail.component.html
index 76dafa0..a1fc9fe 100644
--- a/src/app/components/contacts/contact-detail/contact-detail.component.html
+++ b/src/app/components/contacts/contact-detail/contact-detail.component.html
@@ -1,17 +1,19 @@
 <section>
   <div class="header">
-    <div class="headerline">
+    <div class="headline">
       <div class="title">{{ "contacts.headline" | translate }}</div>
       <div class="blue-bar"></div>
       <div class="metrics-txt">
         {{ "contacts.headlineDescription" | translate }}
       </div>
     </div>
-    <img
-      [ngClass]="{ 'd-none': !currentUserId }"
-      (click)="closeUserDetails()"
-      src="./../../../../assets/img/arrow-left.svg"
-    />
+    <div class="btn-back">
+      <img
+        [ngClass]="{ 'd-none': !currentUserId }"
+        (click)="closeUserDetails()"
+        src="./../../../../assets/img/arrow-left.svg"
+      />
+    </div>
   </div>
   @if (currentUserId) { @for (user of checkUserData(currentUserId); track user)
   {
diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.scss b/src/app/components/contacts/contact-detail/contact-detail.component.scss
index e2fac36..660d25f 100644
--- a/src/app/components/contacts/contact-detail/contact-detail.component.scss
+++ b/src/app/components/contacts/contact-detail/contact-detail.component.scss
@@ -2,20 +2,34 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+}
+
+.btn-back {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 38px;
+  height: 38px;
+  cursor: pointer;
   img {
-    width: 32px;
-    height: 32px;
-    cursor: pointer;
-    &:hover {
-      width: 36px;
-      height: 36px;
-      background-color: var(--light-gray);
-      border-radius: 18px;
+    width: 22px;
+    height: 22px;
+    filter: brightness(0) saturate(100%) invert(56%) sepia(64%) saturate(570%)
+      hue-rotate(154deg) brightness(92%) contrast(92%);
+  }
+  &:hover {
+    background-color: var(--light-blue);
+    border-radius: 100%;
+    scale: 1.1;
+    img {
+      scale: 1.1;
+      filter: brightness(0) saturate(100%) invert(100%) sepia(0%)
+        saturate(7485%) hue-rotate(325deg) brightness(100%) contrast(104%);
     }
   }
 }
 
-.headerline {
+.headline {
   display: flex;
   align-items: center;
   position: relative;