Merge pull request #3495 from OpenNeuroOrg/update/search-results-layouts-details-component

Update/search results layouts details component

Author: nellh

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 Carousel from "react-multi-carousel/lib/Carousel"
 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 @@ export const ActivitySlider = ({
         {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;
 }