Improve outline button style, use everywhere
This commit is contained in:
parent
8a570ce724
commit
3adc1917f6
@ -14,12 +14,12 @@
|
|||||||
@apply py-1 px-2 text-sm;
|
@apply py-1 px-2 text-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-outline {
|
.btn-icon {
|
||||||
@apply border-2 border-gray-100 hover:bg-gray-100;
|
@apply py-2 px-3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-icon {
|
.btn-outline {
|
||||||
@apply px-3;
|
@apply py-2 border-2 border-gray-100 hover:bg-gray-100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-gray {
|
.btn-gray {
|
||||||
|
@ -30,14 +30,14 @@
|
|||||||
<input type="text" class="grow" disabled="disabled"
|
<input type="text" class="grow" disabled="disabled"
|
||||||
value="https://<%= Setting.accounts_domain %>/discourse/connect"
|
value="https://<%= Setting.accounts_domain %>/discourse/connect"
|
||||||
data-clipboard-target="source" />
|
data-clipboard-target="source" />
|
||||||
<button class="btn-md btn-icon btn-blue shrink-0"
|
<button class="btn-md btn-icon btn-outline shrink-0"
|
||||||
data-clipboard-target="trigger" data-action="clipboard#copy"
|
data-clipboard-target="trigger" data-action="clipboard#copy"
|
||||||
title="Copy to clipboard">
|
title="Copy to clipboard">
|
||||||
<span class="content-initial">
|
<span class="content-initial">
|
||||||
<%= render partial: "icons/copy", locals: { custom_class: "text-white h-4 w-4 inline" } %>
|
<%= render partial: "icons/copy", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
|
||||||
</span>
|
</span>
|
||||||
<span class="content-active hidden">
|
<span class="content-active hidden">
|
||||||
<%= render partial: "icons/check", locals: { custom_class: "text-white h-4 w-4 inline" } %>
|
<%= render partial: "icons/check", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
</p>
|
</p>
|
||||||
<ul class="md:w-3/4">
|
<ul class="md:w-3/4">
|
||||||
<% @invitations_unused.each do |invitation| %>
|
<% @invitations_unused.each do |invitation| %>
|
||||||
<li class="mb-2 flex gap-1" data-controller="clipboard modal">
|
<li class="mb-3 flex gap-1" data-controller="clipboard modal">
|
||||||
<input type="text" disabled class="relative grow font-mono"
|
<input type="text" disabled class="relative grow font-mono"
|
||||||
value="<%= invitation_url(invitation.token) %>"
|
value="<%= invitation_url(invitation.token) %>"
|
||||||
data-clipboard-target="source" />
|
data-clipboard-target="source" />
|
||||||
|
@ -16,14 +16,14 @@
|
|||||||
<input type="text" id="user_address" class="grow"
|
<input type="text" id="user_address" class="grow"
|
||||||
value=<%= current_user.address %> disabled="disabled"
|
value=<%= current_user.address %> disabled="disabled"
|
||||||
data-clipboard-target="source" />
|
data-clipboard-target="source" />
|
||||||
<button id="copy-user-address" class="btn-md btn-icon btn-blue shrink-0"
|
<button id="copy-user-address" class="btn-md btn-icon btn-outline shrink-0"
|
||||||
data-clipboard-target="trigger" data-action="clipboard#copy"
|
data-clipboard-target="trigger" data-action="clipboard#copy"
|
||||||
title="Copy to clipboard">
|
title="Copy to clipboard">
|
||||||
<span class="content-initial">
|
<span class="content-initial">
|
||||||
<%= render partial: "icons/copy", locals: { custom_class: "text-white h-4 w-4 inline" } %>
|
<%= render partial: "icons/copy", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
|
||||||
</span>
|
</span>
|
||||||
<span class="content-active hidden">
|
<span class="content-active hidden">
|
||||||
<%= render partial: "icons/check", locals: { custom_class: "text-white h-4 w-4 inline" } %>
|
<%= render partial: "icons/check", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</p>
|
</p>
|
||||||
|
@ -13,13 +13,13 @@
|
|||||||
'settings--account--email-target': 'emailField'
|
'settings--account--email-target': 'emailField'
|
||||||
}, required: true %>
|
}, required: true %>
|
||||||
<button type="button" id="edit-email"
|
<button type="button" id="edit-email"
|
||||||
class="btn-md btn-icon btn-blue shrink-0 hidden initial-visible"
|
class="btn-md btn-icon btn-outline shrink-0 hidden initial-visible"
|
||||||
data-settings--account--email-target="editEmailButton"
|
data-settings--account--email-target="editEmailButton"
|
||||||
data-action="settings--account--email#editEmail"
|
data-action="settings--account--email#editEmail"
|
||||||
title="Edit email address">
|
title="Edit email address">
|
||||||
<span class="">
|
<span class="">
|
||||||
<%= render partial: "icons/edit-3", locals: {
|
<%= render partial: "icons/edit-3", locals: {
|
||||||
custom_class: "text-white h-4 w-4 inline" } %>
|
custom_class: "text-blue-600 h-4 w-4 inline" } %>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</p>
|
</p>
|
||||||
|
@ -7,14 +7,14 @@
|
|||||||
<input type="text" id="user_address" class="grow"
|
<input type="text" id="user_address" class="grow"
|
||||||
value=<%= @user.address %> disabled="disabled"
|
value=<%= @user.address %> disabled="disabled"
|
||||||
data-clipboard-target="source" />
|
data-clipboard-target="source" />
|
||||||
<button id="copy-user-address" class="btn-md btn-icon btn-blue shrink-0"
|
<button id="copy-user-address" class="btn-md btn-icon btn-outline shrink-0"
|
||||||
data-clipboard-target="trigger" data-action="clipboard#copy"
|
data-clipboard-target="trigger" data-action="clipboard#copy"
|
||||||
title="Copy to clipboard">
|
title="Copy to clipboard">
|
||||||
<span class="content-initial">
|
<span class="content-initial">
|
||||||
<%= render partial: "icons/copy", locals: { custom_class: "text-white h-4 w-4 inline" } %>
|
<%= render partial: "icons/copy", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
|
||||||
</span>
|
</span>
|
||||||
<span class="content-active hidden">
|
<span class="content-active hidden">
|
||||||
<%= render partial: "icons/check", locals: { custom_class: "text-white h-4 w-4 inline" } %>
|
<%= render partial: "icons/check", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</p>
|
</p>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user