feat: Update buttons on Niivue Display

FNNDSC · Feb 20, 2025 · e2f3c85 · e2f3c85
1 parent a278a0c
commit e2f3c85
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/src/components/Preview/displays/NiiVueDisplay.module.css b/src/components/Preview/displays/NiiVueDisplay.module.css
@@ -5,6 +5,7 @@
 
 .controlBar {
   position: absolute;
-  top: 0;
+  top: 1.5em;
+  right: 1.5em;
   height: 8px;
 }
diff --git a/src/components/Preview/displays/NiiVueDisplay.tsx b/src/components/Preview/displays/NiiVueDisplay.tsx
@@ -1,4 +1,5 @@
 import { SLICE_TYPE } from "@niivue/niivue";
+import { Button } from "@patternfly/react-core";
 import {
   FreeSurferColorLUT,
   type NVROptions,
@@ -74,15 +75,18 @@ const NiiVueDisplay: React.FC<NiiVueDisplayProps> = ({ selectedFile }) => {
       ) : (
         <div className={styles.container}>
           <div className={styles.controlBar}>
-            <button
-              type="button"
+            <Button
+              style={{
+                marginRight: "0.5em",
+              }}
+              variant="secondary"
               onClick={() => setFreesurferLut(!freesurferLut)}
             >
               {freesurferLut ? "FreeSurfer" : "gray"}
-            </button>
-            <button type="button" onClick={rotateSliceType}>
+            </Button>
+            <Button variant="secondary" onClick={rotateSliceType}>
               {sliceTypeName}
-            </button>
+            </Button>
             {freesurferLut && <span>{crosshairText}</span>}
           </div>
           <SizedNiivueCanvas