creation of components for displaying profiles/threads/hashtags.

src/app/app.module.ts

@@ -35,6 +35,9 @@ import { ManageAccountComponent } from "./components/floating-column/manage-acco
 import { ActionBarComponent } from './components/stream/status/action-bar/action-bar.component';
 import { WaitingAnimationComponent } from './components/waiting-animation/waiting-animation.component';
 import { ReplyToStatusComponent } from './components/stream/status/reply-to-status/reply-to-status.component';
+import { UserProfileComponent } from './components/stream/user-profile/user-profile.component';
+import { ThreadComponent } from './components/stream/thread/thread.component';
+import { HashtagComponent } from './components/stream/hashtag/hashtag.component';
 
 const routes: Routes = [
   { path: "", redirectTo: "home", pathMatch: "full" },
@@ -62,7 +65,10 @@ const routes: Routes = [
     SearchComponent,
     ActionBarComponent,
     WaitingAnimationComponent,
-    ReplyToStatusComponent
+    ReplyToStatusComponent,
+    UserProfileComponent,
+    ThreadComponent,
+    HashtagComponent
   ],
   imports: [
     BrowserModule,

src/app/components/stream/hashtag/hashtag.component.html

@@ -0,0 +1,3 @@
+<p>
+  hashtag works!
+</p>

src/app/components/stream/hashtag/hashtag.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HashtagComponent } from './hashtag.component';
+
+describe('HashtagComponent', () => {
+  let component: HashtagComponent;
+  let fixture: ComponentFixture<HashtagComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HashtagComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HashtagComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/stream/hashtag/hashtag.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-hashtag',
+  templateUrl: './hashtag.component.html',
+  styleUrls: ['./hashtag.component.scss']
+})
+export class HashtagComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/stream/stream.component.html

@@ -1,11 +1,27 @@
 <div class="stream-column">
-  <div class="stream-column__stream-header">
-    <a href title="return to top" (click)="goToTop()"><h1>{{ streamElement.name.toUpperCase() }}</h1></a>
-  </div>
-  <div class="stream-toots flexcroll" #statusstream  (scroll)="onScroll()"> <!-- data-simplebar  -->
-    <div class="stream-toots__status" *ngFor="let statusWrapper of statuses">
-      <app-status [statusWrapper]="statusWrapper" ></app-status>
+    <div class="stream-overlay">
+        <div class="stream-overlay__header">
+            <a href class="overlay-close">CLOSE</a>
+            <a href class="overlay-previous">PREV</a>
+            <a href class="overlay-next">NEXT</a>
+        </div>
+        <div class="stream-overlay__title">
+            Account
+        </div>
+        <app-user-profile></app-user-profile>
+        <app-hashtag></app-hashtag>
+        <app-thread></app-thread>
     </div>
-  </div>
-</div>
 
+    <div class="stream-column__stream-header">
+        <a href title="return to top" (click)="goToTop()">
+            <h1>{{ streamElement.name.toUpperCase() }}</h1>
+        </a>
+    </div>
+    <div class="stream-toots flexcroll" #statusstream (scroll)="onScroll()">
+        <!-- data-simplebar  -->
+        <div class="stream-toots__status" *ngFor="let statusWrapper of statuses">
+            <app-status [statusWrapper]="statusWrapper"></app-status>
+        </div>
+    </div>
+</div>

src/app/components/stream/stream.component.scss

@@ -1,5 +1,7 @@
 @import "variables";
 .stream-column {
+    position: relative;
+
     width: $stream-column-width;
     height: calc(100%);
     background-color: $column-color;
@@ -7,7 +9,7 @@
     &__stream-header {
         width: calc(100%);
         height: 30px;
-        background-color: black;
+        background-color: $column-header-background-color;
         border-bottom: 1px solid black;
         & h1 {
             color: whitesmoke;
@@ -48,3 +50,56 @@
         // -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
     }
 }
+
+.stream-overlay {
+    position: absolute;
+
+    z-index: 50;
+    width: $stream-column-width;
+    height: calc(100%);
+    background-color: rgba(#ff0000, 0.3);
+
+
+    // margin: 0 0 0 $stream-column-separator;
+    // outline: 1px red solid;
+    // float: left;
+    &__header {
+        width: calc(100%);
+        height: 30px;
+        background-color: $column-header-background-color;
+        padding: 6px 10px 0 10px;
+        & a {         
+            color: whitesmoke;
+            font-size: 0.8em;
+            font-weight: normal;
+            margin: 0;
+        }
+    }
+
+    &__title {
+        width: calc(100%);
+        height: 30px;
+        background-color: $column-header-background-color;
+        border-top: 1px solid whitesmoke;
+        border-bottom: 1px solid whitesmoke;
+        padding: 3px 10px 0 10px;
+    }
+}
+
+.overlay-previous {
+    display: block;
+    float: left;
+}
+
+
+.overlay-next {
+    display: block;
+    float: right;
+    padding-right: 20px;
+}
+
+
+.overlay-close {
+    display: block;
+    float: right;
+}

src/app/components/stream/thread/thread.component.html

@@ -0,0 +1,3 @@
+<p>
+  thread works!
+</p>

src/app/components/stream/thread/thread.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ThreadComponent } from './thread.component';
+
+describe('ThreadComponent', () => {
+  let component: ThreadComponent;
+  let fixture: ComponentFixture<ThreadComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ThreadComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ThreadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/stream/thread/thread.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-thread',
+  templateUrl: './thread.component.html',
+  styleUrls: ['./thread.component.scss']
+})
+export class ThreadComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -0,0 +1,3 @@
+<p>
+  user-profile works!
+</p>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserProfileComponent } from './user-profile.component';
+
+describe('UserProfileComponent', () => {
+  let component: UserProfileComponent;
+  let fixture: ComponentFixture<UserProfileComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserProfileComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-user-profile',
+  templateUrl: './user-profile.component.html',
+  styleUrls: ['./user-profile.component.scss']
+})
+export class UserProfileComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/sass/_variables.scss

@@ -6,7 +6,7 @@ $color-primary: #141824;
 $color-secondary: #090b10;
 
 $column-color: #0f111a;
-
+$column-header-background-color: black;