From 7c28f61f2681f395ce8d4ed2900af718c054350b Mon Sep 17 00:00:00 2001
From: Mateusz Borowczyk <mateusz.borowczyk@inmanta.com>
Date: Tue, 18 Feb 2025 09:27:07 +0100
Subject: [PATCH] Improve casing of names of instance groups in Instance
 Composer (Issue #6155, PR #6213)

# Description

Improve casing of names of instance groups in Instance Composer
![Screenshot 2025-02-17 at 15 10 40](https://github.com/user-attachments/assets/b3938b67-2ddc-4e6d-874a-250032d8438f)

closes #6155

# Self Check:

Strike through any lines that are not applicable (`~~line~~`) then check the box

- [ ] Attached issue to pull request
- [ ] Changelog entry
- [ ] Code is clear and sufficiently documented
- [ ] Sufficient test cases (reproduces the bug/tests the requested feature)
- [ ] Correct, in line with design
- [ ] End user documentation is included or an issue is created for end-user documentation (add ref to issue here: )
---
 changelogs/unreleased/6155-casing-composer.yml |  6 ++++++
 src/UI/Components/Diagram/styles.ts            | 10 ++++++++++
 2 files changed, 16 insertions(+)
 create mode 100644 changelogs/unreleased/6155-casing-composer.yml

diff --git a/changelogs/unreleased/6155-casing-composer.yml b/changelogs/unreleased/6155-casing-composer.yml
new file mode 100644
index 000000000..2723f39d7
--- /dev/null
+++ b/changelogs/unreleased/6155-casing-composer.yml
@@ -0,0 +1,6 @@
+description: Improve casing of names of instance groups in Instance Composer
+issue-nr: 6155
+change-type: patch
+destination-branches: [master, iso8]
+sections:
+  minor-improvement: "{{description}}"
diff --git a/src/UI/Components/Diagram/styles.ts b/src/UI/Components/Diagram/styles.ts
index 22beaf913..9b18f0246 100644
--- a/src/UI/Components/Diagram/styles.ts
+++ b/src/UI/Components/Diagram/styles.ts
@@ -40,6 +40,16 @@ export const CanvasWrapper = styled.div`
     border: 0;
     background-color: var(--pf-t--global--background--color--primary--default);
 
+    .group > .group-label {
+      text-transform: none;
+      color: var(--pf-t--global--text--color--regular);
+      font-size: var(--pf-t_global_font_size_body_lg);
+
+      &::before {
+        border-top-color: var(--pf-t--global--text--color--regular);
+      }
+    }
+
     &.joint-hidden {
       visibility: hidden; //note: display: none breaks the stencil-groups
     }