fix: header ui styling after tailwind

equinor · Nov 29, 2023 · 0d112fe · 0d112fe
1 parent 264e4f9
commit 0d112fe
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/e2e/tests/plugin-header.spec.ts b/e2e/tests/plugin-header.spec.ts
@@ -13,9 +13,7 @@ test.beforeEach(async ({ page }) => {
 
 test('Load header', async ({ page }) => {
   await expect(page.getByLabel('AppSelector').nth(1)).toBeVisible()
-  await expect(
-    page.getByRole('heading', { name: 'Data Modelling Example App' })
-  ).toBeVisible()
+  await expect(page.getByLabel('main-heading').nth(1)).toBeVisible()
   await expect(page.getByRole('button', { name: 'User' }).nth(1)).toBeVisible()
   await expect(page.getByRole('button', { name: 'About' }).nth(1)).toBeVisible()
 })

diff --git a/packages/dm-core-plugins/src/header/HeaderPlugin.tsx b/packages/dm-core-plugins/src/header/HeaderPlugin.tsx
@@ -27,12 +27,13 @@ const Icons = styled.div`
     margin-left: 40px;
   }
 `
-const Logo = styled.h2`
+const Logo = styled.span`
   paddinginline: 10;
   color: #007079;
   font-weight: 500;
   margin-right: 3rem;
   margin-left: 0.5rem;
+  font-size: 18px;
 `
 
 const ClickableIcon = styled.button`
@@ -129,11 +130,11 @@ export default (props: IUIPlugin): React.ReactElement => {
       >
         <TopBar.Header
           style={{
-            position: 'relative',
             display: 'flex',
+            alignContent: 'center',
           }}
         >
-          <Logo>{entity.label}</Logo>
+          <Logo aria-label="main-heading">{entity.label}</Logo>
           <AppSelector
             items={recipeNames}
             onSelectItem={(item) =>

diff --git a/packages/dm-core-plugins/src/header/components/AppSelector.tsx b/packages/dm-core-plugins/src/header/components/AppSelector.tsx
@@ -34,6 +34,7 @@ const AppSelectorButton = styled.button`
   marginleft: 60px;
   border: 0;
   appearance: none;
+  align-content: center;
   background-color: transparent;
   &:hover {
     color: gray;
@@ -55,9 +56,9 @@ export const AppSelector = ({
         onClick={() => setAppSelectorOpen(!appSelectorOpen)}
         aria-label="AppSelector"
       >
-        <h4>{currentItem}</h4>
+        <span className="text-xs font-bold self-center">{currentItem}</span>
         <Icon
-          style={{ marginTop: '13px' }}
+          className="mt-0.5"
           data={appSelectorOpen ? chevron_up : chevron_down}
         ></Icon>
       </AppSelectorButton>