diff --git a/src/app/components/floating-column/manage-account/notifications/notifications.component.html b/src/app/components/floating-column/manage-account/notifications/notifications.component.html
index 8ec19e05..69ce399f 100644
--- a/src/app/components/floating-column/manage-account/notifications/notifications.component.html
+++ b/src/app/components/floating-column/manage-account/notifications/notifications.component.html
@@ -23,16 +23,21 @@
+
+
+
+ {{ notification.account.display_name }}
+ @{{ notification.account.acct }}
+
-
diff --git a/src/app/components/floating-column/manage-account/notifications/notifications.component.scss b/src/app/components/floating-column/manage-account/notifications/notifications.component.scss
index 02d7ed7e..177fdae3 100644
--- a/src/app/components/floating-column/manage-account/notifications/notifications.component.scss
+++ b/src/app/components/floating-column/manage-account/notifications/notifications.component.scss
@@ -49,4 +49,42 @@
.followed {
color: $boost-color;
+}
+
+.follow-account {
+ padding: 5px;
+ height: 60px;
+ width: calc(100%);
+ overflow: hidden;
+ display: block;
+ position: relative;
+ text-decoration: none;
+
+ &__avatar {
+ float: left;
+ margin: 0 0 0 10px;
+ width: 45px;
+ height: 45px;
+ border-radius: 2px;
+ }
+
+ $acccount-info-left: 70px;
+ &__display-name {
+ position: absolute;
+ top: 7px;
+ left: $acccount-info-left;
+ color: whitesmoke;
+ }
+
+ &:hover &__display-name {
+ text-decoration: underline;
+ }
+
+ &__acct {
+ position: absolute;
+ top: 27px;
+ left: $acccount-info-left;
+ font-size: 13px;
+ color: $status-links-color;
+ }
}
\ No newline at end of file
diff --git a/src/app/components/floating-column/manage-account/notifications/notifications.component.ts b/src/app/components/floating-column/manage-account/notifications/notifications.component.ts
index 8dcb35dc..34051570 100644
--- a/src/app/components/floating-column/manage-account/notifications/notifications.component.ts
+++ b/src/app/components/floating-column/manage-account/notifications/notifications.component.ts
@@ -117,7 +117,15 @@ export class NotificationsComponent implements OnInit, OnDestroy {
this.isLoading = false;
});
}
+
+ openAccount(account: Account): boolean {
+ let accountName = account.acct;
+ if (!accountName.includes('@'))
+ accountName += `@${account.url.replace('https://', '').split('/')[0]}`;
+ this.browseAccountEvent.next(accountName);
+ return false;
+ }
browseAccount(accountName: string): void {
this.browseAccountEvent.next(accountName);