From bcd498d990187ffe029d173af43abfdee35f2445 Mon Sep 17 00:00:00 2001
From: Jess Lee <jessleenyc@gmail.com>
Date: Wed, 25 Sep 2019 15:00:45 -0400
Subject: [PATCH] add styling for oauth page (#4108)

---
 .../doorkeeper/authorizations/new.html.erb    | 64 ++++++++++++++++---
 1 file changed, 55 insertions(+), 9 deletions(-)

diff --git a/app/views/doorkeeper/authorizations/new.html.erb b/app/views/doorkeeper/authorizations/new.html.erb
index 106c48aa6..029aa377b 100644
--- a/app/views/doorkeeper/authorizations/new.html.erb
+++ b/app/views/doorkeeper/authorizations/new.html.erb
@@ -1,19 +1,62 @@
+<style>
+  main {
+    text-align: center;
+  }
+
+  img {
+    display: block;
+    width: 10%;
+    margin: 0 auto;
+    padding-bottom: 20px;
+  }
+
+  .btn {
+    min-width: 30%;
+  }
+
+  ul {
+    text-align: left;
+  }
+
+  form {
+    display: inline;
+  }
+
+  #oauth-permissions {
+    display: block;
+    margin: 0 auto;
+    font-size: 1.5em;
+    width: 70%;
+  }
+
+  .actions {
+    border: none;
+  }
+
+  .footer {
+    margin-top: 30px;
+    padding: 20px;
+    padding-bottom: 10px;
+    border-top: 1px solid #eee;
+    text-align: left;
+  }
+</style>
+
 <header class="page-header" role="banner">
-  <h1><%= t('.title') %></h1>
+  <img src="<%= cloudinary("https://thepracticaldev.s3.amazonaws.com/i/9bsnlmppunw39rnnshk6.png") %>"/>
 </header>
 
 <main role="main">
-  <p class="h4">
-    <%= raw t('.prompt', client_name: content_tag(:strong, class: 'text-info') { @pre_auth.client.name }) %>
+  <p class="h3">
+    <%= raw t(".prompt", client_name: content_tag(:strong, class: "text-info") { @pre_auth.client.name }) %>
   </p>
 
   <% if @pre_auth.scopes.count > 0 %>
     <div id="oauth-permissions">
-      <p><%= t('.able_to') %>:</p>
-
-      <ul class="text-info">
+      <p><%= t(".able_to") %>:</p>
+      <ul>
         <% @pre_auth.scopes.each do |scope| %>
-          <li><%= t scope, scope: [:doorkeeper, :scopes] %></li>
+          <li><%= t scope, scope: %i[doorkeeper scopes] %></li>
         <% end %>
       </ul>
     </div>
@@ -28,7 +71,7 @@
       <%= hidden_field_tag :scope, @pre_auth.scope %>
       <%= hidden_field_tag :code_challenge, @pre_auth.code_challenge %>
       <%= hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method %>
-      <%= submit_tag t('doorkeeper.authorizations.buttons.authorize'), class: "btn btn-success btn-lg btn-block" %>
+      <%= submit_tag t("doorkeeper.authorizations.buttons.authorize"), class: "btn btn-success" %>
     <% end %>
     <%= form_tag oauth_authorization_path, method: :delete do %>
       <%= hidden_field_tag :client_id, @pre_auth.client.uid %>
@@ -38,7 +81,10 @@
       <%= hidden_field_tag :scope, @pre_auth.scope %>
       <%= hidden_field_tag :code_challenge, @pre_auth.code_challenge %>
       <%= hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method %>
-      <%= submit_tag t('doorkeeper.authorizations.buttons.deny'), class: "btn btn-danger btn-lg btn-block" %>
+      <%= submit_tag t("doorkeeper.authorizations.buttons.deny"), class: "btn btn-danger" %>
     <% end %>
   </div>
+  <div class="footer">
+    <p>You can revoke access to any application at any time from the <a href="https://dev.to/settings/integrations">Integrations</a> tab of your Settings page. By authorizing an application you continue to operate under DEV's <a href="https://dev.to/terms">Terms of Service</a>.</p>
+  </div>
 </main>