From 2491bba0c66ae9eb7da96fdb27ad5056a2fcfe8f Mon Sep 17 00:00:00 2001 From: Oleksandr Date: Thu, 7 Oct 2021 18:05:27 +0200 Subject: [PATCH] Make modal responsive (#52) --- .../src/components/Buttons/DownloadButton.tsx | 15 +++++++++-- .../react-chat/src/components/Channels.tsx | 9 +++++-- packages/react-chat/src/components/Chat.tsx | 16 +++++++++++ .../src/components/Chat/ChatBody.tsx | 8 +++++- .../react-chat/src/components/Community.tsx | 27 +++++++------------ .../src/components/Form/CopyInput.tsx | 2 +- .../src/components/Modals/CommunityModal.tsx | 27 +++++++++++++++---- 7 files changed, 76 insertions(+), 28 deletions(-) diff --git a/packages/react-chat/src/components/Buttons/DownloadButton.tsx b/packages/react-chat/src/components/Buttons/DownloadButton.tsx index 4e77e9d5..c1d3e9bd 100644 --- a/packages/react-chat/src/components/Buttons/DownloadButton.tsx +++ b/packages/react-chat/src/components/Buttons/DownloadButton.tsx @@ -9,7 +9,12 @@ const macosPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"]; const windowsPlatforms = ["Win32", "Win64", "Windows", "WinCE"]; const iosPlatforms = ["iPhone", "iPad", "iPod"]; -export const DownloadButton = ({ theme }: { theme: Theme }) => { +interface DownloadButtonProps { + theme: Theme; + className?: string; +} + +export const DownloadButton = ({ theme, className }: DownloadButtonProps) => { const [link, setlink] = useState("https://status.im/get/"); const [os, setOs] = useState(null); @@ -43,7 +48,13 @@ export const DownloadButton = ({ theme }: { theme: Theme }) => { }, []); return ( - + {os ? `Download Status for ${os}` : "Download Status"} ); diff --git a/packages/react-chat/src/components/Channels.tsx b/packages/react-chat/src/components/Channels.tsx index 7109f2b7..4f42ea43 100644 --- a/packages/react-chat/src/components/Channels.tsx +++ b/packages/react-chat/src/components/Channels.tsx @@ -15,7 +15,7 @@ interface ChannelsProps { community: CommunityData; notifications: { [id: string]: number }; clearNotifications: (id: string) => void; - + onCommunityClick: () => void; setActiveChannel: (val: ChannelData) => void; activeChannelId: number; } @@ -27,6 +27,7 @@ export function Channels({ setActiveChannel, clearNotifications, activeChannelId, + onCommunityClick, }: ChannelsProps) { useEffect(() => { const channel = channels.find((channel) => channel.id === activeChannelId); @@ -39,7 +40,11 @@ export function Channels({ return ( - + {channels.map((channel) => ( channel.name) ); + const [isModalVisible, setIsModalVisible] = useState(false); + const showModal = () => setIsModalVisible(true); + return ( {showChannels && !narrow && ( @@ -47,6 +51,7 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) { community={community} setActiveChannel={setActiveChannel} activeChannelId={activeChannel.id} + onCommunityClick={showModal} /> )} loadNextDay(activeChannel.name)} + onCommunityClick={showModal} lastMessage={lastMessage} fetchMetadata={fetchMetadata} /> @@ -73,6 +79,16 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) { setShowChannels={setShowChannels} /> )} + setIsModalVisible(false)} + icon={community.icon} + name={community.name} + theme={theme} + subtitle="Public Community" + description={community.description} + publicKey="0xD95DBdaB08A9FED2D71ac9C3028AAc40905d8CF3" + /> ); } diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx index fff19514..229c27cf 100644 --- a/packages/react-chat/src/components/Chat/ChatBody.tsx +++ b/packages/react-chat/src/components/Chat/ChatBody.tsx @@ -33,6 +33,7 @@ interface ChatBodyProps { setActiveChannel: (val: ChannelData) => void; activeChannelId: number; loadNextDay: () => void; + onCommunityClick: () => void; lastMessage: Date; fetchMetadata?: (url: string) => Promise; } @@ -51,6 +52,7 @@ export function ChatBody({ setActiveChannel, activeChannelId, loadNextDay, + onCommunityClick, lastMessage, fetchMetadata, }: ChatBodyProps) { @@ -80,7 +82,11 @@ export function ChatBody({ {(showCommunity || narrow) && ( - + )} void; className?: string; } -export function Community({ theme, community, className }: CommunityProps) { - const { name, icon, members, description } = community; - - const [isModalVisible, setIsModalVisible] = useState(false); +export function Community({ + theme, + community, + onClick, + className, +}: CommunityProps) { + const { name, icon, members } = community; return ( <> - - setIsModalVisible(false)} - icon={icon} - name={name} - theme={theme} - subtitle="Public Community" - description={description} - publicKey="0xD95DBdaB08A9FED2D71ac9C3028AAc40905d8CF3" - /> ); } diff --git a/packages/react-chat/src/components/Form/CopyInput.tsx b/packages/react-chat/src/components/Form/CopyInput.tsx index 537779bc..1c5952de 100644 --- a/packages/react-chat/src/components/Form/CopyInput.tsx +++ b/packages/react-chat/src/components/Form/CopyInput.tsx @@ -17,7 +17,7 @@ export const CopyInput = ({ label, value, theme }: CopyInputProps) => ( {reduceString(value, 15, 15)} - + copy(value)}> Copy diff --git a/packages/react-chat/src/components/Modals/CommunityModal.tsx b/packages/react-chat/src/components/Modals/CommunityModal.tsx index f06ce1d9..bde3bb1a 100644 --- a/packages/react-chat/src/components/Modals/CommunityModal.tsx +++ b/packages/react-chat/src/components/Modals/CommunityModal.tsx @@ -1,6 +1,7 @@ import React from "react"; import styled from "styled-components"; +import { useNarrow } from "../../contexts/narrowProvider"; import { DownloadButton } from "../Buttons/DownloadButton"; import { CommunityIdentity, @@ -27,6 +28,8 @@ export const CommunityModal = ({ publicKey, theme, }: CommunityModalProps) => { + const narrow = useNarrow(); + return (
@@ -48,13 +51,16 @@ export const CommunityModal = ({ /> To access this community, paste community public key in Status desktop - or mobile app + or mobile app. + {narrow && }
- - - - + {!narrow && ( + + + + + )}
); }; @@ -85,3 +91,14 @@ const BottomSection = styled(Section)` flex-direction: column; align-items: center; `; + +const StyledDownloadButton = styled(DownloadButton)` + display: inline; + padding: 0; + margin-left: 4px; + background: none; + font-size: 13px; + line-height: 18px; + text-decoration: underline; + color: ${({ theme }) => theme.secondary}; +`;