UI fixes

package.json

@@ -27,13 +27,13 @@
     "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.803.9",
+    "@angular-devkit/build-angular": "^0.803.21",
     "@angular/cli": "~8.3.9",
     "@angular/compiler-cli": "~8.2.9",
     "@angular/language-service": "~8.2.9",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
     "codelyzer": "^5.0.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",

src/app/more/more.component.html

@@ -2,7 +2,7 @@
 	<img>
 	<div class="name"> John Doe </div>
 	<div class="other-info"> Member ID: 03293 </div>
-	<div class="other-info"> Restaurant Rating: <i class="icon ion-ios-star"></i> 4.0 </div>
+	<div class="other-info"> Restaurant Rating: 4.0 <i class="icon ion-ios-star"></i> </div>
 </section>
 
 <ul class="nav-list">

src/app/schedules/schedules.component.html

@@ -6,7 +6,9 @@
 
 		<section class="calendar">
 			<div class="month">
+				<button (click)="selectPreviousMonth()"> <i class="icon ion-ios-arrow-back"></i> </button>
 				<span>{{ selectedMonth }} {{ selectedYear }}</span>
+				<button (click)="selectNextMonth()"> <i class="icon ion-ios-arrow-forward"></i> </button>
 			</div>
 
 			<div class="days">

src/app/schedules/schedules.component.scss

@@ -140,17 +140,30 @@
 	}
 
 	.month {
-	    text-align: center;
 	    padding: 5px 0 20px;
+		display: flex;
+		margin: 0 auto;
+		width: 50%;
+		align-items: center;
+		text-align: center;
+		justify-content: space-between;
 
 	    span {
 	        color: var(--dark-grey);
 	        text-transform: capitalize;
 	        font-size: 16px;
+			letter-spacing: 1px;
 			font-weight: 500;
-	        display: inline-block;
-	        width: 180px;
 	    }
+
+		button {
+			width: 30px;
+			height: 30px;
+			font-size: 30px;
+			color: var(--brand-blue);
+			background-color: transparent;
+			border: 0;
+		}
 	}
 
 
@@ -233,9 +246,11 @@
 	margin: 30px auto 20px;
 	padding-bottom: 20px;
 	border-bottom: 1px solid #cecece;
+	display: none;
 
 	@media screen and (max-width: 1023px) {
 		margin: 20px auto;
+		display: block;
 	}
 
 	.month {
@@ -326,7 +341,11 @@
 
 .day-details {
 	width: 90%;
-	margin: 0 auto;
+	margin: 35px auto 0;
+
+	@media screen and (max-width: 1023px) {
+		margin: 0 auto;
+	}
 
 	.tabs-holder {
 		display: flex;

src/app/widgets-holder/widgets-holder.component.html

@@ -16,7 +16,7 @@
 			<img>
 			<div class="name"> John Doe </div>
 			<div class="other-info"> Member ID: 03293 </div>
-			<div class="other-info"> Restaurant Rating: <i class="icon ion-ios-star"></i> 4.0 </div>
+			<div class="other-info"> Restaurant Rating: 4.0 <i class="icon ion-ios-star"></i> </div>
 		</section>
 
 		<ul>