Improve toast messages (#184)

* Add styles for icons

* Add theme colors

* Improve toast message

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

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

@@ -150,7 +150,7 @@ function ActivityMessage({
               <FlexDiv>
                 <ContextHeading>{`Invited you to join a community `}</ContextHeading>
                 <Tag>
-                  <CommunityIcon />
+                  <CommunityIcon width={17} height={16} />
                   <CommunityLogo
                     style={{
                       backgroundImage: activity.invitation?.icon

packages/react-chat/src/components/Icons/CheckIcon.tsx

@@ -37,7 +37,7 @@ const Icon = styled.svg`
     fill: ${({ theme }) => theme.bodyBackgroundColor};
   }
 
-  &.accept {
+  &.green {
     fill: ${({ theme }) => theme.greenColor};
   }
 `;

packages/react-chat/src/components/Icons/CommunityIcon.tsx

@@ -1,14 +1,25 @@
 import React from "react";
 import styled from "styled-components";
 
-export const CommunityIcon = () => {
+type CommunityIconProps = {
+  width: number;
+  height: number;
+  className?: string;
+};
+
+export const CommunityIcon = ({
+  width,
+  height,
+  className,
+}: CommunityIconProps) => {
   return (
     <Icon
-      width="17"
+      width={width}
-      height="16"
+      height={height}
       viewBox="0 0 17 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      className={className}
     >
       <path
         fillRule="evenodd"
@@ -21,4 +32,12 @@ export const CommunityIcon = () => {
 
 const Icon = styled.svg`
   fill: ${({ theme }) => theme.secondary};
+
+  &.green {
+    fill: ${({ theme }) => theme.greenColor};
+  }
+
+  &.red {
+    fill: ${({ theme }) => theme.redColor};
+  }
 `;

packages/react-chat/src/components/Icons/ProfileIcon.tsx

@@ -38,8 +38,4 @@ export const ProfileIcon = () => {
 
 const Icon = styled.svg`
   fill: ${({ theme }) => theme.tertiary};
-
-  &:hover {
-    fill: ${({ theme }) => theme.bodyBackgroundColor};
-  }
 `;

packages/react-chat/src/components/Messages/MessageReactions.tsx

@@ -65,7 +65,7 @@ const EmojiReaction = styled.button`
   }
 
   &.chosen {
-    background: ${({ theme }) => theme.reactionChosen};
+    background: ${({ theme }) => theme.blueBg};
     border: 1px solid ${({ theme }) => theme.tertiary};
     color: ${({ theme }) => theme.tertiary};
   }

packages/react-chat/src/components/Modals/ProfileModal.tsx

@@ -216,7 +216,8 @@ export const ProfileModal = () => {
                     ...prev,
                     {
                       id: id + request,
-                      type: "request",
+                      type: "confirmation",
+                      text: "Contact Request Sent",
                     },
                   ]),
                   setRequestCreation(false),

packages/react-chat/src/components/ToastMessages/ToastMessage.tsx

@@ -3,8 +3,11 @@ import styled, { keyframes } from "styled-components";
 
 import { useToasts } from "../../contexts/toastProvider";
 import { Toast } from "../../models/Toast";
+import { Column } from "../CommunityIdentity";
 import { CheckSvg } from "../Icons/CheckIcon";
+import { CommunityIcon } from "../Icons/CommunityIcon";
 import { CrossIcon } from "../Icons/CrossIcon";
+import { ProfileSvg } from "../Icons/ProfileIcon";
 import { textSmallStyles } from "../Text";
 
 export function AnimationToastMessage() {
@@ -32,16 +35,31 @@ export function ToastMessage({ toast }: ToastMessageProps) {
   return (
     <ToastWrapper>
       <ToastBlock>
-        {toast.type !== "verification" && (
+        {toast.type === "confirmation" && (
-          <CheckWrapper>
+          <IconWrapper className="green">
-            <CheckSvg width={20} height={20} className="accept" />
+            <CheckSvg width={20} height={20} className="green" />
-          </CheckWrapper>
+          </IconWrapper>
         )}
-        <ToastText>
+        {toast.type === "incoming" && (
-          {toast.type === "request"
+          <IconWrapper className="blue">
-            ? "Contact Request Sent"
+            <ProfileSvg width={20} height={20} />
-            : "Verification Request Sent"}
+          </IconWrapper>
-        </ToastText>
+        )}
+        {(toast.type === "approvement" || toast.type === "rejection") && (
+          <IconWrapper
+            className={toast.type === "approvement" ? "green" : "red"}
+          >
+            <CommunityIcon
+              width={20}
+              height={19}
+              className={toast.type === "approvement" ? "green" : "red"}
+            />
+          </IconWrapper>
+        )}
+        <Column>
+          <ToastText>{toast.text}</ToastText>
+          {toast.request && <ToastRequest>{toast.request}</ToastRequest>}
+        </Column>
       </ToastBlock>
       <CloseButton onClick={closeToast}>
         <CrossIcon />
@@ -74,7 +92,15 @@ const ToastText = styled.p`
   ${textSmallStyles};
 `;
 
-const CheckWrapper = styled.div`
+const ToastRequest = styled(ToastText)`
+  width: 243px;
+  color: ${({ theme }) => theme.secondary};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+
+const IconWrapper = styled.div`
   width: 32px;
   height: 32px;
   display: flex;
@@ -82,7 +108,18 @@ const CheckWrapper = styled.div`
   align-items: center;
   border-radius: 50%;
   margin-right: 12px;
-  background: rgba(78, 188, 96, 0.1);
+
+  &.green {
+    background: ${({ theme }) => theme.greenBg};
+  }
+
+  &.blue {
+    background: ${({ theme }) => theme.blueBg};
+  }
+
+  &.red {
+    background: ${({ theme }) => theme.buttonNoBg};
+  }
 `;
 
 const CloseButton = styled.button`

packages/react-chat/src/models/Toast.ts

@@ -1,4 +1,6 @@
 export type Toast = {
   id: string;
-  type: "request" | "incomeRequest" | "verification";
+  type: "confirmation" | "incoming" | "approvement" | "rejection";
+  text: string;
+  request?: string;
 };

packages/react-chat/src/styles/themes.ts

@@ -22,13 +22,14 @@ export type Theme = {
   skeletonDark: string;
   redColor: string;
   greenColor: string;
+  greenBg: string;
   mentionColor: string;
   mentionHover: string;
   mentionBg: string;
   mentionBgHover: string;
   shadow: string;
   reactionBg: string;
-  reactionChosen: string;
+  blueBg: string;
 };
 
 export const lightTheme: Theme = {
@@ -56,6 +57,7 @@ export const lightTheme: Theme = {
   skeletonDark: "#E9EDF1",
   redColor: "#FF2D55",
   greenColor: "#4EBC60",
+  greenBg: "rgba(78, 188, 96, 0.1)",
   mentionColor: "#0DA4C9",
   mentionHover: "#BDE7F2",
   mentionBg: "#E5F8FD",
@@ -63,7 +65,7 @@ export const lightTheme: Theme = {
   shadow:
     "0px 2px 4px rgba(0, 34, 51, 0.16), 0px 4px 12px rgba(0, 34, 51, 0.08)",
   reactionBg: "#eceffc",
-  reactionChosen: "rgba(67, 96, 223, 0.1)",
+  blueBg: "rgba(67, 96, 223, 0.1)",
 };
 
 export const darkTheme: Theme = {
@@ -91,6 +93,7 @@ export const darkTheme: Theme = {
   skeletonDark: "#141414",
   redColor: "#FF5C7B",
   greenColor: "#60C370",
+  greenBg: "rgba(96, 195, 112, 0.2)",
   mentionColor: "#51D0F0",
   mentionHover: "#004E60",
   mentionBg: "#004050",
@@ -98,7 +101,7 @@ export const darkTheme: Theme = {
   shadow:
     "0px 2px 4px rgba(0, 34, 51, 0.16), 0px 4px 12px rgba(0, 34, 51, 0.08)",
   reactionBg: "#373737",
-  reactionChosen: "rgba(134, 158, 255, 0.3)",
+  blueBg: "rgba(134, 158, 255, 0.3)",
 };
 
 export default { lightTheme, darkTheme };