tidy up oauth screen (#669)

app/views/doorkeeper/authorizations/new.html.erb

@@ -1,43 +1,49 @@
-<header class="page-header" role="banner" style="margin: 0 auto;">
-  <h1><%= t('.title') %></h1>
+<header class="text-center mb-8">
+  <h1 class="font-bold text-3xl text-white"><%= t('.title') %></h1>
 </header>
-<p class="h4">
-  <%= 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>
+<div class="bg-dark rounded-lg p-6 mb-8 border border-darkless">
+  <p class="text-lg text-white mb-4">
+    <%= raw t('.prompt', client_name: content_tag(:strong, class: 'text-primary') { @pre_auth.client.name }) %>
+  </p>
 
-    <ul class="text-info">
-      <% @pre_auth.scopes.each do |scope| %>
-        <li><%= t scope, scope: [:doorkeeper, :scopes] %></li>
-      <% end %>
-    </ul>
-  </div>
-<% end %>
+  <% if @pre_auth.scopes.count > 0 %>
+    <div id="oauth-permissions">
+      <p class="text-sm text-white mb-3"><%= t('.able_to') %>:</p>
 
-<div class="actions">
-  <%= form_tag oauth_authorization_path, method: :post do %>
-    <%= hidden_field_tag :client_id, @pre_auth.client.uid, id: nil %>
-    <%= hidden_field_tag :redirect_uri, @pre_auth.redirect_uri, id: nil %>
-    <%= hidden_field_tag :state, @pre_auth.state, id: nil %>
-    <%= hidden_field_tag :response_type, @pre_auth.response_type, id: nil %>
-    <%= hidden_field_tag :response_mode, @pre_auth.response_mode, id: nil %>
-    <%= hidden_field_tag :scope, @pre_auth.scope, id: nil %>
-    <%= hidden_field_tag :code_challenge, @pre_auth.code_challenge, id: nil %>
-    <%= hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method, id: nil %>
-    <%= submit_tag t('doorkeeper.authorizations.buttons.authorize'), class: "btn btn-success btn-lg btn-block", style: "background-color: oklch(70.03% 0.194 144.71); border: none" %>
-  <% end %>
-  <%= form_tag oauth_authorization_path, method: :delete do %>
-    <%= hidden_field_tag :client_id, @pre_auth.client.uid, id: nil %>
-    <%= hidden_field_tag :redirect_uri, @pre_auth.redirect_uri, id: nil %>
-    <%= hidden_field_tag :state, @pre_auth.state, id: nil %>
-    <%= hidden_field_tag :response_type, @pre_auth.response_type, id: nil %>
-    <%= hidden_field_tag :response_mode, @pre_auth.response_mode, id: nil %>
-    <%= hidden_field_tag :scope, @pre_auth.scope, id: nil %>
-    <%= hidden_field_tag :code_challenge, @pre_auth.code_challenge, id: nil %>
-    <%= hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method, id: nil %>
-    <%= submit_tag t('doorkeeper.authorizations.buttons.deny'), class: "btn btn-danger btn-lg btn-block" %>
+      <ul class="space-y-2">
+        <% @pre_auth.scopes.each do |scope| %>
+          <li class="flex items-center text-white">
+            <span class="inline-block w-2 h-2 bg-primary rounded-full mr-3"></span>
+            <%= t scope, scope: [:doorkeeper, :scopes] %>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+</div>
+
+<div class="space-y-3">
+  <%= form_tag oauth_authorization_path, method: :post, class: "w-full" do %>
+    <%= hidden_field_tag :client_id, @pre_auth.client.uid, id: nil %>
+    <%= hidden_field_tag :redirect_uri, @pre_auth.redirect_uri, id: nil %>
+    <%= hidden_field_tag :state, @pre_auth.state, id: nil %>
+    <%= hidden_field_tag :response_type, @pre_auth.response_type, id: nil %>
+    <%= hidden_field_tag :response_mode, @pre_auth.response_mode, id: nil %>
+    <%= hidden_field_tag :scope, @pre_auth.scope, id: nil %>
+    <%= hidden_field_tag :code_challenge, @pre_auth.code_challenge, id: nil %>
+    <%= hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method, id: nil %>
+    <%= submit_tag t('doorkeeper.authorizations.buttons.authorize'), class: "w-full px-4 py-3 bg-primary hover:bg-red-600 text-white font-bold rounded transition-colors cursor-pointer" %>
+  <% end %>
+  <%= form_tag oauth_authorization_path, method: :delete, class: "w-full" do %>
+    <%= hidden_field_tag :client_id, @pre_auth.client.uid, id: nil %>
+    <%= hidden_field_tag :redirect_uri, @pre_auth.redirect_uri, id: nil %>
+    <%= hidden_field_tag :state, @pre_auth.state, id: nil %>
+    <%= hidden_field_tag :response_type, @pre_auth.response_type, id: nil %>
+    <%= hidden_field_tag :response_mode, @pre_auth.response_mode, id: nil %>
+    <%= hidden_field_tag :scope, @pre_auth.scope, id: nil %>
+    <%= hidden_field_tag :code_challenge, @pre_auth.code_challenge, id: nil %>
+    <%= hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method, id: nil %>
+    <%= submit_tag t('doorkeeper.authorizations.buttons.deny'), class: "w-full px-4 py-3 border-darkless bg-dark hover:bg-gray-600 border border-gray-600 text-gray-300 rounded transition-colors cursor-pointer" %>
   <% end %>
 </div>

app/views/layouts/doorkeeper/application.html.erb

@@ -1,30 +1,25 @@
 <!DOCTYPE html>
-<html>
+<html class="production" data-theme="dark">
 <head>
   <title><%= t('doorkeeper.layouts.application.title') %></title>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="dark">
 
-  <%= stylesheet_link_tag :app %>
+  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+  <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
   <%= csrf_meta_tags %>
-  <style>
-    input[type="submit"] {
-        max-width: 200px;
-    }
-  </style>
 </head>
-<body>
-<main class="container">
-<div style="margin 0 auto;">
-  <%- if flash[:notice].present? %>
-    <div class="alert alert-info">
-      <%= flash[:notice] %>
-    </div>
-  <% end -%>
+<body class="min-h-screen bg-darker text-white" style="margin: 0; padding: 0; display: flex; align-items: center; justify-content: center;">
+  <main class="w-full max-w-md px-5 py-8">
+    <%- if flash[:notice].present? %>
+      <div class="mb-6 p-4 bg-green-500/10 border border-green-500/20 rounded-lg text-green-400">
+        <%= flash[:notice] %>
+      </div>
+    <% end -%>
 
-  <%= yield %>
-</div>
-</main>
+    <%= yield %>
+  </main>
 </body>
 </html>

config/locales/doorkeeper.en.yml

@@ -68,7 +68,7 @@ en:
         title: 'An error has occurred'
       new:
         title: 'Authorization required'
-        prompt: 'Authorize %{client_name} to use your account?'
+        prompt: 'Authorize %{client_name} to use your Hackatime account?'
         able_to: 'This application will be able to'
       show:
         title: 'Authorization code'