fix(Notifications): Updated Notifications' illustrations (#99)

gravity-ui · Sep 1, 2023 · 5b2ce45 · 5b2ce45
1 parent 6f2e2dc
commit 5b2ce45
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 22 deletions.
diff --git a/src/components/Notifications/NotificationsEmptyState.tsx b/src/components/Notifications/NotificationsEmptyState.tsx
@@ -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';
 
@@ -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 ? (