added some changes in select-menu page

app/views/select-menu-page.html

@@ -44,6 +44,9 @@
           </div>
         </div>
       </div>
+      <div class="meal-item-checked-icon" ng-if="meal.isSelected">
+        <i class="fa fa-check-circle"></i>
+      </div>
     </div>
   </div>
 </div>

app/views/selected-meals.html

@@ -1,5 +1,50 @@
 <div class="selected-meals">
-  <div ng-repeat="meal in meals" ng-if="meal.isSelected" class="selected-meal">
+  <div class="selected-meals-type">
+    breakfast
+  </div>
+  <div ng-repeat="meal in meals" ng-if="meal.isSelected && meal.type == 'breakfast'" class="selected-meal">
+    <div class="selected-meal-img">
+      <img ng-src="{{meal.imageUrl}}">
+    </div>
+    <div class="selected-meal-title">
+      <h2>{{meal.mealName}}</h2>
+    </div>
+    <div class="selected-meal-delete" ng-click="unselect($index)">
+      <span class="fa fa-times"></span>
+    </div>
+  </div>
+  <div class="selected-meals-type">
+    lunch
+  </div>
+  <div ng-repeat="meal in meals" ng-if="meal.isSelected && meal.type == 'lunch'" class="selected-meal">
+    <div class="selected-meal-img">
+      <img ng-src="{{meal.imageUrl}}">
+    </div>
+    <div class="selected-meal-title">
+      <h2>{{meal.mealName}}</h2>
+    </div>
+    <div class="selected-meal-delete" ng-click="unselect($index)">
+      <span class="fa fa-times"></span>
+    </div>
+  </div>
+  <div class="selected-meals-type">
+    dinner
+  </div>
+  <div ng-repeat="meal in meals" ng-if="meal.isSelected && meal.type == 'dinner'" class="selected-meal">
+    <div class="selected-meal-img">
+      <img ng-src="{{meal.imageUrl}}">
+    </div>
+    <div class="selected-meal-title">
+      <h2>{{meal.mealName}}</h2>
+    </div>
+    <div class="selected-meal-delete" ng-click="unselect($index)">
+      <span class="fa fa-times"></span>
+    </div>
+  </div>
+  <div class="selected-meals-type">
+    snacks
+  </div>
+  <div ng-repeat="meal in meals" ng-if="meal.isSelected && meal.type == 'snacks'" class="selected-meal">
     <div class="selected-meal-img">
       <img ng-src="{{meal.imageUrl}}">
     </div>

content/css/styles.css

@@ -1067,6 +1067,33 @@ main.ng-enter.ng-enter-active .meal-item {
   outline: none;
 }
 
+.meal-item-checked-icon {
+  position: absolute;
+  display: flex;
+  z-index: 2;
+  font-size: 45px;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  opacity: 0.75;
+  color: #1D1D1F;
+  transition: all 0.3s ease;
+}
+
+.meal-item-checked-icon.ng-enter {
+  opacity: 0;
+  transform: scale(1);
+}
+
+.meal-item-checked-icon.ng-enter.ng-enter-active {
+  opacity: 1;
+  transform: scale(1.4);
+}
+
+
 .selected-meals-btn {
   position: absolute;
   right: 20px;
@@ -1135,7 +1162,7 @@ main.ng-enter.ng-enter-active .meal-item {
   width: 100%;
   overflow: hidden;
   height: 40px;
-  border-radius: 5px;
+  border-radius: 3px;
 }
 
 .selected-meals .selected-meal img{
@@ -1195,6 +1222,26 @@ main.ng-enter.ng-enter-active .meal-item {
   opacity: 0;
 }
 
+.selected-meals-type {
+  position: relative;
+  left: -30px;
+  right: -30px;
+  bottom: 0px;
+  width: 124%;
+  padding: 10px 0;
+  margin: 40px 0;
+  background-color: #F1F1F5;
+  text-align: center;
+  font-size: 15px;
+  font-weight: bold;
+  letter-spacing: 3px;
+}
+
+.selected-meals-type:first-of-type {
+  bottom: 25px;
+  margin: 0;
+}
+
 .selected-meals-submit {
   position: relative;
   left: -30px;