Major redesign of comment component styling

2 files changed, 43 insertions, 56 deletions

diff --git a/src/app/components/comment/comment.component.css b/src/app/components/comment/comment.component.css
index 419cbf8..48d9174 100644
--- a/src/app/components/comment/comment.component.css
+++ b/src/app/components/comment/comment.component.css
@@ -1,56 +1,30 @@
-.comment {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  margin: .5em auto;
+.left-pane {
   box-sizing: border-box;
-  padding: .5em;
-  background-color: var(--card-bg);
-}
-
-.comment:first-child {
-  margin-top: 0;
 }
 
 /* Author */
 
-.author {
-  display: flex;
-  margin-bottom: .2em;
-}
-
-.author:hover {
-  cursor: pointer;
-}
-
-.author > img {
-  width: 1.7em;
-  height: 1.7em;
-  margin-right: .2em;
+.author-picture {
+  width: 2.2em;
+  height: 2.2em;
 }
 
-.author-info > .name {
-  font-size: .8em;
-}
+/* Content */
 
-.author-info > .handle {
-  font-size: .6em;
-  color: gray;
+.content {
+  padding: 0 var(--card-padding);
 }
 
-/* Content */
-
 .message {
-  margin: .3em 0;
-  word-break: break-all;
+  word-break: break-word;
 }
 
-.timestamp {
-  font-size: .5em;
-  color: gray;
+.comment-details {
+  margin-bottom: calc(var(--card-padding) / 1.5);
+  padding: 0.2em 0;
 }
 
-.message:hover, .timestamp:hover {
-  cursor: pointer;
+.comment-details > * {
+  margin-left: 1.1em;
 }
+
diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html
index e46bdb7..03ba649 100644
--- a/src/app/components/comment/comment.component.html
+++ b/src/app/components/comment/comment.component.html
@@ -1,21 +1,34 @@
 <app-loading *ngIf="!loaded"></app-loading>
 
-<section class="comment rounded-border" *ngIf="loaded">
-	<summary class="author" (click)="goToAuthorProfile()">
-		<img class="round-image" [src]="user.profilePictureURL">
-		<div class="author-info">
-			<div class="name">
+<section class="card flex-row" *ngIf="loaded">
+	<aside class="left-pane">
+		<img class="author-picture round-image hover-half-opacity" [src]="user.profilePictureURL" (click)="goToAuthorProfile()">
+	</aside>
+	<main class="content flexible">
+		<summary class="font-size-dot8 text-vertical-middle hover-half-opacity" (click)="goToAuthorProfile()">
+			<span>
 				{{ user.firstName }} {{ user.lastName }}
-			</div>
-			<div class="handle">
+			</span>
+			<span class="fg-color-faded">
 				@{{ user.userName }}
-			</div>
-		</div>
-	</summary>
-	<article class="message" (click)="goToCommentPage()">
-		{{ comment.message }}
-	</article>
-	<time class="timestamp" (click)="goToCommentPage()">
-		{{ timeCreated }}
-	</time>
+			</span>
+		</summary>
+		<article class="message margin-top-bot-small">
+			{{ comment.message }}
+		</article>
+		<section class="comment-details flex-row flex-justify-end font-size-dot7 faded-slim-border border-bottom-only">
+			<time class="flex-row flex-center-align-items">
+				<img class="img-height-font-size" src="/assets/icons/tabler-icon-calendar-time.svg">&nbsp;
+				<span>
+					{{ timeCreated }}
+				</span>
+			</time>
+		</section>
+		<section class="flex-row justify-children-center flex-center-align-children">
+			<button class="flexible padding-small lighter-hover click-effect border-radius-smaller">
+				<img src="/assets/icons/tabler-icon-link.svg">
+				&nbsp;Share
+			</button>
+		</section>
+	</main>
 </section>