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>
This commit is contained in:
parent
97535066e9
commit
78296b041d
|
@ -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
|
||||
|
|
|
@ -37,7 +37,7 @@ const Icon = styled.svg`
|
|||
fill: ${({ theme }) => theme.bodyBackgroundColor};
|
||||
}
|
||||
|
||||
&.accept {
|
||||
&.green {
|
||||
fill: ${({ theme }) => theme.greenColor};
|
||||
}
|
||||
`;
|
||||
|
|
|
@ -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"
|
||||
height="16"
|
||||
width={width}
|
||||
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};
|
||||
}
|
||||
`;
|
||||
|
|
|
@ -38,8 +38,4 @@ export const ProfileIcon = () => {
|
|||
|
||||
const Icon = styled.svg`
|
||||
fill: ${({ theme }) => theme.tertiary};
|
||||
|
||||
&:hover {
|
||||
fill: ${({ theme }) => theme.bodyBackgroundColor};
|
||||
}
|
||||
`;
|
||||
|
|
|
@ -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};
|
||||
}
|
||||
|
|
|
@ -216,7 +216,8 @@ export const ProfileModal = () => {
|
|||
...prev,
|
||||
{
|
||||
id: id + request,
|
||||
type: "request",
|
||||
type: "confirmation",
|
||||
text: "Contact Request Sent",
|
||||
},
|
||||
]),
|
||||
setRequestCreation(false),
|
||||
|
|
|
@ -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" && (
|
||||
<CheckWrapper>
|
||||
<CheckSvg width={20} height={20} className="accept" />
|
||||
</CheckWrapper>
|
||||
{toast.type === "confirmation" && (
|
||||
<IconWrapper className="green">
|
||||
<CheckSvg width={20} height={20} className="green" />
|
||||
</IconWrapper>
|
||||
)}
|
||||
<ToastText>
|
||||
{toast.type === "request"
|
||||
? "Contact Request Sent"
|
||||
: "Verification Request Sent"}
|
||||
</ToastText>
|
||||
{toast.type === "incoming" && (
|
||||
<IconWrapper className="blue">
|
||||
<ProfileSvg width={20} height={20} />
|
||||
</IconWrapper>
|
||||
)}
|
||||
{(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`
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
export type Toast = {
|
||||
id: string;
|
||||
type: "request" | "incomeRequest" | "verification";
|
||||
type: "confirmation" | "incoming" | "approvement" | "rejection";
|
||||
text: string;
|
||||
request?: string;
|
||||
};
|
||||
|
|
|
@ -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 };
|
||||
|
|
Loading…
Reference in New Issue