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) { {image && ( - setImageUint(undefined)} - /> + + + setImageUint(undefined)}> + + + )} {narrow && !identity ? ( 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}; + } `;