Fix secondary text and illustration in recommend app screen error

Bug: 993972
Change-Id: Icc6797cc36d9337c7fb7f34d7d91a67b42bff5d9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1873748
Commit-Queue: Thomas Tellier <tellier@google.com>
Reviewed-by: Denis Kuznetsov <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#709471}

chrome/browser/resources/chromeos/login/images/1x/download_fail_illustration.svg

+<svg version="1.1" viewBox="0 0 264 264" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd">
+    <path d="m171.6 82.336-6.413-6.413c-0.885-0.885-0.885-2.321 0-3.206l6.413-6.413c0.885-0.886 2.321-0.886 3.207 0l6.412 6.413c0.886 0.885 0.886 2.321 0 3.206l-6.412 6.413c-0.886 0.885-2.322 0.885-3.207 0" fill="#EA4335"/>
+    <path d="m105.87 48.101-6.413-6.413c-0.885-0.885-0.885-2.321 0-3.206l6.413-6.413c0.886-0.885 2.321-0.885 3.207 0l6.413 6.413c0.885 0.885 0.885 2.321 0 3.206l-6.413 6.413c-0.886 0.885-2.321 0.885-3.207 0" fill="#FBBC04"/>
+    <path d="m96.554 123.42 6.413-6.413c0.885-0.885 2.321-0.885 3.207 0l6.412 6.413c0.886 0.885 0.886 2.321 0 3.207l-6.412 6.412c-0.886 0.886-2.322 0.886-3.207 0l-6.413-6.412c-0.885-0.886-0.885-2.322 0-3.207" fill="#F1F3F4"/>
+    <path d="m129.01 65.679c-2.214-2.214-2.214-5.802 0-8.016l4.81-4.81c2.213-2.213 5.802-2.213 8.016 0 2.213 2.214 2.213 5.803 0 8.016l-4.81 4.81c-2.214 2.213-5.803 2.213-8.016 0" fill="#4285F4"/>
+    <path d="m133.77 102.36c-2.214-2.214-2.214-5.802 0-8.016l4.81-4.81c2.213-2.214 5.802-2.214 8.016 0 2.213 2.214 2.213 5.803 0 8.016l-4.81 4.81c-2.214 2.213-5.803 2.213-8.016 0" fill="#F1F3F4"/>
+    <path d="m146.85 97.289 0.741-0.741c2.214-2.214 2.214-5.802 0-8.016-2.213-2.213-5.803-2.213-8.016 0l-4.809 4.809c-0.745 0.745-1.217 1.651-1.461 2.602 4.621 0.068 9.146 0.527 13.545 1.346" fill="#FBBC04"/>
+    <path d="m87.07 75.282 11.947 3.201c1.686 0.452 2.25 2.559 1.016 3.793l-8.745 8.746c-1.235 1.234-3.342 0.67-3.794-1.016l-3.201-11.947c-0.452-1.686 1.091-3.229 2.777-2.777" fill="#34A853"/>
+    <path d="m151.38 118.92 11.947 3.201c1.686 0.452 2.25 2.559 1.016 3.793l-8.745 8.746c-1.235 1.234-3.342 0.67-3.794-1.016l-3.201-11.947c-0.452-1.686 1.091-3.229 2.777-2.777" fill="#F1F3F4"/>
+    <path d="m159 17c0 3.866-3.134 7-7 7s-7-3.134-7-7 3.134-7 7-7 7 3.134 7 7" fill="#34A853"/>
+    <path d="m212 175c0 44.183-35.817 80-80 80s-80-35.817-80-80 35.817-80 80-80 80 35.817 80 80z" stroke="#DADCE0" stroke-width="4"/>
+    <path d="m137 183.81 11.191-11.166 7.063 7.0791-23.394 23.341-23.393-23.341 7.0632-7.079 11.468 11.443v-35.086h10v34.809z" fill="#DADCE0" fill-rule="nonzero"/>
+    <path d="m101 151 62 62" stroke="#DADCE0" stroke-width="4"/>
+  </g>
+</svg>

chrome/browser/resources/chromeos/login/images/2x/download_fail_illustration.svg

+<svg version="1.1" viewBox="0 0 528 528" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd">
+    <path d="m343.21 164.67-12.826-12.826c-1.77-1.77-1.77-4.642 0-6.412l12.826-12.826c1.77-1.772 4.642-1.772 6.414 0l12.824 12.826c1.772 1.77 1.772 4.642 0 6.412l-12.824 12.826c-1.772 1.77-4.644 1.77-6.414 0" fill="#EA4335"/>
+    <path d="m211.74 96.202-12.826-12.826c-1.77-1.77-1.77-4.642 0-6.412l12.826-12.826c1.772-1.77 4.642-1.77 6.414 0l12.826 12.826c1.77 1.77 1.77 4.642 0 6.412l-12.826 12.826c-1.772 1.77-4.642 1.77-6.414 0" fill="#FBBC04"/>
+    <path d="m193.11 246.83 12.826-12.826c1.77-1.77 4.642-1.77 6.414 0l12.824 12.826c1.772 1.77 1.772 4.642 0 6.414l-12.824 12.824c-1.772 1.772-4.644 1.772-6.414 0l-12.826-12.824c-1.77-1.772-1.77-4.644 0-6.414" fill="#F1F3F4"/>
+    <path d="m258.02 131.36c-4.428-4.428-4.428-11.604 0-16.032l9.62-9.62c4.426-4.426 11.604-4.426 16.032 0 4.426 4.428 4.426 11.606 0 16.032l-9.62 9.62c-4.428 4.426-11.606 4.426-16.032 0" fill="#4285F4"/>
+    <path d="m267.53 204.72c-4.428-4.428-4.428-11.604 0-16.032l9.62-9.62c4.426-4.428 11.604-4.428 16.032 0 4.426 4.428 4.426 11.606 0 16.032l-9.62 9.62c-4.428 4.426-11.606 4.426-16.032 0" fill="#F1F3F4"/>
+    <path d="m293.7 194.58 1.482-1.482c4.428-4.428 4.428-11.604 0-16.032-4.426-4.426-11.606-4.426-16.032 0l-9.618 9.618c-1.49 1.49-2.434 3.302-2.922 5.204 9.242 0.136 18.292 1.054 27.09 2.692" fill="#FBBC04"/>
+    <path d="m174.14 150.56 23.894 6.402c3.372 0.904 4.5 5.118 2.032 7.586l-17.49 17.492c-2.47 2.468-6.684 1.34-7.588-2.032l-6.402-23.894c-0.904-3.372 2.182-6.458 5.554-5.554" fill="#34A853"/>
+    <path d="m302.77 237.85 23.894 6.402c3.372 0.904 4.5 5.118 2.032 7.586l-17.49 17.492c-2.47 2.468-6.684 1.34-7.588-2.032l-6.402-23.894c-0.904-3.372 2.182-6.458 5.554-5.554" fill="#F1F3F4"/>
+    <path d="m318 34c0 7.732-6.268 14-14 14s-14-6.268-14-14 6.268-14 14-14 14 6.268 14 14" fill="#34A853"/>
+    <path d="m424 350c0 88.366-71.634 160-160 160s-160-71.634-160-160 71.634-160 160-160 160 71.634 160 160z" stroke="#DADCE0" stroke-width="8"/>
+    <path d="m274 367.62 22.383-22.332 14.126 14.158-46.787 46.681-46.785-46.681 14.126-14.158 22.937 22.886v-70.172h20v69.618z" fill="#DADCE0" fill-rule="nonzero"/>
+    <path d="m202 302 124 124" stroke="#DADCE0" stroke-width="8"/>
+  </g>
+</svg>

chrome/browser/resources/chromeos/login/recommend_apps.css

@@ -8,14 +8,15 @@
 }
 
 .recommend-apps-loaded .app-list-loading,
-.recommend-apps-loaded .app-list-error,
-.recommend-apps-loading .subtitle,
+.recommend-apps-loaded #app-list-error,
+.recommend-apps-loading #subtitle,
 .recommend-apps-loading #app-list-view-container,
-.recommend-apps-loading .app-list-error,
+.recommend-apps-loading #download-fail-illustration,
+.recommend-apps-loading #app-list-error,
 .recommend-apps-loaded #recommend-apps-retry-button,
 .recommend-apps-loading #recommend-apps-install-button,
 .recommend-apps-loading #recommend-apps-retry-button,
-.error .subtitle,
+.error #subtitle,
 .error #app-list-view-container,
 .error .app-list-loading,
 .error #recommend-apps-install-button {

chrome/browser/resources/chromeos/login/recommend_apps.html

@@ -20,25 +20,33 @@
         [[i18nDynamic(locale, 'recommendAppsScreenTitle')]]
       </h1>
       <div id="subtitle" slot="subtitle"></div>
+      <div id="app-list-error" slot="subtitle">
+        [[i18nDynamic(locale, 'recommendAppsError')]]
+      </div>
+      <div slot="footer" class="flex layout vertical center end-justified"
+          id="download-fail-illustration">
+        <img id="illustration"
+            srcset="images/1x/download_fail_illustration.svg 1x,
+            images/2x/download_fail_illustration.svg 2x"
+            class="oobe-illustration">
+      </div>
       <div id="app-list-view-container" slot="footer">
         <webview id="app-list-view"></webview>
       </div>
       <div class="app-list-loading" slot="footer">
         <p>[[i18nDynamic(locale, 'recommendAppsLoading')]]</p>
       </div>
-      <div class="app-list-error" slot="footer">
-        <p>[[i18nDynamic(locale, 'recommendAppsError')]]</p>
-      </div>
       <div slot="bottom-buttons" class="layout horizontal end-justified">
-        <oobe-text-button id="recommend-apps-skip-button" border on-tap="onSkip_">
+        <oobe-text-button id="recommend-apps-skip-button" on-tap="onSkip_"
+            border>
           <div>[[i18nDynamic(locale, 'recommendAppsSkip')]]</div>
         </oobe-text-button>
         <oobe-next-button id="recommend-apps-install-button"
             on-tap="onInstall_" inverse>
           <div>[[i18nDynamic(locale, 'recommendAppsInstall')]]</div>
         </oobe-next-button>
-        <oobe-text-button id="recommend-apps-retry-button" border
-            on-tap="onRetry_">
+        <oobe-text-button id="recommend-apps-retry-button" on-tap="onRetry_"
+            border inverse>
           <div>[[i18nDynamic(locale, 'recommendAppsRetry')]]</div>
         </oobe-text-button>
       </div>