Skip to content

Commit a6817a4

Browse files
authored
[1.x] Style improvements (#177)
* Remove unnecessary styles from Vue welcome page * Add missing dark variant for welcome nav links * Fix underlined trailing white space in Vue welcome page * Make StyleCI happy
1 parent 1cc7b6d commit a6817a4

File tree

2 files changed

+9
-76
lines changed

2 files changed

+9
-76
lines changed

stubs/inertia-react/resources/js/Pages/Welcome.jsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,19 @@ export default function Welcome(props) {
88
<div className="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
99
<div className="fixed top-0 right-0 px-6 py-4 sm:block">
1010
{props.auth.user ? (
11-
<Link href={route('dashboard')} className="text-sm text-gray-700 underline">
11+
<Link href={route('dashboard')} className="text-sm text-gray-700 dark:text-gray-500 underline">
1212
Dashboard
1313
</Link>
1414
) : (
1515
<>
16-
<Link href={route('login')} className="text-sm text-gray-700 underline">
16+
<Link href={route('login')} className="text-sm text-gray-700 dark:text-gray-500 underline">
1717
Log in
1818
</Link>
1919

20-
<Link href={route('register')} className="ml-4 text-sm text-gray-700 underline">
20+
<Link
21+
href={route('register')}
22+
className="ml-4 text-sm text-gray-700 dark:text-gray-500 underline"
23+
>
2124
Register
2225
</Link>
2326
</>

stubs/inertia-vue/resources/js/Pages/Welcome.vue

Lines changed: 3 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,12 @@ defineProps({
1414

1515
<div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
1616
<div v-if="canLogin" class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
17-
<Link v-if="$page.props.auth.user" :href="route('dashboard')" class="text-sm text-gray-700 underline">
18-
Dashboard
19-
</Link>
17+
<Link v-if="$page.props.auth.user" :href="route('dashboard')" class="text-sm text-gray-700 dark:text-gray-500 underline">Dashboard</Link>
2018

2119
<template v-else>
22-
<Link :href="route('login')" class="text-sm text-gray-700 underline">
23-
Log in
24-
</Link>
20+
<Link :href="route('login')" class="text-sm text-gray-700 dark:text-gray-500 underline">Log in</Link>
2521

26-
<Link v-if="canRegister" :href="route('register')" class="ml-4 text-sm text-gray-700 underline">
27-
Register
28-
</Link>
22+
<Link v-if="canRegister" :href="route('register')" class="ml-4 text-sm text-gray-700 dark:text-gray-500 underline">Register</Link>
2923
</template>
3024
</div>
3125

@@ -122,67 +116,3 @@ defineProps({
122116
</div>
123117
</div>
124118
</template>
125-
126-
<style scoped>
127-
.bg-gray-100 {
128-
background-color: #f7fafc;
129-
background-color: rgba(247, 250, 252, var(--tw-bg-opacity));
130-
}
131-
132-
.border-gray-200 {
133-
border-color: #edf2f7;
134-
border-color: rgba(237, 242, 247, var(--tw-border-opacity));
135-
}
136-
137-
.text-gray-400 {
138-
color: #cbd5e0;
139-
color: rgba(203, 213, 224, var(--tw-text-opacity));
140-
}
141-
142-
.text-gray-500 {
143-
color: #a0aec0;
144-
color: rgba(160, 174, 192, var(--tw-text-opacity));
145-
}
146-
147-
.text-gray-600 {
148-
color: #718096;
149-
color: rgba(113, 128, 150, var(--tw-text-opacity));
150-
}
151-
152-
.text-gray-700 {
153-
color: #4a5568;
154-
color: rgba(74, 85, 104, var(--tw-text-opacity));
155-
}
156-
157-
.text-gray-900 {
158-
color: #1a202c;
159-
color: rgba(26, 32, 44, var(--tw-text-opacity));
160-
}
161-
162-
@media (prefers-color-scheme: dark) {
163-
.dark\:bg-gray-800 {
164-
background-color: #2d3748;
165-
background-color: rgba(45, 55, 72, var(--tw-bg-opacity));
166-
}
167-
168-
.dark\:bg-gray-900 {
169-
background-color: #1a202c;
170-
background-color: rgba(26, 32, 44, var(--tw-bg-opacity));
171-
}
172-
173-
.dark\:border-gray-700 {
174-
border-color: #4a5568;
175-
border-color: rgba(74, 85, 104, var(--tw-border-opacity));
176-
}
177-
178-
.dark\:text-white {
179-
color: #fff;
180-
color: rgba(255, 255, 255, var(--tw-text-opacity));
181-
}
182-
183-
.dark\:text-gray-400 {
184-
color: #cbd5e0;
185-
color: rgba(203, 213, 224, var(--tw-text-opacity));
186-
}
187-
}
188-
</style>

0 commit comments

Comments
 (0)