Add theme Provider (#53)

2021-10-08 10:16:49 +02:00 · 2021-10-08 10:16:49 +02:00 · 5ffd8a537d
parent 02647e967d
commit 5ffd8a537d
32 changed files with 163 additions and 385 deletions
--- a/packages/react-chat/src/components/Buttons/DownloadButton.tsx
+++ b/packages/react-chat/src/components/Buttons/DownloadButton.tsx
@ -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"
    >
--- a/packages/react-chat/src/components/Channels.tsx
+++ b/packages/react-chat/src/components/Channels.tsx
@ -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%;
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/packages/react-chat/src/components/Chat.tsx
@ -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"
--- a/packages/react-chat/src/components/Chat/ChatBody.tsx
+++ b/packages/react-chat/src/components/Chat/ChatBody.tsx
@ -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;
--- a/packages/react-chat/src/components/Chat/ChatInput.tsx
+++ b/packages/react-chat/src/components/Chat/ChatInput.tsx
@ -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};
--- a/packages/react-chat/src/components/Chat/ChatMessageContent.tsx
+++ b/packages/react-chat/src/components/Chat/ChatMessageContent.tsx
@ -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]
--- a/packages/react-chat/src/components/Chat/ChatMessages.tsx
+++ b/packages/react-chat/src/components/Chat/ChatMessages.tsx
@ -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;
--- a/packages/react-chat/src/components/Community.tsx
+++ b/packages/react-chat/src/components/Community.tsx
@ -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>
    </>
--- a/packages/react-chat/src/components/CommunityIdentity.tsx
+++ b/packages/react-chat/src/components/CommunityIdentity.tsx
@ -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>
  );
--- a/packages/react-chat/src/components/EmptyChannel.tsx
+++ b/packages/react-chat/src/components/EmptyChannel.tsx
@ -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};

--- a/packages/react-chat/src/components/Form/CopyInput.tsx
+++ b/packages/react-chat/src/components/Form/CopyInput.tsx
@ -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>
--- a/packages/react-chat/src/components/Icons/CrossIcon.tsx
+++ b/packages/react-chat/src/components/Icons/CrossIcon.tsx
@ -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"
--- a/packages/react-chat/src/components/Icons/EmojiIcon.tsx
+++ b/packages/react-chat/src/components/Icons/EmojiIcon.tsx
@ -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};
  }
--- a/packages/react-chat/src/components/Icons/GifIcon.tsx
+++ b/packages/react-chat/src/components/Icons/GifIcon.tsx
@ -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};
  }
--- a/packages/react-chat/src/components/Icons/LoadingIcon.tsx
+++ b/packages/react-chat/src/components/Icons/LoadingIcon.tsx
@ -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"
--- a/packages/react-chat/src/components/Icons/MembersIcon.tsx
+++ b/packages/react-chat/src/components/Icons/MembersIcon.tsx
@ -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};
  }
--- a/packages/react-chat/src/components/Icons/MutedIcon.tsx
+++ b/packages/react-chat/src/components/Icons/MutedIcon.tsx
@ -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};
  }
--- a/packages/react-chat/src/components/Icons/PictureIcon.tsx
+++ b/packages/react-chat/src/components/Icons/PictureIcon.tsx
@ -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};
  }
--- a/packages/react-chat/src/components/Icons/StatusLogo.tsx
+++ b/packages/react-chat/src/components/Icons/StatusLogo.tsx
@ -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"
--- a/packages/react-chat/src/components/Icons/StickerIcon.tsx
+++ b/packages/react-chat/src/components/Icons/StickerIcon.tsx
@ -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};
  }
--- a/packages/react-chat/src/components/Icons/UserIcon.tsx
+++ b/packages/react-chat/src/components/Icons/UserIcon.tsx
@ -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" />
--- a/packages/react-chat/src/components/Members.tsx
+++ b/packages/react-chat/src/components/Members.tsx
@ -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;
--- a/packages/react-chat/src/components/Modals/CommunityModal.tsx
+++ b/packages/react-chat/src/components/Modals/CommunityModal.tsx
@ -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>
--- a/packages/react-chat/src/components/Modals/Modal.tsx
+++ b/packages/react-chat/src/components/Modals/Modal.tsx
@ -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>
--- a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
+++ b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
@ -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};
 `;
--- a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx
+++ b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx
@ -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};
 `;
--- a/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx
+++ b/packages/react-chat/src/components/NarrowMode/NarrowTopbar.tsx
@ -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};
 `;
--- a/packages/react-chat/src/components/ReactChat.tsx
+++ b/packages/react-chat/src/components/ReactChat.tsx
@ -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 (
+    <ThemeProvider theme={theme}>
      <NarrowProvider myRef={ref}>
        <div ref={ref}>
          <GlobalStyle />
          <Chat
-          theme={theme}
            community={community}
            fetchMetadata={fetchMetadata}
+            theme={theme}
          />
        </div>
      </NarrowProvider>
+    </ThemeProvider>
  );
 }
--- a/packages/react-chat/src/components/Skeleton/Loading.tsx
+++ b/packages/react-chat/src/components/Skeleton/Loading.tsx
@ -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;
--- a/packages/react-chat/src/components/Skeleton/LoadingSkeleton.tsx
+++ b/packages/react-chat/src/components/Skeleton/LoadingSkeleton.tsx
@ -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>
  );
--- a/packages/react-chat/src/components/Skeleton/MessageSkeleton.tsx
+++ b/packages/react-chat/src/components/Skeleton/MessageSkeleton.tsx
@ -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>
--- a/packages/react-chat/src/components/Skeleton/Skeleton.tsx
+++ b/packages/react-chat/src/components/Skeleton/Skeleton.tsx
@ -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;