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;
}