feat(onboarding): improve empty page

Author: jleveugle

packages/manager/modules/pci/src/components/project/empty/empty.controller.js

@@ -1,4 +1,4 @@
-import placeholder from './placeholder.svg';
+import placeholder from './placeholder.png';
 
 export default class {
   constructor() {

packages/manager/modules/pci/src/components/project/empty/empty.html

@@ -14,23 +14,20 @@
 
     <aside class="row pt-5">
         <div class="col-sm-6 col-md-4 mb-4" data-ng-repeat="guide in $ctrl.guides track by $index">
-            <div class="py-2 oui-tile d-flex align-items-start">
+            <a class="py-2 oui-tile d-flex align-items-start p-3"
+                target="_blank"
+                rel="noopener"
+                data-ng-href="{{:: guide.link }}">
                 <span class="d-block oui-icon oui-icon-guides" aria-hidden="true"></span>
                 <div class="ml-2">
-                    <h2 class="oui-tile__title oui-heading_4"  data-ng-bind=":: guide.title"></h2>
+                    <strong data-ng-bind=":: guide.title"></strong>
                     <div class="oui-tile__body mt-3">
                         <p class="oui-tile__description" data-ng-bind=":: guide.description"></p>
-                        <a class="oui-link_icon"
-                            data-ng-href="{{:: guide.link }}"
-                            target="_blank"
-                            rel="noopener">
-                            <span data-translate="pci_project_empty_more"></span>
-                            <span class="oui-icon oui-icon-external_link" aria-hidden="true"></span>
-                            <span class="sr-only" data-translate="pci_project_empty_new_tab"></span>
-                        </a>
+                        <span data-translate="pci_project_empty_more"></span>
+                        <span class="oui-icon oui-icon-external_link" aria-hidden="true"></span>
                     </div>
                 </div>
-            </div>
+            </a>
         </div>
     </aside>
 </div>

packages/manager/modules/pci/src/components/project/empty/index.less

@@ -1,7 +1,29 @@
 .pci-project-empty {
-  @import '~ovh-ui-kit/packages/oui-color/_variables.less';
+  a.oui-tile {
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
 
-  .placeholder {
-    background-color: @oui-color-mischka;
+    strong {
+      color: rgb(17, 63, 109);
+      font-size: 1.125rem;
+    }
+
+    .oui-icon {
+      background-color: transparent;
+      color: #2859c0;
+
+      &.oui-icon-guides {
+        font-size: 2.2rem;
+        color: #113f6d;
+        padding: 0;
+        margin-right: 0.3rem;
+      }
+    }
+
+    .oui-tile__description {
+      word-break: initial;
+    }
   }
 }

packages/manager/modules/pci/src/components/project/empty/placeholder.png

@@ -1,5 +1,5 @@
 <pci-project-empty>
-
+    <h1 data-translate="pci_projects_project_network_private"></h1>
     <p data-translate="pci_projects_project_network_private_vrack_empty"></p>
     <strong data-translate="pci_projects_project_network_private_vrack_deploy"></strong>
     <p data-translate="pci_projects_project_network_private_vrack_explanation_1"></p>

packages/manager/modules/pci/src/projects/project/private-networks/empty/empty.html

@@ -1,4 +1,5 @@
 <pci-project-empty guides="$ctrl.guides">
+    <h1 data-translate="pci_projects_project_storages_blocks_title"></h1>
     <p data-translate="pci_projects_project_storages_blocks_onboarding_content1"></p>
     <strong data-translate="pci_projects_project_storages_blocks_onboarding_content2"></strong>
     <p data-translate="pci_projects_project_storages_blocks_onboarding_content3"></p>