From 3dc0223df00366559605a4e5b87f56a1ef5c8c54 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Wed, 27 Mar 2024 14:45:59 +0100
Subject: [PATCH] update design

---
 .../contact-detail.component.html             | 13 ++++++++++
 .../contact-detail.component.scss             | 26 +++++++++++++++++++
 2 files changed, 39 insertions(+)

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 4f3b0f2..2710805 100644
--- a/src/app/components/contacts/contact-detail/contact-detail.component.html
+++ b/src/app/components/contacts/contact-detail/contact-detail.component.html
@@ -33,5 +33,18 @@
         </div>
       </div>
     </div>
+    <div class="contact">
+      <div class="headline">Contact Information</div>
+      <div class="info">
+        <p>Email:</p>
+        <a [href]="'mail:' + userService.displayUserDetails(paramsId, 'email')">
+          {{ userService.displayUserDetails(paramsId, "email") }}
+        </a>
+        <p>Phone:</p>
+        <a [href]="'tel:' + userService.displayUserDetails(paramsId, 'phone')">
+          {{ userService.displayUserDetails(paramsId, "phone") }}
+        </a>
+      </div>
+    </div>
   </div>
 </section>
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 375f466..d60d374 100644
--- a/src/app/components/contacts/contact-detail/contact-detail.component.scss
+++ b/src/app/components/contacts/contact-detail/contact-detail.component.scss
@@ -127,6 +127,32 @@ section {
   }
 }
 
+.contact {
+  margin-top: 48px;
+  .headline {
+    font-size: 20px;
+    font-weight: 400;
+  }
+  .info {
+    margin-top: 16px;
+    p {
+      font-size: 16px;
+      font-weight: 700;
+      padding: 24px 0 12px 0;
+    }
+    a {
+      font-size: 16px;
+      font-weight: 400;
+      text-decoration: none;
+      color: var(--light-blue);
+      cursor: pointer;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
 @media screen and (max-width: 1150px) {
   section {
     display: none;