added follow related icons and informations

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

@@ -1,20 +1,40 @@
-<div class="profile ">
+<div class="profile flexcroll">
     <app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
 
-    <div class="profile-sub-header flexcroll">
+
     <div *ngIf="account" class="profile-header" [ngStyle]="{'background-image':'url('+account.header+')'}">
         <div class="profile-header__inner">
             <!-- <img class="profile-header__header" src="{{account.header}}" alt="header" /> -->
             <img class="profile-header__avatar" src="{{account.avatar}}" alt="header" />
             <h2 class="profile-header__display-name">{{account.display_name}}</h2>
             <h2 class="profile-header__fullhandle"><a href="{{account.url}}" target="_blank">@{{account.acct}}</a></h2>
+
+            <div class="profile-header__follow">
+                <button class="profile-header__follow--button profile-header__follow--unfollowed" title="follow"
+                    (click)="folow()">
+                    <fa-icon [icon]="faUserRegular"></fa-icon>
+                </button>
+                <button class="profile-header__follow--button profile-header__follow--followed" title="unfollow"
+                    (click)="unfolow()">
+                    <fa-icon [icon]="faUserCheck"></fa-icon>
+                </button>
+                <button class="profile-header__follow--button profile-header__follow--followed" title="pending"
+                    (click)="unfolow()">
+                    <fa-icon [icon]="faHourglassHalf"></fa-icon>
+                </button>
             </div>
+            <div class="profile-header__state">
+                <div class="profile-header__state--data">follows you</div>
+                <div class="profile-header__state--data">blocked</div>
             </div>
 
+        </div>
+    </div>
+    <div class="profile-sub-header ">
         <div *ngIf="account && hasNote" class="profile-description">
             <app-databinded-text class="status__content" [textIsSelectable]="false" [text]="account.note"
-                (accountSelected)="browseAccount($event)" 
-                (hashtagSelected)="browseHashtag($event)"></app-databinded-text>
+                (accountSelected)="browseAccount($event)" (hashtagSelected)="browseHashtag($event)">
+            </app-databinded-text>
             <!-- <p innerHTML="{{account.note}}"></p> -->
         </div>
         <div class="profile-statuses">
@@ -25,10 +45,9 @@
             </div>
 
             <div *ngFor="let statusWrapper of statuses">
-                <app-status [statusWrapper]="statusWrapper" 
-                    (browseHashtagEvent)="browseHashtag($event)"
-                    (browseAccountEvent)="browseAccount($event)"
-                    (browseThreadEvent)="browseThread($event)"></app-status> 
+                <app-status [statusWrapper]="statusWrapper" (browseHashtagEvent)="browseHashtag($event)"
+                    (browseAccountEvent)="browseAccount($event)" (browseThreadEvent)="browseThread($event)">
+                </app-status>
             </div>
         </div>
     </div>

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

@@ -1,4 +1,5 @@
 @import "variables";
+@import "mixins";
 @import "commons";
 
 $header-height: 160px;
@@ -6,12 +7,14 @@ $header-height: 160px;
 .profile {
     // overflow: auto;
     height: calc(100%);
+    overflow: auto;
 
     &-header {
         background-size: cover;
         position: relative; // height: 140px;
         overflow: hidden; // background-color: black;
         border-bottom: 1px solid black;
+
         & h2 {
             font-size: $default-font-size;
         }
@@ -31,20 +34,59 @@ $header-height: 160px;
             position: absolute;
             top: 105px;
             left: 15px;
+            width: calc(100% - 30px);     
+            overflow: hidden;  
             color: white;
         }
         &__fullhandle a {
             position: absolute;
             top: 130px;
             left: 15px;
+            width: calc(100% - 30px);     
+            overflow: hidden;       
             color: white;
         }
+        &__follow{
+            position: absolute;
+            top: 10px;
+            right: 15px;
+            font-size: 28px;
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            text-rendering: optimizeLegibility;
+
+            &--button{
+                @include clearButton;
+            }
+
+            &--unfollowed {
+
+            }
+
+            &--followed {
+                color: #38abff;
+                color: #5fbcff;
+                color: #85ccff;
+            }
+        }
+        &__state {
+            position: absolute;
+            top: 50px;
+            right: 15px;
+            font-size: 12px;
+
+            &--data{               
+               text-align: right;
+            }
+        }
+    
     }
 
     &-sub-header {
-        overflow: auto;
-        height: calc(100% - #{$header-height});
-        height: calc(100%);
+        // overflow: auto;
+        // height: calc(100% - #{$header-height});
+
+        // height: calc(100%);
         // height: calc(20% - 190px);
         // height: 150px;
         // border: 1px solid greenyellow;

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

@@ -1,5 +1,7 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { HttpErrorResponse } from '@angular/common/http';
+import { faUser, faHourglassHalf, faUserCheck } from "@fortawesome/free-solid-svg-icons";
+import { faUser as faUserRegular } from "@fortawesome/free-regular-svg-icons";
 
 import { Account, Status } from "../../../services/models/mastodon.interfaces";
 import { MastodonService } from '../../../services/mastodon.service';
@@ -13,6 +15,10 @@ import { NotificationService } from '../../../services/notification.service';
     styleUrls: ['./user-profile.component.scss']
 })
 export class UserProfileComponent implements OnInit {
+    faUser = faUser;
+    faUserRegular = faUserRegular;
+    faHourglassHalf = faHourglassHalf;
+    faUserCheck = faUserCheck;
 
     account: Account;
     hasNote: boolean;