Lock activity center (#183)

* Add input placeholder

* Lock activity center without identity

* Change cursor for disabled buttons

Co-authored-by: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>

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

@@ -261,7 +261,12 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
               onKeyUp={handleCursorChange}
               ref={inputRef}
               onClick={handleCursorChange}
-              dangerouslySetInnerHTML={{ __html: clearComponent }}
+              dangerouslySetInnerHTML={{
+                __html: disabled
+                  ? "You need to join this community to send messages"
+                  : clearComponent,
+              }}
+              className={`${disabled && "disabled"} `}
             />
             {query && (
               <SearchBlock
@@ -280,13 +285,14 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
                   setShowEmoji(!showEmoji);
                 }
               }}
+              disabled={disabled}
             >
               <EmojiIcon isActive={showEmoji} />
             </ChatButton>
-            <ChatButton>
+            <ChatButton disabled={disabled}>
               <StickerIcon />
             </ChatButton>
-            <ChatButton>
+            <ChatButton disabled={disabled}>
               <GifIcon />
             </ChatButton>
           </InputButtons>
@@ -363,12 +369,14 @@ const Input = styled.div`
   color: ${({ theme }) => theme.primary};
   border-radius: 16px 16px 4px 16px;
   outline: none;
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: normal;
 
   ${textMediumStyles};
 
+  &.disabled {
+    color: ${({ theme }) => theme.secondary};
+    cursor: default;
+  }
+
   &:focus {
     outline: none;
     caret-color: ${({ theme }) => theme.notificationColor};
@@ -390,6 +398,7 @@ const Input = styled.div`
 
     &:hover {
       background: ${({ theme }) => theme.mentionBgHover};
+      cursor: default;
     }
   }
 `;
@@ -416,6 +425,10 @@ const AddPictureInput = styled.input`
 const ChatButton = styled.button`
   width: 32px;
   height: 32px;
+
+  &:disabled {
+    cursor: default;
+  }
 `;
 
 const CloseButton = styled(ChatButton)`
@@ -423,6 +436,7 @@ const CloseButton = styled(ChatButton)`
   top: 0;
   right: 0;
 `;
+
 const ReplyWrapper = styled.div`
   display: flex;
   flex-direction: column;

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

@@ -1,7 +1,8 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import styled from "styled-components";
 
 import { useActivities } from "../../contexts/activityProvider";
+import { useIdentity } from "../../contexts/identityProvider";
 import { useMessengerContext } from "../../contexts/messengerProvider";
 import { useNarrow } from "../../contexts/narrowProvider";
 import { ActivityCenter } from "../ActivityCenter";
@@ -36,7 +37,7 @@ export function ChatTopbarLoading() {
           <MoreIcon />
         </TopBtn>
         <ActivityWrapper>
-          <TopBtn>
+          <TopBtn disabled>
             <ActivityIcon />
           </TopBtn>
         </ActivityWrapper>
@@ -66,6 +67,8 @@ export function ChatTopbar({
   const narrow = useNarrow();
   const [showChannelMenu, setShowChannelMenu] = useState(false);
   const [showActivityCenter, setShowActivityCenter] = useState(false);
+  const identity = useIdentity();
+  const disabled = useMemo(() => !identity, [identity]);
 
   if (!activeChannel) {
     return <ChatTopbarLoading />;
@@ -108,7 +111,10 @@ export function ChatTopbar({
           <MoreIcon />
         </TopBtn>
         <ActivityWrapper>
-          <TopBtn onClick={() => setShowActivityCenter(!showActivityCenter)}>
+          <TopBtn
+            onClick={() => setShowActivityCenter(!showActivityCenter)}
+            disabled={disabled}
+          >
             <ActivityIcon />
             {activities.length > 0 && (
               <NotificationBagde
@@ -229,6 +235,10 @@ export const TopBtn = styled.button`
   &:active {
     background: ${({ theme }) => theme.sectionBackgroundColor};
   }
+
+  &:disabled {
+    cursor: default;
+  }
 `;
 
 const NotificationBagde = styled.div`