design contacts

src/app/components/contacts/contact-detail/contact-detail.component.html

@@ -1,8 +1,37 @@
 <section>
-  <div class="header">
+  <div class="headerline">
     <div class="title">Contacts</div>
     <div class="blue-bar"></div>
     <div class="metrics-txt">Better with a team</div>
   </div>
-  <p>{{ userService.displayUserName(paramsId) }}</p>
+  <div class="content">
+    <div class="header">
+      <div
+        class="circle"
+        [ngStyle]="{
+          'background-color': userService.displayUserDetails(paramsId, 'color')
+        }"
+      >
+        <div class="initials">
+          {{ userService.displayUserDetails(paramsId, "initials") }}
+        </div>
+      </div>
+      <div class="details">
+        <div class="name">
+          {{ userService.displayUserDetails(paramsId, "firstName") }}
+          {{ userService.displayUserDetails(paramsId, "lastName") }}
+        </div>
+        <div class="btns">
+          <div class="btn">
+            <img src="./../../../../assets/img/contact/edit.svg" alt="" />
+            <p>edit</p>
+          </div>
+          <div class="btn">
+            <img src="./../../../../assets/img/contact/delete.svg" alt="" />
+            <p>delete</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </section>

src/app/components/contacts/contact-detail/contact-detail.component.scss

@@ -2,13 +2,13 @@ section {
   position: absolute;
   top: -64px;
   left: 339px;
-  width: calc(100vw - 635px);
+  width: calc(100vw - 747px);
   min-height: calc(100vh - 128px);
   padding: 64px 48px 48px 48px;
   box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.1);
 }
 
-.header {
+.headerline {
   display: flex;
   align-items: center;
   position: relative;
@@ -29,3 +29,106 @@ section {
     background-color: var(--light-blue);
   }
 }
+
+.header {
+  display: flex;
+  align-items: center;
+  margin-top: 48px;
+  max-width: 100%;
+}
+
+.circle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 120px;
+  min-width: 120px;
+  height: 120px;
+  border-radius: 100%;
+  border: 4px solid var(--white);
+  .initials {
+    font-size: 47px;
+    font-weight: 500;
+    color: var(--white);
+    text-shadow: 1px 1px 2px var(--black);
+  }
+}
+
+.details {
+  margin-left: 32px;
+  overflow: hidden;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
+}
+
+.name {
+  display: flex;
+  align-items: center;
+  font-size: 47px;
+  font-weight: 500;
+}
+
+.btns {
+  display: flex;
+  align-items: center;
+  padding-top: 12px;
+  img {
+    width: 20px;
+    height: 20px;
+    padding-right: 12px;
+  }
+  p {
+    font-size: 16px;
+    font-weight: 400;
+    padding-right: 24px;
+  }
+  .btn {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    &:hover {
+      filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg);
+    }
+  }
+}
+
+@media screen and (max-width: 1300px) {
+  .headerline {
+    .title {
+      font-size: 50px;
+    }
+    .metrics-txt {
+      font-size: 24px;
+    }
+  }
+}
+
+@media screen and (max-width: 1235px) {
+  .headerline {
+    flex-direction: column;
+    align-items: flex-start;
+    padding-left: 0;
+    height: 100%;
+    .metrics-txt {
+      padding-left: 0;
+    }
+    .blue-bar {
+      position: absolute;
+      bottom: -15px;
+      height: 3px;
+      width: 100px;
+    }
+  }
+
+  .name {
+    display: block;
+    font-size: 32px;
+  }
+}
+
+@media screen and (max-width: 1150px) {
+  section {
+    display: none;
+  }
+}

src/app/components/contacts/contact-detail/contact-detail.component.ts

@@ -1,12 +1,12 @@
 import { Component, Input } from '@angular/core';
-import { ContactsComponent } from '../contacts.component';
 import { ActivatedRoute } from '@angular/router';
 import { UserService } from '../../../services/user.service';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-contact-detail',
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './contact-detail.component.html',
   styleUrl: './contact-detail.component.scss',
 })

src/app/components/contacts/contacts.component.html

@@ -36,19 +36,33 @@
           </div>
         </div>
         <div class="details">
-          <p>
+          <div class="name">
+            <div class="first-name">
               {{
-              userService.displayUserName(usersByFirstLetter[sortLetter][index])
+                userService.displayUserDetails(
+                  usersByFirstLetter[sortLetter][index],
+                  "firstName"
+                )
               }}
-          </p>
+            </div>
-          <span>
+            <span>,&nbsp;</span>
+            <div class="last-name">
+              {{
+                userService.displayUserDetails(
+                  usersByFirstLetter[sortLetter][index],
+                  "lastName"
+                )
+              }}
+            </div>
+          </div>
+          <div class="email">
             {{
               userService.displayUserDetails(
                 usersByFirstLetter[sortLetter][index],
                 "email"
               )
             }}
-          </span>
+          </div>
         </div>
       </div>
       } }

src/app/components/contacts/contacts.component.scss

@@ -52,7 +52,7 @@ section {
 .first-letter {
   font-size: 20px;
   font-weight: 400;
-  padding-left: 38px;
+  padding-left: 32px;
   margin: 32px 0 12px 0;
 }
 
@@ -66,7 +66,7 @@ section {
 .contact {
   display: flex;
   align-items: center;
-  padding: 15px 24px;
+  padding: 16px;
   border-radius: 10px;
   cursor: pointer;
   &:hover {
@@ -79,27 +79,52 @@ section {
   justify-content: center;
   align-items: center;
   width: 42px;
+  min-width: 42px;
   height: 42px;
   border-radius: 100%;
+  border: 2px solid var(--white);
   .initials {
+    font-size: 12px;
+    font-weight: 400;
     color: var(--white);
     text-shadow: 1px 1px 2px var(--black);
   }
 }
 
 .details {
-  margin-left: 32px;
+  margin-left: 24px;
-  p {
+  overflow-x: auto;
+  width: 100%;
+}
+
+.name {
+  display: flex;
+  align-items: center;
+  .first-name,
+  .last-name,
+  span {
     font-size: 20px;
     font-weight: 400;
     margin-bottom: 6px;
   }
-  span {
+}
+
+.email {
   font-size: 16px;
   font-weight: 400;
   text-decoration: none;
   color: var(--light-blue);
 }
+
+@media screen and (max-width: 1150px) {
+  .left-frame {
+    position: fixed;
+    top: 96px;
+    left: 232px;
+    width: calc(100vw - 232px);
+    min-height: calc(100vh - 207px);
+    background-color: var(--bgContent);
+  }
 }
 
 @media screen and (max-width: 910px) {

src/app/components/contacts/contacts.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component } from '@angular/core';
 import { UserService } from '../../services/user.service';
 import { User } from '../../interfaces/user.interface';
 import { CommonModule } from '@angular/common';

src/app/services/user.service.ts

@@ -42,13 +42,6 @@ export class UserService {
     });
   }
 
-  displayUserName(id: string) {
-    if (this.userMap[id]) {
-      return this.userMap[id].firstName + ', ' + this.userMap[id].lastName;
-    }
-    return 'sd';
-  }
-
   displayUserDetails(id: string, query: keyof User) {
     if (this.userMap[id]) {
       const user = this.userMap[id];

src/assets/img/contact/delete.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 18C2.45 18 1.97917 17.8042 1.5875 17.4125C1.19583 17.0208 1 16.55 1 16V3C0.716667 3 0.479167 2.90417 0.2875 2.7125C0.0958333 2.52083 0 2.28333 0 2C0 1.71667 0.0958333 1.47917 0.2875 1.2875C0.479167 1.09583 0.716667 1 1 1H5C5 0.716667 5.09583 0.479167 5.2875 0.2875C5.47917 0.0958333 5.71667 0 6 0H10C10.2833 0 10.5208 0.0958333 10.7125 0.2875C10.9042 0.479167 11 0.716667 11 1H15C15.2833 1 15.5208 1.09583 15.7125 1.2875C15.9042 1.47917 16 1.71667 16 2C16 2.28333 15.9042 2.52083 15.7125 2.7125C15.5208 2.90417 15.2833 3 15 3V16C15 16.55 14.8042 17.0208 14.4125 17.4125C14.0208 17.8042 13.55 18 13 18H3ZM3 3V16H13V3H3ZM5 13C5 13.2833 5.09583 13.5208 5.2875 13.7125C5.47917 13.9042 5.71667 14 6 14C6.28333 14 6.52083 13.9042 6.7125 13.7125C6.90417 13.5208 7 13.2833 7 13V6C7 5.71667 6.90417 5.47917 6.7125 5.2875C6.52083 5.09583 6.28333 5 6 5C5.71667 5 5.47917 5.09583 5.2875 5.2875C5.09583 5.47917 5 5.71667 5 6V13ZM9 13C9 13.2833 9.09583 13.5208 9.2875 13.7125C9.47917 13.9042 9.71667 14 10 14C10.2833 14 10.5208 13.9042 10.7125 13.7125C10.9042 13.5208 11 13.2833 11 13V6C11 5.71667 10.9042 5.47917 10.7125 5.2875C10.5208 5.09583 10.2833 5 10 5C9.71667 5 9.47917 5.09583 9.2875 5.2875C9.09583 5.47917 9 5.71667 9 6V13Z" fill="#2A3647"/>
+</svg>

src/assets/img/contact/edit.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 17H3.4L12.025 8.375L10.625 6.975L2 15.6V17ZM16.3 6.925L12.05 2.725L13.45 1.325C13.8333 0.941667 14.3042 0.75 14.8625 0.75C15.4208 0.75 15.8917 0.941667 16.275 1.325L17.675 2.725C18.0583 3.10833 18.2583 3.57083 18.275 4.1125C18.2917 4.65417 18.1083 5.11667 17.725 5.5L16.3 6.925ZM14.85 8.4L4.25 19H0V14.75L10.6 4.15L14.85 8.4Z" fill="#2A3647"/>
+</svg>