Add premium feature details and new visuals for "Project Banner" and other customization options. Update documentation with structured content and relevant links.

Author: mallowigi

docs/configuration/project-title-bar-settings.md

@@ -14,36 +14,36 @@ next:
   title: Other Tweaks
 ---
 
-This panel controls settings related to the **Project Title Bar** and the **Project Banner** feature.
+This panel controls settings for the **Project Title Bar** and the **Project Banner** feature.
 {:class='title'}
 
 {% include carbonads.html %}
 
-This feature is only available for premium users. You can either buy a premium license for the plugin, or purchase the license for this feature only by going to this link: [Material Theme Project Frame](https://plugins.jetbrains.com/plugin/19310-material-theme-ui-project-frame).
+This feature is exclusive to premium users. You can purchase a premium license for the plugin or a dedicated license for this feature via the following link: [Material Theme Project Frame](https://plugins.jetbrains.com/plugin/19310-material-theme-ui-project-frame).
 {:class='card-panel warn'}
 
 ## Application Frame
 
-Introduced in the New UI (2023), JetBrains IDEs feature a thick, colorful application frame that encompasses the editor and tool windows. This frame contains action buttons, widgets, and other supplementary elements.
+Introduced with the New UI (2023), JetBrains IDEs feature a thick, colorful application frame encompassing the editor and tool windows. This frame contains action buttons, widgets, and other supplementary elements.
 
-By default, this frame remains consistent across all projects, which can make it difficult to distinguish between multiple open projects.
+By default, this frame remains consistent across all projects, which can make it difficult to distinguish between multiple open windows.
 
-The **Colorize Application Frame** settings allow you to add a unique color to the frame, automatically generated based on the project name. This makes it easier to visually identify and switch between different projects.
+The **Colorize Application Frame** settings allow you to apply a unique color to the frame, automatically generated based on the project name. This makes it easier to visually identify and switch between different projects.
 
 {% include figure.html content="/screens/projectFrame/colorTitleFrame.png" caption="Colorize Title Bar" %}
 
-The color is generated by an algorithm that uses the project name to ensure a unique and consistent color for each project.
+Colors are generated by an algorithm using the project name to ensure a unique and consistent appearance for each project.
 {:class='card-panel info'}
 
-You can customize which parts of the application frame to colorize. While only the **Title Bar** is colorized by default, you can also enable colorization for:
+You can customize which parts of the application frame to colorize. While only the **Title Bar** is colorized by default, you can also enable:
 - **Title Bar**
 - **Left Tool Window**
 - **Right Tool Window**
 - **Status Bar**
 
 {% include figure.html content="/screens/projectFrame/colorAllFrame.png" caption="Colorize All Parts" %}
 
-**Note**: Starting with the Islands UI (2025), JetBrains IDEs also include a built-in **Project Gradient** feature found in `Settings > Appearance > Use project colors in main toolbar`. Enabling any of the *Colorize Application Frame* settings in the Material Theme UI plugin will automatically disable the IDE's native Project Gradient.
+**Note**: Starting with the Islands UI (2025), JetBrains IDEs include a built-in **Project Gradient** feature (located in `Settings > Appearance > Use project colors in main toolbar`). Enabling any **Colorize Application Frame** setting in the Material Theme UI plugin will automatically disable the IDE's native Project Gradient.
 {:class='card-panel warn'}
 
 {% include figure.html content="/screens/projectFrame/projectColors.png" caption="Project Colors Settings" %}
@@ -52,11 +52,11 @@ You can customize which parts of the application frame to colorize. While only t
 
 ## Project Widget Settings
 
-This section exposes some configuration settings for the native **Project Gradient** feature.
+This section provides configuration options for the native **Project Gradient** feature.
 
 ### Gradient Radius
 
-This setting allows you to specify the radius of the gradient. It's 2000px by default.
+Specify the radius of the gradient. The default value is 2000px.
 
 <div class="masonry" markdown="0">
 
@@ -72,36 +72,36 @@ This setting allows you to specify the radius of the gradient. It's 2000px by de
 
 ## Project Banner
 
-The **Project Banner** is a feature that allows you to display a customizable colored banner at the top of the IDE. This banner can be used to provide useful information about the current file, project, or module.
+The **Project Banner** displays a customizable colored banner at the top of the IDE, providing information about the active file, project, or module.
 
-The color of the banner uses the same color of the application frame, e.g. generated from the project name.
+The banner color is derived from the same algorithm as the application frame (e.g., generated from the project name).
 
 {% include figure.html content="/screens/projectFrame/projectBanners.png" caption="Project Banner" %}
 
-This banner can display a variety of information, such as:
-- the current opened file
-- the path of the current file
-- the current project name
-- the current module name
-- the current opened file icon
+The banner can display various information, including:
+- Current opened file
+- Path of the current file
+- Current project name
+- Current module name
+- Current file icon
 
 ### Show Project Icon
 
-This setting determines whether to display the project icon in the banner.
+Determines whether to display the project icon in the banner.
 
 {% include figure.html content="/screens/projectFrame/withoutIcon.png" caption="Banner without Project Icon" %}
 
 ### Show Project Text
 
-This setting determines whether to display the text in the banner.
+Determines whether to display text in the banner.
 
 {% include figure.html content="/screens/projectFrame/withoutText.png" caption="Banner without Project Text" %}
 
 ### Customize Text
 
-Here you can customize the text that appears in the banner. You can use the following variables to include dynamic information:
+Customize the banner text using the following dynamic variables:
 - `{project}`: The name of the current project.
-- `{subProject}`: When you have multiple projects in the same workspace, the project name of the currently opened file.
+- `{subProject}`: The project name of the currently opened file (useful for multi-project workspaces).
 - `{module}`: The name of the current module (for Java and Kotlin projects).
 - `{file}`: The name of the currently opened file.
 - `{fileIcon}`: The icon of the currently opened file.
@@ -114,53 +114,53 @@ Here you can customize the text that appears in the banner. You can use the foll
 
 ## Project Banner Widget
 
-In addition to the Project Banner, the plugin also provides a **Project Banner Widget** that can be added to the Title Bar, showing the same information as the Project Banner. This way, you can benefit from the Project Banner's features without having to add the banner to the Title Bar.
+The plugin also provides a **Project Banner Widget** that can be added to the Title Bar, offering the same functionality as the Project Banner without occupying additional vertical space.
 
 {% include figure.html content="/screens/projectFrame/projectBannerWidget.png" caption="Project Banner Widget" %}
 
-To add it, rather than using this settings page, you need to right click on the Title Bar and select **Customize Toolbar**. Then, search for the **Material Project Title Bar Widget** and click **Add**.
+To add it, right-click the Title Bar and select **Customize Toolbar**. Search for the **Material Project Title Bar Widget** and click **Add**.
 
-**Note**: This widget is added by default, so this is also relevant if you want to remove it.
+**Note**: This widget is added by default; use the same steps if you wish to remove it.
 {:class='card-panel info'}
 
-In addition to showing the information, this widget also provides you with the option to select from a list of predefined presets, enabling you to customize it to your needs.
+The widget also includes predefined presets for quick customization.
 
 {% include figure.html content="/screens/projectFrame/presets.png" caption="Project Banner Widget Presets" %}
 
 ----
 
 ## Project Banner Settings
 
-The following settings allow you to customize the appearance of the Project Banner Widget.
+These settings customize the appearance of the Project Banner Widget.
 
 ### Project Banner Width
 
-Specify a custom width for the Project Banner Widget. Setting it to 0 will take the full width of the IDE.
+Specify a custom width for the Project Banner Widget. Set to `0` to use the full IDE width.
 
-The default value is 800.
+The default value is `800`.
 
 {% include figure.html content="/screens/projectFrame/customWidth.png" caption="Custom Project Banner Width" %}
 
 ### Project Banner Height
 
 Specify a custom height for the Project Banner Widget.
 
-The default value is 30.
+The default value is `30`.
 
 {% include figure.html content="/screens/projectFrame/customHeight.png" caption="Custom Project Banner Height" %}
 
 ### Project Banner Font Family and Font Size
 
-This gives you the option to customize the font family and font size of the Project Banner Widget.
+Customize the font family and size used in the Project Banner Widget.
 
 {% include figure.html content="/screens/projectFrame/customFont.png" caption="Custom Project Banner Font" %}
 
 ----
 
-## Per-project settings
+## Per-project Settings
 
-Just like the Tabs Settings or the Trees Settings, the Project Banner Settings can also be configured per-project. 
+Like Tab and Tree settings, Project Banner Settings can be configured individually for each project.
 
-This way, you can decide to change the color of the banner for each project individually, use a custom text, a different font, etc.
+This allows you to define unique colors, custom text, or specific fonts for different projects.
 
 {% include figure.html content="/screens/projectFrame/customProjectSettings.png" caption="Per-project Project Banner Settings" %}