diff --git a/packages/core/hooks/useOpenWithMenuItems/index.tsx b/packages/core/hooks/useOpenWithMenuItems/index.tsx index bc3d5c0b..1ccd82a8 100644 --- a/packages/core/hooks/useOpenWithMenuItems/index.tsx +++ b/packages/core/hooks/useOpenWithMenuItems/index.tsx @@ -1,4 +1,4 @@ -import { ContextualMenuItemType, IContextualMenuItem, Icon } from "@fluentui/react"; +import { ContextualMenuItemType, DefaultButton, Icon, IContextualMenuItem } from "@fluentui/react"; import { isEmpty } from "lodash"; import * as React from "react"; import { useDispatch, useSelector } from "react-redux"; @@ -54,9 +54,9 @@ const WEB_APPS = (fileDetails?: FileDetail): WebApps => ({ const DESKTOP_APPS = (fileDetails?: FileDetail): { agave: IContextualMenuItem } => ({ agave: { key: "agave", - className: styles.agaveLink, + className: styles.desktopMenuItem, text: "AGAVE", - title: `Open files with AGAVE`, + title: "Open files with AGAVE v1.7.2+", href: `agave://?url=${fileDetails?.path}`, disabled: !fileDetails?.path, target: "_blank", @@ -70,8 +70,13 @@ const DESKTOP_APPS = (fileDetails?: FileDetail): { agave: IContextualMenuItem } rel="noreferrer" target="_blank" > - | View info - + + Info + + ); diff --git a/packages/core/hooks/useOpenWithMenuItems/useOpenWithMenuItems.module.css b/packages/core/hooks/useOpenWithMenuItems/useOpenWithMenuItems.module.css index e2a98041..50d371b6 100644 --- a/packages/core/hooks/useOpenWithMenuItems/useOpenWithMenuItems.module.css +++ b/packages/core/hooks/useOpenWithMenuItems/useOpenWithMenuItems.module.css @@ -1,30 +1,39 @@ -.agave-link { - color: var(--secondary-text-color); +.desktop-menu-item .info-button { + background-color: var(--primary-background-color); + border-radius: var(--large-border-radius); + border: none; + color: var(--primary-text-color); + font-size: 12px; + height: 20px; + max-width: 50px; + min-width: 50px; + overflow: hidden; + padding: 0; + width: 50px; } -.agave-link:hover a > i, .agave-link:hover a > div > span { - color: var(--secondary-text-color) !important; +.desktop-menu-item .info-button { + transform: translateY(-2px); } -.agave-link:hover a > i, .agave-link a > div > span:hover { - color: var(--highlight-text-color) !important; +.desktop-menu-item .info-button { + font-size: 10px; } -.view-link { - align-items: center; - color: var(--secondary-text-color); - display: flex; - font-size: var(--xs-paragraph-size); - height: 34px; +.desktop-menu-item:hover > div, .desktop-menu-item:hover .info-button, .desktop-menu-item:hover .info-button i { + background-color: var(--highlight-background-color); + color: var(--highlight-text-color); +} + +.desktop-menu-item .info-button:hover, .desktop-menu-item .info-button:hover i { + background-color: var(--dark-aqua); } -.view-link > i { - color: var(--secondary-text-color) !important; - height: 34px; +.desktop-menu-item .info-button i { padding-left: 4px; - transform: translateY(-1px); } -.view-link:hover, .view-link:hover > i { - color: var(--highlight-text-color); +.desktop-menu-item a { + padding-left: 57.5px; + width: 25px; }