Dark mode support (#271)

joelbutcher · May 17, 2023 · e7c92d9 · e7c92d9
1 parent b4a38df
commit e7c92d9
Show file tree

Hide file tree

Showing 11 changed files with 99 additions and 30 deletions.
diff --git a/src/Console/InstallCommand.php b/src/Console/InstallCommand.php
@@ -5,6 +5,7 @@
 use Illuminate\Console\Command;
 use Illuminate\Filesystem\Filesystem;
 use Illuminate\Support\Str;
+use Symfony\Component\Finder\Finder;
 use Symfony\Component\Process\PhpExecutableFinder;
 use Symfony\Component\Process\Process;
 
@@ -17,6 +18,7 @@ class InstallCommand extends Command
      */
     protected $signature = 'socialstream:install 
                             {--stack= : Indicates the desired stack to be installed (Livewire, Inertia)}
+                            {--dark : Indicate that dark mode support should be installed}
                             {--teams : Indicates if team support should be installed}
                             {--api : Indicates if API support should be installed}
                             {--verification : Indicates if email verification support should be installed}
@@ -50,6 +52,7 @@ public function handle(): ?int
 
             $this->call('jetstream:install', [
                 'stack' => $stack,
+                '--dark' => $this->option('dark'),
                 '--teams' => $this->option('teams'),
                 '--api' => $this->option('api'),
                 '--verification' => $this->option('verification'),
@@ -71,14 +74,6 @@ public function handle(): ?int
             $this->installInertiaStack();
         }
 
-        if ($this->option('teams')) {
-            $this->ensureTeamsCompatibility();
-        }
-
-        // Tests...
-        $stubs = $this->getTestStubsPath();
-        copy($stubs.'/SocialstreamRegistrationTest.php', base_path('tests/Feature/SocialstreamRegistrationTest.php'));
-
         $this->line('');
         $this->components->info('Socialstream installed successfully.');
         $this->components->info('Running [npm install && npm run build]...');
@@ -138,6 +133,34 @@ protected function installLivewireStack(): void
         copy(__DIR__.'/../../stubs/livewire/resources/views/profile/show.blade.php', resource_path('views/profile/show.blade.php'));
 
         $this->replaceInFile('// Providers::github(),', 'Providers::github(),', config_path('socialstream.php'));
+
+        // Teams
+        if ($this->option('teams')) {
+            $this->ensureTeamsCompatibility();
+        }
+
+        // Tests...
+        $stubs = $this->getTestStubsPath();
+        copy($stubs.'/SocialstreamRegistrationTest.php', base_path('tests/Feature/SocialstreamRegistrationTest.php'));
+
+        if (! $this->option('dark')) {
+            $this->removeDarkClasses((new Finder)
+                ->in(resource_path('views'))
+                ->name('*.blade.php')
+                ->filter(fn ($file) => $file->getPathname() !== resource_path('views/welcome.blade.php'))
+            );
+        }
+
+        if (file_exists(base_path('pnpm-lock.yaml'))) {
+            $this->runCommands(['pnpm install', 'pnpm run build']);
+        } elseif (file_exists(base_path('yarn.lock'))) {
+            $this->runCommands(['yarn install', 'yarn run build']);
+        } else {
+            $this->runCommands(['npm install', 'npm run build']);
+        }
+
+        $this->line('');
+        $this->components->info('Livewire scaffolding installed successfully.');
     }
 
     /**
@@ -193,6 +216,37 @@ protected function installInertiaStack(): void
         copy(__DIR__.'/../../stubs/inertia/resources/js/Components/Socialstream.vue', resource_path('js/Components/Socialstream.vue'));
 
         $this->replaceInFile('// Providers::github(),', 'Providers::github(),', config_path('socialstream.php'));
+
+        // Teams
+        if ($this->option('teams')) {
+            $this->ensureTeamsCompatibility();
+        }
+
+        // Tests...
+        $stubs = $this->getTestStubsPath();
+        copy($stubs.'/SocialstreamRegistrationTest.php', base_path('tests/Feature/SocialstreamRegistrationTest.php'));
+
+        if (! $this->option('dark')) {
+            $this->removeDarkClasses((new Finder)
+                ->in(resource_path('js'))
+                ->name('*.vue')
+                ->notPath('Pages/Welcome.vue')
+            );
+        }
+
+        if (file_exists(base_path('pnpm-lock.yaml'))) {
+            $this->runCommands(['pnpm install', 'pnpm run build']);
+        } elseif (file_exists(base_path('yarn.lock'))) {
+            $this->runCommands(['yarn install', 'yarn run build']);
+        } else {
+            $this->runCommands(['npm install', 'npm run build']);
+        }
+
+        $this->line('');
+        $this->components->info('Inertia scaffolding installed successfully.');
+
+        $this->line('');
+        $this->components->info('Inertia scaffolding installed successfully.');
     }
 
     /**
@@ -270,6 +324,19 @@ protected function installNodeDependenciesAndBuild(): void
         $this->runCommands($commands);
     }
 
+    /**
+     * Remove Tailwind dark classes from the given files.
+     *
+     * @param  \Symfony\Component\Finder\Finder  $finder
+     * @return void
+     */
+    protected function removeDarkClasses(Finder $finder)
+    {
+        foreach ($finder as $file) {
+            file_put_contents($file->getPathname(), preg_replace('/\sdark:[^\s"\']+/', '', $file->getContents()));
+        }
+    }
+
     /**
      * Get the path to the appropriate PHP binary.
      */

diff --git a/stubs/inertia/resources/js/Components/ConnectedAccount.vue b/stubs/inertia/resources/js/Components/ConnectedAccount.vue
@@ -30,7 +30,7 @@ defineProps({
                 <BitbucketIcon class="h-6 w-6 mr-2" v-if="provider === 'bitbucket'" />
 
                 <div>
-                    <div class="text-sm font-semibold text-gray-600">
+                    <div class="text-sm font-semibold text-gray-600 dark:text-gray-400">
                         {{ provider === 'twitter-oauth-2' ? 'Twitter' : provider.charAt(0).toUpperCase() + provider.slice(1) }}
                     </div>
 

diff --git a/stubs/inertia/resources/js/Components/Socialstream.vue b/stubs/inertia/resources/js/Components/Socialstream.vue
@@ -15,7 +15,7 @@ const error = computed(() => usePage().props.errors.socialstream);
 
 <template>
   <div>
-    <div class="flex flex-row items-center justify-between py-4 text-gray-500">
+    <div class="flex flex-row items-center justify-between py-4 text-gray-600 dark:text-gray-400">
       <hr class="w-full mr-2">
       Or
       <hr class="w-full ml-2">

diff --git a/stubs/inertia/resources/js/Pages/Auth/Login.vue b/stubs/inertia/resources/js/Pages/Auth/Login.vue
@@ -72,12 +72,12 @@ const submit = () => {
       <div class="block mt-4">
         <label class="flex items-center">
           <Checkbox 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-400">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 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
           Forgot your password?
         </Link>
 

diff --git a/stubs/inertia/resources/js/Pages/Auth/Register.vue b/stubs/inertia/resources/js/Pages/Auth/Register.vue
@@ -55,6 +55,7 @@ const submit = () => {
             type="email"
             class="mt-1 block w-full"
             required
+            autocomplete="username"
         />
         <InputError class="mt-2" :message="form.errors.email" />
       </div>
@@ -88,17 +89,18 @@ const submit = () => {
       <div v-if="$page.props.jetstream.hasTermsAndPrivacyPolicyFeature" class="mt-4">
         <InputLabel for="terms">
           <div class="flex items-center">
-            <Checkbox id="terms" v-model:checked="form.terms" name="terms" />
+            <Checkbox id="terms" v-model:checked="form.terms" name="terms" required />
 
             <div class="ml-2">
-              I agree to the <a target="_blank" :href="route('terms.show')" class="underline text-sm text-gray-600 hover:text-gray-900">Terms of Service</a> and <a target="_blank" :href="route('policy.show')" class="underline text-sm text-gray-600 hover:text-gray-900">Privacy Policy</a>
+              I agree to the <a target="_blank" :href="route('terms.show')" class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">Terms of Service</a> and <a target="_blank" :href="route('policy.show')" class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">Privacy Policy</a>
             </div>
           </div>
+          <InputError class="mt-2" :message="form.errors.terms" />
         </InputLabel>
       </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 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
           Already registered?
         </Link>
 

diff --git a/stubs/inertia/resources/js/Pages/Profile/ConnectedAccountsForm.vue b/stubs/inertia/resources/js/Pages/Profile/ConnectedAccountsForm.vue
@@ -81,7 +81,7 @@ function removeConnectedAccount(id) {
                 Your connected accounts.
             </h3>
 
-            <div class="mt-3 ax-w-xl text-sm text-gray-600">
+            <div class="mt-3 ax-w-xl text-sm text-gray-600 dark:text-gray-400">
                 You are free to connect any social accounts to your profile and may remove any connected accounts at any
                 time. If you feel any of your connected accounts have been compromised, you should disconnect them
                 immediately and change your password.
@@ -97,7 +97,7 @@ function removeConnectedAccount(id) {
                                     <button
                                         v-if="$page.props.jetstream.managesProfilePhotos && getAccountForProvider(provider).avatar_path"
                                         @click="setProfilePhoto(getAccountForProvider(provider).id)"
-                                        class="cursor-pointer ml-6 text-sm text-gray-500 focus:outline-none">
+                                        class="cursor-pointer ml-6 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none">
                                         Use Avatar as Profile Photo
                                     </button>
 

diff --git a/stubs/livewire/resources/views/auth/login.blade.php b/stubs/livewire/resources/views/auth/login.blade.php
@@ -27,14 +27,14 @@
 
             <div class="block mt-4">
                 <label for="remember_me" class="flex items-center">
-                    <input id="remember_me" type="checkbox" class="form-checkbox" name="remember">
-                    <span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
+                    <x-checkbox id="remember_me" name="remember" />
+                    <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">{{ __('Remember me') }}</span>
                 </label>
             </div>
 
             <div class="flex items-center justify-end mt-4">
                 @if (Route::has('password.request'))
-                    <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">
+                    <a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800" href="{{ route('password.request') }}">
                         {{ __('Forgot your password?') }}
                     </a>
                 @endif

diff --git a/stubs/livewire/resources/views/auth/register.blade.php b/stubs/livewire/resources/views/auth/register.blade.php
@@ -16,7 +16,7 @@
 
             <div class="mt-4">
                 <x-label for="email" value="{{ __('Email') }}" />
-                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
+                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autocomplete="username" />
             </div>
 
             <div class="mt-4">
@@ -33,12 +33,12 @@
                 <div class="mt-4">
                     <x-label for="terms">
                         <div class="flex items-center">
-                            <x-checkbox name="terms" id="terms"/>
+                            <x-checkbox name="terms" id="terms" required />
 
                             <div class="ml-2">
                                 {!! __('I agree to the :terms_of_service and :privacy_policy', [
-                                        'terms_of_service' => '<a target="_blank" href="'.route('terms.show').'" class="underline text-sm text-gray-600 hover:text-gray-900">'.__('Terms of Service').'</a>',
-                                        'privacy_policy' => '<a target="_blank" href="'.route('policy.show').'" class="underline text-sm text-gray-600 hover:text-gray-900">'.__('Privacy Policy').'</a>',
+                                        'terms_of_service' => '<a target="_blank" href="'.route('terms.show').'" class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">'.__('Terms of Service').'</a>',
+                                        'privacy_policy' => '<a target="_blank" href="'.route('policy.show').'" class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">'.__('Privacy Policy').'</a>',
                                 ]) !!}
                             </div>
                         </div>
@@ -47,7 +47,7 @@
             @endif
 
             <div class="flex items-center justify-end mt-4">
-                <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}">
+                <a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800" href="{{ route('login') }}">
                     {{ __('Already registered?') }}
                 </a>
 

diff --git a/stubs/livewire/resources/views/components/connected-account.blade.php b/stubs/livewire/resources/views/components/connected-account.blade.php
@@ -31,7 +31,7 @@
             @endswitch
 
             <div>
-                <div class="text-sm font-semibold text-gray-600">
+                <div class="text-sm font-semibold text-gray-600 dark:text-gray-400">
                     {{ __(ucfirst($provider)) }}
                 </div>
 

diff --git a/stubs/livewire/resources/views/components/socialstream.blade.php b/stubs/livewire/resources/views/components/socialstream.blade.php
@@ -1,4 +1,4 @@
-<div class="flex flex-row items-center justify-between py-4 text-gray-500">
+<div class="flex flex-row items-center justify-between py-4 text-gray-600 dark:text-gray-400">
     <hr class="w-full mr-2">
     {{ __('Or') }}
     <hr class="w-full ml-2">

diff --git a/stubs/livewire/resources/views/profile/connected-accounts-form.blade.php b/stubs/livewire/resources/views/profile/connected-accounts-form.blade.php
@@ -8,15 +8,15 @@
     </x-slot>
 
     <x-slot name="content">
-        <h3 class="text-lg font-medium text-gray-900">
+        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
             @if (count($this->accounts) == 0)
                 {{ __('You have no connected accounts.') }}
             @else
                 {{ __('Your connected accounts.') }}
             @endif
         </h3>
 
-        <div class="mt-3 max-w-xl text-sm text-gray-600">
+        <div class="mt-3 max-w-xl text-sm text-gray-600 dark:text-gray-400">
             {{ __('You are free to connect any social accounts to your profile and may remove any connected accounts at any time. If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.') }}
         </div>
 
@@ -32,7 +32,7 @@
                         @if (! is_null($account))
                             <div class="flex items-center space-x-6">
                                 @if (Laravel\Jetstream\Jetstream::managesProfilePhotos() && ! is_null($account->avatar_path))
-                                    <button class="cursor-pointer ml-6 text-sm text-gray-500 focus:outline-none" wire:click="setAvatarAsProfilePhoto({{ $account->id }})">
+                                    <button class="cursor-pointer ml-6 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none" wire:click="setAvatarAsProfilePhoto({{ $account->id }})">
                                         {{ __('Use Avatar as Profile Photo') }}
                                     </button>
                                 @endif