restyling authentication in dark mode

This commit is contained in:
Geriano
2022-07-29 18:58:48 +07:00
parent c481d88fce
commit 4e6dc5bab6
21 changed files with 41 additions and 47 deletions

View File

@@ -33,7 +33,7 @@ const submit = () => {
<JetAuthenticationCardLogo />
</template>
<div class="mb-4 text-sm text-gray-600">
<div class="mb-4 text-sm text-gray-600 dark:text-gray-200">
This is a secure area of the application. Please confirm your password before continuing.
</div>

View File

@@ -28,7 +28,7 @@ const submit = () => {
<JetAuthenticationCardLogo />
</template>
<div class="mb-4 text-sm text-gray-600">
<div class="mb-4 text-sm text-gray-600 dark:text-gray-200">
Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.
</div>

View File

@@ -71,12 +71,12 @@ const submit = () => {
<div class="block mt-4">
<label class="flex items-center">
<JetCheckbox v-model:checked="form.remember" name="remember" />
<span class="ml-2 text-sm text-gray-600">Remember me</span>
<span class="ml-2 text-sm text-gray-600 dark:text-gray-100">Remember me</span>
</label>
</div>
<div class="flex items-center justify-end mt-4">
<Link v-if="canResetPassword" :href="route('password.request')" class="underline text-sm text-gray-600 hover:text-gray-900">
<Link v-if="canResetPassword" :href="route('password.request')" class="underline text-sm text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50">
Forgot your password?
</Link>

View File

@@ -107,7 +107,7 @@ const submit = () => {
</div>
<div class="flex items-center justify-end mt-4">
<Link :href="route('login')" class="underline text-sm text-gray-600 hover:text-gray-900">
<Link :href="route('login')" class="underline text-sm text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50">
Already registered?
</Link>

View File

@@ -45,7 +45,7 @@ const submit = () => {
<JetAuthenticationCardLogo />
</template>
<div class="mb-4 text-sm text-gray-600">
<div class="mb-4 text-sm text-gray-600 dark:text-gray-300">
<template v-if="! recovery">
Please confirm access to your account by entering the authentication code provided by your authenticator application.
</template>
@@ -85,7 +85,7 @@ const submit = () => {
</div>
<div class="flex items-center justify-end mt-4">
<button type="button" class="text-sm text-gray-600 hover:text-gray-900 underline cursor-pointer" @click.prevent="toggleRecovery">
<button type="button" class="text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 underline cursor-pointer" @click.prevent="toggleRecovery">
<template v-if="! recovery">
Use a recovery code
</template>

View File

@@ -26,7 +26,7 @@ const verificationLinkSent = computed(() => props.status === 'verification-link-
<JetAuthenticationCardLogo />
</template>
<div class="mb-4 text-sm text-gray-600">
<div class="mb-4 text-sm text-gray-600 dark:text-gray-300">
Before continuing, could you verify your email address by clicking on the link we just emailed to you? If you didn't receive the email, we will gladly send you another.
</div>
@@ -43,7 +43,7 @@ const verificationLinkSent = computed(() => props.status === 'verification-link-
<div>
<Link
:href="route('profile.show')"
class="underline text-sm text-gray-600 hover:text-gray-900"
class="underline text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900"
>
Edit Profile</Link>
@@ -51,7 +51,7 @@ const verificationLinkSent = computed(() => props.status === 'verification-link-
:href="route('logout')"
method="post"
as="button"
class="underline text-sm text-gray-600 hover:text-gray-900 ml-2"
class="underline text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 ml-2"
>
Log Out
</Link>