Make modal responsive (#52)

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<string | null>(null);
 
@@ -43,7 +48,13 @@ export const DownloadButton = ({ theme }: { theme: Theme }) => {
   }, []);
 
   return (
-    <Link href={link} theme={theme} target="_blank" rel="noopener noreferrer">
+    <Link
+      className={className}
+      href={link}
+      theme={theme}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       {os ? `Download Status for ${os}` : "Download Status"}
     </Link>
   );

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 (
     <ChannelsWrapper theme={theme}>
-      <StyledCommunity theme={theme} community={community} />
+      <StyledCommunity
+        onClick={onCommunityClick}
+        theme={theme}
+        community={community}
+      />
       <ChannelList>
         {channels.map((channel) => (
           <Channel

packages/react-chat/src/components/Chat.tsx

@@ -11,6 +11,7 @@ import { Theme } from "../styles/themes";
 import { Channels } from "./Channels";
 import { ChatBody } from "./Chat/ChatBody";
 import { Members } from "./Members";
+import { CommunityModal } from "./Modals/CommunityModal";
 
 interface ChatProps {
   theme: Theme;
@@ -37,6 +38,9 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) {
     channels.map((channel) => channel.name)
   );
 
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const showModal = () => setIsModalVisible(true);
+
   return (
     <ChatWrapper>
       {showChannels && !narrow && (
@@ -47,6 +51,7 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) {
           community={community}
           setActiveChannel={setActiveChannel}
           activeChannelId={activeChannel.id}
+          onCommunityClick={showModal}
         />
       )}
       <ChatBody
@@ -63,6 +68,7 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) {
         community={community}
         showCommunity={!showChannels}
         loadNextDay={() => loadNextDay(activeChannel.name)}
+        onCommunityClick={showModal}
         lastMessage={lastMessage}
         fetchMetadata={fetchMetadata}
       />
@@ -73,6 +79,16 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) {
           setShowChannels={setShowChannels}
         />
       )}
+      <CommunityModal
+        isVisible={isModalVisible}
+        onClose={() => setIsModalVisible(false)}
+        icon={community.icon}
+        name={community.name}
+        theme={theme}
+        subtitle="Public Community"
+        description={community.description}
+        publicKey="0xD95DBdaB08A9FED2D71ac9C3028AAc40905d8CF3"
+      />
     </ChatWrapper>
   );
 }

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<Metadata | undefined>;
 }
@@ -51,6 +52,7 @@ export function ChatBody({
   setActiveChannel,
   activeChannelId,
   loadNextDay,
+  onCommunityClick,
   lastMessage,
   fetchMetadata,
 }: ChatBodyProps) {
@@ -80,7 +82,11 @@ export function ChatBody({
         <ChannelWrapper className={className}>
           {(showCommunity || narrow) && (
             <CommunityWrap theme={theme} className={className}>
-              <Community community={community} theme={theme} />
+              <Community
+                onClick={onCommunityClick}
+                community={community}
+                theme={theme}
+              />
             </CommunityWrap>
           )}
           <Channel

packages/react-chat/src/components/Community.tsx

@@ -1,25 +1,28 @@
-import React, { useState } from "react";
+import React from "react";
 
 import { CommunityData } from "../helpers/communityMock";
 import { Theme } from "../styles/themes";
 
 import { CommunityIdentity } from "./CommunityIdentity";
-import { CommunityModal } from "./Modals/CommunityModal";
 
 interface CommunityProps {
   theme: Theme;
   community: CommunityData;
+  onClick: () => 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 (
     <>
-      <button className={className} onClick={() => setIsModalVisible(true)}>
+      <button className={className} onClick={onClick}>
         <CommunityIdentity
           name={name}
           icon={icon}
@@ -27,16 +30,6 @@ export function Community({ theme, community, className }: CommunityProps) {
           theme={theme}
         />
       </button>
-      <CommunityModal
-        isVisible={isModalVisible}
-        onClose={() => setIsModalVisible(false)}
-        icon={icon}
-        name={name}
-        theme={theme}
-        subtitle="Public Community"
-        description={description}
-        publicKey="0xD95DBdaB08A9FED2D71ac9C3028AAc40905d8CF3"
-      />
     </>
   );
 }

packages/react-chat/src/components/Form/CopyInput.tsx

@@ -17,7 +17,7 @@ export const CopyInput = ({ label, value, theme }: CopyInputProps) => (
     <Label theme={theme}>{label}</Label>
     <Wrapper theme={theme}>
       <Text theme={theme}>{reduceString(value, 15, 15)}</Text>
-      <CopyButtonWrapper>
+      <CopyButtonWrapper theme={theme}>
         <CopyButton theme={theme} onClick={() => copy(value)}>
           Copy
         </CopyButton>

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 (
     <Modal theme={theme} isVisible={isVisible} onClose={onClose}>
       <Section theme={theme}>
@@ -48,13 +51,16 @@ export const CommunityModal = ({
         />
         <Hint theme={theme}>
           To access this community, paste community public key in Status desktop
-          or mobile app
+          or mobile app.
+          {narrow && <StyledDownloadButton theme={theme} />}
         </Hint>
       </Section>
+      {!narrow && (
         <BottomSection theme={theme}>
           <StatusLogo theme={theme} />
           <DownloadButton theme={theme} />
         </BottomSection>
+      )}
     </Modal>
   );
 };
@@ -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};
+`;