Added names to toots

src/app/components/toot/toot.component.css

@@ -1,4 +1,4 @@
-#mam-toot {
+#toot {
   border: solid #06070b;
   border-width: 0 0 1px 0;
   margin: 0;
@@ -8,7 +8,7 @@
   overflow: hidden;
 }
 
-#mam-toot-avatar {
+#toot-avatar {
   margin: 10px 0 0 10px;
   /* margin: 0; */
   width: 50px;
@@ -17,20 +17,33 @@
 
 }
 
-  #mam-toot-avatar img {
-    width: 50px;
-    height: 50px;
-    border-radius: 4px; 
-    margin: 0;
-  }
+#toot-avatar img {
+  width: 50px;
+  height: 50px;
+  border-radius: 4px; 
+  margin: 0;
+}
 
+#toot-fullname {
+  color: white;
+}
 
-#mam-toot-content {
+/* #toot-username {
+  color: grey;
+} */
+
+#toot-profile-link {
+  color: #353e64;
+  margin: 7px 0 0 70px;
+  display: block;
+}
+
+#toot-content {
   /*width: calc(100% - 50px);*/
   margin: 10px 10px 10px 70px ;
 }
 
-#mam-toot-content p {
+#toot-content p {
   margin: 0;
   font-size: 0.85em;
 }

src/app/components/toot/toot.component.html

@@ -1,7 +1,8 @@
-<div id="mam-toot">
-  <div id="mam-toot-avatar">
+<div id="toot">
+  <div id="toot-avatar">
     <img src="{{ toot.account.avatar }}" />
   </div>
-  <div id="mam-toot-content" innerHTML="{{toot.content}}">
+  <a href id="toot-profile-link"><span id="toot-fullname" innerHTML="{{toot.account.display_name}}"></span> @<span id="toot-username" innerHTML="{{toot.account.username}}"></span></a>
+  <div id="toot-content" innerHTML="{{toot.content}}">
   </div>
 </div>

src/app/models/stream.models.ts

@@ -23,10 +23,10 @@ export class Stream {
 
   private test: StreamingWrapper;
   private retrieveToots(): void {
-    //TEST
-    const service = new StreamingService();
-    this.test = service.getStreaming(this.account.mastodonInstance, this.account.tokenData.access_token);
-    //END TEST
+    // //TEST
+    // const service = new StreamingService();
+    // this.test = service.getStreaming(this.account.mastodonInstance, this.account.tokenData.access_token);
+    // //END TEST
     
     const route = this.getTimelineRoute();
 

src/styles.css

@@ -26,10 +26,10 @@ html, body {
 /* .ellipsis {
 } */
 
-#mam-toot-content p {
+#toot-content p {
   margin-bottom: 0 !important; 
 }
 
-#mam-toot-content a {
+#toot-content a {
   color: #bec3d8;
 }