Add removing image button (#189)

Co-authored-by: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
This commit is contained in:
Maria Rushkova 2022-01-14 02:30:27 +01:00 committed by GitHub
parent e7096dced1
commit 0e14bd68d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 4 deletions

View File

@ -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%;

View File

@ -28,4 +28,8 @@ export function ClearSvgFull({ height, width, className }: ClearSvgFullProps) {
const Icon = styled.svg`
fill: ${({ theme }) => theme.secondary};
&:hover {
fill: ${({ theme }) => theme.primary};
}
`;