Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update the colors of the illustrations in the welcome modal to use the theme spot color (https://github.com/woocommerce/woocommerce-admin/pull/4945)

This commit is contained in:
James Koster 2020-08-07 00:58:00 +01:00 committed by GitHub
parent fd69c155fd
commit 2c592b1209
4 changed files with 39 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
plugins/woocommerce-admin/client/homescreen/welcome-modal/illustrations/inbox.js
View File

@ -13,7 +13,7 @@ export const InboxIllustration = () => {
>
<defs />
<g clipPath="url(#clip0)">
<path fill="#3858E9" d="M0 0h517v160H0z" />
<path className="fill-theme-color" d="M0 0h517v160H0z" />
<path
fill="#fff"
fillOpacity=".65"
@ -21,7 +21,7 @@ export const InboxIllustration = () => {
/>
<path fill="#F6F7F7" d="M113 33h267v185H113z" />
<path
fill="#3858E9"
className="fill-theme-color"
d="M248.466 73.79h-114.69V47.88h114.69V73.79zm-114.015-.673h113.341V48.554H134.451v24.563z"
/>
<path
@ -29,26 +29,26 @@ export const InboxIllustration = () => {
d="M155.702 56.63h-12.818v12.786h12.818V56.63z"
/>
<path
fill="#3858E9"
className="fill-theme-color"
d="M154.016 67.733h-13.493V54.274h13.493v13.46zm-12.819-.673h12.144V54.947h-12.144V67.06z"
/>
<path
fill="#3858E9"
className="fill-theme-color"
d="M225.267 56.966h-50v.673h50v-.673z"
opacity=".7"
/>
<path
fill="#3858E9"
className="fill-theme-color"
d="M235.311 61.677h-60.044v.673h60.044v-.673z"
opacity=".5"
/>
<path
fill="#3858E9"
className="fill-theme-color"
d="M225.267 66.387h-50v.673h50v-.673z"
opacity=".2"
/>
<path
fill="#3858E9"
className="fill-theme-color"
d="M248.466 147.142h-114.69v-25.909h114.69v25.909zm-114.015-.673h113.341v-24.563H134.451v24.563z"
/>
<path
@ -56,26 +56,26 @@ export const InboxIllustration = () => {
d="M155.702 129.981h-12.818v12.786h12.818v-12.786z"
/>
<path
fill="#3858E9"
className="fill-theme-color"
d="M154.016 141.085h-13.493v-13.459h13.493v13.459zm-12.819-.673h12.144v-12.113h-12.144v12.113z"
/>
<path
fill="#3858E9"
className="fill-theme-color"
d="M235.311 130.318h-60.044v.673h60.044v-.673z"
opacity=".7"
/>
<path
fill="#3858E9"
className="fill-theme-color"
d="M225.267 135.028h-50v.673h50v-.673z"
opacity=".5"
/>
<path
fill="#3858E9"
className="fill-theme-color"
d="M215.267 139.739h-40v.673h40v-.673z"
opacity=".2"
/>
<path
fill="#3858E9"
className="fill-theme-color"
d="M289.62 110.465H174.93V84.557h114.69v25.908zm-114.016-.672h113.341V85.23H175.604v24.563z"
/>
<path
@ -83,31 +83,31 @@ export const InboxIllustration = () => {
d="M267.694 106.092h12.818V93.305h-12.818v12.787z"
/>
<path
fill="#3858E9"
className="fill-theme-color"
d="M282.873 104.409H269.38V90.95h13.493v13.459zm-12.818-.673h12.144V91.623h-12.144v12.113z"
/>
<path
fill="#3858E9"
className="fill-theme-color"
d="M248.129 93.642h-60.044v.673h60.044v-.673z"
opacity=".7"
/>
<path
fill="#3858E9"
className="fill-theme-color"
d="M238.085 98.353h-50v.672h50v-.672z"
opacity=".5"
/>
<path
fill="#3858E9"
className="fill-theme-color"
d="M243.085 103.063h-55v.673h55v-.673z"
opacity=".2"
/>
<path
fill="#3858E9"
className="fill-theme-color"
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
fill="#3858E9"
className="fill-theme-color"
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
@ -115,13 +115,13 @@ export const InboxIllustration = () => {
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
fill="#3858E9"
className="fill-theme-color"
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"
/>
<path fill="#3858E9" d="M384 130h-42v2h42v-2z" />
<path className="fill-theme-color" d="M384 130h-42v2h42v-2z" />
<path fill="#fff" d="M335 112a7 7 0 100-14 7 7 0 000 14z" />
<path
fill="#3858E9"
className="fill-theme-color"
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>

14
plugins/woocommerce-admin/client/homescreen/welcome-modal/illustrations/line-chart.js
View File

File diff suppressed because one or more lines are too long

14
plugins/woocommerce-admin/client/homescreen/welcome-modal/illustrations/pie-chart.js
View File

@ -13,7 +13,7 @@ export const PieChartIllustration = () => {
>
<defs />
<g clipPath="url(#clip0)">
<path fill="#3858E9" d="M0 0h517v160H0z" />
<path className="fill-theme-color" d="M0 0h517v160H0z" />
<path
fill="#fff"
fillOpacity=".65"
@ -21,27 +21,27 @@ export const PieChartIllustration = () => {
/>
<path fill="#F6F7F7" d="M124 33h267v185H124z" />
<path
fill="#3858E9"
className="fill-theme-color"
d="M169 152.005V229a734.947 734.947 0 01-15.628-.991l-2.372-.181v-75.823c0-.395.072-.785.212-1.15.14-.365.345-.696.604-.975.258-.279.565-.5.903-.651a2.61 2.61 0 011.066-.229h12.43c.366 0 .728.078 1.066.229.338.151.645.372.903.651.259.279.464.61.604.975.14.365.212.755.212 1.15z"
opacity=".7"
/>
<path
fill="#3858E9"
className="fill-theme-color"
d="M186 229.733V127.377c0-.63.31-1.235.861-1.681.551-.446 1.299-.696 2.079-.696h13.12c.386 0 .768.061 1.125.181.357.119.681.294.954.515.273.221.489.483.637.771.148.289.224.598.224.91V230l-19-.267z"
opacity=".5"
/>
<path
fill="#3858E9"
className="fill-theme-color"
d="M225 230.002v-97.406a2.843 2.843 0 012.843-2.845h12.689a2.844 2.844 0 012.844 2.845v97.196l-18.376.21z"
opacity=".7"
/>
<path
fill="#3858E9"
className="fill-theme-color"
d="M282 88.368v140.224c-6 .145-12 .281-18 .408V88.368c0-.628.293-1.23.816-1.674.522-.445 1.231-.694 1.969-.694h12.43c.738 0 1.447.25 1.969.694.523.444.816 1.046.816 1.674z"
opacity=".5"
/>
<path
fill="#3858E9"
className="fill-theme-color"
d="M319 112.954v115.709c-6 .12-12 .232-18 .337V112.954c0-.518.293-1.015.816-1.382.522-.366 1.231-.572 1.969-.572h12.43c.738 0 1.447.206 1.969.572.523.367.816.864.816 1.382z"
opacity=".7"
/>
@ -53,7 +53,7 @@ export const PieChartIllustration = () => {
d="M160.125 133.501l41.91-46.767 41.91 23.545 41.91-72.248 41.909 34.511"
/>
<path
fill="#3858E9"
className="fill-theme-color"
d="M160 139.005c2.761 0 5-2.24 5-5.003a5.002 5.002 0 00-5-5.002c-2.761 0-5 2.24-5 5.002a5.002 5.002 0 005 5.003zM201.5 93.007c4.142 0 7.5-3.36 7.5-7.504A7.502 7.502 0 00201.5 78c-4.142 0-7.5 3.36-7.5 7.504a7.502 7.502 0 007.5 7.503zM243.784 119.31c4.985 0 9.026-4.043 9.026-9.031s-4.041-9.031-9.026-9.031c-4.986 0-9.027 4.043-9.027 9.031s4.041 9.031 9.027 9.031zM286.027 46.062c4.985 0 9.027-4.043 9.027-9.031S291.012 28 286.027 28c-4.986 0-9.027 4.043-9.027 9.031s4.041 9.031 9.027 9.031zM327.5 80.007c4.142 0 7.5-3.36 7.5-7.504A7.502 7.502 0 00327.5 65c-4.142 0-7.5 3.36-7.5 7.504a7.502 7.502 0 007.5 7.503zM408 137l-36 2-18-30.926c5.588-3.326 12.033-5.083 18.606-5.074C392.154 103 408 118.222 408 137zM351.107 110l-.143.088c-7.887 4.836-13.573 12.518-15.859 21.429a35.211 35.211 0 003.603 26.338l.084.145L370 140.317 351.107 110zm-12.19 47.543a34.886 34.886 0 01-3.485-25.944c2.25-8.77 7.826-16.342 15.566-21.138l18.531 29.738-30.612 17.344zM408.664 138.651l-35.891 2.797 10.3 32.297.162-.046c7.808-2.265 14.585-6.957 19.211-13.301 4.626-6.344 6.824-13.96 6.23-21.588l-.012-.159zm-35.447 3.081l35.134-2.738c1.116 15.348-9.387 29.753-25.051 34.355l-10.083-31.617zM370.719 142.639l-30.714 17.335.088.131c3.977 5.942 9.926 10.554 16.982 13.165 7.056 2.61 14.849 3.083 22.245 1.349l.164-.038-8.765-31.942zm-30.249 17.435l30.034-16.951 8.57 31.234c-7.278 1.673-14.935 1.192-21.871-1.374-6.936-2.566-12.794-7.086-16.733-12.909z"
/>
<path

4
plugins/woocommerce-admin/client/homescreen/welcome-modal/style.scss
View File

@ -62,4 +62,8 @@
outline: 1px solid transparent;
}
}
.fill-theme-color {
fill: var(--wp-admin-theme-color);
}
}