From 78296b041da8d8dfffbba8c942475318e8bd3aca Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Wed, 12 Jan 2022 06:44:12 +0100 Subject: [PATCH] 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> --- .../src/components/ActivityCenter.tsx | 2 +- .../src/components/Icons/CheckIcon.tsx | 2 +- .../src/components/Icons/CommunityIcon.tsx | 25 +++++++- .../src/components/Icons/ProfileIcon.tsx | 4 -- .../components/Messages/MessageReactions.tsx | 2 +- .../src/components/Modals/ProfileModal.tsx | 3 +- .../components/ToastMessages/ToastMessage.tsx | 59 +++++++++++++++---- packages/react-chat/src/models/Toast.ts | 4 +- packages/react-chat/src/styles/themes.ts | 9 ++- 9 files changed, 84 insertions(+), 26 deletions(-) diff --git a/packages/react-chat/src/components/ActivityCenter.tsx b/packages/react-chat/src/components/ActivityCenter.tsx index a1e838d7..4119b6d5 100644 --- a/packages/react-chat/src/components/ActivityCenter.tsx +++ b/packages/react-chat/src/components/ActivityCenter.tsx @@ -150,7 +150,7 @@ function ActivityMessage({ {`Invited you to join a community `} - + theme.bodyBackgroundColor}; } - &.accept { + &.green { fill: ${({ theme }) => theme.greenColor}; } `; diff --git a/packages/react-chat/src/components/Icons/CommunityIcon.tsx b/packages/react-chat/src/components/Icons/CommunityIcon.tsx index 374bf2e5..ab7fbc56 100644 --- a/packages/react-chat/src/components/Icons/CommunityIcon.tsx +++ b/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 ( { const Icon = styled.svg` fill: ${({ theme }) => theme.secondary}; + + &.green { + fill: ${({ theme }) => theme.greenColor}; + } + + &.red { + fill: ${({ theme }) => theme.redColor}; + } `; diff --git a/packages/react-chat/src/components/Icons/ProfileIcon.tsx b/packages/react-chat/src/components/Icons/ProfileIcon.tsx index dcb0f450..20b05c9f 100644 --- a/packages/react-chat/src/components/Icons/ProfileIcon.tsx +++ b/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}; - } `; diff --git a/packages/react-chat/src/components/Messages/MessageReactions.tsx b/packages/react-chat/src/components/Messages/MessageReactions.tsx index a594262f..15dbf442 100644 --- a/packages/react-chat/src/components/Messages/MessageReactions.tsx +++ b/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}; } diff --git a/packages/react-chat/src/components/Modals/ProfileModal.tsx b/packages/react-chat/src/components/Modals/ProfileModal.tsx index 04e9ab5b..3868f0dd 100644 --- a/packages/react-chat/src/components/Modals/ProfileModal.tsx +++ b/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), diff --git a/packages/react-chat/src/components/ToastMessages/ToastMessage.tsx b/packages/react-chat/src/components/ToastMessages/ToastMessage.tsx index 71b93dea..ced6ac55 100644 --- a/packages/react-chat/src/components/ToastMessages/ToastMessage.tsx +++ b/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 ( - {toast.type !== "verification" && ( - - - + {toast.type === "confirmation" && ( + + + )} - - {toast.type === "request" - ? "Contact Request Sent" - : "Verification Request Sent"} - + {toast.type === "incoming" && ( + + + + )} + {(toast.type === "approvement" || toast.type === "rejection") && ( + + + + )} + + {toast.text} + {toast.request && {toast.request}} + @@ -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` diff --git a/packages/react-chat/src/models/Toast.ts b/packages/react-chat/src/models/Toast.ts index 2d3622c9..706cccf0 100644 --- a/packages/react-chat/src/models/Toast.ts +++ b/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; }; diff --git a/packages/react-chat/src/styles/themes.ts b/packages/react-chat/src/styles/themes.ts index 87a82cde..98234da1 100644 --- a/packages/react-chat/src/styles/themes.ts +++ b/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 };