refactor: live preview settings docs

Author: devvaannsh

docs/08-Features/06-Live Preview/02-live-preview-settings.md

@@ -1,6 +1,6 @@
 # Custom Live Preview Server
 
-Phoenix Code now allows you to integrate your custom development server directly into the editor, enabling a live preview of your project as it would appear when served by your server. This is especially useful for dynamic projects that rely on server-side languages like PHP or frameworks like React that supports hot reloading.
+**Phoenix Code** now allows you to integrate your custom development server directly into the editor, enabling a Live Preview of your project as it would appear when served by your server. This is especially useful for dynamic projects that rely on server-side languages like *PHP* or frameworks like *React* that supports hot reloading.
 
 ## Accessing Live Preview Settings
 
@@ -9,10 +9,13 @@ There are two ways to access the Live Preview Settings dialog:
 1. **From the File Menu**:
     - Navigate to the 'File' menu at the top left of the editor.
     - Select 'Live Preview Settings' from the dropdown.
+<!-- TODO: replace this image as new features are missing in the dropdown -->
 ![live-preview-settings](../images/livePreview/settings-menu.png)
-1. **From the Live Preview Panel**:
+
+2. **From the Live Preview Panel**:
     - Locate the live preview panel, typically found at the right side of the editor.
     - Hover over the live preview panel title bar and click the gear icon (⚙️) located at the top right of the panel title bar.
+<!-- TODO: replace this image as its not consistent with the way we display images -->
 ![live-preview-settings](../images/livePreview/settings-gear.png)
 ## Configuring Your Server
 
@@ -34,6 +37,6 @@ After configuring these settings, click 'Done' to save and apply your settings.
 
 ## Hot Reloading
 
-Hot reloading is a feature that automatically updates a web application during development whenever code changes are made, without requiring a manual refresh or losing state. Servers like Webpack Dev Server for JavaScript applications, Flask with Flask-Webpack for Python, and Rails with Webpacker for Ruby on Rails support hot reloading.
+Hot reloading is a feature that automatically updates a web application during development whenever code changes are made, without requiring a manual refresh or losing state. Servers like *Webpack Dev Server* for JavaScript applications, *Flask with Flask-Webpack* for Python, and *Rails with Webpacker* for Ruby on Rails support hot reloading.
 
-In Phoenix Code, if your server supports hot reloading, check the 'Server supports hot reload' checkbox. This lets Phoenix Code update changed components only and prevent full page reloads on code changes. Unchecked, it refreshes the whole page on every save.
+In Phoenix Code, if your server supports hot reloading, check the 'Server supports hot reload' checkbox. This lets Phoenix Code update changed components only and prevent full page reloads on code changes. When unchecked, it refreshes the whole page on every save.