added names in floating header

src/app/components/stream/user-profile/user-profile.component.html

@@ -8,6 +8,12 @@
                         src="{{displayedAccount.avatar}}" alt="header" />
                 </a>
 
+                <div class="profile__floating-header__names">
+                    <h2 class="profile__floating-header__names__display-name" innerHTML="{{displayedAccount | accountEmoji }}"
+                        title="{{displayedAccount.display_name}}"></h2>
+                    <a class="profile__floating-header__names__fullhandle" href="{{displayedAccount.url}}" target="_blank" title="{{displayedAccount.acct}}">@{{displayedAccount.acct}}</a>
+                </div>
+
                 <div class="profile__floating-header__follow" *ngIf="relationship && !displayedAccount.moved">
                     <app-waiting-animation *ngIf="loadingRelationShip"
                         class="waiting-icon profile-header__follow--waiting">

src/app/components/stream/user-profile/user-profile.component.scss

@@ -4,6 +4,8 @@
 $validated-font-color: #4fde23;
 $validated-background: #164109;
 $header-height: 160px;
+$full-alias-color: rgb(201, 201, 201);
+$full-alias-color-hover: white;
 
 .outer-profile {
     height: calc(100%);
@@ -59,6 +61,34 @@ $header-height: 160px;
             border-radius: 2px;
         }
 
+        &__names {
+            position: absolute;
+            top: 6px;
+            left: 56px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            height: 46px;
+            width: calc(100% - 44px - 65px);
+            padding: 3px 5px 0px 3px;
+
+            &__display-name {
+                font-size: 15px;
+                color: white;
+                margin: 0 0 2px 0;
+            }
+
+            &__fullhandle {                
+                transition: all .2s;
+                font-size: 15px;
+                color: $full-alias-color;
+
+                &:hover {
+                    color: $full-alias-color-hover;
+                }
+            }
+        }
+
         &__follow {
             // transition: all .4s;
             position: absolute;
@@ -135,14 +165,19 @@ $header-height: 160px;
         }
 
         &__fullhandle a {
+            transition: all .2s;
             position: absolute;
             top: 130px;
             left: 15px;
             width: calc(100% - 20px);
             text-overflow: ellipsis;
             overflow: hidden;
-            color: white;
+            color: $full-alias-color;
-        }
+
+            &:hover {
+                color: $full-alias-color-hover;
+            }
+        }      
 
         &__follow {
             // transition: all .4s;