jaro/ikea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

restyling authentication in dark mode

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/Jetstream/ActionSection.vue
View File

@@ -14,7 +14,7 @@ import JetSectionTitle from './SectionTitle.vue';
</JetSectionTitle>
<div class="mt-5 md:mt-0 md:col-span-2">
<div class="px-4 py-5 sm:p-6 bg-white shadow sm:rounded-lg">
<div class="px-4 py-5 sm:p-6 bg-white dark:bg-gray-700 shadow sm:rounded-lg">
<slot name="content" />
</div>
</div>

4
resources/js/Jetstream/AuthenticationCard.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900">
<div>
<slot name="logo" />
</div>
<div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
<div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-gray-700 shadow-md overflow-hidden sm:rounded-lg">
<slot />
</div>
</div>

2
resources/js/Jetstream/Button.vue
View File

@@ -8,7 +8,7 @@ defineProps({
</script>
<template>
<button :type="type" class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition">
<button :type="type" class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-900 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition">
<slot />
</button>
</template>

2
resources/js/Jetstream/Checkbox.vue
View File

@@ -31,6 +31,6 @@ const proxyChecked = computed({
v-model="proxyChecked"
type="checkbox"
:value="value"
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
class="rounded border-gray-300 dark:border-gray-800 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
>
</template>

2
resources/js/Jetstream/DialogModal.vue
View File

@@ -40,7 +40,7 @@ const close = () => {
</div>
</div>
<div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-right">
<div class="flex flex-row justify-end px-6 py-4 bg-gray-100 dark:bg-gray-800 text-right">
<slot name="footer" />
</div>
</Modal>

4
resources/js/Jetstream/FormSection.vue
View File

@@ -21,7 +21,7 @@ const hasActions = computed(() => !! useSlots().actions);
<div class="mt-5 md:mt-0 md:col-span-2">
<form @submit.prevent="$emit('submitted')">
<div
class="px-4 py-5 bg-white sm:p-6 shadow"
class="px-4 py-5 bg-white dark:bg-gray-700 dark:text-gray-200 sm:p-6 shadow"
:class="hasActions ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md'"
>
<div class="grid grid-cols-6 gap-6">
@@ -29,7 +29,7 @@ const hasActions = computed(() => !! useSlots().actions);
</div>
</div>
<div v-if="hasActions" class="flex items-center justify-end px-4 py-3 bg-gray-50 text-right sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
<div v-if="hasActions" class="flex items-center justify-end px-4 py-3 bg-gray-50 dark:bg-gray-800 dark:text-gray-100 text-right sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
<slot name="actions" />
</div>
</form>

2
resources/js/Jetstream/Input.vue
View File

@@ -21,7 +21,7 @@ defineExpose({ focus: () => input.value.focus() });
<template>
<input
ref="input"
class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
class="dark:bg-transparent border-gray-300 dark:border-gray-800 dark:text-gray-100 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>

2
resources/js/Jetstream/Label.vue
View File

@@ -5,7 +5,7 @@ defineProps({
</script>
<template>
<label class="block font-medium text-sm text-gray-700">
<label class="block font-medium text-sm text-gray-700 dark:text-gray-100">
<span v-if="value">{{ value }}</span>
<span v-else><slot /></span>
</label>

4
resources/js/Jetstream/Modal.vue
View File

@@ -69,7 +69,7 @@ const maxWidthClass = computed(() => {
leave-to-class="opacity-0"
>
<div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
<div class="absolute inset-0 bg-gray-500 opacity-75" />
<div class="absolute inset-0 bg-gray-500 dark:bg-black opacity-75" />
</div>
</transition>
@@ -81,7 +81,7 @@ const maxWidthClass = computed(() => {
leave-from-class="opacity-100 translate-y-0 sm:scale-100"
leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div v-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" :class="maxWidthClass">
<div v-show="show" class="mb-6 bg-white dark:bg-gray-700 dark:text-gray-200 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" :class="maxWidthClass">
<slot v-if="show" />
</div>
</transition>

2
resources/js/Jetstream/SecondaryButton.vue
View File

@@ -8,7 +8,7 @@ defineProps({
</script>
<template>
<button :type="type" class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 active:text-gray-800 active:bg-gray-50 disabled:opacity-25 transition">
<button :type="type" class="inline-flex items-center px-4 py-2 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-600 rounded-md font-semibold text-xs text-gray-700 dark:text-gray-200 uppercase tracking-widest shadow-sm hover:text-gray-500 dark:hover:text-white focus:outline-none focus:border-blue-300 focus:ring focus:ring-blue-200 active:text-gray-800 active:bg-gray-50 dark:active:bg-gray-800 disabled:opacity-25 transition">
<slot />
</button>
</template>

4
resources/js/Jetstream/SectionTitle.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="md:col-span-1 flex justify-between">
<div class="px-4 sm:px-0">
<h3 class="text-lg font-medium text-gray-900">
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
<slot name="title" />
</h3>
<p class="mt-1 text-sm text-gray-600">
<p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
<slot name="description" />
</p>
</div>