OAuth form: add "Cancel" button

This commit is contained in:
Alex Gleason 2020-07-27 18:38:52 -05:00
parent 71ac910508
commit 050ef8697b
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 25 additions and 5 deletions

View File

@ -25,7 +25,10 @@
<% end %> <% end %>
<%= if @user do %> <%= if @user do %>
<%= submit "Authorize" %> <div class="actions">
<a class="button button--cancel" href="/">Cancel</a>
<%= submit "Approve", class: "button--approve" %>
</div>
<% else %> <% else %>
<%= if @params["registration"] in ["true", true] do %> <%= if @params["registration"] in ["true", true] do %>
<h3>This is the first time you visit! Please enter your Pleroma handle.</h3> <h3>This is the first time you visit! Please enter your Pleroma handle.</h3>

View File

@ -49,8 +49,7 @@ body {
background-color: var(--foreground-color); background-color: var(--foreground-color);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
margin: auto; margin: 35px auto;
margin-top: 35px;
box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.5);
} }
@ -168,13 +167,25 @@ input:focus {
border-bottom: 2px solid var(--brand-color); border-bottom: 2px solid var(--brand-color);
} }
.actions {
display: flex;
justify-content: flex-end;
}
.actions button,
.actions a.button {
width: auto;
margin-left: 10px;
}
a.button,
button { button {
width: 100%; width: 100%;
background-color: #1c2a3a; background-color: #1c2a3a;
color: var(--primary-text-color); color: var(--primary-text-color);
border-radius: 4px; border-radius: 4px;
border: none; border: none;
padding: 10px; padding: 10px 16px;
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
text-transform: uppercase; text-transform: uppercase;
@ -184,6 +195,7 @@ button {
0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset; 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
} }
a.button:hover,
button:hover { button:hover {
cursor: pointer; cursor: pointer;
box-shadow: 0px 0px 0px 1px var(--brand-color), box-shadow: 0px 0px 0px 1px var(--brand-color),
@ -243,7 +255,12 @@ button:hover {
color: var(--muted-text-color); color: var(--muted-text-color);
} }
@media all and (max-width: 440px) { @media all and (max-width: 420px) {
.container {
margin: 0 auto;
border-radius: 0;
}
.scope { .scope {
flex-basis: 0%; flex-basis: 0%;
} }