update all docs bottom bar

docs/02-setup-main-game/05-main-scene.md

@@ -114,7 +114,7 @@ The mobile interface adapts to both landscape and portrait orientations:
 | Step | Action | image |
 |------|---------|--------------|
 | 1. Locate Prefab | Search for `ui-bottom-bar-panel` prefab | ![Locate Prefabs](./img/05-main-scene/add-texture-bottom-bar-prefab.png) |
-| 2. Copy Assets | Navigate to `core/editor` directory | ![Copy UI Folder](./img/05-main-scene/add-texture-label-prefab.png) |
+| 2. Copy Assets | Navigate from `core/editor` directory | ![Copy UI Folder](./img/05-main-scene/add-texture-label-prefab.png) |
 | 3. Place Assets | Copy / Paste to game assets location | ![Asset Placement](./img/05-main-scene/editor-texture-label-prefab.png) |
 
 ---
@@ -135,7 +135,6 @@ Rename the copied prefabs by removing unnecessary prefixes:
 
 ```jsx title="The folder structure is as follows:"
     assets\game-assets\prefabs
-
 ```
 
 
@@ -143,6 +142,7 @@ Rename the copied prefabs by removing unnecessary prefixes:
 
 #### Customize *`button-auto-selection`* Label  
 
+**Follow Game Design:**
 Use the `template-label-auto-selection` to customize the appearance of the label inside the `button-auto-selection` prefab.
 
 | Component            | Description                                       |
@@ -207,8 +207,6 @@ Create the following node configuration in your main scene:
 ![Auto Selection Result](./img/05-main-scene/btn-auto-selection.png)     
 ![Bottom Bar Result](./img/05-main-scene/result-buttom-bar-in-game.png)
 
-
-
 ---
 
 ### UI Panel Mobile
@@ -221,6 +219,11 @@ Create the following node configuration in your main scene:
 | 3. Locate Prefab | Search for `buy-feature` prefab | ![Locate Prefabs](./img/05-main-scene/buy-feature-bonus-mobile.png) |    
 
 #### Step 2: Rename Prefabs 
+
+```jsx title="The folder structure is as follows:"
+    assets\game-assets\prefabs\mobile
+```
+
 Rename the copied prefabs by removing unnecessary prefixes: 
 | Prefix to Remove | Final Name |
 |------------------|----------------------|
@@ -259,28 +262,35 @@ Create the following node configuration in your main scene:
 
 #### Step 4: Setup Color For Menu Mobile UI 
 
-*Gerenal picker color* using `helper-paint-color-ui-mobile`    
+**Follow Game Design For Mobile UI:**   
-| ![Auto Selection Result](./img/05-main-scene/result-mobile-ui.png)  | ![Auto Selection Result](./img/05-main-scene/set-color-menu-ui.png) | 
+
+| ![Auto Selection Result](./img/05-main-scene/menu-landscape.png)| ![Auto Selection Result](./img/05-main-scene/menu-portrait.png)  |
 |---------|-------|
 
+##### Overview
+The `helper-paint-color-ui-mobile.js` component is a customizable color painter for various UI elements in a MOBILE UI. It allows designers and developers to easily apply theme-based colors across the game interface.
+  
+![Auto Selection Result](./img/05-main-scene/set-color-menu-ui.png)    
+
 |Ordinal number| Properties | Explaination | Example |
 |--------------|------------|--------------|---------|
-|1             | **Main Ui Normal Color**          | pick color: #45AEFF  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/buy.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/close.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/tru.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/cong.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/auto.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance1.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance2.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/setting.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/paytable.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/rule.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/cheat.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button-exit.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle1.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle2.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle3.png) |
+|0             |**paintColor**  |Trigger to repaint UI components   | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/paint-color-trigger.png)|
-|2             | **Main Ui Highlight Color**       | pick color: #A8CBFF  | ![Auto Selection Result](./img/05-main-scene/main-ui-highlight-color.png) |
+|1             | **Main Ui Normal Color**          |Default color of UI elements | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/buy.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/close.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/tru.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/cong.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/auto.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance1.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance2.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/setting.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/paytable.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/rule.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/cheat.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button-exit.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle1.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle2.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle3.png) |
-|3             | **Toggle State Off Color**        | pick color: #45AEFF  | ![Auto Selection Result](./img/05-main-scene/toggle-off.png) |
+|2             | **Main Ui Highlight Color**       | Highlight color for selected UI elements  | ![Auto Selection Result](./img/05-main-scene/main-ui-highlight-color.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button%20start.png) |
-|4             | **Toggle State On Color**         | pick color: #A8CBFF  | ![Auto Selection Result](./img/05-main-scene/toggle-on.png) |
+|3             | **Toggle State Off Color**        | Color of toggle when off  | ![Auto Selection Result](./img/05-main-scene/toggle-off.png) |
-|5             | **Background Info Page Color**    | pick color: #000000  | ![Auto Selection Result](./img/05-main-scene/background-menu.png)|
+|4             | **Toggle State On Color**         | Color of toggle when on  | ![Auto Selection Result](./img/05-main-scene/toggle-on.png) |
-|6             | **Background Menu Color**         | pick color: #000000  | ![Auto Selection Result](./img/05-main-scene/background-menu.png) |
+|5             | **Background Info Page Color**    | Info screen background  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-info.png)|
-|7             | **Background Point Panel Color**  | pick color: #000000  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-win-point.png) |
+|6             | **Background Menu Color**         | Menu background color  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-menu.png) |
-|8             | **Background Bottom Bar Color**   | pick color: #FFFFFF  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-bottom-bar.png) |
+|7             | **Background Point Panel Color**  | Background panel for point/balance UI  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-win-point.png) |
-|9             | **Button Quit Color**             | pick color: #45AEFF  | ![Auto Selection Result](./img/05-main-scene/btn-quit-game.png) |
+|8             | **Background Bottom Bar Color**   | Background bottom bar (show only mobile portrait)  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-bottom-bar.png) |
-|10            | **Button Cancel Color**           | pick color: #616160  | ![Auto Selection Result](./img/05-main-scene/btn-cancel-game.png) |1
+|9             | **Button Quit Color**             | Quit button color  | ![Auto Selection Result](./img/05-main-scene/btn-quit-game.png) |
-|11            | **Label Balance Normal Color**    | pick color: #7DFFDF  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/win-point-color.png) |
+|10            | **Button Cancel Color**           | Cancel button color  | ![Auto Selection Result](./img/05-main-scene/btn-cancel-game.png) |1
-|12            | **Label Balance Spin Color**      | pick color: #FFFFFF  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/spin-point-color.png) |
+|11            | **Label Balance Normal Color**    | Normal balance label color  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/win-point-color.png) |
-|13            | **Button Plus Minus Auto Color**  | pick color: #FFFFFF  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/btn-plus-minus-auto.png) |
+|12            | **Label Balance Spin Color**      | During-spin label color  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/spin-point-color.png) |
-|14            | **Label Start Auto Color**        | pick color: #FFFFFF  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button%20start.png) |
+|13            | **Button Plus Minus Auto Color**  | Button plus/Minus autoplay  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/btn-plus-minus-auto.png) |
-|15            | **Label Outline Notification**    | pick color: #FFFFFF  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/outline-notifcation.png) |
+|14            | **Label Start Auto Color**        | Start autoplay label  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button%20start.png) |
-|16            | **Total Win Medium Win Color**    | pick color: #FFFFFF  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png) |
+|15            | **Label Outline Notification**    | Outline color + width config | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/outline-notifcation.png) |
+|16            | **Total Win Medium Win Color**    | Color for medium win effects  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png) |
 
 ---