Improve RS OAuth UI

app/views/icons/_alert-triangle.html.erb

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle <%= custom_class %>"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>

app/views/rs/oauth/new.html.erb

@@ -1,38 +1,38 @@
-<%= render HeaderComponent.new(title: "App Authorization") %>
+<%= render HeaderCompactComponent.new(title: "Storage") %>
 
-<%= render MainSimpleComponent.new do %>
-  <section class="px-16 pb-8 mt-8">
-    <p class="text-lg mb-8">
-      The app
+<%= render MainCompactComponent.new do %>
+  <section>
+    <p class="mb-8">
+      The app on
       <%= link_to @client_id, "https://#{@client_id}", class: "ks-text-link" %>
       is asking for access to these folders:
     </p>
 
-    <p class="text-xl mb-8">
-      <% if @root_access_requested %>
-        <span class="text-red-700">
-          <span class="text-red-700">
-            <%= render partial: "icons/asterisk", locals: { custom_class: "inline-block align-middle mb-1" } %>
-            All files and directories
-          </span>
-          <% if (@scopes & [":r"]).any? %>
-            <span class="text-sm text-gray-500">(read only)</span>
-          <% end %>
-        </span>
-      <% else %>
-        <% @scopes.each do |scope| %>
-          <span class="text-gray-500">
-            <span>
-              <%= render partial: "icons/folder", locals: { custom_class: "inline-block align-middle mb-2" } %>
-              <%= scope_name(scope) %>
-            </span>
-            <% if scope_permissions(scope) == "r" %>
-              <span class="text-sm text-gray-500">(read only)</span>
-            <% end %>
-          </span>
-        <% end %>
+    <% if @root_access_requested %>
+    <p class="text-lg">
+      <span class="text-red-700">
+        <%= render partial: "icons/alert-triangle",
+              locals: { custom_class: "inline-block align-bottom mr-1.5" } %>
+        All files and directories
+      </span>
+      <% if (@scopes & [":r"]).any? %>
+        <span class="text-sm text-gray-500">(read only)</span>
       <% end %>
     </p>
+    <% else %>
+      <% @scopes.each do |scope| %>
+      <p class="text-gray-600">
+        <span class="text-lg">
+          <%= render partial: "icons/folder",
+            locals: { custom_class: "inline-block align-bottom mr-1.5" } %>
+          <%= scope_name(scope) %>
+        </span>
+        <% if scope_permissions(scope) == "r" %>
+          <span>(read only)</span>
+        <% end %>
+      </p>
+      <% end %>
+    <% end %>
 
     <%= form_with(url: rs_oauth_path, method: :post, data: { turbo: false }) do |f| %>
       <%= f.hidden_field :redirect_uri, value: @redirect_uri %>
@@ -40,20 +40,18 @@
       <%= f.hidden_field :user_id, value: @user.id %>
       <%= f.hidden_field :client_id, value: @client_id %>
       <%= f.hidden_field :state, value: @state %>
-      <p>
-        <%= f.label :expire_at, "Expire:" %>
+      <p class="mt-8 mb-6">
+        <%= f.label :expire_at, "Permission expires:", class: "mr-1.5" %>
         <%= f.select :expire_at, options_for_select(@expire_at_dates) %>
       </p>
-      <p class="text-sm text-gray-500 my-10">
+      <p class="text-sm text-gray-500">
         You can revoke access for this app at any time on your storage dashboard.
       </p>
-      <div>
-        <%= f.submit class: "btn-md btn-blue w-full sm:w-auto", data: { disable_with: "Saving..." } do %>
-          Allow
-        <% end %>
-        <%= link_to @denial_url, class: "btn-md btn-red w-full sm:w-auto" do %>
-          Deny
-        <% end %>
+      <p class="mt-8 flex flex-col sm:flex-row gap-3 sm:gap-2 sm:justify-items-stretch">
+        <%= f.submit "Allow",
+              class: "btn-md btn-blue w-full sm:order-last sm:grow",
+              data: { disable_with: "Saving..." } %>
+        <%= link_to "Deny", @denial_url, class: "btn-md btn-gray text-red-700 w-full sm:grow" %>
       </div>
     <% end %>
   </section>