From 9e224efa888c82f429e706b7514e52b76c11b295 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Thu, 4 Jul 2019 00:03:12 -0400
Subject: [PATCH] added DM background color

---
 .../stream/status/status.component.html       | 190 +++++++++---------
 .../stream/status/status.component.scss       |   4 +
 .../stream/status/status.component.ts         |   2 +
 src/sass/_variables.scss                      |   8 +-
 4 files changed, 105 insertions(+), 99 deletions(-)

diff --git a/src/app/components/stream/status/status.component.html b/src/app/components/stream/status/status.component.html
index 714d8498..0b9f9003 100644
--- a/src/app/components/stream/status/status.component.html
+++ b/src/app/components/stream/status/status.component.html
@@ -1,104 +1,106 @@
-<div class="reblog" *ngIf="reblog">
-    <a class="reblog__profile-link" href (click)="openAccount(status.account)"
-        (auxclick)="openUrl(status.account.url)"><span innerHTML="{{ status.account | accountEmoji }}"></span> <img
-            *ngIf="reblog" class="reblog__avatar" src="{{ status.account.avatar }}" /></a> boosted
-</div>
-<div *ngIf="notificationType === 'favourite'">
-    <div class="notification--icon">
-        <fa-icon class="favorite" [icon]="faStar"></fa-icon>
+<div [class.direct-message]="isDirectMessage">
+    <div class="reblog" *ngIf="reblog">
+        <a class="reblog__profile-link" href (click)="openAccount(status.account)"
+            (auxclick)="openUrl(status.account.url)"><span innerHTML="{{ status.account | accountEmoji }}"></span> <img
+                *ngIf="reblog" class="reblog__avatar" src="{{ status.account.avatar }}" /></a> boosted
     </div>
-    <div class="notification--label">
-        <a href class="notification--link" (click)="openAccount(notificationAccount)"
-            innerHTML="{{ notificationAccount  | accountEmoji }}"></a> favorited your status
+    <div *ngIf="notificationType === 'favourite'">
+        <div class="notification--icon">
+            <fa-icon class="favorite" [icon]="faStar"></fa-icon>
+        </div>
+        <div class="notification--label">
+            <a href class="notification--link" (click)="openAccount(notificationAccount)"
+                innerHTML="{{ notificationAccount  | accountEmoji }}"></a> favorited your status
+        </div>
     </div>
-</div>
-<div *ngIf="notificationType === 'reblog'">
-    <div class="notification--icon">
-        <fa-icon class="boost" [icon]="faRetweet"></fa-icon>
+    <div *ngIf="notificationType === 'reblog'">
+        <div class="notification--icon">
+            <fa-icon class="boost" [icon]="faRetweet"></fa-icon>
+        </div>
+        <div class="notification--label">
+            <a href class="notification--link" (click)="openAccount(notificationAccount)"
+                innerHTML="{{ notificationAccount | accountEmoji }}"></a> boosted your status
+        </div>
     </div>
-    <div class="notification--label">
-        <a href class="notification--link" (click)="openAccount(notificationAccount)"
-            innerHTML="{{ notificationAccount | accountEmoji }}"></a> boosted your status
+    <div *ngIf="notificationType === 'poll'">
+        <div class="notification--icon">
+            <fa-icon class="boost" [icon]="faList"></fa-icon>
+        </div>
+        <div class="notification--label">
+            A poll you have voted in has ended
+        </div>
     </div>
-</div>
-<div *ngIf="notificationType === 'poll'">
-    <div class="notification--icon">
-        <fa-icon class="boost" [icon]="faList"></fa-icon>
-    </div>
-    <div class="notification--label">
-        A poll you have voted in has ended
-    </div>
-</div>
-<div class="status">
-    <a href class="status__navigation" title="open status" (click)="textSelected()">
+    <div class="status">
+        <a href class="status__navigation" title="open status" (click)="textSelected()">
 
-    </a>
-    <div [ngClass]="{'notification--status': notificationAccount }">
-        <a href class="status__profile-link" title="{{displayedStatus.account.acct}}"
-            (click)="openAccount(displayedStatus.account)" (auxclick)="openUrl(displayedStatus.account.url)">
-            <img [class.status__avatar--boosted]="reblog || notificationAccount" class="status__avatar"
-                src="{{ displayedStatus.account.avatar }}" />
-            <!-- <img *ngIf="reblog" class="status__avatar--reblog" src="{{ status.account.avatar }}" /> -->
-            <img *ngIf="notificationAccount" class="notification--avatar" src="{{ notificationAccount.avatar }}" />
-            <span class="status__name">
-                <span class="status__name--displayname"
-                    innerHTML="{{displayedStatus.account | accountEmoji}}"></span><span
-                    class="status__name--username">{{displayedStatus.account.acct}}</span>
-            </span>
         </a>
-        <div class="status__created-at" title="{{ displayedStatus.created_at | date: 'full' }}">
-            <a href class="status__created-at--link" (click)="textSelected()" (auxclick)="openUrl(displayedStatus.url)">
-                {{ displayedStatus.created_at | timeAgo | async }}
+        <div [ngClass]="{'notification--status': notificationAccount }">
+            <a href class="status__profile-link" title="{{displayedStatus.account.acct}}"
+                (click)="openAccount(displayedStatus.account)" (auxclick)="openUrl(displayedStatus.account.url)">
+                <img [class.status__avatar--boosted]="reblog || notificationAccount" class="status__avatar"
+                    src="{{ displayedStatus.account.avatar }}" />
+                <!-- <img *ngIf="reblog" class="status__avatar--reblog" src="{{ status.account.avatar }}" /> -->
+                <img *ngIf="notificationAccount" class="notification--avatar" src="{{ notificationAccount.avatar }}" />
+                <span class="status__name">
+                    <span class="status__name--displayname"
+                        innerHTML="{{displayedStatus.account | accountEmoji}}"></span><span
+                        class="status__name--username">{{displayedStatus.account.acct}}</span>
+                </span>
             </a>
+            <div class="status__created-at" title="{{ displayedStatus.created_at | date: 'full' }}">
+                <a href class="status__created-at--link" (click)="textSelected()"
+                    (auxclick)="openUrl(displayedStatus.url)">
+                    {{ displayedStatus.created_at | timeAgo | async }}
+                </a>
+            </div>
+            <div class="status__labels">
+                <div class="status__labels--label status__labels--bot" title="bot" *ngIf="displayedStatus.account.bot">
+                    bot
+                </div>
+                <div class="status__labels--label status__labels--xpost" title="this status was cross-posted"
+                    *ngIf="isCrossPoster">
+                    x-post
+                </div>
+                <div class="status__labels--label status__labels--thread" title="thread" *ngIf="isThread">
+                    thread
+                </div>
+                <div class="status__labels--label status__labels--discuss" title="this status has a discussion"
+                    *ngIf="hasReply">
+                    replies
+                </div>
+                <div class="status__labels--label status__labels--old" title="this status is old" *ngIf="isOld">
+                    old
+                </div>
+            </div>
+
+
+            <!-- <div #content class="status__content" innerHTML="{{displayedStatus.content}}"></div> -->
+
+            <a href class="status__content-warning" *ngIf="isContentWarned" title="show content"
+                (click)="removeContentWarning()">
+                <span class="status__content-warning--title">sensitive content</span>
+                {{ contentWarningText }}
+            </a>
+            <app-databinded-text class="status__content" *ngIf="!isContentWarned" [text]="statusContent"
+                (accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)"
+                (textSelected)="textSelected()"></app-databinded-text>
+
+            <app-poll class="status__poll" *ngIf="!isContentWarned && displayedStatus.poll"
+                [poll]="displayedStatus.poll" [statusWrapper]="displayedStatusWrapper"></app-poll>
+
+            <app-card class="status__card" *ngIf="!isContentWarned && displayedStatus.card && !hasAttachments"
+                [card]="displayedStatus.card"></app-card>
+
+            <app-attachements *ngIf="!isContentWarned && hasAttachments" class="attachments"
+                [attachments]="displayedStatus.media_attachments">
+            </app-attachements>
+
+            <app-action-bar #appActionBar [statusWrapper]="displayedStatusWrapper"
+                (browseThreadEvent)="browseThread($event)" (cwIsActiveEvent)="changeCw($event)"
+                (replyEvent)="openReply()"></app-action-bar>
         </div>
-        <div class="status__labels">
-            <div class="status__labels--label status__labels--bot" title="bot" *ngIf="displayedStatus.account.bot">
-                bot
-            </div>
-            <div class="status__labels--label status__labels--xpost" title="this status was cross-posted"
-                *ngIf="isCrossPoster">
-                x-post
-            </div>
-            <div class="status__labels--label status__labels--thread" title="thread" *ngIf="isThread">
-                thread
-            </div>
-            <div class="status__labels--label status__labels--discuss" title="this status has a discussion"
-                *ngIf="hasReply">
-                replies
-            </div>
-            <div class="status__labels--label status__labels--old" title="this status is old" *ngIf="isOld">
-                old
-            </div>
-        </div>
-
-
-        <!-- <div #content class="status__content" innerHTML="{{displayedStatus.content}}"></div> -->
-
-        <a href class="status__content-warning" *ngIf="isContentWarned" title="show content"
-            (click)="removeContentWarning()">
-            <span class="status__content-warning--title">sensitive content</span>
-            {{ contentWarningText }}
-        </a>
-        <app-databinded-text class="status__content" *ngIf="!isContentWarned" [text]="statusContent"
-            (accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)"
-            (textSelected)="textSelected()"></app-databinded-text>
-
-        <app-poll class="status__poll" *ngIf="!isContentWarned && displayedStatus.poll" [poll]="displayedStatus.poll"
-            [statusWrapper]="displayedStatusWrapper"></app-poll>
-
-        <app-card class="status__card" *ngIf="!isContentWarned && displayedStatus.card && !hasAttachments"
-            [card]="displayedStatus.card"></app-card>
-
-        <app-attachements *ngIf="!isContentWarned && hasAttachments" class="attachments"
-            [attachments]="displayedStatus.media_attachments">
-        </app-attachements>
-
-        <app-action-bar #appActionBar [statusWrapper]="displayedStatusWrapper" 
-            (browseThreadEvent)="browseThread($event)"
-            (cwIsActiveEvent)="changeCw($event)"
-            (replyEvent)="openReply()"></app-action-bar>
+        <app-create-status *ngIf="replyingToStatus" [statusReplyingToWrapper]="displayedStatusWrapper"
+            (onClose)="closeReply()">
+        </app-create-status>
     </div>
-    <app-create-status *ngIf="replyingToStatus" [statusReplyingToWrapper]="displayedStatusWrapper"
-        (onClose)="closeReply()">
-    </app-create-status>
 </div>
\ No newline at end of file
diff --git a/src/app/components/stream/status/status.component.scss b/src/app/components/stream/status/status.component.scss
index 84f5892f..f1e64923 100644
--- a/src/app/components/stream/status/status.component.scss
+++ b/src/app/components/stream/status/status.component.scss
@@ -24,6 +24,10 @@
     }
 }
 
+.direct-message {
+    background-color: $direct-message-background;
+}
+
 .status {
     margin: 0;
     padding: 0;
diff --git a/src/app/components/stream/status/status.component.ts b/src/app/components/stream/status/status.component.ts
index 2ea2420d..9e2ff411 100644
--- a/src/app/components/stream/status/status.component.ts
+++ b/src/app/components/stream/status/status.component.ts
@@ -35,6 +35,7 @@ export class StatusComponent implements OnInit {
     isContentWarned: boolean;
     hasReply: boolean;
     contentWarningText: string;
+    isDirectMessage: boolean;
 
     @Output() browseAccountEvent = new EventEmitter<string>();
     @Output() browseHashtagEvent = new EventEmitter<string>();
@@ -61,6 +62,7 @@ export class StatusComponent implements OnInit {
             this.displayedStatus = this.status;
         }
 
+        this.isDirectMessage = this.displayedStatus.visibility === 'direct';
         this.displayedStatusWrapper = new StatusWrapper(this.displayedStatus, value.provider);
 
         this.checkLabels(this.displayedStatus);
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index b8ed73c2..34384e5c 100644
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -54,11 +54,9 @@ $column-background: #0f111a;
 
 $card-border-color: #1e2435;
 
-$context-menu-background: #090b10;
 $context-menu-background: #d9e1e8;
-$context-menu-background-hover: #16171d;
 $context-menu-background-hover: #a9c9e6;
-$context-menu-font-color: #4e5572;
 $context-menu-font-color: #000000;
-$context-menu-border-color: #4e5572;
-$context-menu-border-color: #c0cdd9;
\ No newline at end of file
+$context-menu-border-color: #c0cdd9;
+
+$direct-message-background: #090a0f;
\ No newline at end of file