diff --git a/packages/react-chat/src/components/Chat/ChatCreation.tsx b/packages/react-chat/src/components/Chat/ChatCreation.tsx index 14bd8b53..7f194c6b 100644 --- a/packages/react-chat/src/components/Chat/ChatCreation.tsx +++ b/packages/react-chat/src/components/Chat/ChatCreation.tsx @@ -173,6 +173,7 @@ const InputBar = styled.div` `; const Input = styled.input` + width: 100%; background-color: ${({ theme }) => theme.inputColor}; border: 1px solid ${({ theme }) => theme.inputColor}; outline: none; @@ -245,6 +246,7 @@ export const ContactsList = styled.div` const SearchMembers = styled.div` position: relative; + flex: 1; `; const LimitAlert = styled.p` diff --git a/packages/react-chat/src/components/Modals/EditModal.tsx b/packages/react-chat/src/components/Modals/EditModal.tsx index ac0b7bee..713eed20 100644 --- a/packages/react-chat/src/components/Modals/EditModal.tsx +++ b/packages/react-chat/src/components/Modals/EditModal.tsx @@ -2,7 +2,6 @@ import React, { useState } from "react"; import styled from "styled-components"; import { ChannelData } from "../../models/ChannelData"; -import { uintToImgUrl } from "../../utils/uintToImgUrl"; import { buttonStyles } from "../Buttons/buttonStyle"; import { ChannelLogo } from "../Channels/Channel"; import { AddIcon } from "../Icons/AddIcon"; @@ -17,8 +16,19 @@ interface EditModalProps extends BasicModalProps { export const EditModal = ({ isVisible, onClose, channel }: EditModalProps) => { const [groupName, setGroupName] = useState(""); - const [imageUint, setImageUint] = useState(undefined); - const [showSizeLimit, setShowSizeLimit] = useState(false); + const [image, setImage] = useState(""); + + const handleChange = (e: any) => { + if (e.target.files.length) { + setImage(URL.createObjectURL(e.target.files[0])); + } + }; + + const handleUpload = () => { + channel.icon = image; + channel.name = groupName; + onClose(); + }; return ( @@ -45,43 +55,27 @@ export const EditModal = ({ isVisible, onClose, channel }: EditModalProps) => { - {!channel.icon && channel.name.slice(0, 1).toUpperCase()} + {!channel.icon && !image && channel.name.slice(0, 1).toUpperCase()} { - const fileReader = new FileReader(); - fileReader.onloadend = (s) => { - const arr = new Uint8Array(s.target?.result as ArrayBuffer); - setImageUint(arr); - }; - - if (e?.target?.files?.[0]) { - if (e.target.files[0].size < 1024 * 1024) { - fileReader.readAsArrayBuffer(e.target.files[0]); - } else { - setShowSizeLimit(true); - } - } - }} + onChange={handleChange} /> - {showSizeLimit && } - Save changes + Save changes );