refactor: migrate most fxFlex usages to pure CSS

Flex Layout is no longer maintained, see https://medium.com/@caerus.karu/farewell-flex-layout-aaa567023769

Author: EdricChan03

src/app/app.component.html

@@ -2,7 +2,7 @@
   <mat-sidenav #left [mode]="shared.isPortraitHandset ? 'over' : 'side'" class="app-sidenav mat-elevation-z2">
     <mat-toolbar>
       Links
-      <span fxFlex></span>
+      <span class="app-flex-spacer"></span>
       <button mat-icon-button (click)="left.close()" matTooltip="Close sidenav" matTooltipPosition="right">
         <mat-icon>keyboard_arrow_left</mat-icon>
       </button>
@@ -41,7 +41,7 @@ <h3 matListItemTitle>{{link.title}}</h3>
         <mat-icon>menu</mat-icon>
       </button>
       <span class="toolbar-title">Study Buddy <span *ngIf="shared?.title">- {{shared.title}}</span></span>
-      <span fxFlex></span>
+      <span class="app-flex-spacer"></span>
       <button mat-icon-button [matMenuTriggerFor]="accountMenu" matTooltip="Account">
         <mat-icon>account_circle</mat-icon>
       </button>

src/app/components/toolbar/toolbar.component.html

@@ -7,7 +7,7 @@
     </mat-icon>
   </button>
   <span>{{ toolbarTitle }}</span>
-  <span fxFlex *ngIf="actionItems"></span>
+  <span class="app-flex-spacer" *ngIf="actionItems"></span>
   <ng-container *ngIf="actionItems">
     <ng-container *ngFor="let item of nonOverflowActionItems">
       <button mat-button *ngIf="item.type === 'button'" (click)="item.onItemClickListener($event)"

src/app/dialogs/edit-content-dialog/edit-content-dialog.component.html

@@ -36,7 +36,7 @@ <h2 class="dialog-title">Edit</h2>
       </button>
     </div>
     <div class="markdown-edit-textarea">
-      <mat-form-field fxFlex>
+      <mat-form-field>
         <textarea matInput matTextareaAutosize></textarea>
       </mat-form-field>
     </div>
@@ -45,4 +45,4 @@ <h2 class="dialog-title">Edit</h2>
 <div mat-dialog-actions align="end">
   <button mat-button (click)="cancel()" color="primary">Cancel</button>
   <button mat-button (click)="updateVal()" color="primary">Update</button>
-</div>
+</div>

src/app/tips/tips.component.html

@@ -4,7 +4,7 @@
       <mat-card appearance="outlined">
         <mat-card-header>
           <mat-card-title>Word of the Day</mat-card-title>
-          <span fxFlex></span>
+          <span class="app-flex-spacer"></span>
           <button mat-icon-button (click)="getWordOfDay()" matTooltip="Refresh" color="primary">
             <mat-icon>refresh</mat-icon>
           </button>
@@ -37,7 +37,7 @@
             <mat-icon matCardAvatar class="quote-of-day-card--avatar">format_quote</mat-icon>
             <mat-card-title>{{quote?.title}}</mat-card-title>
             <mat-card-subtitle>{{quote?.author}}</mat-card-subtitle>
-            <span fxFlex></span>
+            <span class="app-flex-spacer"></span>
             <button mat-icon-button (click)="getQuoteOfDay()" matTooltip="Refresh" color="primary">
               <mat-icon>refresh</mat-icon>
             </button>

src/app/todo/todo-archived/todo-archived.component.html

@@ -3,7 +3,7 @@
     <mat-icon>close</mat-icon>
   </button>
   {{selectedTodos.length}} selected
-  <span fxFlex></span>
+  <span class="app-flex-spacer"></span>
   <button mat-icon-button (click)="markSelectedTodosAsDone()" matTooltip="Mark selected as done">
     <mat-icon>done_all</mat-icon>
   </button>
@@ -116,7 +116,7 @@ <h3 matListItemTitle>{{todo?.title}}</h3>
           </mat-icon>
           <span>Project: {{todo?.project}}</span>
         </span>
-        <span fxFlex></span>
+        <span class="app-flex-spacer"></span>
         <ng-container *ngIf="toolbar.showToolbar">
           <button [matMenuTriggerFor]="actionsMenu" mat-icon-button (click)="stopPropogation($event)">
             <mat-icon>more_vert</mat-icon>

src/app/todo/todo-home/todo-home.component.html

@@ -3,7 +3,7 @@
     <mat-icon>close</mat-icon>
   </button>
   {{selectedTodos.length}} selected
-  <span fxFlex></span>
+  <span class="app-flex-spacer"></span>
   <button mat-icon-button (click)="markSelectedTodosAsDone()" matTooltip="Mark selected as done">
     <mat-icon>done_all</mat-icon>
   </button>

src/styles.scss

@@ -536,3 +536,7 @@ a[mat-raised-button] mat-icon {
 .mat-icon.mat-icon-inline {
   vertical-align: top;
 }
+
+.app-flex-spacer {
+  flex: 1;
+}