Re-write html so note fields are seperate and change text color #2

Re-wrote the html in owner-doorboard so that the note fields are seperated and can be accessed seperately. Changed the color of the note text so it is black and easier to read in light theme.

client/src/app/owners/owner-doorboard.component.html

@@ -17,13 +17,14 @@ <h3>{{this.owner.name}}</h3>
         <!--Each message is its own mat-card-->
         <div fxFlex="column" class="list-of-notes">
           <mat-card fxLayout="row wrap" class="note-card">
-            <p class="timestamp">{{note.timestamp}}<br/>
-            {{note.message}}</p>
+            <mat-list-item>
+              <p matLine class="timestamp">{{note.timestamp}}</p>
+              <p matLine class="message">{{note.message}}</p>
+            </mat-list-item>
           </mat-card>
         </div>
       </mat-list-item>
     </mat-list>
   </div>
-
 </div>
 

client/src/app/owners/owner-doorboard.component.scss

@@ -2,6 +2,7 @@
   font-size: 1.5em;
   padding-bottom: 2rem;
   overflow-wrap: break-word;
+  padding-top: 10px;
 }
 .add-button-container{
   padding-top: 1rem;
@@ -47,4 +48,10 @@ h3{
   overflow-wrap: break-word;
 }
 
+.timestamp{
+  color: black;
+}
 
+.message{
+  color: black;
+}