Visual is okay, SQL was updated to also contain the new property.

Before refactoring code

Author: Pa-Touche

sormas-api/src/main/java/de/symeda/sormas/api/i18n/Validations.java

@@ -275,6 +275,7 @@ public interface Validations {
 	String systemConfigurationValueInvalidValue = "systemConfigurationValueInvalidValue";
 	String systemConfigurationValuePatternNotMatched = "systemConfigurationValuePatternNotMatched";
 	String systemConfigurationValueValidationInvalidBackgroundColor = "systemConfigurationValueValidationInvalidBackgroundColor";
+	String systemConfigurationValueValidationMenuSubtitle = "systemConfigurationValueValidationMenuSubtitle";
 	String systemConfigurationValueValidationNotADirectory = "systemConfigurationValueValidationNotADirectory";
 	String systemConfigurationValueValidationNotAEmail = "systemConfigurationValueValidationNotAEmail";
 	String systemConfigurationValueValidationNotAFile = "systemConfigurationValueValidationNotAFile";

sormas-api/src/main/resources/validations.properties

@@ -331,3 +331,4 @@ systemConfigurationValueValidationNotAValidSmsSenderName = Value is not a valid
 smsAuthKeyValueValidation = SMS Auth key value is not valid
 smsAuthSecretValueValidation = SMS Auth secret value is not valid
 systemConfigurationValueValidationInvalidBackgroundColor=Pre-defined values are: green, red, indigo, gray, default (case-sensitive) otherwise must match hexadecimal format, example: #dd2b0e or #4AA
+systemConfigurationValueValidationMenuSubtitle=Can be empty or up to 16 (any) characters. Can be used to define name of the environment: PRODUCTION - TEST etc.

sormas-backend/src/main/resources/sql/sormas_schema.sql

@@ -15086,7 +15086,8 @@ $$
             RETURNING id INTO general_configuration_id;
         END IF;
 
-        -- Insert new configuration if missing
+        -- Insert new configurations if missing
+        -- Background color
         INSERT INTO systemconfigurationvalue(config_key, config_value, category_id, value_optional, value_pattern,
                                              value_encrypt, data_provider, validation_message, changedate, creationdate,
                                              id,
@@ -15097,6 +15098,19 @@ $$
                 'i18n/systemConfigurationValueValidationInvalidBackgroundColor', now(), now(), nextval('entity_seq'),
                 generate_base32_uuid())
         ON CONFLICT (config_key) DO NOTHING;
+
+        -- Menu Subtitle
+        INSERT INTO systemconfigurationvalue(config_key, config_value, category_id, value_optional, value_pattern,
+                                             value_encrypt, data_provider, validation_message, changedate, creationdate,
+                                             id,
+                                             uuid)
+        VALUES ('MENU_SUBTITLE', '', general_configuration_id, true,
+                '^\w{0,16}$', false,
+                null,
+                'i18n/systemConfigurationValueValidationMenuSubtitle', now(), now(), nextval('entity_seq'),
+                generate_base32_uuid())
+        ON CONFLICT (config_key) DO NOTHING;
+
     END
 $$
 LANGUAGE plpgsql;

sormas-ui/src/main/java/de/symeda/sormas/ui/Menu.java

@@ -88,7 +88,10 @@ public Menu(Navigator navigator) {
 		// header of the menu
 		VerticalLayout topContainer = new VerticalLayout();
 		topContainer.setDefaultComponentAlignment(Alignment.MIDDLE_CENTER);
-		topContainer.addStyleName(ValoTheme.MENU_TITLE);
+		CssStyles.style(topContainer, ValoTheme.MENU_TITLE, "top-menu-container");
+		topContainer.setSpacing(false);
+		topContainer.setSpacing(false);
+
 		HorizontalLayout top = new HorizontalLayout();
 		top.setDefaultComponentAlignment(Alignment.MIDDLE_CENTER);
 		top.setSpacing(true);
@@ -107,19 +110,16 @@ public Menu(Navigator navigator) {
 		CssStyles.style(image, ValoTheme.MENU_LOGO, ValoTheme.BUTTON_LINK);
 		top.addComponent(image);
 		top.addComponent(title);
+
 		topContainer.addLayoutClickListener(listener -> SormasUI.get().getNavigator().navigateTo(SurveillanceDashboardView.VIEW_NAME));
 		topContainer.addComponent(top);
 		// TODO: new code to format
 
-		final HorizontalLayout environmentTitleContainer = new HorizontalLayout();
-		environmentTitleContainer.setDefaultComponentAlignment(Alignment.MIDDLE_CENTER);
-		environmentTitleContainer.setSpacing(false);
-		Label systemConfigurationLabel = new Label("QA");
+		// max allowed length: 1234567891011121
+		Label systemConfigurationLabel = new Label("1234567891011121");
 		systemConfigurationLabel.setSizeUndefined();
-		CssStyles.style(systemConfigurationLabel, CssStyles.LABEL_UNDERLINE);
-		environmentTitleContainer.addComponent(systemConfigurationLabel);
-		environmentTitleContainer.setStyleName("environment-name");
-		topContainer.addComponent(environmentTitleContainer);
+		CssStyles.style(systemConfigurationLabel, CssStyles.LABEL_UNDERLINE, "environment-name");
+		topContainer.addComponent(systemConfigurationLabel);
 
 		menuPart.addComponent(topContainer);
 

sormas-ui/src/main/webapp/VAADIN/themes/sormas/components/menu.scss

@@ -126,8 +126,11 @@ $valo-menu-background-color: $s-default-color !default;
     }
   }
 
-  .v-horizontallayout-environment-name {
-    font-size: 24px;
-    margin-bottom: -30px;
+  .top-menu-container {
+    max-height: 115px;
+  }
+
+  .environment-name {
+    font-size: 26px;
   }
 }