more oauth screen tweaks

app/views/oAuth/authorize.scala

@@ -19,14 +19,21 @@ object authorize {
       )
     ) {
       main(cls := "oauth box box-pad")(
-        h1(dataIcon := "", cls := "text")(prompt.redirectUri.clientOrigin),
+        div(cls := "oauth__top")(
+          img(
+            cls := "oauth__logo",
+            alt := "linked rings icon",
+            src := assetUrl("images/icons/linked-rings.png")
+          ),
+          h1("Authorize"),
+          strong(code(prompt.redirectUri.clientOrigin))
+        ),
         prompt.redirectUri.insecure option flashMessage(cls := "flash-warning")(
           "Does not use a secure connection"
         ),
         postForm(action := authorizeUrl)(
           p(
-            strong(code(prompt.redirectUri.clientOrigin)),
-            " wants to access your ",
+            "Grant access to your ",
             strong(me.username),
             " account:"
           ),
@@ -55,7 +62,7 @@ object authorize {
                 escapeHtmlRaw(prompt.redirectUri.value.toStringPunycode)
                   .replaceFirst(
                     prompt.redirectUri.clientOrigin,
-                    strong(prompt.redirectUri.clientOrigin).render
+                    prompt.redirectUri.clientOrigin.render
                   )
               )
             )

ui/site/css/_oauth.scss

@@ -13,18 +13,32 @@
     list-style: disc outside;
   }
 
-  code {
+  strong {
     color: $c-brag;
+  }
+  code {
     word-wrap: anywhere;
   }
 
+  &__top {
+    text-align: center;
+    margin-bottom: 4em;
+  }
+
+  &__logo {
+    width: 100px;
+    height: 100px;
+    margin: auto;
+  }
+
   h1 {
     @extend %break-word;
+    margin: 1rem 0 1.5rem 0;
   }
 
   &__scopes {
     li {
-      margin: 0.5em 0;
+      margin: 0.7em 0;
     }
     .danger {
       &::before {
@@ -55,5 +69,6 @@
   &__redirect {
     flex: 0 0 60%;
     margin-left: 1em;
+    text-align: right;
   }
 }