[ProfilePicker]: Add dark mode illustration for the main view.

Screenshot:
https://drive.google.com/file/d/1Sj_NH5SekuGy-XEQa-rAcbJua-CEyC5x/view?usp=sharing

Bug: 1063856
Change-Id: I2e553c6891a3ca3e7bf74db17bcca671c8fe8353
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2339420
Commit-Queue: Monica Basta <msalama@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#795399}

chrome/browser/resources/signin/profile_picker/images/dark_mode_left_banner_image.svg

+<svg width="250" height="628" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44.8 159.201l-8.3 43.1c-.5 2.4 1.9 4.4 4.2 3.6l41.5-14.3c2.3-.8 2.9-3.8 1.1-5.4l-33.3-28.8c-1.8-1.6-4.7-.6-5.2 1.8z" fill="#FDD663"/><path d="M69.4 46.2L52.8 41c-1.7-.5-3.5.4-4 2.1l-5.2 16.6c-.5 1.7.4 3.5 2.1 4l16.6 5.2c1.7.5 3.5-.4 4-2.1l5.2-16.6c.5-1.7-.4-3.5-2.1-4z" stroke="#606367" stroke-width="2" stroke-miterlimit="10"/><path d="M45.2 281.3a8.6 8.6 0 10-.001-17.2 8.6 8.6 0 000 17.2z" fill="#606367"/><path d="M122 164.6a8.6 8.6 0 100-17.2 8.6 8.6 0 000 17.2z" fill="#81C995"/><path d="M60.5 536.9L22.7 528c-1.7-.4-3.4.7-3.8 2.4L10 568.1c-.4 1.7.7 3.4 2.4 3.8l37.8 8.9c1.7.4 3.4-.7 3.8-2.4l8.9-37.8c.4-1.6-.7-3.3-2.4-3.7z" fill="#FDD663"/><path d="M116.101 351.6l-17.7 11.8c-1 .6-1.5 1.7-1.4 2.9l1.4 21.2c.1 1.1.7 2.2 1.8 2.7l19.1 9.5c1 .5 2.2.4 3.2-.2l17.7-11.8c1-.6 1.5-1.7 1.4-2.9l-1.4-21.2c-.1-1.1-.7-2.2-1.8-2.7l-19.1-9.5c-1-.5-2.2-.5-3.2.2z" fill="#3D4043"/><path d="M44.5 413.399c3.6 4.8 2.6 11.6-2.2 15.3-4.8 3.7-11.6 2.6-15.3-2.2-3.6-4.8-2.6-11.6 2.2-15.3 4.8-3.7 11.7-2.6 15.3 2.2zm-23.2-12.9c-10.7 8-12.9 23.2-4.9 33.9s23.2 12.9 33.9 4.9 12.9-23.2 4.9-33.9-23.2-12.9-33.9-4.9z" fill="#F28B82"/><path d="M91.7 283.3l-28.9 36.4c-1.1 1.4-.9 3.4.5 4.5l15.1 12c1.4 1.1 3.4.9 4.5-.5l28.9-36.4c1.1-1.4.9-3.4-.5-4.5l-15.1-12c-1.4-1.1-3.4-.9-4.5.5z" fill="#8AB4F8"/><path d="M144 401.7c7.124 0 12.9-5.775 12.9-12.9 0-7.124-5.776-12.9-12.9-12.9-7.125 0-12.9 5.776-12.9 12.9 0 7.125 5.775 12.9 12.9 12.9z" fill="#FDD663"/><path d="M131.201 388.101c-.1 1.8.2 3.4.7 5l8.2-5.5c1-.6 1.5-1.7 1.4-2.9l-.5-8.4c-5.4 1.3-9.5 6-9.8 11.8z" fill="#FDE293"/><path d="M98.2 502.3c6.101-7.3 5.101-18.2-2.2-24.3-2.6-2.2-5.7-3.499-8.8-3.899l-4.4-.6c-4.3-.5-8.2-2.9-10.5-6.5l-2.9-4.3c-.6-.8-1.3-1.6-2.1-2.2-5.2-4.3-12.9-3.7-17.3 1.5S46.3 474.9 51.5 479.3c.8.7 1.7 1.2 2.5 1.6l4.7 2.1c4 1.7 7 5.101 8.3 9.201l1.3 4.199c1 3 2.8 5.8 5.4 8 7.5 6.2 18.4 5.2 24.5-2.1z" stroke="#606367" stroke-width="2" stroke-miterlimit="10"/><path d="M20.7 538.299c-1.2-.3-2.4-.5-3.6-.6l-7.2 30.6c-.4 1.6.6 3.3 2.3 3.6l29.1 6.9c.6-1.5 1.1-3.1 1.5-4.7 3.8-16-6.1-32-22.1-35.8z" fill="#FDE293"/><path d="M191 96.8c6.7-2.3 10.3-9.6 8.1-16.3-2.2-6.7-9.6-10.3-16.3-8.1l-32 10.8c-6.7 2.3-10.3 9.6-8.1 16.3 2.2 6.7 9.6 10.3 16.3 8.1l32-10.8z" fill="#3D4043"/></svg>
\ No newline at end of file

chrome/browser/resources/signin/profile_picker/images/dark_mode_right_banner_image.svg

+<svg width="250" height="628" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M108.2 153.1c5.2 4.8 13.3 4.5 18.2-.7 4.9-5.2 4.5-13.3-.7-18.2l-24.7-23c-5.2-4.8-13.3-4.5-18.2.7-4.9 5.2-4.5 13.3.7 18.2l24.7 23z" stroke="#606367" stroke-width="2" stroke-miterlimit="10"/><path d="M178 295.9c7.124 0 12.9-5.776 12.9-12.9 0-7.125-5.776-12.9-12.9-12.9-7.125 0-12.9 5.775-12.9 12.9 0 7.124 5.775 12.9 12.9 12.9z" fill="#F28B82"/><path d="M181.301 255.701l-16.6-5.2c-1.7-.5-3.5.4-4 2.1l-5.2 16.6c-.5 1.7.4 3.5 2.1 4l16.6 5.2c1.7.5 3.5-.4 4-2.1l5.2-16.6c.5-1.6-.4-3.4-2.1-4z" fill="#3D4043"/><path d="M227.1 87.7l-16.6-5.2c-1.7-.5-3.5.4-4 2.1l-5.2 16.601c-.5 1.7.4 3.5 2.1 4l16.6 5.2c1.7.5 3.5-.4 4-2.1l5.2-16.6c.5-1.7-.4-3.5-2.1-4z" fill="#606367"/><path d="M171.2 272.1c-1.7 1.1-3.1 2.5-4.1 4.1l7.1 2.2c1.7.5 3.5-.4 4-2.1l1.9-6c-3-.5-6.1 0-8.9 1.8z" fill="#F6AEA9"/><path d="M91.4 309.1l-10.9 9c-.9.7-1.3 1.9-1.1 3l2.4 13.9c.2 1.1 1 2.1 2 2.5l13.2 4.9c1.1.4 2.3.2 3.2-.5l10.9-9c.9-.7 1.3-1.9 1.1-3l-2.4-13.9c-.2-1.1-1-2.1-2-2.5l-13.2-4.9c-1.1-.4-2.3-.2-3.2.5z" fill="#3D4043"/><path d="M201.9 173.2l-10.9 9c-.9.7-1.3 1.9-1.1 3l2.4 13.9c.2 1.1 1 2.1 2 2.5l13.2 4.9c1.1.4 2.3.2 3.2-.5l10.9-9c.9-.7 1.3-1.9 1.1-3l-2.4-13.9c-.2-1.1-1-2.1-2-2.5l-13.2-4.9c-1.1-.5-2.3-.3-3.2.5zm-24.4 404.6a8.6 8.6 0 100-17.2 8.6 8.6 0 000 17.2zm50.799-227.299c0 6-4.9 10.9-10.9 10.9s-10.9-4.9-10.9-10.9 4.9-10.9 10.9-10.9 10.9 4.9 10.9 10.9zm-10.9-24.2c-13.4 0-24.2 10.8-24.2 24.2 0 13.4 10.8 24.2 24.2 24.2 13.4 0 24.2-10.8 24.2-24.2 0-13.3-10.8-24.2-24.2-24.2z" fill="#8AB4F8"/><path d="M144.7 410l-29.5 32.5c-1.7 1.8-.7 4.8 1.7 5.3l42.9 9.3c2.4.5 4.5-1.8 3.7-4.1l-13.4-41.8c-.8-2.4-3.8-3-5.4-1.2z" fill="#3D4043"/><path d="M222.599 476.5l-36.9 28.3c-1.4 1.1-1.7 3.1-.6 4.5l11.8 15.3c1.1 1.4 3.1 1.7 4.5.6l36.9-28.3c1.4-1.1 1.7-3.1.6-4.5l-11.8-15.3c-1-1.4-3.1-1.7-4.5-.6z" stroke="#81C995" stroke-width="2" stroke-miterlimit="10"/><path d="M133 152.4c7.124 0 12.9-5.776 12.9-12.9 0-7.125-5.776-12.9-12.9-12.9-7.125 0-12.9 5.775-12.9 12.9 0 7.124 5.775 12.9 12.9 12.9z" fill="#FDD663"/><path d="M168.201 44.6c-5.1-8-15.8-10.4-23.8-5.3-2.9 1.8-5 4.4-6.4 7.2l-1.9 4c-1.8 3.9-5.2 6.9-9.4 8.1l-5 1.4c-.9.3-1.9.7-2.7 1.3-5.7 3.6-7.4 11.2-3.8 16.9 3.6 5.7 11.2 7.4 16.9 3.8.9-.6 1.7-1.2 2.3-1.9l3.4-3.9c2.8-3.3 7-5.1 11.3-5.1h4.4a17 17 0 009.2-2.7c8.3-5.1 10.6-15.8 5.5-23.8z" fill="#3D4043"/><path d="M195.7 456.001c6.7-2.3 10.299-9.6 8.099-16.3-2.3-6.7-9.599-10.3-16.299-8.1l-32 10.8c-6.7 2.3-10.3 9.6-8.1 16.3 2.3 6.7 9.6 10.3 16.3 8.1l32-10.8z" fill="#FDD663"/><path d="M146.801 454.3l13 2.8c2.4.5 4.5-1.8 3.7-4.1l-3.8-12-4.1 1.4c-5.4 1.7-8.7 6.6-8.8 11.9z" fill="#FDE293"/><path d="M123.501 130.801c-.4.5-.9 1-1.2 1.6l2.8 2.6c2.3 2.2 3.7 5.1 3.8 8.3.1 2.7-.7 5.2-2.2 7.3l1.8.9c1.7-2.4 2.5-5.3 2.4-8.3-.1-3.7-1.7-7.1-4.4-9.6l-3-2.8z" fill="#fff"/></svg>
\ No newline at end of file

chrome/browser/resources/signin/profile_picker/right_banner_image.svg → chrome/browser/resources/signin/profile_picker/images/right_banner_image.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="250" height="628" fill="none"><path d="M108.2 153.1c5.2 4.8 13.3 4.5 18.2-.7 4.9-5.2 4.5-13.3-.7-18.2l-24.7-23c-5.2-4.8-13.3-4.5-18.2.7-4.9 5.2-4.5 13.3.7 18.2l24.7 23z" stroke="#E8EAED" stroke-width="2" stroke-miterlimit="10"/><path d="M178 295.9c7.124 0 12.9-5.776 12.9-12.9 0-7.125-5.776-12.9-12.9-12.9-7.125 0-12.9 5.775-12.9 12.9 0 7.124 5.775 12.9 12.9 12.9z" fill="#EA4335"/><path d="M181.301 255.701l-16.6-5.2c-1.7-.5-3.5.4-4 2.1l-5.2 16.6c-.5 1.7.4 3.5 2.1 4l16.6 5.2c1.7.5 3.5-.4 4-2.1l5.2-16.6c.5-1.6-.4-3.4-2.1-4z" fill="#F1F3F4"/><path d="M227.1 87.7l-16.6-5.2c-1.7-.5-3.5.4-4 2.1l-5.2 16.601c-.5 1.7.4 3.5 2.1 4l16.6 5.2c1.7.5 3.5-.4 4-2.1l5.2-16.6c.5-1.7-.4-3.5-2.1-4z" fill="#E8EAED"/><path d="M171.2 272.1c-1.7 1.1-3.1 2.5-4.1 4.1l7.1 2.2c1.7.5 3.5-.4 4-2.1l1.9-6c-3-.5-6.1 0-8.9 1.8z" fill="#fff"/><path d="M91.4 309.1l-10.9 9c-.9.7-1.3 1.9-1.1 3l2.4 13.9c.2 1.1 1 2.1 2 2.5l13.2 4.9c1.1.4 2.3.2 3.2-.5l10.9-9c.9-.7 1.3-1.9 1.1-3l-2.4-13.9c-.2-1.1-1-2.1-2-2.5l-13.2-4.9c-1.1-.4-2.3-.2-3.2.5z" fill="#F1F3F4"/><path d="M201.9 173.2l-10.9 9c-.9.7-1.3 1.9-1.1 3l2.4 13.9c.2 1.1 1 2.1 2 2.5l13.2 4.9c1.1.4 2.3.2 3.2-.5l10.9-9c.9-.7 1.3-1.9 1.1-3l-2.4-13.9c-.2-1.1-1-2.1-2-2.5l-13.2-4.9c-1.1-.5-2.3-.3-3.2.5zM177.5 577.8a8.6 8.6 0 100-17.2 8.6 8.6 0 000 17.2zM228.299 350.501c0 6-4.9 10.9-10.9 10.9s-10.9-4.9-10.9-10.9 4.9-10.9 10.9-10.9 10.9 4.9 10.9 10.9zm-10.9-24.2c-13.4 0-24.2 10.8-24.2 24.2 0 13.4 10.8 24.2 24.2 24.2 13.4 0 24.2-10.8 24.2-24.2 0-13.3-10.8-24.2-24.2-24.2z" fill="#4285F4"/><path d="M144.7 410l-29.5 32.5c-1.7 1.8-.7 4.8 1.7 5.3l42.9 9.3c2.4.5 4.5-1.8 3.7-4.1l-13.4-41.8c-.8-2.4-3.8-3-5.4-1.2z" fill="#F1F3F4"/><path d="M222.599 476.5l-36.9 28.3c-1.4 1.1-1.7 3.1-.6 4.5l11.8 15.3c1.1 1.4 3.1 1.7 4.5.6l36.9-28.3c1.4-1.1 1.7-3.1.6-4.5l-11.8-15.3c-1-1.4-3.1-1.7-4.5-.6z" stroke="#34A853" stroke-width="2" stroke-miterlimit="10"/><path d="M133 152.4c7.124 0 12.9-5.776 12.9-12.9 0-7.125-5.776-12.9-12.9-12.9-7.125 0-12.9 5.775-12.9 12.9 0 7.124 5.775 12.9 12.9 12.9z" fill="#FBBC05"/><path d="M168.201 44.6c-5.1-8-15.8-10.4-23.8-5.3-2.9 1.8-5 4.4-6.4 7.2l-1.9 4c-1.8 3.9-5.2 6.9-9.4 8.1l-5 1.4c-.9.3-1.9.7-2.7 1.3-5.7 3.6-7.4 11.2-3.8 16.9 3.6 5.7 11.2 7.4 16.9 3.8.9-.6 1.7-1.2 2.3-1.9l3.4-3.9c2.8-3.3 7-5.1 11.3-5.1h4.4a17 17 0 009.2-2.7c8.3-5.1 10.6-15.8 5.5-23.8z" fill="#F1F3F4"/><path d="M195.7 456.001c6.7-2.3 10.299-9.6 8.099-16.3-2.3-6.7-9.599-10.3-16.299-8.1l-32 10.8c-6.7 2.3-10.3 9.6-8.1 16.3 2.3 6.7 9.6 10.3 16.3 8.1l32-10.8z" fill="#FBBC05"/><path d="M146.801 454.3l13 2.8c2.4.5 4.5-1.8 3.7-4.1l-3.8-12-4.1 1.4c-5.4 1.7-8.7 6.6-8.8 11.9z" fill="#34A853"/><path d="M123.501 130.801c-.4.5-.9 1-1.2 1.6l2.8 2.6c2.3 2.2 3.7 5.1 3.8 8.3.1 2.7-.7 5.2-2.2 7.3l1.8.9c1.7-2.4 2.5-5.3 2.4-8.3-.1-3.7-1.7-7.1-4.4-9.6l-3-2.8z" fill="#fff"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="250" height="628" fill="none"><path d="M108.2 153.1c5.2 4.8 13.3 4.5 18.2-.7 4.9-5.2 4.5-13.3-.7-18.2l-24.7-23c-5.2-4.8-13.3-4.5-18.2.7-4.9 5.2-4.5 13.3.7 18.2l24.7 23z" stroke="#E8EAED" stroke-width="2" stroke-miterlimit="10"/><path d="M178 295.9c7.124 0 12.9-5.776 12.9-12.9 0-7.125-5.776-12.9-12.9-12.9-7.125 0-12.9 5.775-12.9 12.9 0 7.124 5.775 12.9 12.9 12.9z" fill="#EA4335"/><path d="M181.301 255.701l-16.6-5.2c-1.7-.5-3.5.4-4 2.1l-5.2 16.6c-.5 1.7.4 3.5 2.1 4l16.6 5.2c1.7.5 3.5-.4 4-2.1l5.2-16.6c.5-1.6-.4-3.4-2.1-4z" fill="#F1F3F4"/><path d="M227.1 87.7l-16.6-5.2c-1.7-.5-3.5.4-4 2.1l-5.2 16.601c-.5 1.7.4 3.5 2.1 4l16.6 5.2c1.7.5 3.5-.4 4-2.1l5.2-16.6c.5-1.7-.4-3.5-2.1-4z" fill="#E8EAED"/><path d="M171.2 272.1c-1.7 1.1-3.1 2.5-4.1 4.1l7.1 2.2c1.7.5 3.5-.4 4-2.1l1.9-6c-3-.5-6.1 0-8.9 1.8z" fill="#fff"/><path d="M91.4 309.1l-10.9 9c-.9.7-1.3 1.9-1.1 3l2.4 13.9c.2 1.1 1 2.1 2 2.5l13.2 4.9c1.1.4 2.3.2 3.2-.5l10.9-9c.9-.7 1.3-1.9 1.1-3l-2.4-13.9c-.2-1.1-1-2.1-2-2.5l-13.2-4.9c-1.1-.4-2.3-.2-3.2.5z" fill="#F1F3F4"/><path d="M201.9 173.2l-10.9 9c-.9.7-1.3 1.9-1.1 3l2.4 13.9c.2 1.1 1 2.1 2 2.5l13.2 4.9c1.1.4 2.3.2 3.2-.5l10.9-9c.9-.7 1.3-1.9 1.1-3l-2.4-13.9c-.2-1.1-1-2.1-2-2.5l-13.2-4.9c-1.1-.5-2.3-.3-3.2.5zm-24.4 404.6a8.6 8.6 0 100-17.2 8.6 8.6 0 000 17.2zm50.799-227.299c0 6-4.9 10.9-10.9 10.9s-10.9-4.9-10.9-10.9 4.9-10.9 10.9-10.9 10.9 4.9 10.9 10.9zm-10.9-24.2c-13.4 0-24.2 10.8-24.2 24.2 0 13.4 10.8 24.2 24.2 24.2 13.4 0 24.2-10.8 24.2-24.2 0-13.3-10.8-24.2-24.2-24.2z" fill="#4285F4"/><path d="M144.7 410l-29.5 32.5c-1.7 1.8-.7 4.8 1.7 5.3l42.9 9.3c2.4.5 4.5-1.8 3.7-4.1l-13.4-41.8c-.8-2.4-3.8-3-5.4-1.2z" fill="#F1F3F4"/><path d="M222.599 476.5l-36.9 28.3c-1.4 1.1-1.7 3.1-.6 4.5l11.8 15.3c1.1 1.4 3.1 1.7 4.5.6l36.9-28.3c1.4-1.1 1.7-3.1.6-4.5l-11.8-15.3c-1-1.4-3.1-1.7-4.5-.6z" stroke="#34A853" stroke-width="2" stroke-miterlimit="10"/><path d="M133 152.4c7.124 0 12.9-5.776 12.9-12.9 0-7.125-5.776-12.9-12.9-12.9-7.125 0-12.9 5.775-12.9 12.9 0 7.124 5.775 12.9 12.9 12.9z" fill="#FBBC05"/><path d="M168.201 44.6c-5.1-8-15.8-10.4-23.8-5.3-2.9 1.8-5 4.4-6.4 7.2l-1.9 4c-1.8 3.9-5.2 6.9-9.4 8.1l-5 1.4c-.9.3-1.9.7-2.7 1.3-5.7 3.6-7.4 11.2-3.8 16.9 3.6 5.7 11.2 7.4 16.9 3.8.9-.6 1.7-1.2 2.3-1.9l3.4-3.9c2.8-3.3 7-5.1 11.3-5.1h4.4a17 17 0 009.2-2.7c8.3-5.1 10.6-15.8 5.5-23.8z" fill="#F1F3F4"/><path d="M195.7 456.001c6.7-2.3 10.299-9.6 8.099-16.3-2.3-6.7-9.599-10.3-16.299-8.1l-32 10.8c-6.7 2.3-10.3 9.6-8.1 16.3 2.3 6.7 9.6 10.3 16.3 8.1l32-10.8z" fill="#FBBC05"/><path d="M146.801 454.3l13 2.8c2.4.5 4.5-1.8 3.7-4.1l-3.8-12-4.1 1.4c-5.4 1.7-8.7 6.6-8.8 11.9z" fill="#34A853"/><path d="M123.501 130.801c-.4.5-.9 1-1.2 1.6l2.8 2.6c2.3 2.2 3.7 5.1 3.8 8.3.1 2.7-.7 5.2-2.2 7.3l1.8.9c1.7-2.4 2.5-5.3 2.4-8.3-.1-3.7-1.7-7.1-4.4-9.6l-3-2.8z" fill="#fff"/></svg>
\ No newline at end of file

chrome/browser/resources/signin/profile_picker/profile_picker_main_view.html

@@ -18,12 +18,12 @@
   }
 
   #leftBanner {
-    background: url(left_banner_image.svg);
+    background: url(images/left_banner_image.svg);
     left: 0;
   }
 
   #rightBanner {
-    background: url(right_banner_image.svg);
+    background: url(images/right_banner_image.svg);
     right: 0;
   }
 
@@ -129,6 +129,14 @@
   }
 
   @media (prefers-color-scheme: dark) {
+    #leftBanner {
+      background: url(images/dark_mode_left_banner_image.svg);
+    }
+
+    #rightBanner {
+      background: url(images/dark_mode_right_banner_image.svg);
+    }
+
     .profiles-container::-webkit-scrollbar-thumb {
       background: var(--google-grey-800);
     }

chrome/browser/resources/signin/profile_picker/profile_picker_resources.grd

@@ -12,11 +12,17 @@
   </outputs>
   <release seq="1">
     <includes>
-    <include name="IDR_PROFILE_PICKER_LEFT_BANNER_IMAGE"
-               file="left_banner_image.svg"
+    <include name="IDR_PROFILE_PICKER_IMAGES_LEFT_BANNER_IMAGE"
+               file="images/left_banner_image.svg"
                type="BINDATA" />
-    <include name="IDR_PROFILE_PICKER_RIGHT_BANNER_IMAGE"
-               file="right_banner_image.svg"
+    <include name="IDR_PROFILE_PICKER_IMAGES_RIGHT_BANNER_IMAGE"
+               file="images/right_banner_image.svg"
+               type="BINDATA" />
+    <include name="IDR_PROFILE_PICKER_IMAGES_DARK_MODE_LEFT_BANNER_IMAGE"
+               file="images/dark_mode_left_banner_image.svg"
+               type="BINDATA" />
+    <include name="IDR_PROFILE_PICKER_IMAGES_DARK_MODE_RIGHT_BANNER_IMAGE"
+               file="images/dark_mode_right_banner_image.svg"
                type="BINDATA" />
     <include name="IDR_PROFILE_PICKER_PROFILE_CREATION_FLOW_IMAGES_BANNER_LIGHT_IMAGE"
                file="profile_creation_flow/images/banner_light_image.svg"