mirror of
https://github.com/boostorg/website-v2.git
synced 2026-01-19 04:42:17 +00:00
🎨 styles for social auth flow
This commit is contained in:
Greg Newman
@@ -86,4 +86,8 @@
|
||||
@apply py-1 mb-3 text-sm bg-white rounded-md border border-gray-300 cursor-pointer dark:bg-black text-sky-600 dark:text-orange dark:border-slate;
|
||||
}
|
||||
|
||||
.errorlist {
|
||||
@apply bg-red-300 py-2 px-3 rounded text-white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -898,6 +898,18 @@ select.dropdown {
|
||||
color: rgb(255 159 0 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.errorlist {
|
||||
border-radius: 0.25rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(252 165 165 / var(--tw-bg-opacity));
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
*, ::before, ::after {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
@@ -1038,10 +1050,6 @@ select.dropdown {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.pointer-events-none {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
@@ -1050,10 +1058,6 @@ select.dropdown {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
@@ -1118,18 +1122,6 @@ select.dropdown {
|
||||
right: 0.75rem;
|
||||
}
|
||||
|
||||
.top-3\.5 {
|
||||
top: 0.875rem;
|
||||
}
|
||||
|
||||
.left-4 {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.top-3 {
|
||||
top: 0.75rem;
|
||||
}
|
||||
|
||||
.isolate {
|
||||
isolation: isolate;
|
||||
}
|
||||
@@ -1370,10 +1362,6 @@ select.dropdown {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.ml-3 {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
@@ -1442,10 +1430,6 @@ select.dropdown {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.h-4 {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.h-14 {
|
||||
height: 3.5rem;
|
||||
}
|
||||
@@ -1458,8 +1442,8 @@ select.dropdown {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.h-5 {
|
||||
height: 1.25rem;
|
||||
.h-4 {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.max-h-\[470px\] {
|
||||
@@ -1543,10 +1527,6 @@ select.dropdown {
|
||||
width: 66.666667%;
|
||||
}
|
||||
|
||||
.w-4 {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.w-\[70\%\] {
|
||||
width: 70%;
|
||||
}
|
||||
@@ -1587,8 +1567,8 @@ select.dropdown {
|
||||
width: 20vw;
|
||||
}
|
||||
|
||||
.w-5 {
|
||||
width: 1.25rem;
|
||||
.w-4 {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.w-\[300px\] {
|
||||
@@ -1611,18 +1591,10 @@ select.dropdown {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.max-w-2xl {
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.flex-auto {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.flex-none {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.flex-shrink {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
@@ -1903,23 +1875,10 @@ select.dropdown {
|
||||
border-color: rgb(49 74 87 / var(--tw-divide-opacity));
|
||||
}
|
||||
|
||||
.divide-gray-500 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-opacity: 1;
|
||||
border-color: rgb(107 114 128 / var(--tw-divide-opacity));
|
||||
}
|
||||
|
||||
.divide-opacity-20 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-opacity: 0.2;
|
||||
}
|
||||
|
||||
.justify-self-center {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.overflow-x-auto {
|
||||
overflow-x: auto;
|
||||
}
|
||||
@@ -1936,12 +1895,6 @@ select.dropdown {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.whitespace-normal {
|
||||
white-space: normal;
|
||||
}
|
||||
@@ -1970,10 +1923,6 @@ select.dropdown {
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
.rounded-xl {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.rounded-t-lg {
|
||||
border-top-left-radius: 0.5rem;
|
||||
border-top-right-radius: 0.5rem;
|
||||
@@ -2147,15 +2096,6 @@ select.dropdown {
|
||||
background-color: rgb(90 213 153 / 0.7);
|
||||
}
|
||||
|
||||
.bg-black {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(5 26 38 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bg-yellow-200\/70 {
|
||||
background-color: rgb(254 240 138 / 0.7);
|
||||
}
|
||||
@@ -2164,10 +2104,6 @@ select.dropdown {
|
||||
--tw-bg-opacity: 0.1;
|
||||
}
|
||||
|
||||
.bg-opacity-70 {
|
||||
--tw-bg-opacity: 0.7;
|
||||
}
|
||||
|
||||
.object-cover {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
@@ -2197,14 +2133,14 @@ select.dropdown {
|
||||
padding: 2.5rem;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.p-\[10px\] {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: 0px;
|
||||
}
|
||||
@@ -2407,10 +2343,6 @@ select.dropdown {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.pr-4 {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
@@ -2593,10 +2525,6 @@ select.dropdown {
|
||||
color: rgb(255 255 255 / 0.6);
|
||||
}
|
||||
|
||||
.text-white\/70 {
|
||||
color: rgb(255 255 255 / 0.7);
|
||||
}
|
||||
|
||||
.text-gray-200 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 231 235 / var(--tw-text-opacity));
|
||||
@@ -2606,16 +2534,6 @@ select.dropdown {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.placeholder-gray-500::-moz-placeholder {
|
||||
--tw-placeholder-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-placeholder-opacity));
|
||||
}
|
||||
|
||||
.placeholder-gray-500::placeholder {
|
||||
--tw-placeholder-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-placeholder-opacity));
|
||||
}
|
||||
|
||||
.opacity-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -2636,12 +2554,6 @@ select.dropdown {
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.shadow-2xl {
|
||||
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
||||
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.ring-1 {
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
@@ -2672,12 +2584,6 @@ select.dropdown {
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.transition-opacity {
|
||||
transition-property: opacity;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.duration-500 {
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
@@ -2756,11 +2662,6 @@ select.dropdown {
|
||||
background-color: rgb(255 255 255 / 0.6);
|
||||
}
|
||||
|
||||
.hover\:bg-slate:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(49 74 87 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-orange:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 159 0 / var(--tw-text-opacity));
|
||||
@@ -3006,19 +2907,10 @@ select.dropdown {
|
||||
margin-bottom: calc(2.75rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.sm\:p-6 {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.sm\:px-14 {
|
||||
padding-left: 3.5rem;
|
||||
padding-right: 3.5rem;
|
||||
}
|
||||
|
||||
.sm\:text-sm {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@@ -3187,14 +3079,14 @@ select.dropdown {
|
||||
width: 83.333333%;
|
||||
}
|
||||
|
||||
.md\:min-w-\[150px\] {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.md\:min-w-\[200px\] {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.md\:min-w-\[150px\] {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.md\:max-w-7xl {
|
||||
max-width: 80rem;
|
||||
}
|
||||
@@ -3344,10 +3236,6 @@ select.dropdown {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.md\:p-20 {
|
||||
padding: 5rem;
|
||||
}
|
||||
|
||||
.md\:px-3 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
@@ -3423,10 +3311,6 @@ select.dropdown {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.md\:pl-11 {
|
||||
padding-left: 2.75rem;
|
||||
}
|
||||
|
||||
.md\:text-6xl {
|
||||
font-size: 3.75rem;
|
||||
line-height: 1;
|
||||
|
||||
@@ -5,56 +5,53 @@
|
||||
{% block head_title %}{% trans "Account Connections" %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="py-0 px-3 mb-3 md:py-6 md:px-0">
|
||||
<div class="md:pt-11 md:mt-11 w-full md:w-1/2 mx-auto" x-data="{ tab: '#social' }">
|
||||
<div class="md:w-full">
|
||||
<h1 class="text-4xl text-center">{% trans "Account Connections" %}</h1>
|
||||
<div class="my-6 text-center">
|
||||
<div class="py-6 w-full md:w-1/2 mx-auto">
|
||||
<h1 class="text-4xl">{% trans "Account Connections" %}</h1>
|
||||
|
||||
{% if form.accounts %}
|
||||
<p class="mt-0 text-center">{% blocktrans %}You can sign in to your account using any of the following third party accounts:{% endblocktrans %}</p>
|
||||
</div>
|
||||
{% if form.accounts %}
|
||||
<p>{% blocktrans %}You can sign in to your account using any of the following third party accounts:{% endblocktrans %}</p>
|
||||
|
||||
<form method="post" action="{% url 'socialaccount_connections' %}">
|
||||
<div class="mx-auto space-y-4 w-2/3">
|
||||
{% csrf_token %}
|
||||
|
||||
<fieldset>
|
||||
{% if form.non_field_errors %}
|
||||
<div id="errorMsg">{{ form.non_field_errors }}</div>
|
||||
{% endif %}
|
||||
|
||||
{% for base_account in form.accounts %}
|
||||
{% with base_account.get_provider_account as account %}
|
||||
<div>
|
||||
<label for="id_account_{{ base_account.id }}" class="text-slate dark:text-white/70">
|
||||
<input id="id_account_{{ base_account.id }}" type="radio" name="account" value="{{ base_account.id }}"/>
|
||||
<span class="socialaccount_provider {{ base_account.provider }} {{ account.get_brand.id }}">{{account.get_brand.name}}</span>
|
||||
{{ account }}
|
||||
</label>
|
||||
</div>
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="my-4">
|
||||
<button type="submit" class="py-1 px-2 text-sm text-white rounded border border-orange bg-orange">{% trans 'Remove Connection' %}</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{% else %}
|
||||
<p class="mt-0 text-center">{% trans 'You currently have no social network accounts connected to this account.' %}</p>
|
||||
{% endif %}
|
||||
|
||||
<h2 class="text-2xl text-center">{% trans 'Add a Third Party Account' %}</h2>
|
||||
|
||||
<ul class="space-y-4 w-full">
|
||||
{% include "socialaccount/snippets/provider_list.html" with process="connect" %}
|
||||
</ul>
|
||||
|
||||
{% include "socialaccount/snippets/login_extra.html" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="post" action="{% url 'socialaccount_connections' %}">
|
||||
<div class="mx-auto space-y-4 w-2/3">
|
||||
{% csrf_token %}
|
||||
|
||||
<fieldset>
|
||||
{% if form.non_field_errors %}
|
||||
<div id="errorMsg">{{ form.non_field_errors }}</div>
|
||||
{% endif %}
|
||||
|
||||
{% for base_account in form.accounts %}
|
||||
{% with base_account.get_provider_account as account %}
|
||||
<div>
|
||||
<label for="id_account_{{ base_account.id }}" class="text-xs uppercase text-slate dark:text-white/70">
|
||||
<input id="id_account_{{ base_account.id }}" type="radio" name="account" value="{{ base_account.id }}"/>
|
||||
<span class="socialaccount_provider {{ base_account.provider }} {{ account.get_brand.id }}">{{account.get_brand.name}}</span>
|
||||
{{ account }}
|
||||
</label>
|
||||
</div>
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="flex justify-between mb-4">
|
||||
<button type="submit" class="py-3 px-4 text-white uppercase rounded border border-orange bg-orange md:py-1 md:px-4 md:text-lg bg-orange border-orange dark:bg-charcoal dark:text-orange">{% trans 'Remove' %}</button>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{% else %}
|
||||
<p class="mt-0 text-center">{% trans 'You currently have no social network accounts connected to this account.' %}</p>
|
||||
{% endif %}
|
||||
|
||||
<h2 class="text-4xl text-center">{% trans 'Add a 3rd Party Account' %}</h2>
|
||||
|
||||
<ul class="space-y-4 w-full">
|
||||
{% include "socialaccount/snippets/provider_list.html" with process="connect" %}
|
||||
</ul>
|
||||
|
||||
{% include "socialaccount/snippets/login_extra.html" %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@@ -5,18 +5,24 @@
|
||||
{% block head_title %}{% trans "Signup" %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1>{% trans "Sign Up" %}</h1>
|
||||
<div class="my-6 text-center">
|
||||
<div class="py-6">
|
||||
<h1 class="text-4xl">{% trans "Sign Up" %}</h1>
|
||||
|
||||
<p>{% blocktrans with provider_name=account.get_provider.name site_name=site.name %}You are about to use your {{provider_name}} account to login to
|
||||
<p>{% blocktrans with provider_name=account.get_provider.name site_name=site.name %}You are about to use your {{provider_name}} account to login to
|
||||
{{site_name}}. As a final step, please complete the following form:{% endblocktrans %}</p>
|
||||
</div>
|
||||
|
||||
<form class="signup" id="signup_form" method="post" action="{% url 'socialaccount_signup' %}">
|
||||
{% csrf_token %}
|
||||
{{ form.as_p }}
|
||||
{% if redirect_field_value %}
|
||||
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
|
||||
{% endif %}
|
||||
<button type="submit">{% trans "Sign Up" %} »</button>
|
||||
</form>
|
||||
<form id="signup_form" method="post" action="{% url 'socialaccount_signup' %}" class="w-full md:w-1/2 mx-auto">
|
||||
{% csrf_token %}
|
||||
{{ form.as_p }}
|
||||
{% if redirect_field_value %}
|
||||
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
|
||||
{% endif %}
|
||||
<button type="submit" class="py-3 px-4 text-white uppercase rounded border border-orange bg-orange">{% trans "Sign Up" %}</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{# keep this here for postcss <span class="errorlist"></span> #}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@@ -91,7 +91,9 @@
|
||||
|
||||
<div class="rounded bg-white dark:bg-charcoal p-4">
|
||||
<h3>{% trans "Account Connections" %}</h3>
|
||||
<a href="{% url 'socialaccount_connections' %}"><button class="py-3 px-4 text-white uppercase rounded border border-orange bg-orange md:py-1 md:px-4 md:text-lg bg-orange border-orange dark:bg-charcoal dark:text-orange">{% trans 'Manage Account Connections' %}</button></a>
|
||||
<div class="mt-4">
|
||||
<a href="{% url 'socialaccount_connections' %}"><button class="py-2 px-3 text-sm text-white rounded bg-orange">{% trans 'Manage Account Connections' %}</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user