Add theme Provider (#53)
This commit is contained in:
parent
02647e967d
commit
5ffd8a537d
|
@ -1,8 +1,6 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Theme } from "../../styles/themes";
|
||||
|
||||
const userAgent = window.navigator.userAgent;
|
||||
const platform = window.navigator.platform;
|
||||
const macosPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"];
|
||||
|
@ -10,11 +8,10 @@ const windowsPlatforms = ["Win32", "Win64", "Windows", "WinCE"];
|
|||
const iosPlatforms = ["iPhone", "iPad", "iPod"];
|
||||
|
||||
interface DownloadButtonProps {
|
||||
theme: Theme;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const DownloadButton = ({ theme, className }: DownloadButtonProps) => {
|
||||
export const DownloadButton = ({ className }: DownloadButtonProps) => {
|
||||
const [link, setlink] = useState("https://status.im/get/");
|
||||
const [os, setOs] = useState<string | null>(null);
|
||||
|
||||
|
@ -51,7 +48,6 @@ export const DownloadButton = ({ theme, className }: DownloadButtonProps) => {
|
|||
<Link
|
||||
className={className}
|
||||
href={link}
|
||||
theme={theme}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
|
|
|
@ -4,14 +4,12 @@ import styled from "styled-components";
|
|||
import { useNarrow } from "../contexts/narrowProvider";
|
||||
import { ChannelData, channels } from "../helpers/channelsMock";
|
||||
import { CommunityData } from "../helpers/communityMock";
|
||||
import { Theme } from "../styles/themes";
|
||||
|
||||
import { Community } from "./Community";
|
||||
import { MutedIcon } from "./Icons/MutedIcon";
|
||||
import { textMediumStyles } from "./Text";
|
||||
|
||||
interface ChannelsProps {
|
||||
theme: Theme;
|
||||
community: CommunityData;
|
||||
notifications: { [id: string]: number };
|
||||
clearNotifications: (id: string) => void;
|
||||
|
@ -21,7 +19,6 @@ interface ChannelsProps {
|
|||
}
|
||||
|
||||
export function Channels({
|
||||
theme,
|
||||
community,
|
||||
notifications,
|
||||
setActiveChannel,
|
||||
|
@ -39,18 +36,13 @@ export function Channels({
|
|||
}, [notifications, activeChannelId]);
|
||||
|
||||
return (
|
||||
<ChannelsWrapper theme={theme}>
|
||||
<StyledCommunity
|
||||
onClick={onCommunityClick}
|
||||
theme={theme}
|
||||
community={community}
|
||||
/>
|
||||
<ChannelsWrapper>
|
||||
<StyledCommunity onClick={onCommunityClick} community={community} />
|
||||
<ChannelList>
|
||||
{channels.map((channel) => (
|
||||
<Channel
|
||||
key={channel.id}
|
||||
channel={channel}
|
||||
theme={theme}
|
||||
isActive={channel.id === activeChannelId}
|
||||
isMuted={channel.isMuted || false}
|
||||
notification={
|
||||
|
@ -69,7 +61,6 @@ export function Channels({
|
|||
}
|
||||
|
||||
interface ChannelProps {
|
||||
theme: Theme;
|
||||
channel: ChannelData;
|
||||
notification?: number;
|
||||
isActive: boolean;
|
||||
|
@ -79,7 +70,6 @@ interface ChannelProps {
|
|||
}
|
||||
|
||||
export function Channel({
|
||||
theme,
|
||||
channel,
|
||||
isActive,
|
||||
isMuted,
|
||||
|
@ -99,7 +89,6 @@ export function Channel({
|
|||
(isActive && !activeView) || (isActive && narrow) ? "active" : ""
|
||||
}
|
||||
style={{ width: narrow && activeView ? "calc(100% - 162px)" : "100%" }}
|
||||
theme={theme}
|
||||
onClick={onClick}
|
||||
>
|
||||
<ChannelInfo>
|
||||
|
@ -108,13 +97,11 @@ export function Channel({
|
|||
backgroundImage: channel.icon ? `url(${channel.icon}` : "",
|
||||
}}
|
||||
className={className}
|
||||
theme={theme}
|
||||
>
|
||||
{!channel.icon && channel.name.slice(0, 1).toUpperCase()}
|
||||
</ChannelLogo>
|
||||
<ChannelTextInfo>
|
||||
<ChannelName
|
||||
theme={theme}
|
||||
className={
|
||||
isActive || narrow
|
||||
? "active"
|
||||
|
@ -128,25 +115,19 @@ export function Channel({
|
|||
# {channel.name}
|
||||
</ChannelName>
|
||||
{activeView && (
|
||||
<ChannelDescription theme={theme}>
|
||||
{" "}
|
||||
{channel.description}
|
||||
</ChannelDescription>
|
||||
<ChannelDescription> {channel.description}</ChannelDescription>
|
||||
)}
|
||||
</ChannelTextInfo>
|
||||
</ChannelInfo>
|
||||
{notification && notification > 0 && !activeView && (
|
||||
<NotificationBagde theme={theme}>{notification}</NotificationBagde>
|
||||
<NotificationBagde>{notification}</NotificationBagde>
|
||||
)}
|
||||
{isMuted && !notification && <MutedIcon theme={theme} />}
|
||||
{isMuted && !notification && <MutedIcon />}
|
||||
</ChannelWrapper>
|
||||
);
|
||||
}
|
||||
interface ThemeProps {
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
const ChannelsWrapper = styled.div<ThemeProps>`
|
||||
const ChannelsWrapper = styled.div`
|
||||
width: 21%;
|
||||
height: 100%;
|
||||
min-width: 196px;
|
||||
|
@ -161,7 +142,7 @@ const StyledCommunity = styled(Community)`
|
|||
margin: 0 0 16px;
|
||||
`;
|
||||
|
||||
const ChannelDescription = styled.p<ThemeProps>`
|
||||
const ChannelDescription = styled.p`
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.1px;
|
||||
|
@ -181,7 +162,7 @@ export const ChannelList = styled.div`
|
|||
}
|
||||
`;
|
||||
|
||||
const ChannelWrapper = styled.div<ThemeProps>`
|
||||
const ChannelWrapper = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
@ -207,7 +188,7 @@ const ChannelTextInfo = styled.div`
|
|||
overflow: hidden;
|
||||
`;
|
||||
|
||||
export const ChannelLogo = styled.div<ThemeProps>`
|
||||
export const ChannelLogo = styled.div`
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
|
@ -239,7 +220,7 @@ export const ChannelLogo = styled.div<ThemeProps>`
|
|||
}
|
||||
`;
|
||||
|
||||
export const ChannelName = styled.p<ThemeProps>`
|
||||
export const ChannelName = styled.p`
|
||||
font-weight: 500;
|
||||
opacity: 0.7;
|
||||
color: ${({ theme }) => theme.primary};
|
||||
|
@ -259,7 +240,7 @@ export const ChannelName = styled.p<ThemeProps>`
|
|||
}
|
||||
`;
|
||||
|
||||
const NotificationBagde = styled.div<ThemeProps>`
|
||||
const NotificationBagde = styled.div`
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
|
|
|
@ -47,7 +47,6 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) {
|
|||
<Channels
|
||||
notifications={notifications}
|
||||
clearNotifications={clearNotifications}
|
||||
theme={theme}
|
||||
community={community}
|
||||
setActiveChannel={setActiveChannel}
|
||||
activeChannelId={activeChannel.id}
|
||||
|
@ -73,18 +72,13 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) {
|
|||
fetchMetadata={fetchMetadata}
|
||||
/>
|
||||
{showMembers && !narrow && (
|
||||
<Members
|
||||
theme={theme}
|
||||
community={community}
|
||||
setShowChannels={setShowChannels}
|
||||
/>
|
||||
<Members community={community} setShowChannels={setShowChannels} />
|
||||
)}
|
||||
<CommunityModal
|
||||
isVisible={isModalVisible}
|
||||
onClose={() => setIsModalVisible(false)}
|
||||
icon={community.icon}
|
||||
name={community.name}
|
||||
theme={theme}
|
||||
subtitle="Public Community"
|
||||
description={community.description}
|
||||
publicKey="0xD95DBdaB08A9FED2D71ac9C3028AAc40905d8CF3"
|
||||
|
|
|
@ -72,26 +72,20 @@ export function ChatBody({
|
|||
}, [showMembersList]);
|
||||
|
||||
return (
|
||||
<ChatBodyWrapper theme={theme} className={className}>
|
||||
<ChatBodyWrapper className={className}>
|
||||
<ChatTopbar
|
||||
className={
|
||||
narrow && (showChannelsList || showMembersList) ? "narrow" : ""
|
||||
}
|
||||
theme={theme}
|
||||
>
|
||||
<ChannelWrapper className={className}>
|
||||
{(showCommunity || narrow) && (
|
||||
<CommunityWrap theme={theme} className={className}>
|
||||
<Community
|
||||
onClick={onCommunityClick}
|
||||
community={community}
|
||||
theme={theme}
|
||||
/>
|
||||
<CommunityWrap className={className}>
|
||||
<Community onClick={onCommunityClick} community={community} />
|
||||
</CommunityWrap>
|
||||
)}
|
||||
<Channel
|
||||
channel={channel}
|
||||
theme={theme}
|
||||
isActive={narrow ? showChannelsList : true}
|
||||
activeView={true}
|
||||
isMuted={false}
|
||||
|
@ -105,11 +99,10 @@ export function ChatBody({
|
|||
? "active"
|
||||
: ""
|
||||
}
|
||||
theme={theme}
|
||||
>
|
||||
<MembersIcon theme={theme} />
|
||||
<MembersIcon />
|
||||
</MemberBtn>
|
||||
{!messenger && <Loading theme={theme} />}
|
||||
{!messenger && <Loading />}
|
||||
</ChatTopbar>
|
||||
{messenger ? (
|
||||
<>
|
||||
|
@ -122,22 +115,20 @@ export function ChatBody({
|
|||
messenger ? (
|
||||
<ChatMessages
|
||||
messages={messages}
|
||||
theme={theme}
|
||||
fetchMetadata={fetchMetadata}
|
||||
/>
|
||||
) : (
|
||||
<LoadingSkeleton theme={theme} />
|
||||
<LoadingSkeleton />
|
||||
)
|
||||
) : (
|
||||
<EmptyChannel theme={theme} channel={channel} />
|
||||
<EmptyChannel channel={channel} />
|
||||
)}
|
||||
<ChatInput theme={theme} addMessage={sendMessage} />
|
||||
<ChatInput addMessage={sendMessage} theme={theme} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{showChannelsList && narrow && (
|
||||
<NarrowChannels
|
||||
theme={theme}
|
||||
community={community.name}
|
||||
notifications={notifications}
|
||||
setActiveChannel={setActiveChannel}
|
||||
|
@ -147,7 +138,6 @@ export function ChatBody({
|
|||
)}
|
||||
{showMembersList && narrow && (
|
||||
<NarrowMembers
|
||||
theme={theme}
|
||||
community={community}
|
||||
setShowChannels={setShowChannelsList}
|
||||
setShowMembersList={setShowMembersList}
|
||||
|
@ -156,18 +146,15 @@ export function ChatBody({
|
|||
</>
|
||||
) : (
|
||||
<>
|
||||
<LoadingSkeleton theme={theme} />
|
||||
<ChatInput theme={theme} addMessage={sendMessage} />
|
||||
<LoadingSkeleton />
|
||||
<ChatInput addMessage={sendMessage} theme={theme} />
|
||||
</>
|
||||
)}
|
||||
</ChatBodyWrapper>
|
||||
);
|
||||
}
|
||||
interface ThemeProps {
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
const ChatBodyWrapper = styled.div<ThemeProps>`
|
||||
const ChatBodyWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
@ -188,7 +175,7 @@ const ChannelWrapper = styled.div`
|
|||
}
|
||||
`;
|
||||
|
||||
const ChatTopbar = styled.div<ThemeProps>`
|
||||
const ChatTopbar = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 5px 8px;
|
||||
|
@ -204,7 +191,7 @@ const ChatTopbar = styled.div<ThemeProps>`
|
|||
}
|
||||
`;
|
||||
|
||||
const CommunityWrap = styled.div<ThemeProps>`
|
||||
const CommunityWrap = styled.div`
|
||||
padding-right: 10px;
|
||||
margin-right: 16px;
|
||||
position: relative;
|
||||
|
@ -227,7 +214,7 @@ const CommunityWrap = styled.div<ThemeProps>`
|
|||
}
|
||||
`;
|
||||
|
||||
const MemberBtn = styled.button<ThemeProps>`
|
||||
const MemberBtn = styled.button`
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
|
|
|
@ -42,7 +42,7 @@ export function ChatInput({ theme, addMessage }: ChatInputProps) {
|
|||
<Picker
|
||||
onSelect={addEmoji}
|
||||
theme={theme === lightTheme ? "light" : "dark"}
|
||||
set="apple"
|
||||
set="twitter"
|
||||
color={theme.tertiary}
|
||||
emojiSize={26}
|
||||
style={{
|
||||
|
@ -59,7 +59,7 @@ export function ChatInput({ theme, addMessage }: ChatInputProps) {
|
|||
)}
|
||||
|
||||
<AddPictureBtn>
|
||||
<PictureIcon theme={theme} />
|
||||
<PictureIcon />
|
||||
<AddPictureInput
|
||||
type="file"
|
||||
multiple={true}
|
||||
|
@ -77,14 +77,12 @@ export function ChatInput({ theme, addMessage }: ChatInputProps) {
|
|||
/>
|
||||
</AddPictureBtn>
|
||||
<InputImageWrapper
|
||||
theme={theme}
|
||||
style={{ height: `${inputHeight + (image ? 73 : 0)}px` }}
|
||||
>
|
||||
{image && (
|
||||
<ImagePreview src={image} onClick={() => setImageUint(undefined)} />
|
||||
)}
|
||||
<Input
|
||||
theme={theme}
|
||||
placeholder={"Message"}
|
||||
value={content}
|
||||
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
|
@ -107,22 +105,18 @@ export function ChatInput({ theme, addMessage }: ChatInputProps) {
|
|||
/>
|
||||
</InputImageWrapper>
|
||||
<AddEmojiBtn onClick={() => setShowEmoji(!showEmoji)}>
|
||||
<EmojiIcon theme={theme} isActive={showEmoji} />
|
||||
<EmojiIcon isActive={showEmoji} />
|
||||
</AddEmojiBtn>
|
||||
<AddStickerBtn>
|
||||
<StickerIcon theme={theme} />
|
||||
<StickerIcon />
|
||||
</AddStickerBtn>
|
||||
<AddGifBtn>
|
||||
<GifIcon theme={theme} />
|
||||
<GifIcon />
|
||||
</AddGifBtn>
|
||||
</InputWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
interface ThemeProps {
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
const InputWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
@ -138,7 +132,7 @@ const ImagePreview = styled.img`
|
|||
margin-top: 9px;
|
||||
`;
|
||||
|
||||
const InputImageWrapper = styled.div<ThemeProps>`
|
||||
const InputImageWrapper = styled.div`
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -149,7 +143,7 @@ const InputImageWrapper = styled.div<ThemeProps>`
|
|||
margin-left: 10px;
|
||||
`;
|
||||
|
||||
const Input = styled.textarea<ThemeProps>`
|
||||
const Input = styled.textarea`
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: ${({ theme }) => theme.inputColor};
|
||||
|
|
|
@ -4,7 +4,6 @@ import styled from "styled-components";
|
|||
|
||||
import { ChatMessage } from "../../models/ChatMessage";
|
||||
import { Metadata } from "../../models/Metadata";
|
||||
import { Theme } from "../../styles/themes";
|
||||
|
||||
/* eslint-disable no-useless-escape */
|
||||
const regEx =
|
||||
|
@ -13,13 +12,11 @@ const regEx =
|
|||
|
||||
type ChatMessageContentProps = {
|
||||
message: ChatMessage;
|
||||
theme: Theme;
|
||||
fetchMetadata?: (url: string) => Promise<Metadata | undefined>;
|
||||
};
|
||||
|
||||
export function ChatMessageContent({
|
||||
message,
|
||||
theme,
|
||||
fetchMetadata,
|
||||
}: ChatMessageContentProps) {
|
||||
const { content, image } = useMemo(() => message, [message]);
|
||||
|
@ -40,13 +37,7 @@ export function ChatMessageContent({
|
|||
? match
|
||||
: "https://" + match;
|
||||
newSplit.push(
|
||||
<Link
|
||||
key={idx}
|
||||
href={link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
theme={theme}
|
||||
>
|
||||
<Link key={idx} href={link} target="_blank" rel="noopener noreferrer">
|
||||
{match}
|
||||
</Link>,
|
||||
split[idx + 1]
|
||||
|
|
|
@ -3,7 +3,6 @@ import styled from "styled-components";
|
|||
|
||||
import { ChatMessage } from "../../models/ChatMessage";
|
||||
import { Metadata } from "../../models/Metadata";
|
||||
import { Theme } from "../../styles/themes";
|
||||
import { UserIcon } from "../Icons/UserIcon";
|
||||
import { textSmallStyles } from "../Text";
|
||||
|
||||
|
@ -11,15 +10,10 @@ import { ChatMessageContent } from "./ChatMessageContent";
|
|||
|
||||
type ChatMessagesProps = {
|
||||
messages: ChatMessage[];
|
||||
theme: Theme;
|
||||
fetchMetadata?: (url: string) => Promise<Metadata | undefined>;
|
||||
};
|
||||
|
||||
export function ChatMessages({
|
||||
messages,
|
||||
theme,
|
||||
fetchMetadata,
|
||||
}: ChatMessagesProps) {
|
||||
export function ChatMessages({ messages, fetchMetadata }: ChatMessagesProps) {
|
||||
const [scrollOnBot, setScrollOnBot] = useState(false);
|
||||
const ref = useRef<HTMLHeadingElement>(null);
|
||||
const today = useMemo(() => new Date().getDay(), []);
|
||||
|
@ -64,22 +58,19 @@ export function ChatMessages({
|
|||
)}
|
||||
<MessageWrapper>
|
||||
<Icon>
|
||||
<UserIcon theme={theme} />
|
||||
<UserIcon />
|
||||
</Icon>
|
||||
|
||||
<ContentWrapper>
|
||||
<MessageHeaderWrapper>
|
||||
<UserNameWrapper theme={theme}>
|
||||
<UserNameWrapper>
|
||||
{message.sender.slice(0, 10)}
|
||||
</UserNameWrapper>
|
||||
<TimeWrapper theme={theme}>
|
||||
{message.date.toLocaleString()}
|
||||
</TimeWrapper>
|
||||
<TimeWrapper>{message.date.toLocaleString()}</TimeWrapper>
|
||||
</MessageHeaderWrapper>
|
||||
<MessageText theme={theme}>
|
||||
<MessageText>
|
||||
<ChatMessageContent
|
||||
message={message}
|
||||
theme={theme}
|
||||
fetchMetadata={fetchMetadata}
|
||||
/>
|
||||
</MessageText>
|
||||
|
@ -92,10 +83,6 @@ export function ChatMessages({
|
|||
);
|
||||
}
|
||||
|
||||
interface ThemeProps {
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
const MessagesWrapper = styled.div`
|
||||
height: calc(100% - 44px);
|
||||
overflow: auto;
|
||||
|
@ -159,13 +146,13 @@ export const Icon = styled.div`
|
|||
flex-shrink: 0;
|
||||
`;
|
||||
|
||||
const UserNameWrapper = styled.div<ThemeProps>`
|
||||
const UserNameWrapper = styled.div`
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
color: ${({ theme }) => theme.tertiary};
|
||||
`;
|
||||
|
||||
const TimeWrapper = styled.div<ThemeProps>`
|
||||
const TimeWrapper = styled.div`
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
letter-spacing: 0.2px;
|
||||
|
@ -174,7 +161,7 @@ const TimeWrapper = styled.div<ThemeProps>`
|
|||
margin-left: 4px;
|
||||
`;
|
||||
|
||||
const MessageText = styled.div<ThemeProps>`
|
||||
const MessageText = styled.div`
|
||||
overflow-wrap: anywhere;
|
||||
width: 100%;
|
||||
white-space: pre-wrap;
|
||||
|
|
|
@ -1,23 +1,16 @@
|
|||
import React from "react";
|
||||
|
||||
import { CommunityData } from "../helpers/communityMock";
|
||||
import { Theme } from "../styles/themes";
|
||||
|
||||
import { CommunityIdentity } from "./CommunityIdentity";
|
||||
|
||||
interface CommunityProps {
|
||||
theme: Theme;
|
||||
community: CommunityData;
|
||||
onClick: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function Community({
|
||||
theme,
|
||||
community,
|
||||
onClick,
|
||||
className,
|
||||
}: CommunityProps) {
|
||||
export function Community({ community, onClick, className }: CommunityProps) {
|
||||
const { name, icon, members } = community;
|
||||
|
||||
return (
|
||||
|
@ -27,7 +20,6 @@ export function Community({
|
|||
name={name}
|
||||
icon={icon}
|
||||
subtitle={`${members} members`}
|
||||
theme={theme}
|
||||
/>
|
||||
</button>
|
||||
</>
|
||||
|
|
|
@ -1,15 +1,12 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Theme } from "../styles/themes";
|
||||
|
||||
import { textMediumStyles } from "./Text";
|
||||
|
||||
export interface CommunityIdentityProps {
|
||||
icon: string;
|
||||
name: string;
|
||||
subtitle: string;
|
||||
theme: Theme;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
|
@ -18,14 +15,13 @@ export const CommunityIdentity = ({
|
|||
name,
|
||||
subtitle,
|
||||
className,
|
||||
theme,
|
||||
}: CommunityIdentityProps) => {
|
||||
return (
|
||||
<Row className={className}>
|
||||
<Logo src={icon} alt={`${name} logo`} />
|
||||
<Column>
|
||||
<Name theme={theme}>{name}</Name>
|
||||
<Subtitle theme={theme}>{subtitle}</Subtitle>
|
||||
<Name>{name}</Name>
|
||||
<Subtitle>{subtitle}</Subtitle>
|
||||
</Column>
|
||||
</Row>
|
||||
);
|
||||
|
|
|
@ -2,17 +2,15 @@ import React from "react";
|
|||
import styled from "styled-components";
|
||||
|
||||
import { ChannelData } from "../helpers/channelsMock";
|
||||
import { Theme } from "../styles/themes";
|
||||
|
||||
import { ChannelInfo, ChannelLogo, ChannelName } from "./Channels";
|
||||
import { textMediumStyles } from "./Text";
|
||||
|
||||
type EmptyChannelProps = {
|
||||
theme: Theme;
|
||||
channel: ChannelData;
|
||||
};
|
||||
|
||||
export function EmptyChannel({ theme, channel }: EmptyChannelProps) {
|
||||
export function EmptyChannel({ channel }: EmptyChannelProps) {
|
||||
return (
|
||||
<Wrapper>
|
||||
<ChannelInfoEmpty>
|
||||
|
@ -20,26 +18,19 @@ export function EmptyChannel({ theme, channel }: EmptyChannelProps) {
|
|||
style={{
|
||||
backgroundImage: channel.icon ? `url(${channel.icon}` : "",
|
||||
}}
|
||||
theme={theme}
|
||||
>
|
||||
{" "}
|
||||
{!channel.icon && channel.name.slice(0, 1).toUpperCase()}
|
||||
</ChannelLogoEmpty>
|
||||
<ChannelNameEmpty theme={theme} className={"active"}>
|
||||
{channel.name}
|
||||
</ChannelNameEmpty>
|
||||
<ChannelNameEmpty className={"active"}>{channel.name}</ChannelNameEmpty>
|
||||
</ChannelInfoEmpty>
|
||||
<EmptyText theme={theme}>
|
||||
<EmptyText>
|
||||
Welcome to the beginning of the <span>#{channel.name}</span> channel!
|
||||
</EmptyText>
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
|
||||
interface ThemeProps {
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -68,7 +59,7 @@ const ChannelNameEmpty = styled(ChannelName)`
|
|||
margin-bottom: 16px;
|
||||
`;
|
||||
|
||||
const EmptyText = styled.p<ThemeProps>`
|
||||
const EmptyText = styled.p`
|
||||
display: inline-block;
|
||||
color: ${({ theme }) => theme.secondary};
|
||||
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Theme } from "../../styles/themes";
|
||||
import { copy } from "../../utils/copy";
|
||||
import { reduceString } from "../../utils/reduceString";
|
||||
import { textMediumStyles, textSmallStyles } from "../Text";
|
||||
|
@ -9,18 +8,15 @@ import { textMediumStyles, textSmallStyles } from "../Text";
|
|||
interface CopyInputProps {
|
||||
label: string;
|
||||
value: string;
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
export const CopyInput = ({ label, value, theme }: CopyInputProps) => (
|
||||
export const CopyInput = ({ label, value }: CopyInputProps) => (
|
||||
<div>
|
||||
<Label theme={theme}>{label}</Label>
|
||||
<Wrapper theme={theme}>
|
||||
<Text theme={theme}>{reduceString(value, 15, 15)}</Text>
|
||||
<CopyButtonWrapper theme={theme}>
|
||||
<CopyButton theme={theme} onClick={() => copy(value)}>
|
||||
Copy
|
||||
</CopyButton>
|
||||
<Label>{label}</Label>
|
||||
<Wrapper>
|
||||
<Text>{reduceString(value, 15, 15)}</Text>
|
||||
<CopyButtonWrapper>
|
||||
<CopyButton onClick={() => copy(value)}>Copy</CopyButton>
|
||||
</CopyButtonWrapper>
|
||||
</Wrapper>
|
||||
</div>
|
||||
|
|
|
@ -1,11 +1,8 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Theme } from "../../styles/themes";
|
||||
|
||||
export const CrossIcon = ({ theme }: { theme: Theme }) => (
|
||||
export const CrossIcon = () => (
|
||||
<Icon
|
||||
theme={theme}
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
|
|
|
@ -1,21 +1,17 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Theme } from "../../styles/themes";
|
||||
|
||||
interface ThemeProps {
|
||||
theme: Theme;
|
||||
isActive?: boolean;
|
||||
}
|
||||
|
||||
export const EmojiIcon = ({ theme, isActive }: ThemeProps) => {
|
||||
export const EmojiIcon = ({ isActive }: ThemeProps) => {
|
||||
return (
|
||||
<Icon
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
theme={theme}
|
||||
>
|
||||
<path
|
||||
className={isActive ? "active" : ""}
|
||||
|
@ -39,7 +35,7 @@ export const EmojiIcon = ({ theme, isActive }: ThemeProps) => {
|
|||
);
|
||||
};
|
||||
|
||||
const Icon = styled.svg<ThemeProps>`
|
||||
const Icon = styled.svg`
|
||||
& > path {
|
||||
fill: ${({ theme }) => theme.secondary};
|
||||
}
|
||||
|
|
|
@ -1,21 +1,17 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Theme } from "../../styles/themes";
|
||||
|
||||
interface ThemeProps {
|
||||
theme: Theme;
|
||||
isActive?: boolean;
|
||||
}
|
||||
|
||||
export const GifIcon = ({ theme, isActive }: ThemeProps) => {
|
||||
export const GifIcon = ({ isActive }: ThemeProps) => {
|
||||
return (
|
||||
<Icon
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
theme={theme}
|
||||
>
|
||||
<path
|
||||
className={isActive ? "active" : ""}
|
||||
|
@ -39,7 +35,7 @@ export const GifIcon = ({ theme, isActive }: ThemeProps) => {
|
|||
);
|
||||
};
|
||||
|
||||
const Icon = styled.svg<ThemeProps>`
|
||||
const Icon = styled.svg`
|
||||
& > path {
|
||||
fill: ${({ theme }) => theme.secondary};
|
||||
}
|
||||
|
|
|
@ -1,8 +1,6 @@
|
|||
import React from "react";
|
||||
import styled, { keyframes } from "styled-components";
|
||||
|
||||
import { Theme } from "../../styles/themes";
|
||||
|
||||
const rotation = keyframes`
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
|
@ -12,13 +10,12 @@ const rotation = keyframes`
|
|||
}
|
||||
`;
|
||||
|
||||
export const LoadingIcon = ({ theme }: { theme: Theme }) => (
|
||||
export const LoadingIcon = () => (
|
||||
<Icon
|
||||
width="13"
|
||||
height="12"
|
||||
viewBox="0 0 13 12"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
theme={theme}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
|
|
|
@ -1,20 +1,13 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Theme } from "../../styles/themes";
|
||||
|
||||
interface ThemeProps {
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
export const MembersIcon = ({ theme }: ThemeProps) => {
|
||||
export const MembersIcon = () => {
|
||||
return (
|
||||
<Icon
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
theme={theme}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
|
@ -26,7 +19,7 @@ export const MembersIcon = ({ theme }: ThemeProps) => {
|
|||
);
|
||||
};
|
||||
|
||||
const Icon = styled.svg<ThemeProps>`
|
||||
const Icon = styled.svg`
|
||||
& > path {
|
||||
fill: ${({ theme }) => theme.primary};
|
||||
}
|
||||
|
|
|
@ -1,20 +1,13 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Theme } from "../../styles/themes";
|
||||
|
||||
interface ThemeProps {
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
export const MutedIcon = ({ theme }: ThemeProps) => {
|
||||
export const MutedIcon = () => {
|
||||
return (
|
||||
<Icon
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
theme={theme}
|
||||
>
|
||||
<path
|
||||
d="M8.70186 2.11736C8.91545 1.90377 8.89277 1.54794 8.62625 1.40578C8.13934 1.14607 7.58479 0.999998 7.00002 0.999998C5.27863 0.999998 3.8192 2.26576 3.57576 3.96984L3.14144 7.01005C3.11619 7.18684 3.43245 7.38677 3.55873 7.26049L8.70186 2.11736Z"
|
||||
|
@ -28,7 +21,7 @@ export const MutedIcon = ({ theme }: ThemeProps) => {
|
|||
);
|
||||
};
|
||||
|
||||
const Icon = styled.svg<ThemeProps>`
|
||||
const Icon = styled.svg`
|
||||
& > path {
|
||||
fill: ${({ theme }) => theme.primary};
|
||||
}
|
||||
|
|
|
@ -1,20 +1,13 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Theme } from "../../styles/themes";
|
||||
|
||||
interface ThemeProps {
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
export const PictureIcon = ({ theme }: ThemeProps) => {
|
||||
export const PictureIcon = () => {
|
||||
return (
|
||||
<Icon
|
||||
width="20"
|
||||
height="18"
|
||||
viewBox="0 0 20 18"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
theme={theme}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
|
@ -30,7 +23,7 @@ export const PictureIcon = ({ theme }: ThemeProps) => {
|
|||
);
|
||||
};
|
||||
|
||||
const Icon = styled.svg<ThemeProps>`
|
||||
const Icon = styled.svg`
|
||||
& > path {
|
||||
fill: ${({ theme }) => theme.secondary};
|
||||
}
|
||||
|
|
|
@ -1,11 +1,8 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Theme } from "../../styles/themes";
|
||||
|
||||
export const StatusLogo = ({ theme }: { theme: Theme }) => (
|
||||
export const StatusLogo = () => (
|
||||
<Icon
|
||||
theme={theme}
|
||||
width="171"
|
||||
height="64"
|
||||
viewBox="0 0 171 64"
|
||||
|
|
|
@ -1,21 +1,17 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Theme } from "../../styles/themes";
|
||||
|
||||
interface ThemeProps {
|
||||
theme: Theme;
|
||||
isActive?: boolean;
|
||||
}
|
||||
|
||||
export const StickerIcon = ({ theme, isActive }: ThemeProps) => {
|
||||
export const StickerIcon = ({ isActive }: ThemeProps) => {
|
||||
return (
|
||||
<Icon
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
theme={theme}
|
||||
>
|
||||
<path
|
||||
className={isActive ? "active" : ""}
|
||||
|
@ -31,7 +27,7 @@ export const StickerIcon = ({ theme, isActive }: ThemeProps) => {
|
|||
);
|
||||
};
|
||||
|
||||
const Icon = styled.svg<ThemeProps>`
|
||||
const Icon = styled.svg`
|
||||
& > path {
|
||||
fill: ${({ theme }) => theme.secondary};
|
||||
}
|
||||
|
|
|
@ -1,20 +1,16 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Theme } from "../../styles/themes";
|
||||
|
||||
interface UserIconProps {
|
||||
theme: Theme;
|
||||
memberView?: boolean;
|
||||
}
|
||||
|
||||
export const UserIcon = ({ theme, memberView }: UserIconProps) => {
|
||||
export const UserIcon = ({ memberView }: UserIconProps) => {
|
||||
return (
|
||||
<Icon
|
||||
viewBox="0 0 34 34"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
theme={theme}
|
||||
memberView={memberView}
|
||||
>
|
||||
<ellipse cx="17" cy="10.3883" rx="6.94445" ry="6.94445" />
|
||||
|
|
|
@ -3,39 +3,31 @@ import styled from "styled-components";
|
|||
|
||||
import { useNarrow } from "../contexts/narrowProvider";
|
||||
import { CommunityData } from "../helpers/communityMock";
|
||||
import { Theme } from "../styles/themes";
|
||||
|
||||
import { Icon } from "./Chat/ChatMessages";
|
||||
import { UserIcon } from "./Icons/UserIcon";
|
||||
|
||||
interface MembersProps {
|
||||
theme: Theme;
|
||||
community: CommunityData;
|
||||
setShowChannels: (val: boolean) => void;
|
||||
}
|
||||
|
||||
export function Members({ theme, community, setShowChannels }: MembersProps) {
|
||||
export function Members({ community, setShowChannels }: MembersProps) {
|
||||
return (
|
||||
<MembersWrapper theme={theme}>
|
||||
<MemberHeading theme={theme}>Members</MemberHeading>
|
||||
<MembersList
|
||||
theme={theme}
|
||||
community={community}
|
||||
setShowChannels={setShowChannels}
|
||||
/>
|
||||
<MembersWrapper>
|
||||
<MemberHeading>Members</MemberHeading>
|
||||
<MembersList community={community} setShowChannels={setShowChannels} />
|
||||
</MembersWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
interface MembersListProps {
|
||||
theme: Theme;
|
||||
community: CommunityData;
|
||||
setShowChannels: (val: boolean) => void;
|
||||
setShowMembers?: (val: boolean) => void;
|
||||
}
|
||||
|
||||
export function MembersList({
|
||||
theme,
|
||||
community,
|
||||
setShowChannels,
|
||||
setShowMembers,
|
||||
|
@ -43,22 +35,21 @@ export function MembersList({
|
|||
return (
|
||||
<MembersListWrap>
|
||||
<MemberCategory>
|
||||
<MemberCategoryName theme={theme}>You</MemberCategoryName>
|
||||
<MemberCategoryName>You</MemberCategoryName>
|
||||
<MemberData>
|
||||
<MemberIcon>
|
||||
<UserIcon theme={theme} memberView={true} />
|
||||
<UserIcon memberView={true} />
|
||||
</MemberIcon>
|
||||
<MemberName theme={theme}>Guest564732</MemberName>
|
||||
<MemberName>Guest564732</MemberName>
|
||||
</MemberData>
|
||||
</MemberCategory>
|
||||
<MemberCategory>
|
||||
<MemberCategoryName theme={theme}>Online</MemberCategoryName>
|
||||
<MemberCategoryName>Online</MemberCategoryName>
|
||||
{community.membersList
|
||||
.filter((member) => member.isOnline)
|
||||
.map((member) => (
|
||||
<Member
|
||||
key={member.id}
|
||||
theme={theme}
|
||||
member={member}
|
||||
isOnline={member.isOnline}
|
||||
setShowChannels={setShowChannels}
|
||||
|
@ -67,13 +58,12 @@ export function MembersList({
|
|||
))}
|
||||
</MemberCategory>
|
||||
<MemberCategory>
|
||||
<MemberCategoryName theme={theme}>Offline</MemberCategoryName>
|
||||
<MemberCategoryName>Offline</MemberCategoryName>
|
||||
{community.membersList
|
||||
.filter((member) => !member.isOnline)
|
||||
.map((member) => (
|
||||
<Member
|
||||
key={member.id}
|
||||
theme={theme}
|
||||
member={member}
|
||||
isOnline={member.isOnline}
|
||||
setShowChannels={setShowChannels}
|
||||
|
@ -86,7 +76,6 @@ export function MembersList({
|
|||
}
|
||||
|
||||
interface MemberProps {
|
||||
theme: Theme;
|
||||
member: any;
|
||||
isOnline: boolean;
|
||||
setShowChannels: (val: boolean) => void;
|
||||
|
@ -94,7 +83,6 @@ interface MemberProps {
|
|||
}
|
||||
|
||||
export function Member({
|
||||
theme,
|
||||
member,
|
||||
isOnline,
|
||||
setShowChannels,
|
||||
|
@ -118,20 +106,15 @@ export function Member({
|
|||
backgroundImage: member.avatar ? `url(${member.avatar})` : "unset",
|
||||
}}
|
||||
className={isOnline ? "online" : ""}
|
||||
theme={theme}
|
||||
>
|
||||
{!member.avatar && <UserIcon theme={theme} memberView={true} />}
|
||||
{!member.avatar && <UserIcon memberView={true} />}
|
||||
</MemberIcon>
|
||||
<MemberName theme={theme}>{member.name}</MemberName>
|
||||
<MemberName>{member.name}</MemberName>
|
||||
</MemberData>
|
||||
);
|
||||
}
|
||||
|
||||
interface ThemeProps {
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
const MembersWrapper = styled.div<ThemeProps>`
|
||||
const MembersWrapper = styled.div`
|
||||
width: 18%;
|
||||
height: 100%;
|
||||
min-width: 164px;
|
||||
|
@ -141,7 +124,7 @@ const MembersWrapper = styled.div<ThemeProps>`
|
|||
padding: 16px;
|
||||
`;
|
||||
|
||||
const MemberHeading = styled.h2<ThemeProps>`
|
||||
const MemberHeading = styled.h2`
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
|
@ -149,7 +132,7 @@ const MemberHeading = styled.h2<ThemeProps>`
|
|||
margin-bottom: 16px;
|
||||
`;
|
||||
|
||||
const MemberCategoryName = styled.h3<ThemeProps>`
|
||||
const MemberCategoryName = styled.h3`
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
|
@ -157,7 +140,7 @@ const MemberCategoryName = styled.h3<ThemeProps>`
|
|||
margin-bottom: 8px;
|
||||
`;
|
||||
|
||||
const MemberName = styled.p<ThemeProps>`
|
||||
const MemberName = styled.p`
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
|
@ -191,7 +174,7 @@ const MemberData = styled.div`
|
|||
margin-bottom: 16px;
|
||||
`;
|
||||
|
||||
const MemberIcon = styled(Icon)<ThemeProps>`
|
||||
const MemberIcon = styled(Icon)`
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
|
|
|
@ -26,39 +26,29 @@ export const CommunityModal = ({
|
|||
subtitle,
|
||||
description,
|
||||
publicKey,
|
||||
theme,
|
||||
}: CommunityModalProps) => {
|
||||
const narrow = useNarrow();
|
||||
|
||||
return (
|
||||
<Modal theme={theme} isVisible={isVisible} onClose={onClose}>
|
||||
<Section theme={theme}>
|
||||
<CommunityIdentity
|
||||
theme={theme}
|
||||
icon={icon}
|
||||
name={name}
|
||||
subtitle={subtitle}
|
||||
/>
|
||||
<Modal isVisible={isVisible} onClose={onClose}>
|
||||
<Section>
|
||||
<CommunityIdentity icon={icon} name={name} subtitle={subtitle} />
|
||||
</Section>
|
||||
<Section theme={theme}>
|
||||
<Text theme={theme}>{description}</Text>
|
||||
<Section>
|
||||
<Text>{description}</Text>
|
||||
</Section>
|
||||
<Section theme={theme}>
|
||||
<CopyInput
|
||||
theme={theme}
|
||||
value={publicKey}
|
||||
label="Community public key"
|
||||
/>
|
||||
<Hint theme={theme}>
|
||||
<Section>
|
||||
<CopyInput value={publicKey} label="Community public key" />
|
||||
<Hint>
|
||||
To access this community, paste community public key in Status desktop
|
||||
or mobile app.
|
||||
{narrow && <StyledDownloadButton theme={theme} />}
|
||||
{narrow && <StyledDownloadButton />}
|
||||
</Hint>
|
||||
</Section>
|
||||
{!narrow && (
|
||||
<BottomSection theme={theme}>
|
||||
<StatusLogo theme={theme} />
|
||||
<DownloadButton theme={theme} />
|
||||
<BottomSection>
|
||||
<StatusLogo />
|
||||
<DownloadButton />
|
||||
</BottomSection>
|
||||
)}
|
||||
</Modal>
|
||||
|
|
|
@ -2,14 +2,12 @@ import React, { ReactNode, useCallback, useEffect } from "react";
|
|||
import { createPortal } from "react-dom";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Theme } from "../../styles/themes";
|
||||
import { CrossIcon } from "../Icons/CrossIcon";
|
||||
|
||||
export interface BasicModalProps {
|
||||
isVisible: boolean;
|
||||
onClose: () => void;
|
||||
className?: string;
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
export interface ModalProps extends BasicModalProps {
|
||||
|
@ -21,7 +19,6 @@ export const Modal = ({
|
|||
onClose,
|
||||
children,
|
||||
className,
|
||||
theme,
|
||||
}: ModalProps) => {
|
||||
const listenKeyboard = useCallback(
|
||||
(event: KeyboardEvent) => {
|
||||
|
@ -45,10 +42,10 @@ export const Modal = ({
|
|||
|
||||
return createPortal(
|
||||
<ModalView>
|
||||
<ModalOverlay onClick={onClose} theme={theme} />
|
||||
<ModalBody theme={theme} className={className}>
|
||||
<ModalOverlay onClick={onClose} />
|
||||
<ModalBody className={className}>
|
||||
<CloseButton onClick={onClose}>
|
||||
<CrossIcon theme={theme} />
|
||||
<CrossIcon />
|
||||
</CloseButton>
|
||||
{children}
|
||||
</ModalBody>
|
||||
|
|
|
@ -2,13 +2,11 @@ import React from "react";
|
|||
import styled from "styled-components";
|
||||
|
||||
import { ChannelData, channels } from "../../helpers/channelsMock";
|
||||
import { Theme } from "../../styles/themes";
|
||||
import { Channel, ChannelList } from "../Channels";
|
||||
|
||||
import { NarrowTopbar } from "./NarrowTopbar";
|
||||
|
||||
interface NarrowChannelsProps {
|
||||
theme: Theme;
|
||||
community: string;
|
||||
notifications: { [id: string]: number };
|
||||
setActiveChannel: (val: ChannelData) => void;
|
||||
|
@ -17,7 +15,6 @@ interface NarrowChannelsProps {
|
|||
}
|
||||
|
||||
export function NarrowChannels({
|
||||
theme,
|
||||
community,
|
||||
notifications,
|
||||
setActiveChannel,
|
||||
|
@ -25,14 +22,13 @@ export function NarrowChannels({
|
|||
setShowChannels,
|
||||
}: NarrowChannelsProps) {
|
||||
return (
|
||||
<ListWrapper theme={theme}>
|
||||
<NarrowTopbar theme={theme} list="Channels" community={community} />
|
||||
<ListWrapper>
|
||||
<NarrowTopbar list="Channels" community={community} />
|
||||
<ChannelList>
|
||||
{channels.map((channel) => (
|
||||
<Channel
|
||||
key={channel.id}
|
||||
channel={channel}
|
||||
theme={theme}
|
||||
isActive={channel.id === activeChannelId}
|
||||
isMuted={channel.isMuted || false}
|
||||
notification={
|
||||
|
@ -51,11 +47,7 @@ export function NarrowChannels({
|
|||
);
|
||||
}
|
||||
|
||||
interface ThemeProps {
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
const ListWrapper = styled.div<ThemeProps>`
|
||||
const ListWrapper = styled.div`
|
||||
padding: 82px 18px 18px;
|
||||
background: ${({ theme }) => theme.bodyBackgroundColor};
|
||||
`;
|
||||
|
|
|
@ -2,33 +2,25 @@ import React from "react";
|
|||
import styled from "styled-components";
|
||||
|
||||
import { CommunityData } from "../../helpers/communityMock";
|
||||
import { Theme } from "../../styles/themes";
|
||||
import { MembersList } from "../Members";
|
||||
|
||||
import { NarrowTopbar } from "./NarrowTopbar";
|
||||
|
||||
interface NarrowMembersProps {
|
||||
theme: Theme;
|
||||
community: CommunityData;
|
||||
setShowChannels: (val: boolean) => void;
|
||||
setShowMembersList: (val: boolean) => void;
|
||||
}
|
||||
|
||||
export function NarrowMembers({
|
||||
theme,
|
||||
community,
|
||||
setShowChannels,
|
||||
setShowMembersList,
|
||||
}: NarrowMembersProps) {
|
||||
return (
|
||||
<ListWrapper theme={theme}>
|
||||
<NarrowTopbar
|
||||
theme={theme}
|
||||
list="Community members"
|
||||
community={community.name}
|
||||
/>
|
||||
<ListWrapper>
|
||||
<NarrowTopbar list="Community members" community={community.name} />
|
||||
<MembersList
|
||||
theme={theme}
|
||||
community={community}
|
||||
setShowChannels={setShowChannels}
|
||||
setShowMembers={setShowMembersList}
|
||||
|
@ -37,11 +29,7 @@ export function NarrowMembers({
|
|||
);
|
||||
}
|
||||
|
||||
interface ThemeProps {
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
const ListWrapper = styled.div<ThemeProps>`
|
||||
const ListWrapper = styled.div`
|
||||
padding: 82px 18px 18px;
|
||||
background: ${({ theme }) => theme.bodyBackgroundColor};
|
||||
`;
|
||||
|
|
|
@ -1,28 +1,21 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Theme } from "../../styles/themes";
|
||||
|
||||
interface NarrowTopbarProps {
|
||||
theme: Theme;
|
||||
list: string;
|
||||
community: string;
|
||||
}
|
||||
|
||||
export function NarrowTopbar({ theme, list, community }: NarrowTopbarProps) {
|
||||
export function NarrowTopbar({ list, community }: NarrowTopbarProps) {
|
||||
return (
|
||||
<TopbarWrapper theme={theme}>
|
||||
<Heading theme={theme}>{list}</Heading>
|
||||
<SubHeading theme={theme}>{community}</SubHeading>
|
||||
<TopbarWrapper>
|
||||
<Heading>{list}</Heading>
|
||||
<SubHeading>{community}</SubHeading>
|
||||
</TopbarWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
interface ThemeProps {
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
const TopbarWrapper = styled.div<ThemeProps>`
|
||||
const TopbarWrapper = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
@ -32,12 +25,12 @@ const TopbarWrapper = styled.div<ThemeProps>`
|
|||
position: relative;
|
||||
`;
|
||||
|
||||
const Heading = styled.p<ThemeProps>`
|
||||
const Heading = styled.p`
|
||||
font-weight: 500;
|
||||
color: ${({ theme }) => theme.primary};
|
||||
`;
|
||||
|
||||
const SubHeading = styled.p<ThemeProps>`
|
||||
const SubHeading = styled.p`
|
||||
font-weight: 500;
|
||||
color: ${({ theme }) => theme.secondary};
|
||||
`;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import React, { useRef } from "react";
|
||||
import { ThemeProvider } from "styled-components";
|
||||
|
||||
import { NarrowProvider } from "../contexts/narrowProvider";
|
||||
import { CommunityData } from "../helpers/communityMock";
|
||||
|
@ -17,15 +18,17 @@ interface ReactChatProps {
|
|||
export function ReactChat({ theme, community, fetchMetadata }: ReactChatProps) {
|
||||
const ref = useRef<HTMLHeadingElement>(null);
|
||||
return (
|
||||
<NarrowProvider myRef={ref}>
|
||||
<div ref={ref}>
|
||||
<GlobalStyle />
|
||||
<Chat
|
||||
theme={theme}
|
||||
community={community}
|
||||
fetchMetadata={fetchMetadata}
|
||||
/>
|
||||
</div>
|
||||
</NarrowProvider>
|
||||
<ThemeProvider theme={theme}>
|
||||
<NarrowProvider myRef={ref}>
|
||||
<div ref={ref}>
|
||||
<GlobalStyle />
|
||||
<Chat
|
||||
community={community}
|
||||
fetchMetadata={fetchMetadata}
|
||||
theme={theme}
|
||||
/>
|
||||
</div>
|
||||
</NarrowProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,24 +1,19 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Theme } from "../../styles/themes";
|
||||
import { LoadingIcon } from "../Icons/LoadingIcon";
|
||||
import { textSmallStyles } from "../Text";
|
||||
|
||||
interface LoadingProps {
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
export const Loading = ({ theme }: LoadingProps) => {
|
||||
export const Loading = () => {
|
||||
return (
|
||||
<LoadingBlock theme={theme}>
|
||||
<LoadingIcon theme={theme} />
|
||||
<LoadingBlock>
|
||||
<LoadingIcon />
|
||||
<LoadingText>Loading messages...</LoadingText>
|
||||
</LoadingBlock>
|
||||
);
|
||||
};
|
||||
|
||||
const LoadingBlock = styled.div<LoadingProps>`
|
||||
const LoadingBlock = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
|
@ -34,7 +29,7 @@ const LoadingBlock = styled.div<LoadingProps>`
|
|||
z-index: 2;
|
||||
`;
|
||||
|
||||
const LoadingText = styled.p<LoadingProps>`
|
||||
const LoadingText = styled.p`
|
||||
color: ${({ theme }) => theme.primary};
|
||||
margin-left: 8px;
|
||||
font-weight: 500;
|
||||
|
|
|
@ -1,56 +1,45 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Theme } from "../../styles/themes";
|
||||
|
||||
import { MessageSkeleton } from "./MessageSkeleton";
|
||||
import { Skeleton } from "./Skeleton";
|
||||
|
||||
interface LoadingSkeletonProps {
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
export const LoadingSkeleton = ({ theme }: LoadingSkeletonProps) => {
|
||||
export const LoadingSkeleton = () => {
|
||||
return (
|
||||
<Loading>
|
||||
<MessageSkeleton theme={theme}>
|
||||
<Skeleton theme={theme} />
|
||||
<MessageSkeleton>
|
||||
<Skeleton />
|
||||
</MessageSkeleton>
|
||||
<MessageSkeleton theme={theme}>
|
||||
<Skeleton theme={theme} />
|
||||
<MessageSkeleton>
|
||||
<Skeleton />
|
||||
</MessageSkeleton>
|
||||
<MessageSkeleton theme={theme}>
|
||||
<Skeleton theme={theme} />
|
||||
<MessageSkeleton>
|
||||
<Skeleton />
|
||||
</MessageSkeleton>
|
||||
<MessageSkeleton theme={theme}>
|
||||
<Skeleton theme={theme} />
|
||||
<MessageSkeleton>
|
||||
<Skeleton />
|
||||
</MessageSkeleton>
|
||||
<MessageSkeleton theme={theme}>
|
||||
<Skeleton theme={theme} />
|
||||
<Skeleton theme={theme} width="30%" />
|
||||
<MessageSkeleton>
|
||||
<Skeleton />
|
||||
<Skeleton width="30%" />
|
||||
</MessageSkeleton>
|
||||
<MessageSkeleton theme={theme}>
|
||||
<Skeleton theme={theme} width="70%" />
|
||||
<MessageSkeleton>
|
||||
<Skeleton width="70%" />
|
||||
</MessageSkeleton>
|
||||
<MessageSkeleton theme={theme}>
|
||||
<Skeleton theme={theme} width="40%" />
|
||||
<Skeleton theme={theme} width="25%" />
|
||||
<Skeleton theme={theme} width="30%" />
|
||||
<MessageSkeleton>
|
||||
<Skeleton width="40%" />
|
||||
<Skeleton width="25%" />
|
||||
<Skeleton width="30%" />
|
||||
</MessageSkeleton>
|
||||
<MessageSkeleton theme={theme}>
|
||||
<Skeleton theme={theme} width="50%" />
|
||||
<Skeleton
|
||||
theme={theme}
|
||||
width="147px"
|
||||
height="196px"
|
||||
borderRadius="16px"
|
||||
/>
|
||||
<MessageSkeleton>
|
||||
<Skeleton width="50%" />
|
||||
<Skeleton width="147px" height="196px" borderRadius="16px" />
|
||||
</MessageSkeleton>
|
||||
<MessageSkeleton theme={theme}>
|
||||
<Skeleton theme={theme} width="50%" />
|
||||
<MessageSkeleton>
|
||||
<Skeleton width="50%" />
|
||||
</MessageSkeleton>
|
||||
<MessageSkeleton theme={theme}>
|
||||
<Skeleton theme={theme} width="70%" />
|
||||
<MessageSkeleton>
|
||||
<Skeleton width="70%" />
|
||||
</MessageSkeleton>
|
||||
</Loading>
|
||||
);
|
||||
|
|
|
@ -1,28 +1,20 @@
|
|||
import React, { ReactNode } from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Theme } from "../../styles/themes";
|
||||
|
||||
import { Skeleton } from "./Skeleton";
|
||||
|
||||
interface MessageSkeletonProps {
|
||||
theme: Theme;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const MessageSkeleton = ({ theme, children }: MessageSkeletonProps) => {
|
||||
export const MessageSkeleton = ({ children }: MessageSkeletonProps) => {
|
||||
return (
|
||||
<MessageWrapper>
|
||||
<AvatarSkeleton
|
||||
width="40px"
|
||||
height="40px"
|
||||
borderRadius="50%"
|
||||
theme={theme}
|
||||
/>
|
||||
<AvatarSkeleton width="40px" height="40px" borderRadius="50%" />
|
||||
<ContentWrapper>
|
||||
<MessageHeaderWrapper>
|
||||
<UserNameSkeleton theme={theme} width="132px" />
|
||||
<TimeSkeleton theme={theme} width="47px" height="14px" />
|
||||
<UserNameSkeleton width="132px" />
|
||||
<TimeSkeleton width="47px" height="14px" />
|
||||
</MessageHeaderWrapper>
|
||||
<MessageBodyWrapper>{children}</MessageBodyWrapper>
|
||||
</ContentWrapper>
|
||||
|
|
|
@ -1,9 +1,6 @@
|
|||
import styled, { keyframes } from "styled-components";
|
||||
|
||||
import { Theme } from "../../styles/themes";
|
||||
|
||||
interface SkeletonProps {
|
||||
theme: Theme;
|
||||
width?: string;
|
||||
height?: string;
|
||||
borderRadius?: string;
|
||||
|
|
Loading…
Reference in New Issue