Create committe UI changes

src/app/create-committee/create-committee.component.html

@@ -2,17 +2,17 @@
     <h2>Select committe members to investigate</h2>
 </header>
 
-<section>
+<ul>
     <li *ngFor="let committee of committees" (click)='committee.isActive = !committee.isActive'
         [ngClass]="{'isActive':committee.isActive === true }">
         <img src="../../assets/images/Investigator.jpg" alt="">
-        <div class="upfold">
+        <div class="user-data">
             <h6>{{committee.name}}</h6>
             <span>{{committee.designation}}</span>
         </div>
-        <div class="check-box"></div>
+        <input type="checkbox" [checked]="committee.isActive">
     </li>
-</section>
+</ul>
 
 <section class="user-action">
     <button class="common-button neutral">Back</button>

src/app/create-committee/create-committee.component.scss

@@ -1,74 +1,46 @@
-section {
-    margin: 2rem 0;
+ul {
+    width: calc(100% - 4rem);
+    margin: 2rem auto;
     display: grid;        
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
     list-style: none;
 
     li {
         display: flex;
         position: relative;
         align-items: center;
-        justify-content:center;   
-        width: 35rem;
-        height: calc( 100% - 1.5rem) ;
+        justify-content: space-between; 
+        height: 7rem;
+        padding: 0 1rem;
         border-radius: 5rem;
         margin: 2rem ;
         cursor: pointer;
-        background-color: var(--shadow-grey);
-        filter: brightness(115%);
+        background-color: white;
+        border: 1px solid var(--border-grey);
 
         &.isActive {
             background-color: white;
-            border: 1px solid var(--shadow-grey);
             box-shadow: 0rem 0rem 0.5rem 0.5rem var(--shadow-grey);
-            filter: brightness(110%);
-            
-            .check-box{
-                position: relative;
-                display: inline-block;
-                width:  1.8rem;
-                height:  1.8rem;
-                background-color: var(--success);
-                box-shadow: none;
-                
-                &::before {
-                    content: "";
-                    position: absolute;
-                    left: -3px;
-                    top: 45%;
-                    height: 30%;
-                    width: 2px;
-                    background-color: white;
-                    transform: translateX(10px) rotate(-45deg);
-                    transform-origin: left bottom;
-                }
-                
-                &::after {
-                    content: "";
-                    position: absolute;
-                    left: -2px;
-                    bottom: 4px;
-                    height: 2px;
-                    width: 54%;
-                    background-color: white;
-                    transform: translateX(10px) rotate(-45deg);
-                    transform-origin: left bottom;
-                }
-            }
+            filter: brightness(110%);            
+        }
+
+        input {
+            position: relative;
+            margin-right: 1rem;
         }
         
-        .upfold {
-            width: 20rem;
-            padding-left: 2rem;
+        .user-data {
+            margin-right: auto;
 
             h6 {
-                font-size: 1.6rem;
-                color: var(--primary);
+                font-size: 1.5rem;
+                color: var(--dark-grey);
                 padding: 0.3rem 0;
+                font-weight: 500;
             }
             span {
-                font-size: 1.4rem;
-                color: var(--primary);
+                font-size: 1.3rem;
+                color: var(--dark-grey);
             }
         }
 
@@ -76,17 +48,8 @@ section {
             width: 5rem;
             height: 5rem;
             border-radius: 50%;
-            margin-left: 1rem;   
-        }
-
-        .check-box { 
-            width: 1.8rem;
-            background-color: white;
-            height: 1.8rem;
-            margin: 0 auto;
-            border-radius: 0.4rem;
-            box-shadow: inset 0px 1px 4px 0px var(--dark-grey);
-
+            margin-right: 1rem;
+            object-fit: cover;  
         }
                     
     }

src/app/create-committee/create-committee.component.ts

@@ -1,58 +1,56 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-create-committee',
-  templateUrl: './create-committee.component.html',
-  styleUrls: ['./create-committee.component.scss']
+    selector: 'app-create-committee',
+    templateUrl: './create-committee.component.html',
+    styleUrls: ['./create-committee.component.scss']
 })
 export class CreateCommitteeComponent implements OnInit {
+    committees: Array<{
+        name: string;
+        designation: string
+        isActive: boolean,
+    }> = [{
+        name: "Robert Jr",
+        designation: 'Engineer',
+        isActive: false
+    }, {
+        name: "Tom Holland",
+        designation: 'Investigator',
+        isActive: false
+    }, {
+        name: "Criss Evans",
+        designation: 'Engineer',
+        isActive: false
+    }, {
+        name: "Natalie Portman",
+        designation: 'Engineer',
+        isActive: false
+    }, {
+        name: "Mark Ruffalo",
+        designation: 'Investigator',
+        isActive: false
+    }, {
+        name: "Paul Rudd",
+        designation: 'Engineer',
+        isActive: false
+    }, {
+        name: "Josh Brolin",
+        designation: 'Engineer',
+        isActive: false
+    }, {
+        name: "Criss Pratt",
+        designation: 'Investigator',
+        isActive: false
+    }, {
+        name: "Sacrlett Johansson",
+        designation: 'Engineer',
+        isActive: false
+    }]
 
+    constructor() { }
 
-  committees: Array<{
-    name: string;
-    designation: string
-    isActive: boolean,
-  }> = [{
-    name: "Robert Jr",
-    designation: 'Engineer',
-    isActive: false
-  }, {
-    name: "Tom Holland",
-    designation: 'Investigator',
-    isActive: false
-  }, {
-    name: "Criss Evans",
-    designation: 'Engineer',
-    isActive: false
-  }, {
-    name: "Natalie Portman",
-    designation: 'Engineer',
-    isActive: false
-  }, {
-    name: "Mark Ruffalo",
-    designation: 'Investigator',
-    isActive: false
-  }, {
-    name: "Paul Rudd",
-    designation: 'Engineer',
-    isActive: false
-  }, {
-    name: "Josh Brolin",
-    designation: 'Engineer',
-    isActive: false
-  }, {
-    name: "Criss Pratt",
-    designation: 'Investigator',
-    isActive: false
-  }, {
-    name: "Sacrlett Johansson",
-    designation: 'Engineer',
-    isActive: false
-  }]
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+    ngOnInit(): void {
+    }
 
 }