Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
woocommerce/plugins/woocommerce-admin/client/homescreen/welcome-modal/illustrations/inbox.js

136 lines
5.8 KiB
JavaScript
Raw Normal View History

Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
/**
* External dependencies
*/
import React from '@wordpress/element';
export const InboxIllustration = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="517"
height="160"
fill="none"
>
<defs />
<g clipPath="url(#clip0)">
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
<path className="fill-theme-color" d="M0 0h517v160H0z" />
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
<path
fill="#fff"
fillOpacity=".65"
d="M33.576 185.926c-6.271-.911-14.742-.279-17.182 7.085-1.239 3.736-.178 7.645.98 11.08 4.89 14.682 11.49 28.444 19.643 40.954 3.897 5.965 8.253 11.884 9.592 19.504 1.34 7.619-.56 16.084-2.934 23.945-5.595 18.62-13.762 36.371-24.188 52.572 16.006 9.711 34.165 19.634 52.684 12.57 11.09-4.232 21.041-14.268 32.365-15.961 7.562-1.132 14.735 1.648 21.594 4.467a998.376 998.376 0 0195.343 45.227c13.023 7.042 26.207 14.481 40.901 16.153 14.694 1.672 31.486-3.518 41.947-17.66 1.611-2.179 3.241-4.669 5.483-5.546 2.02-.776 4.069-.045 5.952.688l113.896 44.033c6.241 2.411 12.718 4.853 19.534 3.832 6.606-.985 12.833-5.095 18.858-9.148 13.771-9.237 29.242-21.105 32.239-39.005 2.407-14.347-4.339-27.253-11.974-37.283-7.636-10.03-16.705-19.204-20.353-32.315-5.549-19.955 2.798-42.949 9.281-64.164a405.4 405.4 0 0013.244-58.574c2.588-17.377 4.004-35.179.91-51.659-3.095-16.481-11.265-31.624-24.089-38.27-16.746-8.681-38.828-2.057-54.255-13.347-13.04-9.513-17.58-29.035-25.856-44.316-14.698-27.146-41.453-40.923-67.958-50.405-28.1-10.066-58.213-16.679-88.607-10-6.962 1.527-14.047 3.833-20.152 8.649-9.36 7.388-15.196 19.616-22.986 29.33C156.104 57.468 100.341 49.156 68.22 87.48c-11.398 13.594-17.581 31.878-18.797 49.831-1.31 19.318 8.69 33.652 8.706 50.888-7.135 2.277-17.21-1.211-24.553-2.273z"
/>
<path fill="#F6F7F7" d="M113 33h267v185H113z" />
<path
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
className="fill-theme-color"
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
d="M248.466 73.79h-114.69V47.88h114.69V73.79zm-114.015-.673h113.341V48.554H134.451v24.563z"
/>
<path
fill="#CCC"
d="M155.702 56.63h-12.818v12.786h12.818V56.63z"
/>
<path
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
className="fill-theme-color"
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
d="M154.016 67.733h-13.493V54.274h13.493v13.46zm-12.819-.673h12.144V54.947h-12.144V67.06z"
/>
<path
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
className="fill-theme-color"
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
d="M225.267 56.966h-50v.673h50v-.673z"
opacity=".7"
/>
<path
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
className="fill-theme-color"
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
d="M235.311 61.677h-60.044v.673h60.044v-.673z"
opacity=".5"
/>
<path
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
className="fill-theme-color"
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
d="M225.267 66.387h-50v.673h50v-.673z"
opacity=".2"
/>
<path
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
className="fill-theme-color"
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
d="M248.466 147.142h-114.69v-25.909h114.69v25.909zm-114.015-.673h113.341v-24.563H134.451v24.563z"
/>
<path
fill="#CCC"
d="M155.702 129.981h-12.818v12.786h12.818v-12.786z"
/>
<path
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
className="fill-theme-color"
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
d="M154.016 141.085h-13.493v-13.459h13.493v13.459zm-12.819-.673h12.144v-12.113h-12.144v12.113z"
/>
<path
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
className="fill-theme-color"
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
d="M235.311 130.318h-60.044v.673h60.044v-.673z"
opacity=".7"
/>
<path
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
className="fill-theme-color"
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
d="M225.267 135.028h-50v.673h50v-.673z"
opacity=".5"
/>
<path
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
className="fill-theme-color"
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
d="M215.267 139.739h-40v.673h40v-.673z"
opacity=".2"
/>
<path
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
className="fill-theme-color"
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
d="M289.62 110.465H174.93V84.557h114.69v25.908zm-114.016-.672h113.341V85.23H175.604v24.563z"
/>
<path
fill="#CCC"
d="M267.694 106.092h12.818V93.305h-12.818v12.787z"
/>
<path
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
className="fill-theme-color"
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
d="M282.873 104.409H269.38V90.95h13.493v13.459zm-12.818-.673h12.144V91.623h-12.144v12.113z"
/>
<path
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
className="fill-theme-color"
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
d="M248.129 93.642h-60.044v.673h60.044v-.673z"
opacity=".7"
/>
<path
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
className="fill-theme-color"
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
d="M238.085 98.353h-50v.672h50v-.672z"
opacity=".5"
/>
<path
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
className="fill-theme-color"
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
d="M243.085 103.063h-55v.673h55v-.673z"
opacity=".2"
/>
<path
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
className="fill-theme-color"
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
d="M266.035 66.154a5.363 5.363 0 005.369-5.356 5.363 5.363 0 00-5.369-5.356c-2.966 0-5.37 2.398-5.37 5.356 0 2.958 2.404 5.356 5.37 5.356zM273.793 140.515c2.966 0 5.37-2.398 5.37-5.356 0-2.958-2.404-5.356-5.37-5.356a5.363 5.363 0 00-5.369 5.356 5.363 5.363 0 005.369 5.356zM153.706 102.83a5.363 5.363 0 005.37-5.356c0-2.959-2.404-5.357-5.37-5.357s-5.37 2.398-5.37 5.357a5.363 5.363 0 005.37 5.356z"
opacity=".5"
/>
<path
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
className="fill-theme-color"
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
d="M401.276 172h-70.552a8.79 8.79 0 01-6.169-2.517 8.532 8.532 0 01-2.555-6.078V131.56a3.368 3.368 0 011.078-2.471l37.386-34.915A8.113 8.113 0 01366 92c2.06 0 4.041.778 5.536 2.174l35.645 33.289a8.882 8.882 0 012.084 2.944 8.78 8.78 0 01.735 3.515v29.483c0 2.28-.919 4.466-2.555 6.078a8.79 8.79 0 01-6.169 2.517z"
/>
<path
fill="#F0F0F0"
d="M393.267 106h-54.534c-2.614 0-4.733 2.053-4.733 4.585v52.83c0 2.532 2.119 4.585 4.733 4.585h54.534c2.614 0 4.733-2.053 4.733-4.585v-52.83c0-2.532-2.119-4.585-4.733-4.585z"
/>
<path
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
className="fill-theme-color"
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
d="M366 150.493l-41.579-20.323a1.667 1.667 0 00-1.631.091 1.695 1.695 0 00-.579.619 1.725 1.725 0 00-.211.826v34.967a5.345 5.345 0 001.543 3.767 5.261 5.261 0 003.725 1.56h77.464a5.261 5.261 0 003.725-1.56 5.345 5.345 0 001.543-3.767v-34.368c0-.352-.088-.699-.257-1.008a2.069 2.069 0 00-1.688-1.071 2.035 2.035 0 00-1.009.205L366 150.493zM390 118h-48v2h48v-2zM390 124h-48v2h48v-2z"
/>
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
<path className="fill-theme-color" d="M384 130h-42v2h42v-2z" />
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
<path fill="#fff" d="M335 112a7 7 0 100-14 7 7 0 000 14z" />
<path
Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)
2020-08-06 23:58:00 +00:00
className="fill-theme-color"
Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890) Fixes woocommerce/woocommerce-admin#4590 This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly. This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 00:14:56 +00:00
d="M336 98a8.003 8.003 0 00-7.391 4.939 7.992 7.992 0 00-.455 4.622 7.993 7.993 0 006.285 6.285A8 8 0 00344 106a8.022 8.022 0 00-8-8zm-1.642 12.265l-4.1-4.1 1.15-1.15 2.954 2.954 6.234-6.234 1.15 1.15-7.388 7.38z"
/>
</g>
<defs>
<clipPath id="clip0">
<path fill="#fff" d="M0 0h517v160H0z" />
</clipPath>
</defs>
</svg>
);
};