update design

src/app/app.component.html

@@ -2,7 +2,7 @@
   <app-sidebar></app-sidebar>
   <main>
     <app-header></app-header>
-    <div class="content">
+    <div class="main-content">
       <router-outlet></router-outlet>
     </div>
   </main>

src/app/app.component.scss

@@ -28,7 +28,7 @@ app-header {
   background-color: var(--white);
 }
 
-.content {
+.main-content {
   width: calc(100% - 128px);
   min-width: calc(100vw - 232px - 64px);
   height: 100vh;
@@ -38,9 +38,7 @@ app-header {
 }
 
 @media screen and (max-width: 910px) {
-  .content {
-    display: flex;
-    justify-content: center;
+  .main-content {
     width: calc(100vw - 64px);
     height: calc(100vh - 240px);
     padding: 32px;
@@ -54,9 +52,7 @@ app-header {
 }
 
 @media screen and (max-width: 450px) {
-  .content {
-    display: flex;
-    justify-content: center;
+  .main-content {
     width: calc(100vw - 32px);
     padding: 32px 16px;
   }

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

@@ -1,9 +1,15 @@
 <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>
+    <img
+      (click)="closeUserDetails()"
+      src="./../../../../assets/img/arrow-left.svg"
+    />
+  </div>
   @if (currentUserId) {
   <div
     class="contact-details"
@@ -11,7 +17,7 @@
       'animation-coming-in': currentUserId
     }"
   >
-    <div class="header">
+    <div class="content">
       <div
         class="circle"
         [ngStyle]="{

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

@@ -3,9 +3,25 @@ section {
   top: -64px;
   left: 339px;
   width: calc(100vw - 747px);
-  min-height: calc(100vh - 128px);
+  min-height: calc(100vh - 208px);
   padding: 64px 48px 48px 48px;
-  box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.1);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  img {
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    &:hover {
+      width: 36px;
+      height: 36px;
+      background-color: var(--light-gray);
+      border-radius: 18px;
+    }
+  }
 }
 
 .headerline {
@@ -30,7 +46,7 @@ section {
   }
 }
 
-.header {
+.content {
   display: flex;
   align-items: center;
   margin-top: 48px;
@@ -175,6 +191,51 @@ section {
 
 @media screen and (max-width: 1150px) {
   section {
+    position: unset;
+    box-shadow: unset;
+    width: calc(100vw - 312px);
+    padding: 0;
+  }
+
+  .header {
+    padding-right: 64px;
+  }
+}
+
+@media screen and (max-width: 1150px) {
+  section {
+    width: calc(100vw - 296px);
+  }
+}
+
+@media screen and (max-width: 910px) {
+  section {
+    width: calc(100vw - 48px);
+    min-height: calc(100vh - 240px);
+  }
+
+  .header {
+    padding-right: 0;
+  }
+}
+
+@media screen and (max-width: 450px) {
+  .btns {
     display: none;
   }
+
+  section {
+    width: calc(100vw - 36px);
+  }
+
+  .headerline {
+    .title {
+      font-size: 47px;
+      font-weight: 700;
+    }
+    .metrics-txt {
+      font-size: 20px;
+      font-weight: 400;
+    }
+  }
 }

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

@@ -1,7 +1,8 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { UserService } from '../../../services/user.service';
 import { CommonModule } from '@angular/common';
 import { ContactsComponent } from '../contacts.component';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-contact-detail',
@@ -11,7 +12,11 @@ import { ContactsComponent } from '../contacts.component';
   styleUrl: './contact-detail.component.scss',
 })
 export class ContactDetailComponent {
-  @Input() currentUserId: string = '';
+  @Input() currentUserId!: string;
 
-  constructor(public userService: UserService) {}
+  constructor(public userService: UserService, private router: Router) {}
+
+  closeUserDetails() {
+    this.router.navigate(['contacts']);
+  }
 }

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

@@ -1,5 +1,8 @@
 <section>
-  <div class="left-frame">
+  <div
+    class="left-frame"
+    [ngClass]="{ 'd-none': !showAllUsers && currentUserId != undefined }"
+  >
     <button class="btn" type="submit">
       <div class="btn-inside">
         <span>Add new contact</span>
@@ -41,5 +44,8 @@
       } }
     </div>
   </div>
-  <app-contact-detail [currentUserId]="currentUserId"></app-contact-detail>
+  <app-contact-detail
+    [ngClass]="{ 'd-none': !showAllUsers && currentUserId == undefined }"
+    [currentUserId]="currentUserId"
+  ></app-contact-detail>
 </section>

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

@@ -2,6 +2,10 @@ section {
   position: relative;
 }
 
+.d-none {
+  display: none;
+}
+
 .btn-inside {
   display: flex;
   justify-content: center;
@@ -135,7 +139,22 @@ section {
     top: 96px;
     left: 0px;
     width: 100vw;
-    min-height: calc(100vh - 207px);
     background-color: var(--bgContent);
   }
 }
+
+@media screen and (max-width: 450px) {
+  .left-frame {
+    padding: 0;
+  }
+
+  .btn {
+    display: none;
+  }
+
+  .first-letter {
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+}

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter, HostListener, Output } from '@angular/core';
 import { UserService } from '../../services/user.service';
 import { User } from '../../interfaces/user.interface';
 import { CommonModule } from '@angular/common';
@@ -16,12 +16,14 @@ export class ContactsComponent {
   allUsers: User[] = [];
   usersFirstLetter: string[] = [];
   usersByFirstLetter: { [key: string]: string[] } = {};
+  showAllUsers!: boolean;
   currentUserId: string = '';
 
   constructor(public userService: UserService, private route: ActivatedRoute) {}
 
   ngOnInit(): void {
     this.routeUserId();
+    this.onResize();
   }
 
   routeUserId() {
@@ -32,6 +34,16 @@ export class ContactsComponent {
     }
   }
 
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    if (window.innerWidth <= 1150 && this.currentUserId != '') {
+      this.showAllUsers = false;
+    } else {
+      this.showAllUsers = true;
+    }
+    console.log(this.showAllUsers);
+  }
+
   loadAllUserWithoutGuest(): User[] {
     return this.userService
       .getAllUsers()

src/app/components/summary/summary.component.scss

@@ -179,6 +179,14 @@ section {
   }
 }
 
+@media screen and (max-width: 910px) {
+  section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
 @media screen and (max-width: 700px) {
   .header {
     flex-direction: column;