{activity.message?.content && (
{elements.map((el) => el)}
@@ -166,6 +188,12 @@ function ActivityMessage({
)}
+ {type === "invitation" && (
+
+ {`To access other communities, `}
+
+
+ )}
>
{type === "request" &&
@@ -211,7 +239,7 @@ function ActivityMessage({
{type === "request" && activity.status === "sent" && (
Sent
)}
- {type !== "request" && (
+ {(type === "mention" || type === "reply") && (
{
@@ -263,14 +291,14 @@ export function ActivityCenter({ setShowActivityCenter }: ActivityCenterProps) {
return (
-
+
setFilter("")}>All
setFilter("mention")}>Mentions
setFilter("reply")}>Replies
setFilter("request")}>
Contact requests
-
+
theme.secondary};
flex-shrink: 0;
+ white-space: pre-wrap;
${textMediumStyles}
`;
@@ -504,3 +538,11 @@ const ReplyWrapper = styled.div`
margin-right: 4px;
}
`;
+
+const CommunityLogo = styled(Logo)`
+ width: 16px;
+ height: 16px;
+ margin: 0 2px 0 4px;
+
+ ${textSmallStyles}
+`;
diff --git a/packages/react-chat/src/components/Buttons/DownloadButton.tsx b/packages/react-chat/src/components/Buttons/DownloadButton.tsx
index 9597984..9734b6a 100644
--- a/packages/react-chat/src/components/Buttons/DownloadButton.tsx
+++ b/packages/react-chat/src/components/Buttons/DownloadButton.tsx
@@ -53,7 +53,9 @@ export const DownloadButton = ({ className }: DownloadButtonProps) => {
target="_blank"
rel="noopener noreferrer"
>
- {os ? `Download Status for ${os}` : "Download Status"}
+ {os
+ ? `${className === "activity" ? "d" : "D"}ownload Status for ${os}`
+ : `${className === "activity" ? "d" : "D"}ownload Status`}
);
};
@@ -67,4 +69,20 @@ const Link = styled.a`
&:hover {
background: ${({ theme }) => theme.buttonBgHover};
}
+
+ &.activity {
+ margin: 0;
+ padding: 0;
+ color: ${({ theme }) => theme.secondary};
+ font-style: italic;
+ border-radius: 0;
+ font-weight: 400;
+ text-decoration: underline;
+ background: inherit;
+
+ &:hover {
+ background: inherit;
+ color: ${({ theme }) => theme.tertiary};
+ }
+ }
`;
diff --git a/packages/react-chat/src/components/CommunityIdentity.tsx b/packages/react-chat/src/components/CommunityIdentity.tsx
index 445eeb8..1219e9a 100644
--- a/packages/react-chat/src/components/CommunityIdentity.tsx
+++ b/packages/react-chat/src/components/CommunityIdentity.tsx
@@ -47,7 +47,7 @@ export const Column = styled.div`
align-items: flex-start;
`;
-const Logo = styled.div`
+export const Logo = styled.div`
width: 36px;
height: 36px;
display: flex;
diff --git a/packages/react-chat/src/components/Icons/CommunityIcon.tsx b/packages/react-chat/src/components/Icons/CommunityIcon.tsx
new file mode 100644
index 0000000..374bf2e
--- /dev/null
+++ b/packages/react-chat/src/components/Icons/CommunityIcon.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import styled from "styled-components";
+
+export const CommunityIcon = () => {
+ return (
+
+
+
+ );
+};
+
+const Icon = styled.svg`
+ fill: ${({ theme }) => theme.secondary};
+`;
diff --git a/packages/react-chat/src/models/Activity.ts b/packages/react-chat/src/models/Activity.ts
index d02113c..97ff869 100644
--- a/packages/react-chat/src/models/Activity.ts
+++ b/packages/react-chat/src/models/Activity.ts
@@ -1,9 +1,10 @@
import { ChannelData } from "./ChannelData";
import { ChatMessage } from "./ChatMessage";
+import { CommunityData } from "./CommunityData";
export type Activity = {
id: string;
- type: "mention" | "request" | "reply";
+ type: "mention" | "request" | "reply" | "invitation";
isRead?: boolean;
date: Date;
user: string;
@@ -13,6 +14,7 @@ export type Activity = {
requestType?: "outcome" | "income";
status?: "sent" | "accepted" | "declined" | "blocked";
quote?: ChatMessage;
+ invitation?: CommunityData;
};
export type Activities = {