rename css variables

finish refactoring how settings are saved to local storage

app/db/src/app/app.component.ts

@@ -22,6 +22,7 @@ export class AppComponent extends SubscriberComponent implements AfterViewInit {
     (state) => state.displaySettings.fontSize + 'pt'
   );
   cardFont$ = this.appService.select((state) => state.displaySettings.cardFont);
+  displaySettings$ = this.appService.select((state) => state.displaySettings);
 
   isHandset$: Observable<boolean> = this.breakpointObserver
     .observe(Breakpoints.Handset)
@@ -44,20 +45,43 @@ export class AppComponent extends SubscriberComponent implements AfterViewInit {
     this.appService.initSavedPages();
     this.appService.initDisplaySettings();
 
+    //#region handle local storage
+
+    this.addSubscription(
+      this.displaySettings$.subscribe((settings) => {
+        this.appService.saveSettingsApi(settings);
+      })
+    );
+
+    this.addSubscription(
+      this.savedPages$.subscribe((savedPages) => {
+        this.appService.savePagesApi(savedPages);
+      })
+    );
+
+    //#endregion
+
+    //#region handle font settings
+
     this.addSubscription(
       this.fontSize$.subscribe((size) => {
         if (size) {
-          document.documentElement.style.setProperty('--font-size', size);
+          document.documentElement.style.setProperty('--card-font-size', size);
         }
       })
     );
     this.addSubscription(
       this.cardFont$.subscribe((family) => {
         if (family) {
-          document.documentElement.style.setProperty('--font-family', family);
+          document.documentElement.style.setProperty(
+            '--card-font-family',
+            family
+          );
         }
       })
     );
+
+    //#endregion
   }
 
   ngAfterViewInit(): void {

app/db/src/app/search/components/words/words-card.component.scss

@@ -14,7 +14,7 @@
   overflow-y: auto;
   max-height: 25rem;
   font-family: var(--card-font);
-  font-size: var(--font-size);
+  font-size: var(--card-font-size);
   padding: 0.5rem;
 }
 .passage-button-wrapper {

app/db/src/app/services/app.service.ts

@@ -27,6 +27,7 @@ import { PageTitles, PageIcons } from '../constants';
 import { createStateService } from '../common/state-service';
 import { UUID } from 'angular2-uuid';
 import { StorageMap } from '@ngx-pwa/local-storage';
+import { SearchPage } from '../search/components/search-page/search.page';
 
 const initialState: AppState = {
   cards: [
@@ -77,6 +78,13 @@ type AppAction =
     type: 'GET_SAVED_PAGE';
     pageId: string;
   }
+  | {
+      type: 'SAVE_PAGE';
+      title: string;
+    }
+  | {
+      type: 'UPDATE_CURRENT_PAGE';
+    }
   | {
     type: 'UPDATE_SAVED_PAGES';
     savedPages: SavedPage[];
@@ -147,6 +155,38 @@ function reducer(state: AppState, action: AppAction): AppState {
         savedPages: action.savedPages,
       };
     }
+    case 'UPDATE_CURRENT_PAGE': {
+      const savedPages = [
+        ...state.savedPages.filter((o) => o.id === state.currentPage.id),
+        {
+          id: state.currentPage.id,
+          title: state.currentPage.title,
+          queries: [...state.cards],
+        },
+      ];
+
+      return {
+        ...state,
+        savedPagesLoaded: true,
+        savedPages,
+      };
+    }
+    case 'SAVE_PAGE': {
+      const savedPages = [
+        ...state.savedPages,
+        {
+          // create a new saved page object
+          title: action.title,
+          id: UUID.UUID().toString(),
+          queries: [...state.cards],
+        },
+      ];
+      return {
+        ...state,
+        savedPagesLoaded: true,
+        savedPages,
+      };
+    }
     case 'GET_SAVED_PAGE': {
       const page = state.savedPages.find(
         (o) => o.id.toString() === action.pageId
@@ -325,25 +365,16 @@ export class AppService extends createStateService(reducer, initialState) {
   }
 
   savePage(title: string) {
-    const state = this.getState();
+    this.dispatch({
-
+      type: 'SAVE_PAGE',
-    const savedPages = [
+      title,
-      ...state.savedPages,
+    });
-      {
+  }
-        // create a new saved page object
-        title,
-        id: UUID.UUID().toString(),
-        queries: [...state.cards],
-      },
-    ];
 
+  savePagesApi(savedPages: readonly SavedPage[]) {
     this.localStorageService.set('savedPages', savedPages).subscribe(
-      // success
       () => {
-        this.dispatch({
+        // nop
-          type: 'UPDATE_SAVED_PAGES',
-          savedPages,
-        });
       },
       // error
       () => {
@@ -359,36 +390,9 @@ export class AppService extends createStateService(reducer, initialState) {
   }
 
   updatePage() {
-    const state = this.getState();
+    this.dispatch({
-
+      type: 'UPDATE_CURRENT_PAGE',
-    const savedPages = [
+    });
-      ...state.savedPages.filter((o) => o.id === state.currentPage.id),
-      {
-        id: state.currentPage.id,
-        title: state.currentPage.title,
-        queries: [...state.cards],
-      },
-    ];
-
-    this.localStorageService.set('savedPages', savedPages).subscribe(
-      // success
-      () => {
-        this.dispatch({
-          type: 'UPDATE_SAVED_PAGES',
-          savedPages,
-        });
-      },
-      // error
-      () => {
-        this.dispatch({
-          type: 'UPDATE_ERROR',
-          error: {
-            // tslint:disable-next-line: quotemark
-            msg: "Something went wrong and the page wasn't saved. :(",
-          },
-        });
-      }
-    );
   }
 
   addCardToSavedPage(pageId: string, card: CardItem) {
@@ -404,25 +408,10 @@ export class AppService extends createStateService(reducer, initialState) {
   //#region Display Settings
 
   updateDisplaySettings(settings: DisplaySettings) {
-    this.saveSettingsApi(settings).subscribe(
+    this.dispatch({
-      // success
+      type: 'UPDATE_DISPLAY_SETTINGS',
-      () => {
+      settings,
-        this.dispatch({
+    });
-          type: 'UPDATE_DISPLAY_SETTINGS',
-          settings,
-        });
-      },
-      // error
-      () => {
-        this.dispatch({
-          type: 'UPDATE_ERROR',
-          error: {
-            // tslint:disable-next-line: quotemark
-            msg: "Something went wrong and the settings weren't saved. :(",
-          },
-        });
-      }
-    );
   }
 
   async initDisplaySettings() {
@@ -440,7 +429,7 @@ export class AppService extends createStateService(reducer, initialState) {
     }
   }
 
-  private saveSettingsApi(settings: DisplaySettings) {
+  saveSettingsApi(settings: DisplaySettings) {
     return this.localStorageService.set('displaySettings', settings);
   }
 
@@ -495,6 +484,7 @@ export class AppService extends createStateService(reducer, initialState) {
       }
     );
   }
+
   async editNote(newCard: CardItem, oldCard: CardItem) {
     this.saveNoteApi(newCard.data as NoteItem).subscribe(
       // success
@@ -776,7 +766,7 @@ export class AppService extends createStateService(reducer, initialState) {
 
         // get the verses requested.
         const tvs = chapters[j].vss.length;
-        if (end === '*' || end > tvs) {
+        if (end === 0 || end > tvs) {
           end = tvs;
         }
 

app/db/src/styles/app.scss

@@ -1,9 +1,8 @@
 html {
-  --font-family: Roboto, Helvetica, Arial, sans-serif;
-  --font-size: 12pt;
   --primary-color: #333;
 
-  --card-font: Roboto, Helvetica, Arial, sans-serif;
+  --card-font-size: 12pt;
+  --card-font-family: Roboto, Helvetica, Arial, sans-serif;
   --card-heading-font-family: "Roboto Condensed";
   --card-border-radius: 0.2em;
   --card-title: #fff;
@@ -28,7 +27,7 @@ body {
   height: 100%;
   margin: 0;
   font-family: "Roboto Condensed";
-  font-size: var(--font-size);
+  font-size: 12pt;
 }
 
 .card-title {
@@ -53,9 +52,9 @@ body {
 .card-content {
   padding: 1rem;
   color: var(--card-color);
-  font-size: var(--font-size);
+  font-size: var(--card-font-size);
-  font-family: var(--font-family);
+  font-family: var(--card-font-family);
-  line-height: calc(var(--font-size) + 0.5rem);
+  line-height: calc(var(--card-font-size) + 0.5rem);
 }
 
 .card-close-button {
@@ -111,30 +110,30 @@ a {
 .mat-headline,
 .mat-typography h1 {
   font-family: var(--card-heading-font-family) !important;
-  font-size: calc(var(--font-size) * 2) !important;
+  font-size: calc(var(--card-font-size) * 2) !important;
-  line-height: calc(var(--font-size) * 2.5) !important;
+  line-height: calc(var(--card-font-size) * 2.5) !important;
 }
 
 .mat-h2,
 .mat-title,
 .mat-typography h2 {
   font-family: var(--card-heading-font-family) !important;
-  font-size: calc(var(--font-size) * 1.5) !important;
+  font-size: calc(var(--card-font-size) * 1.5) !important;
-  line-height: calc(var(--font-size) * 1.7) !important;
+  line-height: calc(var(--card-font-size) * 1.7) !important;
 }
 
 .mat-h3,
 .mat-subheading-2,
 .mat-typography h3 {
   font-family: var(--card-heading-font-family) !important;
-  font-size: calc(var(--font-size) * 1.1) !important;
+  font-size: calc(var(--card-font-size) * 1.1) !important;
-  line-height: calc(var(--font-size) * 1.2) !important;
+  line-height: calc(var(--card-font-size) * 1.2) !important;
 }
 
 .mat-h4,
 .mat-subheading-1,
 .mat-typography h4 {
   font-family: var(--card-heading-font-family) !important;
-  font-size: var(--font-size) !important;
+  font-size: var(--card-font-size) !important;
-  line-height: calc(var(--font-size) * 1.1) !important;
+  line-height: calc(var(--card-font-size) * 1.1) !important;
 }