Chat Add people UI

src/app/chat-page/chat-page.component.html

@@ -9,6 +9,15 @@
         </h5>
     </header>
 
+    <div class="members-holder">
+        <button> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/search.svg"></svg-icon> </button>
+        <button> <img src="https://c-sf.smule.com/rs-s79/arr/c1/0b/83a9328a-1469-4bfd-9e94-622f7ca7b1b5.jpg" alt=""> </button>
+        <button> <img src="https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg" alt=""> </button>
+        <button> <img src="https://lh3.googleusercontent.com/9vppS4or0GIIqIdxU7vrMFbHMOOhO3FgFWPN1WYUH4xXd9GwFvZzeCGYrhezckELzAM" alt=""> </button>
+        <button> <img src="https://c-sf.smule.com/rs-s79/arr/c1/0b/83a9328a-1469-4bfd-9e94-622f7ca7b1b5.jpg" alt=""> </button>
+        <button> <img src="https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg" alt=""> </button>
+    </div>
+
     <section class="segment-buttons">
         <button [ngClass]="{'active' : selectedSegment === 'messages'}"
         (click)="selectedSegment = 'messages'"> Messages </button>

src/app/chat-page/chat-page.component.scss

@@ -2,6 +2,36 @@
     padding-bottom: 0;
 }
 
+.members-holder {
+    width: 90%;
+    margin: 20px auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    button {
+        width: 40px;
+        height: 40px;
+        background-color: var(--teal);
+        border: 0px;
+        border-radius: 50%;
+        overflow: hidden;
+        margin: 0 10px 5px 0px;
+
+        .icon {
+            width: 18px;
+            height: 18px;
+            fill: white;
+        }
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+}
+
 .segment-buttons {
     display: flex;
     align-items: stretch;

src/assets/custom-icons/search.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M508.874,478.708L360.142,329.976c28.21-34.827,45.191-79.103,45.191-127.309c0-111.75-90.917-202.667-202.667-202.667
+			S0,90.917,0,202.667s90.917,202.667,202.667,202.667c48.206,0,92.482-16.982,127.309-45.191l148.732,148.732
+			c4.167,4.165,10.919,4.165,15.086,0l15.081-15.082C513.04,489.627,513.04,482.873,508.874,478.708z M202.667,362.667
+			c-88.229,0-160-71.771-160-160s71.771-160,160-160s160,71.771,160,160S290.896,362.667,202.667,362.667z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>