Address review comments

Author: pinkeshmars

docs/intro/ff-ui/builder.md

@@ -12,7 +12,7 @@ On opening the project, you'll see the App Builder, which consists of four main
 
 ![app-builder](imgs/builder.avif)
 
-## 1. Navigation Menu {#navigation-menu}
+## Navigation Menu {#navigation-menu}
 
 The Navigation Menu, located on the left side of the builder, allows you to switch between various FlutterFlow features. These include designing the UI, managing databases, setting up API, adjusting app settings, adding integrations, and more.
 
@@ -34,14 +34,14 @@ Here is a list of all the features accessible from the navigation menu:
 14. **Theme settings**: Customize visual appearance.
 15. **Settings and Integrations**: Access app-related settings and integrations.
 
-## 2. Tool Bar {#toolbar}
+## ToolBar {#toolbar}
 
-From [Tool Bar](toolbar), you can search for project resources, change canvas size, see project history, branching, optimization and enhancements, view-download code, and run your app.
+From [ToolBar](toolbar), you can search for project resources, change canvas size, see project history, branching, optimization and enhancements, view-download code, and run your app.
 
-## 3. Canvas Area {#canvas-area}
+## Canvas Area {#canvas-area}
 
-In the [Canvas Area](canvas), you can see a preview of your mobile device's screen and build your app page.
+In the [Canvas Area](canvas), you can see a preview of a device's screen and build your app page.
 
-## 4. Properties Panel {#properties-panel}
+## Properties Panel {#properties-panel}
 
 The Properties Panel lets you modify both the visual appearance and interactive behavior of UI elements on the canvas. It allows you to add [Actions](#), set up a [Backend Query](#), add [Animations](#) and more.

docs/intro/ff-ui/canvas.md

@@ -13,29 +13,29 @@ It allows zoom level adjustments and previews in light or dark mode. It also inc
 
 ![canvas area](imgs/canvas-new.avif)
 
-## 1. Preview Screen
+## Preview Screen
 
 This is the canvas of the device screen where you can build the user interface. You can customize the screen by adding widgets using drag and drop from the [Widget Palette](#) and by applying properties present in the [Properties Panel](#).
 
-## 2. Show or hide Navigation Menu
+## Show or hide Navigation Menu
 
 From here, you can open or close the [Navigation Menu](#).
 
-## 3. Zoom Controls
+## Zoom Controls
 
 There's a zoom in ( + ) and a zoom out ( - ) button to control the zoom level of the canvas. While working on complex user interface designs, this comes in handy to give you a better preview of the widgets by zooming in to a particular area and then zooming out to have an overview.
 
-## 4. AI Generated Page
+## AI Generated Page
 
 From here, you can [create a page using AI](#).
 
-## 5. Add App Bar
+## Add App Bar
 
 From here, you can add an [App Bar](#) to your page. Clicking this button opens a popup displaying different [App Bar styles](#) for you to choose from. Just select any App Bar style from the list and it will appear in the Preview Screen.
 
 ![AddAppBar.avif](imgs/AddAppBar.avif)
 
-## 6. Multi-Language Preview
+## Multi-Language Preview
 
 If you've enabled the multi-language feature for your project, you can use this to preview your app in different languages. Just select the language from the dropdown menu, and the text in your app will be translated accordingly.
 
@@ -69,28 +69,28 @@ This feature is valuable for testing your app across multiple locales without ne
     </iframe>
 </div>
 
-## 7. Dark/Light Mode
+## Dark/Light Mode
 
 This toggle lets you switch between light and dark mode in your app, allowing you to ensure your design looks great in both modes. This feature is only available if you've enabled dark mode support in your project.
 
-## 8. Display Device
+## Display Device
 
-You can use this to show the device frame in the preview. This might come in handy if you want to visualize better or capture the user interface on a particular device.
+You can use this to show the device frame in the preview. This is particularly useful for checking how your screen will look with device-specific features such as the safe area or notches on iPhones and Android devices.
 
-## 9. Handle Bars
+## Handle Bars
 
-Enabling the Resize Handle Bars will show the handle bards at the right and bottom sides of the preview screen. This allows you to change the size of the preview screen to better test your app on a screen with a custom resolution and the overall responsiveness of your app.
+Enabling the Resize Handle Bars will show the handle bars at the right and bottom sides of the preview screen. This allows you to change the size of the preview screen to better test your app on a screen with a custom resolution and the overall responsiveness of your app.
 
 ![handle-bars](imgs/handle-bars.gif)
 
-## 10. Show or hide Keyboard
+## Show or Hide Keyboard
 This option, when enabled, displays a virtual keyboard on the device preview screen. This is particularly useful for visualizing the user interface with the keyboard displayed.
 
-## 11. Larger Font Visualization
+## Larger Font Visualization
 
 This enables you to simulate how your app appears when users adjust text scale or accessibility settings on their devices. It's vital for developing an app that's visually appealing and also accessible, especially for those requiring larger text sizes.
 
-## 12. Canvas Settings
+## Canvas Settings
 ![canvas-settings](imgs/canvas-settings.avif)
 ### Safe Area
 The Safe Area is a concept in mobile design that prevents content from being obscured by physical features of the device, such as camera notches, sensors, or rounded display edges. In this context, the FlutterFlow offers a Safe Area switch which allows you to enable or disable this feature as needed.
@@ -128,7 +128,7 @@ When resizing a widget, you can snap its size to the specific pixel values or a
 ### Change canvas color
 Changing the canvas color can be helpful when creating components, especially when you want to preview them against the background color of the page. For example, if you have a text component that is black or dark-colored, and the default background is also dark, changing the canvas color to a lighter shade can improve visibility and make the design process easier.
 
-## 13. Add Nav Bar
+## Add Nav Bar
 
 This button allows you to add the [Nav Bar](#) to your page. Clicking on this button opens the popup that allows you to enable Nav Bar for your project. Once the Nav Bar is enabled, you can customize it to match your design.
 

docs/intro/ff-ui/imgs/floating-widget-palette.gif

@@ -31,5 +31,5 @@ If you are coming from Flutter, it is beneficial for you to understand the Flutt
 1. **MyApp to Project**: In Flutter, `MyApp` typically represents the root of your application, where you set up routes and other global configurations. In FlutterFlow, the equivalent is the "Project," which encompasses the entire application you are building, including its configurations and settings. Learn more about creating a project [here](../../resources/Projects/how-to-create-find-organize-projects#how-to-create-a-project).
 2. **MyPage to Page**: `MyPage` in Flutter represents a specific screen in the app. Similarly, In FlutterFlow, each "Page" corresponds to a screen, where you build the layout and functionality specific to that page of the project. Learn more about pages in FlutterFlow [here](../../resources/ui-building-blocks/pages/getting-started#creating-a-page).
 3. **Column, Button, Text to Built-in widgets**: In FlutterFlow, widgets are categorized under "Built-in widgets," which users can drag and drop onto their canvas to build the UI. Learn more about widgets [here](../../resources/ui-building-blocks/overview#widgets).
-4. **Custom widget to Component**: `CustomWidget` in Flutter indicates user-created widgets that serve specific functions not covered by built-in widgets. FlutterFlow translates this into "Component" allowing you to create and use custom components within your projects. Learn more about creating a component [here](#).
+4. **Custom widget to Component**: `CustomWidget` in Flutter indicates user-defined widgets that serve specific functions not covered by built-in widgets. FlutterFlow translates this into "Component" allowing you to create and use custom components within your projects. Learn more about creating a component [here](#).
 5. **Theme/style constants to Design System**: In Flutter, theme and style constants are used to ensure consistent styling across an app. FlutterFlow uses a "Design System" to manage and apply uniform styles and themes throughout the application. Learn more about design system [here](#).

docs/intro/ff-ui/resource-hierarchy.md

@@ -12,11 +12,11 @@ The Toolbar, located at the top of the app builder, provides easy access to nume
 
 ![toolbar](imgs/toolbar.avif)
 
-## 1. Project info
+## Project info
 
 Hovering over this section reveals the essential information about your project. Here, you can easily check the project name, the current version of FlutterFlow that you're using, along with its release date. Additionally, it shows the Flutter version that your project is currently running on.
 
-## 2. Help
+## Help
 
 From here, you will get access to essential resource links that will come in handy while building your apps.
 
@@ -30,19 +30,19 @@ From here, you will get access to essential resource links that will come in han
 8. **Current Status/Known Issues**: We want to keep you informed about the current status of FlutterFlow and provide updates regarding any known issues. We aim to ensure transparency and keep you in the loop about the platform's performance and potential issues.
 9. **Show/Hide Chat**: You can use this option to show or hide the chat button at the bottom right of the app builder.
 
-## 3. Keyboard shortcuts
+## Keyboard shortcuts
 
 With keyboard shortcuts, you can perform common actions related to widgets and run your project in Test or Run mode with just a few keystrokes, saving you time and effort. Select this option to see all the shortcuts.
 
 ![keyboard-shortcut.avif](imgs/keyboard-shortcut.avif)
 
-## 4. Command Palette
+## Command Palette
 
 The Command Palette makes it easy to find and use things in the App Builder. Open the Command Palette by clicking the search button or pressing **Cmd/Ctrl + K**. Search for anything, and to find out where it's used, click the right arrow – we'll show you every place. To directly access the item, just click on it.
 
 ![command-palette.avif](imgs/command-palette.avif)
 
-## 5. Canvas size
+## Canvas size
 
 We allow you to visualize and design your app for various mobile, tablet, and desktop devices. The [canvas](#) size is defined as width (in pixels) x height (in pixels). This size is determined according to the device selected. To set a custom canvas size, click on the Canvas Size and enter the width and height (in pixels) you want.
 
@@ -72,11 +72,11 @@ We allow you to visualize and design your app for various mobile, tablet, and de
     </iframe>
 </div>
 
-## 6. Project history
+## Project history
 
 Understand the crucial concepts of project history, such as saving and versioning [here](#).
 
-## 7. Project comments
+## Project comments
 
 This helps you leave your thoughts, opinions, questions, or feedback on a specific widget with your project team or a client. While adding a comment, you can tag users, and they will be able to respond, creating a thread of conversation.
 
@@ -86,7 +86,7 @@ To tag users, select the @ symbol and choose the project team member(s).
 
 :::
 
-## 8. Optimizations & Enhancements
+## Optimizations & Enhancements
 
 We scan and suggest enhancements to elevate your app's design and speed. Imagine having a personal consultant for design and performance dedicated to improving the user experience of your app.
 
@@ -102,7 +102,7 @@ You can control what kind of suggestions you would like to receive by clicking o
 
 ![Optimization.avif](imgs/Optimization.avif)
 
-## 9. Project issues
+## Project issues
 
 If there are any issues or warnings present in your current project that might result in a build failure or app crash, they will be displayed in this section. You can click this option to view a short description of each issue and navigate to the place where you can fix the issue by clicking on the respective issue.
 
@@ -114,11 +114,11 @@ If there are any issues or warnings present in your current project that might r
 
 ![Warning-and-errors.avif](imgs/Warning-and-errors.avif)
 
-## 10. Branching
+## Branching
 
 [Branching](#) enables you to create a separate copy of your existing project, allowing you to develop new features without affecting the current functionality.
 
-## 11. Developer menu
+## Developer menu
 The Developer Menu provides developers with access to tools such as code viewing, GitHub integration, and source code download capabilities.
 
 1. **View Code**: This option lets you display the *Dart* code for all the pages of your FlutterFlow project. You can also take a look at the dependencies being used by the app here.
@@ -135,7 +135,7 @@ The Developer Menu provides developers with access to tools such as code viewing
 _Connect GitHub Repo_, _Download Code_, and _Download APK_ features requires a [**paid plan**](https://flutterflow.io/pricing).
 :::
 
-## 12. Share project
+## Share project
 
 You can make a project public so that others can view and clone your project. Before you share your project, make sure to remove any sensitive information.
 
@@ -146,10 +146,10 @@ You can make a project public so that others can view and clone your project. Be
 
 :::
 
-## 13. Preview
+## Preview
 
 You can use this option to run your app in [Preview mode](../../resources/Projects/how-to-run-test-projects#preview-mode).
 
-## 14. Testing
+## Testing
 
 This menu allows you to run your app in [Test](../../resources/Projects/how-to-run-test-projects#test-mode) or [Run](../../resources/Projects/how-to-run-test-projects#run-mode) mode.

docs/intro/ff-ui/toolbar.md

@@ -25,8 +25,10 @@ Templates are predefined and ready-to-use widgets. These include UI elements tha
 
 ## 4. Theme Widgets
 
-Theme Widgets allow you to customize the visual appearance of a single widget and then reuse it throughout the app. Once you [create a theme widget](#), you can access it from here.
+Theme Widgets enable you to customize the visual appearance of individual widgets and reuse them consistently throughout your app. They are an integral part of the design system, allowing you to build widgets based on your theme. Once you [create a theme widget](#), you can access it from here.
 
 ## 5. Floating Widget Palette
 
-The floating widget palette gives you quick access to widgets directly from the canvas. This feature is useful for swiftly adding widgets without the need to open the widget palette via the navigation menu.
+The Floating Widget Palette gives you quick access to widgets directly from the canvas. This feature is useful for swiftly adding widgets without the need to open the widget palette via the navigation menu.
+
+![Floating Widget Palette](imgs/floating-widget-palette.gif)