added emoji link

src/app/components/create-status/create-status.component.html

@@ -2,9 +2,15 @@
     <input [(ngModel)]="title" type="text" class="form-control form-control-sm status-editor__title" name="title"
         autocomplete="off" placeholder="Title, Content Warning (optional)" title="title, content warning (optional)" />
 
+        <a class="status-editor__emoji" title="Insert Emoji"
+            #emojiButton href (click)="openEmojiPicker($event)">
+            <img class="status-editor__emoji--image" src="/assets/emoji/72x72/1f636.png">
+        </a>
+
     <textarea #reply [(ngModel)]="status" name="status" class="form-control form-control-sm status-editor__content"
         rows="5" required title="content" placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"
-        (keydown)="handleKeyDown($event)" (blur)="statusTextEditorLostFocus()"></textarea>
+        (keydown)="handleKeyDown($event)" (blur)="statusTextEditorLostFocus()">
+    </textarea>
 
     <div class="status-editor__mention-error" *ngIf="mentionTooFarAwayError">Error: mentions must be placed closer to
         the
@@ -58,8 +64,4 @@
         </ng-template>
     </context-menu>
     <app-media></app-media>
-</form>
-
-
-<a #emojiButton href (click)="openEmojiPicker($event)">EMOJI</a>
-<a href (click)="closeEmoji()">CLOSE</a>
+</form>

src/app/components/create-status/create-status.component.scss

@@ -40,6 +40,35 @@ $counter-width: 90px;
         margin-bottom: 0;
     }
 
+    &__emoji {
+        position: absolute;
+        top: 37px;
+        right: 10px;
+
+        &--image {
+            transition: all .2s;
+
+            width: 24px;
+            height: 24px;
+
+            -webkit-filter: grayscale(100%);
+            -moz-filter: grayscale(100%);
+            -ms-filter: grayscale(100%);
+            -o-filter: grayscale(100%);
+            filter: gray;
+            opacity: .7;
+
+            &:hover {
+                filter: none;
+                -webkit-filter: grayscale(0%);
+                -moz-filter: grayscale(0%);
+                -ms-filter: grayscale(0%);
+                -o-filter: grayscale(0%);
+                opacity: 1;
+            }
+        }
+    }
+
     &__content {
         border-width: 0;
         background-color: $status-editor-background;
@@ -59,6 +88,7 @@ $counter-width: 90px;
         height: 110px;
 
         padding-bottom: 10px;
+        padding-right: 30px;
         //border-bottom: 1px solid black;
 
         &::-webkit-resizer {
@@ -140,8 +170,8 @@ $counter-width: 90px;
     width: $btn-send-status-width;
     position: relative;
     top: -1px;
-    left: 5px; 
-    font-weight: 500; 
+    left: 5px;
+    font-weight: 500;
 }
 
 .context-menu-icon {

src/app/components/create-status/create-status.component.ts

@@ -666,6 +666,7 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
         compRef.instance.emojiSelectedEvent.subscribe((emoji) => {
             if(emoji){
                 this.status += ` ${emoji}`;
+                this.overlayRef.dispose();
             }            
         });