refactor:improve code

src/app/about/about.page.html

@@ -7,7 +7,7 @@
     </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="width-80">
     <article>
         <p>
             The Harvard Universal Classics, originally known as Dr. Eliot's Five Foot Shelf, is a 51-volume anthology of

src/app/month/month.page.html

@@ -7,7 +7,7 @@
     </ion-toolbar>
 </ion-header>
 
-<ion-content #content class="ion-padding">
+<ion-content #content class="ion-padding width-80">
     <ion-calendar #calendar
                   (select)="onSelect($event)"
                   [(ngModel)]="dateMulti"

src/app/notes/notes.page.ts

@@ -24,8 +24,8 @@ export class NotesPage implements OnInit {
             const userNotes = data.notes;
             this.notes = [];
             userNotes.forEach(note => {
-                const month = note.day.substr(0, 2);
-                const day = note.day.substr(3, 2);
+                const month = note.day.substring(0, 2);
+                const day = note.day.substring(3, 2);
                 const key = '2016-' + note.day;
                 this.notes[key] = this.notes[key] || [];
                 this.notes[key].push({

src/app/services/analytics.service.ts

@@ -15,7 +15,7 @@ export class AnalyticsProvider {
             clientId: localStorage.getItem('ga:clientId')
         });
         ga('set', 'appName', APPLICATION_NAME);
-        ga('set', 'checkProtocolTask', null);​
+        ga('set', 'checkProtocolTask', null);
         ga('set', 'transportUrl', 'https://www.google-analytics.com/collect');
         ga(function (tracker) {
             if (!localStorage.getItem('ga:clientId')) {

src/app/services/events.service.ts

@@ -9,7 +9,7 @@ export class Events {
     private c = new Map<string, EventHandler[]>();
 
     constructor() {
-        //   console.warn(`[DEPRECATION][Events]: The Events provider is deprecated and it will be removed in the next major release.
+        //   console.warn(`[DEPRECATION][Events]: The Events provider is deprecated, and it will be removed in the next major release.
         // - Use "Observables" for a similar pub/sub architecture: https://angular.io/guide/observables
         // - Use "Redux" for advanced state management: https://ngrx.io`);
     }
@@ -18,7 +18,7 @@ export class Events {
      * Subscribe to an event topic. Events that get posted to that topic will trigger the provided handler.
      *
      * @param topic the topic to subscribe to
-     * @param handler the event handler
+     * @param handlers the event handler
      */
     subscribe(topic: any, ...handlers: EventHandler[]) {
         let topics = this.c.get(topic);
@@ -64,7 +64,7 @@ export class Events {
      * Publish an event to the given topic.
      *
      * @param topic the topic to publish to
-     * @param eventData the data to send as the event
+     * @param args the data to send as the event
      */
     publish(topic: string, ...args: any[]): any[] | null {
         const topics = this.c.get(topic);

src/app/services/material.service.ts

@@ -1,5 +1,6 @@
 import {Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
+import {lastValueFrom} from "rxjs";
 
 @Injectable({
     providedIn: 'root'
@@ -9,16 +10,16 @@ export class MaterialService {
     data: any = null;
 
     constructor(private http: HttpClient) {
-        this.http.get('assets/index.json')
-            .toPromise().then(json => {
-            this.data = json;
-        });
+        lastValueFrom(this.http.get('assets/index.json'))
+            .then(json => {
+                this.data = json;
+            });
     }
 
     public ready(): Promise<any> {
-        const promise = new Promise((resolve, reject) => {
+        return new Promise((resolve, reject) => {
             if (this.data === null) {
-                this.http.get('assets/index.json').toPromise()
+                lastValueFrom(this.http.get('assets/index.json'))
                     .then(json => {
                         this.data = json;
                         resolve(this.data);
@@ -29,6 +30,5 @@ export class MaterialService {
                 resolve(this.data);
             }
         });
-        return promise;
     }
 }

src/app/today/today.page.scss

@@ -11,18 +11,3 @@ ion-footer {
     //color: var(--pink-color);
   }
 }
-
-@media (min-width: 450px) {
-  .width-80 {
-    align-self: center;
-    width: 80%;
-    max-width: 600px;
-  }
-}
-
-@media (max-width: 450px) {
-  .width-80 {
-    align-self: center;
-    width: 90%;
-  }
-}

src/global.scss

@@ -9,3 +9,19 @@
 @import '~@ionic/angular/css/text-alignment.css';
 @import '~@ionic/angular/css/text-transformation.css';
 @import '~@ionic/angular/css/flex-utils.css';
+
+
+@media (min-width: 450px) {
+  .width-80 {
+    align-self: center;
+    width: 80%;
+    max-width: 600px;
+  }
+}
+
+@media (max-width: 450px) {
+  .width-80 {
+    align-self: center;
+    width: 90%;
+  }
+}