Update/search results layouts details component

packages/openneuro-app/src/scripts/components/accordion/accordion.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 /* Accordion styles */
 
 .on-accordion-wrapper {

packages/openneuro-app/src/scripts/components/activity-slider/ActivitySlider.tsx

@@ -6,6 +6,7 @@
 import type { ArrowProps, ResponsiveType } from "react-multi-carousel/lib/types"
 import "react-multi-carousel/lib/styles.css"
 import "./slider.scss"
+import { ModalityHexagon } from "../../components/modality-cube/ModalityHexagon"
 
 export interface ActivitySliderProps {
   className?: string
@@ -62,28 +63,9 @@
         {data.map(({ node }) => (
           <div className="activity-slider-node" key={node.id}>
             <div className="ds-modality">
-              <div className="hexagon-wrapper">
-                {node.latestSnapshot.summary?.primaryModality
-                  ? (
-                    <>
-                      <div
-                        className={"hexagon " +
-                          node.latestSnapshot.summary?.primaryModality
-                            .toLowerCase()}
-                      >
-                      </div>
-                      <div className="label">
-                        {node.latestSnapshot.summary?.primaryModality}
-                      </div>
-                    </>
-                  )
-                  : (
-                    <>
-                      <div className="hexagon no-modality"></div>
-                      <div className="label">N/A</div>
-                    </>
-                  )}
-              </div>
+              <ModalityHexagon
+                primaryModality={node.latestSnapshot.summary?.primaryModality}
+              />
             </div>
             <div className="ds-name">
               <h4>

packages/openneuro-app/src/scripts/components/activity-slider/slider.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 
 .activity-slider {
   h3 {
@@ -32,87 +32,6 @@
       margin: 10px 0 0;
     }
   }
-  .activity-slider-node {
-    .hexagon-wrapper {
-      text-align: center;
-      margin: 20px auto 0;
-      position: relative;
-      display: inline-block;
-      width: 45px;
-      height: 45px;
-      div.label {
-        position: absolute;
-        top: 0;
-        text-align: center;
-        width: 100%;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: #fff;
-        font-weight: 600;
-        font-size: 13px;
-      }
-    }
-
-    .hexagon {
-      height: 100%;
-      width: calc(100% * 0.57735);
-      display: inline-block;
-    }
-
-    .hexagon:before {
-      position: absolute;
-      top: 0;
-      right: calc((100% / 2) - ((100% * 0.57735) / 2));
-      background-color: inherit;
-      height: inherit;
-      width: inherit;
-      content: '';
-      transform: rotateZ(60deg);
-    }
-
-    .hexagon:after {
-      position: absolute;
-      top: 0;
-      right: calc((100% / 2) - ((100% * 0.57735) / 2));
-      background-color: inherit;
-      height: inherit;
-      width: inherit;
-      content: '';
-      transform: rotateZ(-60deg);
-    }
-    .hexagon {
-      transition: background-color 0.3s;
-      background-color: $on-dark-aqua;
-
-      &.mri {
-        background-color: $mri-theme;
-      }
-      &.eeg {
-        background-color: $eeg-theme;
-      }
-
-      &.pet {
-        background-color: $pet-theme;
-      }
-      &.ieeg {
-        background-color: $ieeg-theme;
-      }
-
-      &.meg {
-        background-color: $meg-theme;
-      }
-      &.eeg {
-        background-color: $on-light-green;
-      }
-      &.nirs{
-        background-color: $nirs-theme;
-      }
-    }
-  }
 }
 .react-multi-carousel-dot--active button {
   background-color: var(--current-theme-primary);

packages/openneuro-app/src/scripts/components/button/button.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 
 .on-button {
   font-family: $font-sans;

packages/openneuro-app/src/scripts/components/count-toggle/count-toggle.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 
 .toggle-btn {
   border: 1px solid #aaa;

packages/openneuro-app/src/scripts/components/dropdown/dropdown.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 
 .dropdown-wrapper {
   display: inline-block;

packages/openneuro-app/src/scripts/components/facets/facet.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 
 .facet-accordion.on-accordion-wrapper {
   padding: 0 15px;
@@ -45,7 +45,7 @@
     .level-1 > li {
       border-top: 1px solid #dfdfdf;
       > span:hover {
-        background-color: var(--current-theme-primary-light);
+        background-color: var(--current-theme-primary-ultralight);
       }
 
       > .label {
@@ -60,7 +60,7 @@
         display: flex;
         justify-content: flex-start;
         &:hover {
-          background-color: var(--current-theme-primary-light);
+          background-color: var(--current-theme-primary-ultralight);
         }
 
         .label {
@@ -165,7 +165,8 @@
 .search-nav .facet-open.modality-facet {
   margin: 20px 0;
   border: 0;
-  background: #e5f4f7;
+  background: var(--current-theme-primary-ultralight);
+  border: 1px solid var(--current-theme-primary-light);
   border-radius: $border-radius-default;
   padding: 10px;
 

packages/openneuro-app/src/scripts/components/footer/footer.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 
 footer {
   background: $charcoal;

packages/openneuro-app/src/scripts/components/front-page/front-page.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 
 body {
   font-family: $font-sans;

packages/openneuro-app/src/scripts/components/header/header.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 header {
   position: relative;
 }

packages/openneuro-app/src/scripts/components/input/input.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 
 form,
 fieldset {

packages/openneuro-app/src/scripts/components/input/term-search.scss

@@ -1,4 +1,4 @@
-@import "../scss/variables";
+@import "../../scss/variables";
 
 .term-input {
   display: flex;

packages/openneuro-app/src/scripts/components/loading/loading.scss

@@ -18,7 +18,7 @@ $spinner-hexagon-bg-color: var(--current-theme-primary);
   width: $spinner-width;
   height: $spinner-height;
   border-radius: 0;
-  background: var(--current-theme-primary-light);
+  background: var(--current-theme-primary-ultralight);
   opacity: 1;
   top: $spinner-base-value;
 }

packages/openneuro-app/src/scripts/components/modal/modal.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 
 .modal-wrapper {
   position: fixed;

packages/openneuro-app/src/scripts/components/modality-cube/ModalityHexagon.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+import type { FC } from "react"
+
+import "./modality-hexagon.scss"
+interface ModalityHexagonProps {
+  primaryModality: string | null | undefined
+}
+
+//ModalityHexagon component displays a colored hexagon and label
+// based on the provided primaryModality.
+
+export const ModalityHexagon: FC<ModalityHexagonProps> = ({
+  primaryModality,
+}) => {
+  const hexagonClass = primaryModality
+    ? primaryModality.toLowerCase()
+    : "no-modality"
+
+  const labelText = primaryModality?.toLowerCase() === "ieeg"
+    ? "iEEG"
+    : primaryModality?.toUpperCase() || (
+      <i className="fa fa-circle-o-notch fa-spin"></i>
+    )
+
+  return (
+    <div className="hexagon-wrapper">
+      <div className={`hexagon ${hexagonClass}`}></div>
+      <div className="label">{labelText}</div>
+    </div>
+  )
+}

packages/openneuro-app/src/scripts/components/modality-cube/modality-cube.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 // Variables for hexagonal grid and cube sizes
 $hex-width: 240px;
 $hex-height: 450px; // Height for the hex grid

packages/openneuro-app/src/scripts/components/modality-cube/modality-hexagon.scss

@@ -0,0 +1,93 @@
+@import '../../scss/variables';
+
+.hexagon-wrapper {
+  text-align: center;
+  position: relative;
+  display: inline-block;
+  width: 45px;
+  height: 45px;
+
+  div.label {
+    position: absolute;
+    top: 0;
+    text-align: center;
+    width: 100%;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 600;
+    font-size: 13px;
+    color: #fff; // Default label color
+  }
+
+  .hexagon {
+    height: 100%;
+    width: calc(100% * 0.57735);
+    display: inline-block;
+    transition: background-color 0.3s;
+    background-color: $on-dark-aqua; // Default hexagon background
+
+    &:before,
+    &:after {
+      position: absolute;
+      top: 0;
+      right: calc((100% / 2) - ((100% * 0.57735) / 2));
+      background-color: inherit;
+      height: inherit;
+      width: inherit;
+      content: '';
+    }
+
+    &:before {
+      transform: rotateZ(60deg);
+    }
+
+    &:after {
+      transform: rotateZ(-60deg);
+    }
+
+    &.mri { background-color: $mri-theme; }
+    &.eeg { background-color: $on-light-green; } // EEG uses on-light-green
+    &.pet { background-color: $pet-theme; }
+    &.ieeg { background-color: $ieeg-theme; }
+    &.meg { background-color: $meg-theme; }
+    &.nirs { background-color: $nirs-theme; }
+  }
+}
+
+a {
+  .hexagon-wrapper {
+    margin: 20px auto; 
+
+    div.label {
+      color: unset; 
+    }
+
+    .hexagon {
+      transition: color 0.3s; 
+      background-color: #fff; 
+
+      // Modality specific colors (when inside 'a')
+      &.mri { background-color: #fff; color: $mri-theme; }
+      &.eeg { background-color: #fff; color: $eeg-theme; }
+      &.pet { background-color: #fff; color: $pet-theme; }
+      &.ieeg { background-color: #fff; color: $ieeg-theme; }
+      &.meg { background-color: #fff; color: $meg-theme; }
+      &.nirs { background-color: #fff; color: $nirs-theme; } 
+    }
+
+    &:hover {
+      .hexagon {
+        color: lighten($on-dark-aqua, 15%); 
+        &.mri { color: lighten($mri-theme, 10%); }
+        &.eeg { color: lighten($eeg-theme, 10%); }
+        &.pet { color: lighten($pet-theme, 10%); }
+        &.ieeg { color: lighten($ieeg-theme, 10%); }
+        &.meg { color: lighten($meg-theme, 10%); }
+      }
+    }
+  }
+}

packages/openneuro-app/src/scripts/components/page/page.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 @import '../scss//normalize';
 @import '../scss//helper-classes';
 @import '../scss//flex-grid';

packages/openneuro-app/src/scripts/components/progress-bar/progress-bar.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 // Outer container
 .progress {
   overflow: hidden;

packages/openneuro-app/src/scripts/components/radio/radio.scss

@@ -1,4 +1,4 @@
-@import '../scss/variables';
+@import '../../scss/variables';
 .custom-radio {
   margin: 10px 0 20px;
   [type='radio']:checked,
@@ -319,7 +319,7 @@
       }
     }
     [type='radio']:not(:checked) + label:hover {
-      background-color: var(--current-theme-primary-light);
+      background-color: var(--current-theme-primary-ultralight);
     }
     [type='radio']:checked + label {
       color: #fff;