Added style for comment input

Author: SundeepChand

src/assets/scss/components/commentInput.scss

@@ -0,0 +1,46 @@
+.comment {
+  &-form {
+    margin: 16px 0px;
+  }
+
+  &-input {
+    align-items: flex-end;
+    border: 1px solid $light-gray;
+    display: flex;
+    margin-bottom: 5px;
+    width: fit-content;
+
+    textarea {
+      border: 0;
+      box-shadow: 0 0 2px 0 $dark-color inset;
+      resize: none;
+    }
+  }
+}
+
+.file {
+  height: 0.1px;
+  opacity: 0;
+  position: absolute;
+  width: 0.1px;
+
+  &-input {
+    background: $eos-white;
+    display: flex;
+    flex-direction: column-reverse;
+    height: 84px;
+  }
+
+  &-button-label {
+    border-top: 0.2px solid $light-gray;
+    display: block;
+    height: 24px;
+    position: relative;
+    text-align: center;
+    width: 35px;
+  }
+
+  &-button-label:hover {
+    cursor: pointer;
+  }
+}

src/assets/scss/components/comments.scss

@@ -26,11 +26,3 @@
     }
   }
 }
-
-.comment-form {
-  margin: 16px 0px;
-
-  textarea {
-    resize: none;
-  }
-}

src/assets/scss/components/index.scss

@@ -6,6 +6,7 @@
 @import 'dragdrop';
 @import 'timeline';
 @import 'storiesList';
+@import 'commentInput';
 @import 'comments';
 @import 'pagination';
 @import 'modal';

src/components/CommentInput.js

@@ -45,24 +45,30 @@ const CommentInput = (props) => {
       className='comment-form'
       onSubmit={handleSubmitReply(addCommentReply)}
     >
-      <div className='field'>
+      <div className='comment-input'>
         <textarea
-          rows='4'
-          cols='16'
+          rows='5'
+          cols='25'
           name='Comments'
           ref={registerReply({ required: true })}
           value={commentReply}
           onChange={(e) => setCommentReply(e.target.value)}
         ></textarea>
-        <input
-          type='file'
-          name='File'
-          multiple={true}
-          onChange={handleFileChange}
-        />
-        <div className='preview-container'>{mediaPreview}</div>
-        {errorsReply.addReply && <FormError message='Reply cannot be empty' />}
+        <div className='file-input'>
+          <input
+            type='file'
+            id='file'
+            className='file'
+            multiple={true}
+            onChange={handleFileChange}
+          />
+          <label htmlFor='file' className='file-button-label'>
+            <i className='eos-icons'>attachment</i>
+          </label>
+        </div>
       </div>
+      <div className='preview-container'>{mediaPreview}</div>
+      {errorsReply.addReply && <FormError message='Reply cannot be empty' />}
       <Button className='btn btn-default'>Add Reply</Button>
     </form>
   )