From 3a6ab365c3f691e952007b3f552c000423c19095 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <joe@dhis2.org>
Date: Mon, 18 Dec 2023 13:01:06 +0100
Subject: [PATCH] fix: locked dimension color and story example

---
 src/__demo__/DimensionsPanel.stories.js                       | 1 +
 .../DimensionsPanel/List/styles/DimensionItem.module.css      | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/src/__demo__/DimensionsPanel.stories.js b/src/__demo__/DimensionsPanel.stories.js
index 6a3fbc6de..71cc1abc6 100644
--- a/src/__demo__/DimensionsPanel.stories.js
+++ b/src/__demo__/DimensionsPanel.stories.js
@@ -94,6 +94,7 @@ storiesOf('DimensionsPanel', module).add('locked dimension', () => {
         <DimensionsPanel
             dimensions={[...fixedDimensions, ...dynamicDimensions]}
             onDimensionClick={onDimensionClick}
+            selectedIds={[DIMENSION_ID_DATA]}
             lockedDimension={(dimension) => dimension === DIMENSION_ID_DATA}
         />
     )
diff --git a/src/components/DimensionsPanel/List/styles/DimensionItem.module.css b/src/components/DimensionsPanel/List/styles/DimensionItem.module.css
index b89b36275..88dc05214 100644
--- a/src/components/DimensionsPanel/List/styles/DimensionItem.module.css
+++ b/src/components/DimensionsPanel/List/styles/DimensionItem.module.css
@@ -65,6 +65,7 @@
 .lockWrapper svg path {
     fill: var(--colors-grey800);
 }
+
 .lockWrapper {
     background: var(--colors-grey300);
     height: 20px;
@@ -74,6 +75,9 @@
     justify-content: center;
 }
 
+.item.selected .lockWrapper {
+    background: #cbe7e5;
+}
 .item.selected .lockWrapper svg path {
     fill: var(--colors-teal900);
 }