[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
laravel · Aug 8, 2022 · a6817a4 · a6817a4
1 parent 1cc7b6d
commit a6817a4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 76 deletions.
diff --git a/stubs/inertia-react/resources/js/Pages/Welcome.jsx b/stubs/inertia-react/resources/js/Pages/Welcome.jsx
@@ -8,16 +8,19 @@ export default function Welcome(props) {
             <div className="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
                 <div className="fixed top-0 right-0 px-6 py-4 sm:block">
                     {props.auth.user ? (
-                        <Link href={route('dashboard')} className="text-sm text-gray-700 underline">
+                        <Link href={route('dashboard')} className="text-sm text-gray-700 dark:text-gray-500 underline">
                             Dashboard
                         </Link>
                     ) : (
                         <>
-                            <Link href={route('login')} className="text-sm text-gray-700 underline">
+                            <Link href={route('login')} className="text-sm text-gray-700 dark:text-gray-500 underline">
                                 Log in
                             </Link>
 
-                            <Link href={route('register')} className="ml-4 text-sm text-gray-700 underline">
+                            <Link
+                                href={route('register')}
+                                className="ml-4 text-sm text-gray-700 dark:text-gray-500 underline"
+                            >
                                 Register
                             </Link>
                         </>

diff --git a/stubs/inertia-vue/resources/js/Pages/Welcome.vue b/stubs/inertia-vue/resources/js/Pages/Welcome.vue
@@ -14,18 +14,12 @@ defineProps({
 
     <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
         <div v-if="canLogin" class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
-            <Link v-if="$page.props.auth.user" :href="route('dashboard')" class="text-sm text-gray-700 underline">
-                Dashboard
-            </Link>
+            <Link v-if="$page.props.auth.user" :href="route('dashboard')" class="text-sm text-gray-700 dark:text-gray-500 underline">Dashboard</Link>
 
             <template v-else>
-                <Link :href="route('login')" class="text-sm text-gray-700 underline">
-                    Log in
-                </Link>
+                <Link :href="route('login')" class="text-sm text-gray-700 dark:text-gray-500 underline">Log in</Link>
 
-                <Link v-if="canRegister" :href="route('register')" class="ml-4 text-sm text-gray-700 underline">
-                    Register
-                </Link>
+                <Link v-if="canRegister" :href="route('register')" class="ml-4 text-sm text-gray-700 dark:text-gray-500 underline">Register</Link>
             </template>
         </div>
 
@@ -122,67 +116,3 @@ defineProps({
         </div>
     </div>
 </template>
-
-<style scoped>
-    .bg-gray-100 {
-        background-color: #f7fafc;
-        background-color: rgba(247, 250, 252, var(--tw-bg-opacity));
-    }
-
-    .border-gray-200 {
-        border-color: #edf2f7;
-        border-color: rgba(237, 242, 247, var(--tw-border-opacity));
-    }
-
-    .text-gray-400 {
-        color: #cbd5e0;
-        color: rgba(203, 213, 224, var(--tw-text-opacity));
-    }
-
-    .text-gray-500 {
-        color: #a0aec0;
-        color: rgba(160, 174, 192, var(--tw-text-opacity));
-    }
-
-    .text-gray-600 {
-        color: #718096;
-        color: rgba(113, 128, 150, var(--tw-text-opacity));
-    }
-
-    .text-gray-700 {
-        color: #4a5568;
-        color: rgba(74, 85, 104, var(--tw-text-opacity));
-    }
-
-    .text-gray-900 {
-        color: #1a202c;
-        color: rgba(26, 32, 44, var(--tw-text-opacity));
-    }
-
-    @media (prefers-color-scheme: dark) {
-        .dark\:bg-gray-800 {
-            background-color: #2d3748;
-            background-color: rgba(45, 55, 72, var(--tw-bg-opacity));
-        }
-
-        .dark\:bg-gray-900 {
-            background-color: #1a202c;
-            background-color: rgba(26, 32, 44, var(--tw-bg-opacity));
-        }
-
-        .dark\:border-gray-700 {
-            border-color: #4a5568;
-            border-color: rgba(74, 85, 104, var(--tw-border-opacity));
-        }
-
-        .dark\:text-white {
-            color: #fff;
-            color: rgba(255, 255, 255, var(--tw-text-opacity));
-        }
-
-        .dark\:text-gray-400 {
-            color: #cbd5e0;
-            color: rgba(203, 213, 224, var(--tw-text-opacity));
-        }
-    }
-</style>