From 7aed4569e5c1c54294c7ba99a3c9abc710c56f32 Mon Sep 17 00:00:00 2001
From: Nicolas Constant <github@nicolas-constant.com>
Date: Sat, 13 Oct 2018 18:23:09 -0400
Subject: [PATCH] enhancing reply design

---
 .../reply-to-status.component.html            |  2 +-
 .../reply-to-status.component.scss            | 34 +++++++++----------
 .../reply-to-status.component.ts              |  2 +-
 .../components/stream/stream.component.scss   |  2 +-
 src/sass/_variables.scss                      | 12 +++++--
 5 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/app/components/stream/status/reply-to-status/reply-to-status.component.html b/src/app/components/stream/status/reply-to-status/reply-to-status.component.html
index c3250f9d..1c7fe93c 100644
--- a/src/app/components/stream/status/reply-to-status/reply-to-status.component.html
+++ b/src/app/components/stream/status/reply-to-status/reply-to-status.component.html
@@ -1,5 +1,5 @@
 <form (ngSubmit)="onSubmit()">
-    <textarea [(ngModel)]="status" name="status" class="form-control form-control-sm" style="min-width: 100%" rows="5" required placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"></textarea>
+    <textarea [(ngModel)]="status" name="status" class="form-control form-control-sm" rows="5" required placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"></textarea>
 
     <select class="form-control form-control-sm form-control--privacy" id="privacy" name="privacy" [(ngModel)]="selectedPrivacy">
         <option *ngFor="let p of privacyList" [ngValue]="p">{{p}}</option>
diff --git a/src/app/components/stream/status/reply-to-status/reply-to-status.component.scss b/src/app/components/stream/status/reply-to-status/reply-to-status.component.scss
index a5fd3b41..b1abcad9 100644
--- a/src/app/components/stream/status/reply-to-status/reply-to-status.component.scss
+++ b/src/app/components/stream/status/reply-to-status/reply-to-status.component.scss
@@ -1,16 +1,22 @@
 @import "variables";
 @import "panel";
 @import "buttons";
-
-
 $btn-send-status-width: 60px;
+.form-control {
+    margin: 0 0 5px 5px;
+    width: calc(100% - 10px);
+    background-color: $column-color;
+    border-color: $status-secondary-color;
+    color: #fff;
+    font-size: $default-font-size;
+    
+    &:focus {
+        box-shadow: none;
+    }
 
-.form-control { 
-    margin-bottom: 5px;
-
-    &--privacy{
-        display: inline-block; 
-        width: calc(100% - 5px - #{$btn-send-status-width});
+    &--privacy {
+        display: inline-block;
+        width: calc(100% - 15px - #{$btn-send-status-width});
     }
 }
 
@@ -19,18 +25,12 @@ $btn-send-status-width: 60px;
     width: $btn-send-status-width;
     position: relative;
     top: -1px;
-    left: 5px;
-    // background-color: orange;
+    left: 5px; // background-color: orange;
     // border-color: orange;
     // color: black;
-    font-weight: 500;
-
-    // &:hover {
-
+    font-weight: 500; // &:hover {
     // }
-
     // &:focus {
     //     border-color: darkblue;
     // }
-}
-
+}
\ No newline at end of file
diff --git a/src/app/components/stream/status/reply-to-status/reply-to-status.component.ts b/src/app/components/stream/status/reply-to-status/reply-to-status.component.ts
index 81aee556..80b11286 100644
--- a/src/app/components/stream/status/reply-to-status/reply-to-status.component.ts
+++ b/src/app/components/stream/status/reply-to-status/reply-to-status.component.ts
@@ -56,7 +56,7 @@ export class ReplyToStatusComponent implements OnInit {
         let spoiler =  this.statusReplyingTo.spoiler_text;
 
         for (const acc of selectedAccounts) {
-            this.mastodonService.postNewStatus(acc, this.status, visibility, spoiler)
+            this.mastodonService.postNewStatus(acc, this.status, visibility, spoiler, this.statusReplyingTo.id)
                 .then((res: Status) => {
                     console.log(res);
                     this.status = '';
diff --git a/src/app/components/stream/stream.component.scss b/src/app/components/stream/stream.component.scss
index 13fd9e62..e840844e 100644
--- a/src/app/components/stream/stream.component.scss
+++ b/src/app/components/stream/stream.component.scss
@@ -2,7 +2,7 @@
 .stream-column {
     width: $stream-column-width;
     height: calc(100%);
-    background-color: #0f111a;
+    background-color: $column-color;
     margin: 0 0 0 $stream-column-separator;
     &__stream-header {
         width: calc(100%);
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index e8b45f14..a39f8099 100644
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -4,16 +4,22 @@ $font-link-primary: #595c67;
 $font-link-primary-hover: #8f93a2;
 $color-primary: #141824;
 $color-secondary: #090b10;
+
+$column-color: #0f111a;
+
+
+
+
 $default-font-size: 15px;
 $small-font-size: 12px;
-$btn-primary-color: #515a62;
-$btn-primary-color: #254d6f;
+// $btn-primary-color: #515a62;
+// $btn-primary-color: #254d6f;
 $btn-primary-color: #444f74;
 $btn-primary-color-hover: darken($btn-primary-color, 10);
 $btn-primary-font-color: white;
 // TEST 1
 $status-primary-color: #fff;
-$status-secondary-color: #353e64;
+// $status-secondary-color: #353e64;
 $status-secondary-color: #4e5572;
 $status-links-color: #d9e1e8;
 // $status-primary-color : #8f93a2;