From 0e14bd68d19d67f1d9f974387e9eef6f36b8c270 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Fri, 14 Jan 2022 02:30:27 +0100
Subject: [PATCH] Add removing image button (#189)

Co-authored-by: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
---
 .../src/components/Chat/ChatInput.tsx         | 27 ++++++++++++++++---
 .../src/components/Icons/ClearIconFull.tsx    |  4 +++
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/packages/react-chat/src/components/Chat/ChatInput.tsx b/packages/react-chat/src/components/Chat/ChatInput.tsx
index 21ef3864..e0312e14 100644
--- a/packages/react-chat/src/components/Chat/ChatInput.tsx
+++ b/packages/react-chat/src/components/Chat/ChatInput.tsx
@@ -13,7 +13,9 @@ import { useModal } from "../../contexts/modalProvider";
 import { useNarrow } from "../../contexts/narrowProvider";
 import { Reply } from "../../hooks/useReply";
 import { uintToImgUrl } from "../../utils/uintToImgUrl";
+import { ClearBtn } from "../Form/inputStyles";
 import { ClearSvg } from "../Icons/ClearIcon";
+import { ClearSvgFull } from "../Icons/ClearIconFull";
 import { EmojiIcon } from "../Icons/EmojiIcon";
 import { GifIcon } from "../Icons/GifIcon";
 import { PictureIcon } from "../Icons/PictureIcon";
@@ -254,10 +256,12 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
         <Row style={{ height: `${inputHeight + (image ? 73 : 0)}px` }}>
           <InputWrapper>
             {image && (
-              <ImagePreview
-                src={image}
-                onClick={() => setImageUint(undefined)}
-              />
+              <ImageWrapper>
+                <ImagePreview src={image} />
+                <ClearImgBtn onClick={() => setImageUint(undefined)}>
+                  <ClearSvgFull width={20} height={20} />
+                </ClearImgBtn>
+              </ImageWrapper>
             )}
             {narrow && !identity ? (
               <JoinBtn onClick={() => setCreationStartModal(true)}>
@@ -359,6 +363,10 @@ const InputButtons = styled.div`
   }
 `;
 
+const ImageWrapper = styled.div`
+  width: 64px;
+  position: relative;
+`;
 const ImagePreview = styled.img`
   width: 64px;
   height: 64px;
@@ -367,6 +375,17 @@ const ImagePreview = styled.img`
   margin-top: 9px;
 `;
 
+const ClearImgBtn = styled(ClearBtn)`
+  width: 24px;
+  height: 24px;
+  top: 4px;
+  right: -20px;
+  transform: none;
+  padding: 0;
+  border: 2px solid ${({ theme }) => theme.inputColor};
+  background-color: ${({ theme }) => theme.inputColor};
+`;
+
 const Input = styled.div`
   display: block;
   width: 100%;
diff --git a/packages/react-chat/src/components/Icons/ClearIconFull.tsx b/packages/react-chat/src/components/Icons/ClearIconFull.tsx
index 2e4acea6..2144f2a4 100644
--- a/packages/react-chat/src/components/Icons/ClearIconFull.tsx
+++ b/packages/react-chat/src/components/Icons/ClearIconFull.tsx
@@ -28,4 +28,8 @@ export function ClearSvgFull({ height, width, className }: ClearSvgFullProps) {
 
 const Icon = styled.svg`
   fill: ${({ theme }) => theme.secondary};
+
+  &:hover {
+    fill: ${({ theme }) => theme.primary};
+  }
 `;