Improve code styling and update mobile docs

Enhanced code block styling in app.css for better readability, including dark mode improvements. Updated mobile documentation to clarify hot reloading usage and implementation, and added GD PHP extension requirements for app icon and splash screen generation.

Author: shanerbaner82

resources/css/app.css

@@ -194,11 +194,16 @@ nav.docs-navigation > ul > li > ul {
 }
 
 .prose pre code {
-    @apply text-gray-50;
+    @apply bg-transparent p-0 text-sm font-normal text-gray-50;
 }
 
 .prose code {
-    @apply px-1;
+    @apply rounded bg-gray-200 px-1.5 py-0.5 text-sm font-medium text-purple-600;
+}
+
+.prose code::before,
+.prose code::after {
+    content: none;
 }
 
 .prose a {
@@ -263,5 +268,5 @@ nav.docs-navigation > ul > li > ul {
 }
 
 .dark .prose code {
-    @apply text-gray-300;
+    @apply bg-gray-800 text-purple-300;
 }

resources/views/docs/mobile/1/getting-started/development.md

@@ -91,28 +91,25 @@ If you're familiar with these tools, you can easily open the projects using the
 php artisan native:open
 ```
 
-## Hot Reloading (Experimental)
+## Hot Reloading
 
 We've tried to make compiling your apps as fast as possible, but when coming from the 'make a change; hit refresh'-world
 of PHP development that we all love, compiling apps can feel like a slow and time-consuming process.
 
-So we've released an early version of hot reloading, which aims to make your development experience feel just like home. 
+So we've released hot reloading, which aims to make your development experience feel just like home. 
 
-You can enable hot reloading by adding the `--watch` flag when running the `native:run` command:
+You can enable hot reloading by running the following command:
 
 ```shell
-php artisan native:run --watch
+php artisan native:watch {platform:ios|android}
 ```
 
 This is useful during development for quickly testing changes without re-compiling your entire app. When you make
 changes to any files in your Laravel app, the web view will be reloaded and your changes should show almost immediately.
 
-### Caveats
+### Implementation
 
-For now, hot reloading only works in emulators, not on real devices.
-
-Also, it's currently best suited for **Blade** and **Livewire** applications. It doesn't work so well if you're
-also trying to hot reload compiled frontends using something like Vite's hot reloading.
+The proper way to implement this is to first `run` your app on your device/emulator, then start HMR with `npm run dev` then in a separate terminal run the `native:watch` command. This will reload any Blade/Livewire files as well as any recompiled assets (css/js etc).
 
 ## Releasing
 

resources/views/docs/mobile/1/the-basics/app-icon.md

@@ -13,6 +13,7 @@ Place a single high-resolution icon file at: `public/icon.png`.
 - Format: PNG
 - Size: 1024 × 1024 pixels
 - Background: Transparent or solid — your choice
+- GD PHP extension must be enabled, ensure it has enough memory (~2GB should be enough)
 
 This image will be automatically resized for all Android densities and used as the base iOS app icon.
 You must have the GD extension installed in your development machine's PHP environment for this to work.

resources/views/docs/mobile/1/the-basics/splash-screens.md

@@ -15,3 +15,4 @@ Place the relevant files in the locations specified:
 ### Requirements
 - Format: PNG
 - Minimum Size/Ratio: 1080 × 1920 pixels
+- GD PHP extension must be enabled, ensure it has enough memory (~2GB should be enough)