Review UI in order list

src/app/orders/orders.component.html

@@ -47,13 +47,29 @@
             </ng-container>
             <p class="note">
                 We will notify you each time a order is ready for pickup
-            </p>
+            </p>            
             
+            <section class="ratings" *ngIf="userOrder.rating">
+                <div class="star-holder" [ngClass]="{ 'star1' : userOrder.rating.rating === 1, 
+                'star2' : userOrder.rating.rating === 2, 'star3' : userOrder.rating.rating === 3, 
+                'star4' : userOrder.rating.rating === 4, 'star5': userOrder.rating.rating === 5}">
+                    <ion-icon name="star" (click)="userOrder.rating.rating = 1"></ion-icon>
+                    <ion-icon name="star" (click)="userOrder.rating.rating = 2"></ion-icon>
+                    <ion-icon name="star" (click)="userOrder.rating.rating = 3"></ion-icon>
+                    <ion-icon name="star" (click)="userOrder.rating.rating = 4"></ion-icon>
+                    <ion-icon name="star" (click)="userOrder.rating.rating = 5"></ion-icon>
+                </div>
+                <p>
+                    {{ userOrder.rating.comment }}
+                </p>
+            </section>
+
             <div class="action-buttons-holder">
                 <ion-button shape="round" (click)="reOrder(userOrder.orderedlist)"> Reorder </ion-button>
-                <ion-button shape="round" fill="outline" (click)="selectedOrder = userOrder"> Rate &amp; Review </ion-button>
+                <ion-button *ngIf="!userOrder.rating" shape="round" fill="outline" (click)="selectedOrder = userOrder"> Rate &amp; Review </ion-button>
             </div>
-        </div>        
+
+        </div>
 	</li>
 </ul>
 

src/app/orders/orders.component.scss

@@ -26,14 +26,18 @@ ul.orders {
 	margin: 0;
 
 	.order {
-		list-style: none;
-		color: var(--brand-dark-grey);
-		line-height: 1.6;
-		border-bottom: 1px solid #efefef;
+        width: 90%;
+        border-radius: 10px;
+        background-color: white;
+        box-shadow: 0px 0px 10px #c7c4c4;
+        list-style: none;
+        color: var(--brand-dark-grey);
+        line-height: 1.6;
+        border-bottom: 1px solid #efefef;
+        margin: 20px auto;
 
 		.order-mall {
-			margin-bottom: 20px;
-			padding: 10px 5%;
+			padding: 10px 20px;
 		}
 
 		&.expand {
@@ -112,7 +116,8 @@ ul.orders {
 	.action-buttons-holder {
 		display: flex;
 		align-items: center;
-		width: 100%;
+        width: 100%;
+        justify-content: center;
 
 		ion-button {
 			--padding-top: 0px;
@@ -127,12 +132,75 @@ ul.orders {
 				--background: var(--brand-blue);
 			}
 
-			&:last-child {
+			&:nth-child(2) {
 				--color: var(--brand-blue);
 				--border-color: var(--brand-blue);
 			}
 		}
-	}
+    }
+    
+    .ratings {
+        margin-bottom: 20px;
+        .star-holder {
+            text-align: center;
+            
+            &.star1 {
+                ion-icon:first-child {
+                    color: #fbae17;
+                }
+            }
+
+            &.star2 {
+                @for $i from 1 through 2 {
+                    ion-icon:nth-child(#{$i}) {
+                        color: #fbae17;
+                    }                   
+                }                
+            }
+            
+            &.star3 {
+                @for $i from 1 through 3 {
+                    ion-icon:nth-child(#{$i}) {
+                        color: #fbae17;
+                    }                   
+                }
+            }
+
+            &.star4 {
+                @for $i from 1 through 4 {
+                    ion-icon:nth-child(#{$i}) {
+                        color: #fbae17;
+                    }                   
+                }
+            }
+
+            &.star5 {
+                @for $i from 1 through 5 {
+                    ion-icon:nth-child(#{$i}) {
+                        color: #fbae17;
+                    }                   
+                }
+            }
+
+			ion-icon {
+				color: var(--brand-grey);
+				margin: 0 5px;
+				font-size: 30px;
+				transition: color 0.3s;
+
+				&.active {
+					color: #fbae17;
+				}
+			}
+        }
+        
+        p {
+            font-size: 16px;
+            color: var(--brand-blue);
+            font-style: italic;
+            text-align: center;
+        }
+    }
 }