feat: Align headers across gardens (#643)

equinor · Oct 1, 2024 · 5e90513 · 5e90513
1 parent f59638c
commit 5e90513
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/packages/garden/package.json b/packages/garden/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-garden",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",

diff --git a/packages/garden/src/lib/components/defaultComponents/header/DefaultHeaderView.tsx b/packages/garden/src/lib/components/defaultComponents/header/DefaultHeaderView.tsx
@@ -3,19 +3,35 @@ import { memo } from 'react';
 import styled from 'styled-components';
 import { tokens } from '@equinor/eds-tokens';
 
-const Count = styled.span`
+const StyledHeaderContent = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+`;
+
+const StyledCount = styled.h2`
   color: ${tokens.colors.text.static_icons__default.hex};
   font-weight: 300;
   font-size: 0.8rem;
   margin-left: 0.8em;
 `;
 
-const HeaderView = ({ header }: CustomHeaderView) => {
+const StyledHeaderText = styled.h2`
+  white-space: pre-line;
+  font-size: 16px;
+  text-align: center;
+`;
+
+const HeaderView = (props: CustomHeaderView) => {
+  const { header } = props;
+
   return (
-    <>
-      {header.name}
-      <Count>({header.count})</Count>
-    </>
+    <StyledHeaderContent>
+      <StyledHeaderText>{header.name}</StyledHeaderText>
+      <StyledCount>({header.count})</StyledCount>
+    </StyledHeaderContent>
   );
 };
 

diff --git a/packages/workspace-fusion/package.json b/packages/workspace-fusion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/workspace-fusion",
-  "version": "9.0.14",
+  "version": "9.0.15",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",