Merge pull request #297 from AllenInstitute/feature/update-view-info-…

…style Update view info button style
AllenInstitute · Oct 24, 2024 · 9ba1373 · 9ba1373
2 parents 1ec63c0 + c190856
commit 9ba1373
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 23 deletions.
diff --git 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
-                        <Icon iconName="Link" />
+                        <DefaultButton
+                            className={styles.infoButton}
+                            title="Get info or download to enable use"
+                        >
+                            Info
+                            <Icon iconName="OpenInNewWindow" />
+                        </DefaultButton>
                     </a>
                 </>
             );

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