Orders table

src/app/custom-selector/custom-selector.component.scss

@@ -26,6 +26,12 @@
 			font-size: 20px;
 			border: 1px solid var(--brand-blue);
 			background-color: white;
+			transition: background-color 0.3s, color 0.3s;
+
+			&:hover {
+				background-color: var(--brand-blue);
+				color: white;
+			}
 		}
 	}
 

src/app/dashboard/dashboard.component.html

@@ -82,8 +82,8 @@
 			</div>
 
 			<div class="action-buttons">
-				<button> Confirm </button>
-				<button> Reject </button>
+				<button class="round-button"> Confirm </button>
+				<button class="round-button"> Reject </button>
 			</div>
 		</li>
 
@@ -110,8 +110,8 @@
 			</div>
 
 			<div class="action-buttons">
-				<button> Confirm </button>
-				<button> Reject </button>
+				<button class="round-button"> Confirm </button>
+				<button class="round-button"> Reject </button>
 			</div>
 		</li>
 
@@ -138,8 +138,8 @@
 			</div>
 
 			<div class="action-buttons">
-				<button> Confirm </button>
-				<button> Reject </button>
+				<button class="round-button"> Confirm </button>
+				<button class="round-button"> Reject </button>
 			</div>
 		</li>
 
@@ -167,8 +167,8 @@
 			</div>
 
 			<div class="action-buttons">
-				<button> Confirm </button>
-				<button> Reject </button>
+				<button class="round-button"> Confirm </button>
+				<button class="round-button"> Reject </button>
 			</div>
 		</li>
 	</ul>

src/app/dashboard/dashboard.component.scss

@@ -152,15 +152,6 @@
 		width: 100%;
 
 		button {
-			padding: 0 20px;
-			border-radius: 20px;
-			background-color: #cecece;
-			color: white;
-			font-size: 13px;
-			letter-spacing: 1px;
-			height: 25px;
-			border: 0px;
-
 			&:first-child {
 				background-color: var(--brand-blue);
 				margin-right: 10px;

src/app/orders/orders.component.html

@@ -1,5 +1,5 @@
 <div class="widget-heading-holder">
-	<header> Dashboard </header>
+	<header> Order List </header>
 	<app-custom-selector header="Status" [options]="statusOptions" width="200"
 	[defaultOptionId]="statusOptions[0].id"></app-custom-selector>
 
@@ -11,3 +11,77 @@
 		<button> <i class="icon ion-md-search"></i> </button>
 	</div>
 </div>
+
+<table>
+	<tr class="heading-row">
+		<th> Order ID </th>
+		<th> Order Time </th>
+		<th> Items </th>
+		<th> Quantity </th>
+		<th> Amount </th>
+		<th> Payment Status </th>
+	</tr>
+
+	<tr>
+		<td> 545455 </td>
+		<td> 2 Min Ago </td>
+		<td>
+			<div> 8PC Hot &amp; Crispy </div>
+			<div> KFC 4 + 4 </div>
+		</td>
+		<td> <div> 1 </div> <div> 4 </div> </td>
+		<td> <div> &#x20B9; 750 </div> <div> &#x20B9; 250 </div> </td>
+		<td> Paid Online </td>
+		<td>
+			<div class="action-buttons">
+				<button class="round-button"> Confirm </button>
+				<button class="round-button"> Reject </button>
+			</div>
+		</td>
+	</tr>
+
+	<tr>
+		<td> 545455 </td>
+		<td> 10 Min Ago </td>
+		<td>
+			<div> KFC 4 + 4 </div>
+		</td>
+		<td> <div> 1 </div> </td>
+		<td> <div> &#x20B9; 750 </div> </td>
+		<td> Paid Online </td>
+		<td>
+			<div class="status success"> Completed </div>
+		</td>
+	</tr>
+
+	<tr class="cancelled">
+		<td> 545455 </td>
+		<td> 0 Min Ago </td>
+		<td>
+			<div> KFC 4 + 4 </div>
+		</td>
+		<td> <div> 1 </div> </td>
+		<td> <div> &#x20B9; 750 </div> </td>
+		<td> Paid Online </td>
+		<td>
+			<div class="status failed"> Cancelled </div>
+		</td>
+	</tr>
+
+	<tr>
+		<td> 545455 </td>
+		<td> 1 Min Ago </td>
+		<td>
+			<div> KFC Bucket </div>
+		</td>
+		<td> <div> 1 </div> </td>
+		<td> <div> &#x20B9; 250 </div> </td>
+		<td> COD </td>
+		<td>
+			<div class="action-buttons">
+				<button class="round-button"> Confirm </button>
+				<button class="round-button"> Reject </button>
+			</div>
+		</td>
+	</tr>
+</table>

src/app/orders/orders.component.scss

@@ -1,6 +1,17 @@
+.widget-heading-holder {
+	header {
+		margin-right: 10%;
+	}
+
+	app-custom-selector {
+		margin: 0 10px;
+	}
+}
+
 .search-input {
 	display: flex;
-	width: 300px;
+	flex-grow: 1;
+	height: 30px;
 	border-radius: 20px;
 	background-color: white;
 	color: var(--brand-blue);
@@ -28,5 +39,78 @@
 		font-size: 20px;
 		border: 1px solid var(--brand-blue);
 		background-color: white;
+		transition: background-color 0.3s, color 0.3s;
+
+		&:hover {
+			background-color: var(--brand-blue);
+			color: white;
+		}
+	}
+}
+
+
+table {
+	width: 90%;
+	margin: 30px auto;
+	text-align: left;
+
+	th {
+		color: var(--grey);
+		font-size: 14px;
+		font-weight: 500;
+		padding: 10px 0;
+		letter-spacing: 0.5px;
+	}
+
+	td {
+		border-top: 1px solid rgba(#cecece, 0.5);
+		padding: 10px 0;
+		color: var(--dark-grey);
+		font-size: 14px;
+		font-weight: 500;
+		letter-spacing: 1px;
+		line-height: 2;
+		vertical-align: top;
+		width: calc(100% / 6);
+
+		&:nth-child(4) {
+			padding-left: 20px;
+		}
+	}
+
+	tr {
+		&.cancelled {
+			td {
+				text-decoration: line-through;
+				text-decoration-color: var(--dark-grey);
+
+				&:last-child {
+					text-decoration: none;
+				}
+			}
+		}
+	}
+
+	.status {
+
+		&.success {
+			color: green;
+		}
+
+		&.failed {
+			color: red;
+		}
+	}
+
+	.action-buttons {
+		display: flex;
+		width: 100%;
+
+		button {
+			&:first-child {
+				background-color: var(--brand-blue);
+				margin-right: 10px;
+			}
+		}
 	}
 }

src/styles.scss

@@ -38,6 +38,17 @@ button {
 	letter-spacing: 0.5px;
 }
 
+.round-button {
+	padding: 0 20px;
+	border-radius: 20px;
+	background-color: #cecece;
+	color: white;
+	font-size: 13px;
+	letter-spacing: 1px;
+	height: 25px;
+	border: 0px;
+}
+
 
 .widget-heading-holder {
 	width: 90%;