Page page UI

src/app/dashboard/table/table.component.html

@@ -5,18 +5,33 @@
 
     <div class="card">
 
+        <div class="shadow" *ngIf="showExportOptions" (click)="showExportOptions = false"></div>
+
         <div class="table-actions">
             <div class="input-holder side-label">
                 <input type="text" placeholder="Partner name, location, PRA user, contact...">
                 <label> Search </label>
             </div>
-            <button class="button"> <img src="assets/export.svg" alt=""> Export </button>
+            <button class="button" (click)="showExportOptions = true"> <img src="assets/export.svg" alt=""> Export
+            </button>
             <button class="button"> <img src="assets/filter.svg" alt=""> Filter </button>
         </div>
 
+        <ng-container *ngIf="showExportOptions">
+            <div class="export-options">
+                <header>
+                    <h5> Export as </h5>
+                </header>
+                <div class="options">
+                    <button class="button"> CSV </button>
+                    <button class="button"> Excel </button>
+                </div>
+            </div>
+        </ng-container>
+
         <section class="table">
             <header>
-                <div class="col">  <input type="checkbox"> Select </div>
+                <div class="col"> <input type="checkbox"> Select </div>
                 <div class="col"> Name </div>
                 <div class="col"> Primary Disctrict &amp; State </div>
                 <div class="col"> Type </div>
@@ -40,12 +55,14 @@
                         {{ partner.detailedProfile.totalReachOfOrganization }}
                     </div>
                     <div class="col">
-                        <a target="_blank" [href]="partner.organizationBasicInfo.website">{{ partner.organizationBasicInfo.website }}</a>
+                        <a target="_blank" [href]="partner.organizationBasicInfo.website">{{
+                            partner.organizationBasicInfo.website }}</a>
                     </div>
                     <div class="col">
                         <div> {{ partner.primaryContact.name }} </div>
                         <a href="mailTo:{{partner.primaryContact.email}}"> {{ partner.primaryContact.email }} </a>
-                        <a href="tel:{{partner.primaryContact.contactNumber}}"> {{ partner.primaryContact.contactNumber }} </a> 
+                        <a href="tel:{{partner.primaryContact.contactNumber}}"> {{ partner.primaryContact.contactNumber
+                            }} </a>
                     </div>
                 </div>
             </section>
@@ -57,24 +74,24 @@
                 <label> Show </label>
             </div>
 
-            <div class="pagination">                
+            <div class="pagination">
                 <button>
                     <img src="assets/chevron-left-double.svg" alt="">
                 </button>
                 <button>
                     <img src="assets/chevron-left.svg" alt="">
-                 </button>
+                </button>
                 <div class="input-holder side-label">
                     <input type="tel" value="1">
                     <label> Page </label>
                 </div>
                 <div class="text">
                     of 20
-                </div>                
+                </div>
                 <button class="right">
                     <img src="assets/chevron-left.svg" alt="">
-                 </button>
-                 <button class="right">
+                </button>
+                <button class="right">
                     <img src="assets/chevron-left-double.svg" alt="">
                 </button>
             </div>

src/app/dashboard/table/table.component.scss

@@ -27,9 +27,61 @@
     }
 }
 
+.card {
+    position: relative;
+
+    .shadow {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+        background-color: black;
+        opacity: 0.5;
+        display: block;
+    }
+}
+
+.export-options {
+    width: 190px;
+    position: absolute;
+    top: 70px;
+    right: 120px;
+    z-index: 2;
+    padding: 10px;
+    border-radius: var(--common-border-radius);
+    text-align: center;
+    background-color: white;
+
+    header {
+        margin-bottom: 10px;
+
+        h5 {
+            color: var(--secondary-text);
+            font-size: 16px;
+        }
+    }
+
+    .options {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    button {
+        border: 2px solid var(--input-border);
+        padding: 7px 20px;
+        margin: 0;
+        border-radius: var(--common-border-radius);
+        background-color: white;
+        color: var(--secondary-text);
+        font-weight: 500;
+    }
+}
 
 .table {
-    height: 50vh;
+    height: 70vh;
     overflow: auto;
     line-height: 1.8;
 
@@ -59,6 +111,10 @@
                 width: 70px;
             }
 
+            &:nth-child(2) {
+                text-transform: capitalize;
+            }
+
             &:nth-child(3) {
                 flex-grow: 1;
             }
@@ -85,6 +141,7 @@
         border-radius: var(--common-border-radius);
         cursor: pointer;
         transition: background-color 0.3s, color 0.3s;
+        height: 100px;
 
         &:nth-child(even) {
             background-color: var(--input-background);

src/app/dashboard/table/table.component.ts

@@ -8,6 +8,7 @@ import { PartnerProfileService } from '../../services/partner-profile.service';
 })
 export class TableComponent implements OnInit {
     userData: Array<any> = [];
+    showExportOptions: boolean = false;
 
     constructor(
         private partnerProfileService: PartnerProfileService