[#58115] 14.6 Documentation: Split content of Admin/Design page into … (#16851)

* [#58115] 14.6 Documentation: Split content of Admin/Design page into separate tabs  https://community.openproject.org/work_packages/58115

[#58115] 14.6 Documentation: Split content of Admin/Design page into separate tabs

https://community.openproject.org/work_packages/58115

* [#58115] 14.6 Documentation: Split content of Admin/Design page into separate tabs  https://community.openproject.org/work_packages/58115

[#58115] 14.6 Documentation: Split content of Admin/Design page into separate tabs

https://community.openproject.org/work_packages/58115

* Update README.md

* Apply suggestions from code review

docs/release-notes/14-0-0/README.md

@@ -41,7 +41,7 @@ methods. For more information, see [#51212](https://community.openproject.org/wo
 
 ### Reduced number of configurable design variables
 
-We have changed the number and naming of the [configurable design variables](../../system-admin-guide/design/#advanced-settings). This simplifies the process of setting the desired color scheme for users. It also allows us to get closer to the **Primer design system** in order to benefit from its other modes such as the dark mode or the colorblind mode in the future.
+We have changed the number and naming of the [configurable design variables](../../system-admin-guide/design/#interface-colors). This simplifies the process of setting the desired color scheme for users. It also allows us to get closer to the **Primer design system** in order to benefit from its other modes such as the dark mode or the colorblind mode in the future.
 
 The following variables have been changed:
 

docs/system-admin-guide/design/README.md

@@ -11,28 +11,31 @@ As an OpenProject Enterprise add-on you can replace the default  OpenProject log
 
 Navigate to *Administration* -> *Design* in order to customize your OpenProject theme and logo.
 
-The design page provides several options to customize your OpenProject Enterprise edition:
+The design page provides several options to customize your OpenProject Enterprise edition, grouped under three tabs, **Interface, Branding, PDF export styles**. You can [choose a color theme](#choose-a-color-theme) under any of these tabs. 
 
-1. Choose a default color theme: OpenProject, Light or Dark. Press the Save button to apply your changes.
-2. Upload your own **custom logo** to replace the default OpenProject logo.
-3. Set a custom **favicon** which is shown as an icon in your browser window/tab.
-4. Upload a custom **touch icon** which is shown on your smartphone or tablet when you bookmark OpenProject on your home screen.
-5. Set the **Custom PDF export settings** for [exporting work packages in a PDF format](../../user-guide/work-packages/exporting/#pdf-export).
-6. [Advanced settings](#advanced-settings) to configure **custom colors** to adjust nearly any aspect of OpenProject, such  as the color of the header and side menu, the link color and the hover color.
+Under **Interface** you can also choose [custom colors](#interface-colors) for elements of the interface such as the primary link colour, secondary accent colour, the background of the top navigation header and the main menu.
 
-![Design settings in an OpenProject system admin guide](openproject_system_guide_design.png)
+![Design interface settings in OpenProject adminstration](openproject_system_guide_design_interface.png)
+
+Under the **Branding** tab you can also [upload a custom logo](#upload-a-custom-logo) to replace the default OpenProject logo, [set a custom favicon](#set-a-custom-favicon), which is shown as an icon in your browser window/tab, and [upload a custom touch icon](#set-a-custom-touch-icon), which is shown on your smartphone or tablet when you bookmark OpenProject on your home screen.
+
+![Branding settings in OpenProject administration](openproject_system_guide_design_branding.png)
+
+Under **PDF export settings** you can set the preferences for [exporting work packages in a PDF format](../../user-guide/work-packages/exporting/#pdf-export).
+
+![PDF export styles settings in OpenProject administration](openproject_system_guide_design_pdf_export_styles.png)
 
 ## Choose a color theme
 
 You can choose between the three default color themes for OpenProject:
 
 * OpenProject
-* OpenProject Light
-* OpenProject Dark
+* OpenProject Gray (previously called OpenProject Light)
+* OpenProject Navy Blue (previously called OpenProject Dark)
 
 Press the Save button to apply your changes. The theme will then be changed.
 
-![System-admin-guide_color-theme](System-admin-guide_color-theme.png)
+![Change color theme in OpenProject administration settings](openproject_system_guide_design_color_theme_navy_blue.png)
 
 ## Upload a custom logo
 
@@ -40,9 +43,11 @@ To replace the default OpenProject logo with your own logo, make sure that your
 
 Click the *Upload* button to confirm and upload your logo.
 
-![Sys-admin-design-upload-logo](Sys-admin-design-upload-logo.png)
+![Upload custom logo in OpenProject administration settings](openproject_system_guide_design_upload_custom_logo.png)
 
-![upload logo](system_admin_logo_updated.png)
+
+
+![Custom logo updated in OpenProject admistration](openproject_system_guide_design_custom_logo_uploaded.png)
 
 ## Set a custom favicon
 
@@ -50,7 +55,7 @@ To set a custom favicon to be shown in your browser’s tab, make sure  you have
 
 Then click the *Upload* button to confirm and upload your favicon.
 
-![Sys-admin-design-favicon](Sys-admin-design-favicon.png)
+![Custom favicon in OpenProject design settings](openproject_system_guide_design_custom_favicon.png)
 
 ## Set a custom touch icon
 
@@ -60,16 +65,16 @@ Click the *Upload* button to confirm and upload your custom touch icon.
 
 When you bookmark your OpenProject environment’s URL, you will see that the uploaded icon is used as a custom touch icon.
 
-## Advanced settings
+## Interface colors
 
 Aside from uploading logos and icons, you can also customize the colors used within your OpenProject environment.
 
-To do this change the color values (entered as color hex code) in the *Advanced settings* section. In order to find the right hex code for a color, you can use a website, such as [color-hex.com](https://www.color-hex.com/).
- You can see the selected color in the preview area next to the color hex code. Therefore, it is possible to see the selected color before saving the changes.
+To do this, enter the hex value for any color you would like to change. You can use a website like [htmlcolorcodes.com](https://htmlcolorcodes.com/color-picker/) to help you find the perfect color.
+You can see the selected color in the preview area next to the color hex code. Therefore, it is possible to see the selected color before saving the changes.
 
 > [!TIP]
 > If the button color you select is too light to have white text on top of it, the icon and text color will be displayed in black instead.
 
-![Advanced color settings in OpenProject](openproject_system_guide_design_advanced_settings_primer.png)
+![Advanced color settings in OpenProject](openproject_system_guide_design_interface_colors.png)
 
 As soon as you press the **Save** button your changes are applied and the colors of your OpenProject environment are adjusted accordingly.