status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/react-chat/src/components/Chat/ChatInput.tsx
View File

@ -13,7 +13,9 @@ import { useModal } from "../../contexts/modalProvider";
import { useNarrow } from "../../contexts/narrowProvider"; import { useNarrow } from "../../contexts/narrowProvider";
import { Reply } from "../../hooks/useReply"; import { Reply } from "../../hooks/useReply";
import { uintToImgUrl } from "../../utils/uintToImgUrl"; import { uintToImgUrl } from "../../utils/uintToImgUrl";
import { ClearBtn } from "../Form/inputStyles";
import { ClearSvg } from "../Icons/ClearIcon"; import { ClearSvg } from "../Icons/ClearIcon";
import { ClearSvgFull } from "../Icons/ClearIconFull";
import { EmojiIcon } from "../Icons/EmojiIcon"; import { EmojiIcon } from "../Icons/EmojiIcon";
import { GifIcon } from "../Icons/GifIcon"; import { GifIcon } from "../Icons/GifIcon";
import { PictureIcon } from "../Icons/PictureIcon"; import { PictureIcon } from "../Icons/PictureIcon";
@ -254,10 +256,12 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
<Row style={{ height: `${inputHeight + (image ? 73 : 0)}px` }}> <Row style={{ height: `${inputHeight + (image ? 73 : 0)}px` }}>
<InputWrapper> <InputWrapper>
{image && ( {image && (
<ImagePreview <ImageWrapper>
src={image} <ImagePreview src={image} />
onClick={() => setImageUint(undefined)} <ClearImgBtn onClick={() => setImageUint(undefined)}>
/> <ClearSvgFull width={20} height={20} />
</ClearImgBtn>
</ImageWrapper>
)} )}
{narrow && !identity ? ( {narrow && !identity ? (
<JoinBtn onClick={() => setCreationStartModal(true)}> <JoinBtn onClick={() => setCreationStartModal(true)}>
@ -359,6 +363,10 @@ const InputButtons = styled.div`
} }
`; `;
const ImageWrapper = styled.div`
width: 64px;
position: relative;
`;
const ImagePreview = styled.img` const ImagePreview = styled.img`
width: 64px; width: 64px;
height: 64px; height: 64px;
@ -367,6 +375,17 @@ const ImagePreview = styled.img`
margin-top: 9px; 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` const Input = styled.div`
display: block; display: block;
width: 100%; width: 100%;

4
packages/react-chat/src/components/Icons/ClearIconFull.tsx
View File

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