Updated Comment Reply UI

Author: SundeepChand

src/assets/scss/components/dragdrop.scss

@@ -21,33 +21,51 @@
   border-color: $primary;
 }
 
-.preview-root {
-  border: 1px solid #eaeaea;
-  border-radius: 2px;
-  box-sizing: border-box;
-  display: inline-flex;
-  height: 150px;
-  margin-bottom: 8px;
-  margin-right: 8px;
-  padding: 4px;
-  width: 150px;
-}
+.preview {
+  &-root {
+    border: 1px solid #eaeaea;
+    border-radius: 2px;
+    box-sizing: border-box;
+    display: inline-flex;
+    height: 150px;
+    margin-bottom: 8px;
+    margin-right: 8px;
+    padding: 4px;
+    position: relative;
+    width: 150px;
+  }
 
-.preview-inner {
-  display: flex;
-  min-width: 0px;
-  overflow: hidden;
-}
+  &-inner {
+    display: flex;
+    min-width: 0px;
+    overflow: hidden;
+  }
 
-.preview-image {
-  display: block;
-  height: 100%;
-  width: auto;
-}
+  &-image {
+    display: block;
+    height: 100%;
+    width: auto;
+  }
 
-.preview-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin-top: 16px;
+  &-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-top: 16px;
+  }
+
+  &-remove-button {
+    background: $dark-gray-transparent;
+    border: 0;
+    border-radius: 50%;
+    color: $eos-white;
+    font-weight: $font-weight-close;
+    position: absolute;
+    right: 4px;
+    top: 4px;
+  }
+
+  &-remove-button:hover {
+    cursor: pointer;
+  }
 }

src/assets/scss/variables/colors.scss

@@ -4,6 +4,7 @@ $light-blue: $eos-cerulean-500;
 $dark-color: #1A2A3A;
 $gray-bg: #eaeaea;
 $light-gray: #777777;
+$dark-gray-transparent: rgba(71, 71, 71, 0.808);
 $border-gray: #EDEFF0;
 $light-green: #66DC71;
 $alert: #E6001A;

src/assets/scss/variables/type.scss

@@ -13,6 +13,7 @@ $font-size-small: 12px;
 $font-size-cookies-mobile: 13px;
 $font-size-heading-404: 10em;
 $font-weight-404: 600;
+$font-weight-close: 600;
 $font-weight: 300;
 $line-height: 1.5em;
 $color: #141823;

src/components/CommentInput.js

@@ -19,8 +19,18 @@ const CommentInput = (props) => {
     handleSubmit: handleSubmitReply
   } = useForm()
 
+  const removeFile = (name) => {
+    setAttachments(attachments.filter((attachment) => attachment.name !== name))
+  }
+
   const mediaPreview = attachments.map((file) => (
     <div className='preview-root' key={file.name}>
+      <button
+        className='preview-remove-button'
+        onClick={() => removeFile(file.name)}
+      >
+        x
+      </button>
       <div className='preview-inner'>
         <img src={file.preview} className='preview-image' alt='preview' />
       </div>
@@ -67,8 +77,8 @@ const CommentInput = (props) => {
           </label>
         </div>
       </div>
+      {errorsReply.Comments && <FormError message='Reply cannot be empty' />}
       <div className='preview-container'>{mediaPreview}</div>
-      {errorsReply.addReply && <FormError message='Reply cannot be empty' />}
       <Button className='btn btn-default'>Add Reply</Button>
     </form>
   )