diff --git a/packages/dm-core-plugins/src/header/HeaderPlugin.tsx b/packages/dm-core-plugins/src/header/HeaderPlugin.tsx index f8ba02d86..674e7a898 100644 --- a/packages/dm-core-plugins/src/header/HeaderPlugin.tsx +++ b/packages/dm-core-plugins/src/header/HeaderPlugin.tsx @@ -7,11 +7,11 @@ import { useDocument, useUiPlugins, } from '@development-framework/dm-core' -import { Button, Icon, Popover, TopBar } from '@equinor/eds-core-react' +import { Icon, Popover, TopBar } from '@equinor/eds-core-react' import React, { useEffect, useRef, useState } from 'react' import styled from 'styled-components' -import { account_circle, menu, info_circle } from '@equinor/eds-icons' +import { account_circle, info_circle, menu } from '@equinor/eds-icons' import { AboutDialog } from './components/AboutDialog' import { UserInfoDialog } from './components/UserInfoDialog' @@ -27,6 +27,23 @@ const Icons = styled.div` } ` +const MenuButton = styled.button<{ $active: boolean }>` + appearance: none; + padding: 1rem 1rem; + background-color: ${(props) => + props.$active ? 'rgba(222, 237, 238, 1)' : 'transparent'}; + color: ${(props) => (props.$active ? 'rgba(0, 79, 85, 1)' : 'black')}; + border: 0; + cursor: pointer; + text-align: left; + font-family: 'Equinor', sans-serif; + + &:hover { + background-color: rgba(222, 237, 238, 1); + color: rgba(0, 79, 85, 1); + } +` + const ClickableIcon = styled.button` appearance: none; border: none; @@ -145,32 +162,21 @@ export default (props: IUIPlugin): React.ReactElement => { trapFocus onClose={() => setAppSelectorOpen(false)} > - -
- {recipeNames.map((recipe: string, index: number) => ( - - ))} -
-
+
+ {recipeNames.map((recipe: string, index: number) => ( + { + setSelectedRecipe(getRecipeConfigAndPlugin(recipe)) + setSelectedRecipeName(recipe) + setAppSelectorOpen(false) + }} + > + {recipe} + + ))} +

{entity.label}