Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Notifications): Updated Notifications' illustrations #99

Merged
merged 1 commit into from
Sep 1, 2023
Merged

fix(Notifications): Updated Notifications' illustrations #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 3 additions & 11 deletions src/components/Notifications/NotificationsEmptyState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';

import {Icon, useTheme} from '@gravity-ui/uikit';
import {Icon} from '@gravity-ui/uikit';

import {block} from '../utils/cn';

Expand All @@ -10,22 +10,14 @@ import './Notifications.scss';

const b = block('notifications');

const nothingFoundSvg = `<svg xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#E3EBF2" fill-opacity=".9" d="M34.4 46.365c0-8.26 6.697-14.956 14.957-14.956h58.33c8.261 0 14.957 6.696 14.957 14.956v58.331c0 8.26-6.696 14.956-14.957 14.956h-58.33c-8.26 0-14.957-6.696-14.957-14.956v-58.33Z"/><path stroke="#262626" stroke-linejoin="bevel" stroke-width="1.496" d="M105.323 59.991c-13.377 5.885-26.954 2.761-33.69-2.408 14.613 47.822 6.297 71.213-6.237 72.455-19.19 1.902-25.334-40.183-14.268-44.09 11.066-3.908 20.42 34.102-4.389 69.024a94.306 94.306 0 0 1-3.861 5.063"/><g filter="url(#a)"><path fill="#5282FF" fill-opacity=".9" d="M88.992 50.104a8.974 8.974 0 0 1 8.974-8.974h26.922a8.974 8.974 0 0 1 8.974 8.974v26.922A8.974 8.974 0 0 1 124.888 86H97.966a8.974 8.974 0 0 1-8.974-8.974V50.104Z"/></g><g filter="url(#b)"><path fill="#fff" fill-opacity=".8" fill-rule="evenodd" d="M99.91 58.081a2.742 2.742 0 1 0 0-5.484 2.742 2.742 0 0 0 0 5.484Zm6.889-4.25a1.508 1.508 0 1 0 0 3.016h17.481a1.508 1.508 0 1 0 0-3.016h-17.481Zm0 16.452a1.508 1.508 0 1 0 0 3.016h17.481a1.508 1.508 0 1 0 0-3.016h-17.481Zm-1.508-6.718c0-.833.675-1.508 1.508-1.508h17.481a1.508 1.508 0 1 1 0 3.016h-17.481a1.508 1.508 0 0 1-1.508-1.508Zm-2.639 0a2.742 2.742 0 1 1-5.484 0 2.742 2.742 0 0 1 5.484 0ZM99.91 74.533a2.742 2.742 0 1 0 0-5.484 2.742 2.742 0 0 0 0 5.484Z" clip-rule="evenodd"/></g><path fill="#262626" d="m125.404 109.343 7.31-1.755a1.496 1.496 0 0 0 1.147-1.454v-.062c0-.606-.367-1.153-.928-1.383L113.9 96.871a1.588 1.588 0 0 0-2.072 2.073l7.817 19.033c.23.561.777.927 1.383.927h.062c.692 0 1.293-.474 1.454-1.146l1.755-7.31a1.494 1.494 0 0 1 1.105-1.105Z"/><defs><filter id="a" width="50.852" height="50.852" x="86.001" y="38.139" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImageFix" stdDeviation="1.496"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_3666_191029"/><feBlend in="SourceGraphic" in2="effect1_backgroundBlur_3666_191029" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="1.122"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/><feBlend in2="shape" result="effect2_innerShadow_3666_191029"/></filter><filter id="b" width="28.62" height="21.936" x="97.168" y="52.597" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation=".748"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/><feBlend in2="shape" result="effect1_innerShadow_3666_191029"/></filter></defs></svg>`;

const nothingFoundDarkSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="172" height="172" fill="none"><path fill="#E3EBF2" fill-opacity=".9" d="M34.4 46.365c0-8.26 6.697-14.956 14.957-14.956h58.33c8.261 0 14.957 6.696 14.957 14.956v58.331c0 8.26-6.696 14.956-14.957 14.956h-58.33c-8.26 0-14.957-6.696-14.957-14.956v-58.33Z"/><path stroke="#fff" stroke-linejoin="bevel" stroke-width="1.496" d="M105.324 59.991c-13.377 5.885-26.954 2.761-33.69-2.408 14.613 47.822 6.297 71.213-6.237 72.455-19.19 1.902-25.334-40.183-14.268-44.09 11.066-3.908 20.42 34.102-4.389 69.024a94.306 94.306 0 0 1-3.861 5.063"/><g filter="url(#a)"><path fill="#5282FF" fill-opacity=".9" d="M88.992 50.104a8.974 8.974 0 0 1 8.974-8.974h26.922a8.974 8.974 0 0 1 8.974 8.974v26.922A8.974 8.974 0 0 1 124.888 86H97.966a8.974 8.974 0 0 1-8.974-8.974V50.104Z"/></g><g filter="url(#b)"><path fill="#fff" fill-opacity=".8" fill-rule="evenodd" d="M99.91 58.081a2.742 2.742 0 1 0 0-5.484 2.742 2.742 0 0 0 0 5.484Zm6.889-4.25a1.508 1.508 0 1 0 0 3.016h17.481a1.508 1.508 0 1 0 0-3.016h-17.481Zm0 16.452a1.508 1.508 0 1 0 0 3.016h17.481a1.508 1.508 0 1 0 0-3.016h-17.481Zm-1.508-6.718c0-.833.675-1.508 1.508-1.508h17.481a1.508 1.508 0 1 1 0 3.016h-17.481a1.508 1.508 0 0 1-1.508-1.508Zm-2.639 0a2.742 2.742 0 1 1-5.484 0 2.742 2.742 0 0 1 5.484 0ZM99.91 74.533a2.742 2.742 0 1 0 0-5.484 2.742 2.742 0 0 0 0 5.484Z" clip-rule="evenodd"/></g><path fill="#fff" d="m125.404 109.343 7.31-1.755a1.496 1.496 0 0 0 1.147-1.454v-.062c0-.606-.367-1.153-.928-1.383L113.9 96.871a1.588 1.588 0 0 0-2.072 2.073l7.817 19.033c.23.561.777.927 1.383.927h.062c.692 0 1.293-.474 1.454-1.146l1.755-7.31a1.494 1.494 0 0 1 1.105-1.105Z"/><defs><filter id="a" width="50.852" height="50.852" x="86.001" y="38.139" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImageFix" stdDeviation="1.496"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_157_23037"/><feBlend in="SourceGraphic" in2="effect1_backgroundBlur_157_23037" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="1.122"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/><feBlend in2="shape" result="effect2_innerShadow_157_23037"/></filter><filter id="b" width="28.619" height="21.936" x="97.168" y="52.597" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation=".748"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/><feBlend in2="shape" result="effect1_innerShadow_157_23037"/></filter></defs></svg>`;
const nothingFoundSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="172" height="172" fill="none"><path d="M0 0h172v172H0z"/><path fill="#ECF2F9" fill-rule="evenodd" d="M138.82 73.223c4.092-6.182 6.138-14.192 6.138-24.074 0-14.975-5.094-26.947-15.367-35.784C119.404 4.44 102.165 0 83.141 0c-5.703 0-10.492.392-15.15 1.175-4.658.784-8.75 1.698-12.276 2.743-2.351.697-7.01 2.481-10.144 3.744-1.785.74-3.003 2.612-3.003 4.702v17.195c0 3.57 3.395 6.008 6.486 4.571.268-.12.53-.24.786-.356 1.03-.468 1.938-.88 2.566-1.124 2.481-1.001 5.398-1.828 8.75-2.525 3.352-.697 7.096-1.045 11.188-1.045 9.665 0 18.763 2.177 22.768 6.487 4.005 4.353 6.008 9.795 6.008 16.325 0 5.659-1.176 10.491-3.57 14.453-2.394 3.961-5.703 7.836-9.969 11.536a438.068 438.068 0 0 0-9.577 8.62 48.083 48.083 0 0 0-7.619 9.011c-2.133 3.265-3.787 6.965-4.919 11.014-.697 2.438-1.175 8.837-1.437 13.495-.13 2.874 1.96 5.311 4.659 5.311h22.289c2.35 0 4.353-1.915 4.614-4.44.261-2.481.87-5.442 2.394-7.749 1.742-2.568 3.788-5.137 6.4-7.531 2.612-2.395 5.659-4.789 9.098-7.27 3.483-2.438 7.053-5.268 10.84-8.446 5.572-4.963 10.405-10.491 14.497-16.673Zm-72.963 92.595c3.918 4.136 8.75 6.182 14.54 6.182a18.59 18.59 0 0 0 7.923-1.741c2.526-1.132 4.746-2.612 6.618-4.484 1.871-1.872 3.352-4.092 4.44-6.617 1.088-2.525 1.611-5.268 1.611-8.272 0-2.96-.523-5.746-1.611-8.271a22.497 22.497 0 0 0-4.44-6.704c-1.872-1.959-4.093-3.439-6.618-4.484a20.57 20.57 0 0 0-7.922-1.567c-5.79 0-10.623 2.002-14.54 6.051-3.919 4.048-5.878 9.055-5.878 15.019 0 5.833 1.96 10.796 5.877 14.888Z" clip-rule="evenodd"/><path stroke="#00E6C5" stroke-dasharray="5.75 5.75" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M98.16 153.586H13.923c-4.353 0-7.923-3.57-7.923-7.923V91.072c0-4.354 3.57-7.923 7.923-7.923H98.16c4.353 0 7.923 3.57 7.923 7.923v54.591c0 4.396-3.57 7.923-7.923 7.923Z" clip-rule="evenodd"/><path fill="#2EE5C0" d="M15.675 93.167a1.792 1.792 0 1 0 0-3.584 1.792 1.792 0 0 0 0 3.584ZM21.408 93.167a1.792 1.792 0 1 0 0-3.583 1.792 1.792 0 0 0 0 3.583ZM27.142 93.167a1.792 1.792 0 1 0 0-3.584 1.792 1.792 0 0 0 0 3.584Z"/><path stroke="#00E6C5" stroke-dasharray="5.75 5.75" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.583 99.259h96.034"/><path fill="#027BF3" d="m136.078 115.189-94.424 5.224c-3.178.174-5.79-2.263-5.79-5.441V42.097c0-3.178 2.612-5.616 5.79-5.442l94.424 5.224c2.437.13 4.396 2.482 4.396 5.224v62.862c0 2.743-1.959 5.094-4.396 5.224Z"/><path fill="#fff" fill-rule="evenodd" d="M44.397 46.885c1.48.087 2.655-1.044 2.655-2.524s-1.175-2.743-2.655-2.787A2.504 2.504 0 0 0 41.74 44.1c0 1.48 1.175 2.743 2.656 2.786Zm8.619.349a2.52 2.52 0 0 0 2.612-2.525c0-1.437-1.175-2.656-2.612-2.743a2.52 2.52 0 0 0-2.612 2.525c0 1.437 1.175 2.7 2.612 2.743Zm10.97-2.134c0 1.437-1.131 2.569-2.524 2.482-1.394-.044-2.569-1.263-2.569-2.7 0-1.436 1.132-2.568 2.569-2.48 1.392.043 2.524 1.262 2.524 2.698Zm27.918 28.097 7.034-7.782 6.408 7.112-6.96 7.782 6.96 7.633-6.408 7.26-7.034-7.632-7.144 8.005-6.666-7.112 7.218-8.005-7.218-7.82 6.666-7.26 7.144 7.819Z" clip-rule="evenodd"/><path fill="#67B0F8" d="M147.57 49.019c0-12.364-9.446-16.151-14.583-16.5-.044 0-14.584 1.002-14.584 19.721 0 11.101 9.229 19.808 20.025 19.416 3.396-.13 6.487-1.132 9.142-2.786V49.019Z"/><path fill="#FF4645" d="M170.686 85.195c-1.262 1.48-3.308 1.61-4.571.348l-16.804-16.978 4.92-5.31 16.455 16.977c1.263 1.306 1.263 3.483 0 4.963Z"/><path fill="#D93654" d="m154.274 63.297-4.92 5.311 1.611 1.611c.827.827 2.133.87 2.96.087.479-.435.958-.914 1.393-1.393.262-.305.566-.61.828-.914a2.14 2.14 0 0 0-.131-2.873l-1.741-1.829Z"/><path fill="#00236B" fill-rule="evenodd" d="M121.537 66.998c-10.013-9.316-10.013-24.945 0-34 9.534-8.62 23.987-7.4 32.389 1.872 8.01 8.881 8.01 22.507 0 31.17-8.402 9.055-22.855 9.839-32.389.958Zm4.092-4.702c6.791 6.53 17.326 6.182 23.552-.392 6.007-6.356 6.007-16.455 0-22.985-6.226-6.748-16.761-7.4-23.552-1.089-7.052 6.574-7.052 17.718 0 24.466Z" clip-rule="evenodd"/><path fill="#2EE5C0" d="M23.02 18.502a1 1 0 1 0-2 0h2Zm-2 3.613a1 1 0 1 0 2 0h-2Zm2 7.488a1 1 0 1 0-2 0h2Zm-2 3.874a1 1 0 1 0 2 0h-2Zm8.488-6.488a1 1 0 1 0 0-2v2Zm-3.57-2a1 1 0 0 0 0 2v-2Zm-7.793 2a1 1 0 1 0 0-2v2Zm-3.57-2a1 1 0 1 0 0 2v-2Zm6.445-6.487v3.613h2v-3.613h-2Zm0 11.1v3.875h2v-3.874h-2Zm8.488-4.613h-3.57v2h3.57v-2Zm-11.363 0h-3.57v2h3.57v-2Z"/></svg>`;

type Props = {image?: React.ReactNode; content: React.ReactNode};

export const NotificationsEmptyState = React.memo(function NotificationsEmptyState(props: Props) {
const theme = useTheme();

return (
<div className={b('empty')}>
{props.image ? (
props.image
) : (
<Icon data={theme === 'light' ? nothingFoundSvg : nothingFoundDarkSvg} size={172} />
)}
{props.image ? props.image : <Icon data={nothingFoundSvg} size={172} />}
<div className={b('empty-message')}>
<div className={b('empty-title')}>{i18n('no-notifications')}</div>
{props.content ? (
Expand Down
Loading