Orders UI

src/app/orders/orders.component.html

@@ -35,7 +35,7 @@
 		<td>
 			<div class="action-buttons">
 				<button class="round-button"> Confirm </button>
-				<button class="round-button"> Reject </button>
+				<button class="round-button" (click)="showRejectionPopup = true"> Reject </button>
 			</div>
 		</td>
 	</tr>
@@ -80,8 +80,24 @@
 		<td>
 			<div class="action-buttons">
 				<button class="round-button"> Confirm </button>
-				<button class="round-button"> Reject </button>
+				<button class="round-button" (click)="showRejectionPopup = true"> Reject </button>
 			</div>
 		</td>
 	</tr>
 </table>
+
+<section class="popup" [ngClass]="{'active' : showRejectionPopup }">
+	<div class="popup-box">
+		<header> Reason to Reject the Order </header>
+		<select>
+			<option selected> Item not available </option>
+			<option> The customer was impatient </option>
+			<option> Other </option>
+		</select>
+
+		<div class="action-buttons">
+			<button class="rect-button" (click)="showRejectionPopup = false"> Reject </button>
+			<button class="rect-button" (click)="showRejectionPopup = false"> Cancel </button>
+		</div>
+	</div>
+</section>

src/app/orders/orders.component.ts

@@ -9,7 +9,7 @@ import { IFilterOption } from '../models/filter-option';
 export class OrdersComponent implements OnInit {
 	statusOptions: Array<IFilterOption>;
 	dateOptions: Array<IFilterOption>;
-
+	showRejectionPopup: boolean = false;
 
 	constructor() { }
 

src/styles.scss

@@ -63,3 +63,67 @@ button {
 		letter-spacing: 0.5px;
 	}
 }
+
+
+.popup {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	left: 0;
+	top: 0;
+	z-index: 2;
+	background-color: rgba(black, 0.8);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: opacity 0.3s;
+	transform: scale(0);
+	opacity: 0;
+
+	&.active {
+		opacity: 1;
+		transform: scale(1);
+
+		.popup-box {
+			transform: scale(1);
+		}
+	}
+
+	.popup-box {
+		background-color: white;
+		border-radius: 10px;
+		padding: 50px;
+		text-align: center;
+		transform: scale(0);
+		transition: transform 0.3s;
+		transition-delay: 0.3s;
+
+		header {
+			font-size: 16px;
+			font-weight: 500;
+			letter-spacing: 1px;
+		}
+
+		select {
+			margin: 20px 0;
+			width: 300px;
+			padding: 10px;
+			border-radius: 10px;
+			font-size: 14px;
+			color: var(--dark-grey);
+			letter-spacing: 1px;
+		}
+
+		.action-buttons {
+			button {
+				margin: 0 10px;
+
+				&:first-child {
+					background-color: white;
+					border: 1px solid var(--brand-blue);
+					color: var(--brand-blue);
+				}
+			}
+		}
+	}
+}