refactor: remove tw HeaderPlugin

equinor · Jun 5, 2024 · 552eb72 · 552eb72
1 parent fa4c75a
commit 552eb72
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 67 deletions.
diff --git a/packages/dm-core-plugins/src/header/HeaderPlugin.tsx b/packages/dm-core-plugins/src/header/HeaderPlugin.tsx
@@ -15,6 +15,7 @@ import styled from 'styled-components'
 import { account_circle, info_circle, menu, refresh } from '@equinor/eds-icons'
 import { toast } from 'react-toastify'
 
+import { Stack } from '../common'
 import { AboutDialog } from './components/AboutDialog'
 import { AppSelector } from './components/AppSelector'
 import { UserInfoDialog } from './components/UserInfoDialog'
@@ -133,8 +134,8 @@ export default (props: IUIPlugin): React.ReactElement => {
       ? config.uiRecipesList
       : uiRecipes.map((recipe: TUiRecipe) => recipe.name)
   return (
-    <div className='flex-layout-container'>
-      <TopBar className='w-full shrink-0'>
+    <Stack fullWidth grow={1} minHeight={0}>
+      <TopBar style={{ width: '100%', flexShrink: 0 }}>
         <TopBar.Header>
           <Logo aria-label='main-heading'>{entity.label}</Logo>
           <AppSelector
@@ -214,14 +215,14 @@ export default (props: IUIPlugin): React.ReactElement => {
         setIsOpen={setVisibleUserInfo}
         applicationEntity={entity}
       />
-      <div className='flex-layout-container'>
+      <Stack fullWidth grow={1} minHeight={0}>
         <UIPlugin
           key={idReference + selectedRecipe.name}
           idReference={idReference}
           type={entity.type}
           config={selectedRecipe.config}
         />
-      </div>
-    </div>
+      </Stack>
+    </Stack>
   )
 }
diff --git a/packages/dm-core-plugins/src/header/components/AppSelector.tsx b/packages/dm-core-plugins/src/header/components/AppSelector.tsx
@@ -1,47 +1,13 @@
-import { Icon, Popover, Typography } from '@equinor/eds-core-react'
+import { Button, Icon, Menu } from '@equinor/eds-core-react'
 import { chevron_down, chevron_up } from '@equinor/eds-icons'
 import { useRef, useState } from 'react'
-import styled from 'styled-components'
-
-export const MenuButton = styled.button<{ $active: boolean }>`
-  appearance: none;
-  background-color: ${(props) =>
-    props.$active ? 'rgba(230,250,236,1)' : 'transparent'};
-  color: ${(props) => (props.$active ? 'rgba(0, 79, 85, 1)' : 'black')};
-  border: 0;
-  cursor: pointer;
-  min-width: 150px;
-  text-align: left;
-  padding: 1rem 3rem 1rem 3rem;
-  font-family: 'Equinor', sans-serif;
-
-  &:hover {
-    background-color: ${(props) =>
-      !props.$active ? 'rgba(220,220,220,255)' : 'rgba(230,250,236,1)'};
-    color: ${(props) =>
-      !props.$active ? 'rgba(61,61,61,255)' : 'rgba(0, 79, 85, 1)'};
-  }
-`
 
 interface AppSelectorProps {
   items: string[]
   currentItem: string
   onSelectItem: (item: string) => void
 }
 
-const AppSelectorButton = styled.button`
-  display: flex;
-  marginleft: 60px;
-  border: 0;
-  appearance: none;
-  align-content: center;
-  background-color: transparent;
-  &:hover {
-    color: gray;
-    cursor: pointer;
-  }
-`
-
 export const AppSelector = ({
   onSelectItem,
   currentItem,
@@ -52,39 +18,32 @@ export const AppSelector = ({
 
   return (
     <div ref={referenceElement}>
-      <AppSelectorButton
+      <Button
+        variant='ghost'
         onClick={() => setAppSelectorOpen(!appSelectorOpen)}
         aria-label='AppSelector'
       >
-        <span className='text-xs font-bold self-center'>{currentItem}</span>
-        <Icon
-          className='mt-0.5'
-          data={appSelectorOpen ? chevron_up : chevron_down}
-        ></Icon>
-      </AppSelectorButton>
-      <Popover
+        {currentItem}
+        <Icon data={appSelectorOpen ? chevron_up : chevron_down}></Icon>
+      </Button>
+      <Menu
         open={appSelectorOpen}
         anchorEl={referenceElement.current}
-        trapFocus
-        onClose={() => {
-          setAppSelectorOpen(false)
-        }}
+        onClose={() => setAppSelectorOpen(false)}
       >
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
-          {items.map((recipe: string, index: number) => (
-            <MenuButton
-              $active={currentItem === recipe}
-              key={index}
-              onClick={() => {
-                onSelectItem(recipe)
-                setAppSelectorOpen(false)
-              }}
-            >
-              <Typography>{recipe}</Typography>
-            </MenuButton>
-          ))}
-        </div>
-      </Popover>
+        {items.map((recipe: string, index: number) => (
+          <Menu.Item
+            key={index}
+            active={currentItem === recipe}
+            onClick={() => {
+              onSelectItem(recipe)
+              setAppSelectorOpen(false)
+            }}
+          >
+            {recipe}
+          </Menu.Item>
+        ))}
+      </Menu>
     </div>
   )
 }