feat(core-blocks): CB-2309 Redesign SSO final page

webapp/packages/core-blocks/src/HTMLTemplates/head.html.ejs

@@ -7,8 +7,8 @@
 <link rel="icon" type="image/svg+xml" href="favicon.svg">
 <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
 
-<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="preload" as="font"
-  crossorigin="anonymous" />
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="preload" as="font"
+  crossorigin="anonymous"  />
 <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" crossorigin="anonymous" />
 <link rel="prefetch" href="icons/icons.svg" as="image" type="image/svg+xml" />
 <script type="text/javascript">

webapp/packages/core-blocks/src/HTMLTemplates/sso.html.ejs

@@ -1,6 +1,60 @@
-<div id="sso">
-  Single sign on succeeded. Now you can close this page.
-  <script>
-    window.close();
-  </script>
-</div>
+<style>
+  body {
+    margin: 0;
+    font-family: Roboto;
+  }
+
+  .wrapper {
+    display: flex;
+    height: 100vh;
+    flex-direction: column;
+  }
+
+  header {
+    flex-grow: 0;
+    flex-shrink: 0;
+    height: 48px;
+    padding: 0 16px;
+    background-color: #2a7cb4;
+    display: flex;
+    align-items: center;
+  }
+
+  .logo {
+    height: 34px;
+    width: 154px;
+  }
+
+  .content {
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  .message {
+    text-align: center;
+  }
+</style>
+
+<div class="wrapper">
+  <header>
+    <img src="/icons/logo.svg" class="logo" />
+  </header>
+
+  <div class="content">
+    <div class="message">
+      <p>
+        Single sign on succeeded.
+      </p>
+      <p>
+        Now you can close this page.
+      </p>
+    </div>
+  </div>
+</div>
+
+<script>
+  window.close();
+</script>