Update modal style

NASA-IMPACT · Oct 17, 2023 · d86ff7e · d86ff7e
1 parent 23a31e7
commit d86ff7e
Showing 1 changed file with 30 additions and 14 deletions.
diff --git a/app/scripts/components/exploration/components/dataset-selector-modal.tsx b/app/scripts/components/exploration/components/dataset-selector-modal.tsx
@@ -3,10 +3,16 @@ import styled, { css } from 'styled-components';
 import { useAtom } from 'jotai';
 
 import { DatasetData, DatasetLayer, datasetTaxonomies } from 'veda';
-import { Modal, ModalBody, ModalFooter } from '@devseed-ui/modal';
+import {
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalHeadline
+} from '@devseed-ui/modal';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
 import { Button } from '@devseed-ui/button';
-import { Subtitle } from '@devseed-ui/typography';
+import { Heading, Subtitle } from '@devseed-ui/typography';
 import {
   CollecticonTickSmall,
   CollecticonXmarkSmall,
@@ -51,11 +57,18 @@ const DatasetModal = styled(Modal)`
 
   /* Override ModalContents */
   > div {
-    height: calc(100vh - ${glsp(4)});
     display: flex;
     flex-flow: column;
   }
 
+  ${ModalHeader} {
+    position: sticky;
+    top: ${glsp(-2)};
+    z-index: 100;
+    box-shadow: 0 1px 0 0 ${themeVal('color.base-100a')};
+    margin-bottom: ${glsp(2)};
+  }
+
   ${ModalBody} {
     height: 100%;
     min-height: 0;
@@ -68,16 +81,18 @@ const DatasetModal = styled(Modal)`
     display: flex;
     gap: ${glsp(1)};
     align-items: center;
+    position: sticky;
+    bottom: ${glsp(-2)};
+    z-index: 100;
+    box-shadow: 0 -1px 0 0 ${themeVal('color.base-100a')};
 
     > .selection-info {
       margin-right: auto;
     }
   }
 `;
 
-const ModalIntro = styled.div`
-  margin-bottom: ${glsp(2)};
-`;
+const ModalIntro = styled.div``;
 
 const DatasetCount = styled(Subtitle)`
   display: flex;
@@ -93,13 +108,10 @@ const DatasetContainer = styled.div`
   height: 100%;
   min-height: 0;
   display: flex;
-  margin: ${glsp(0, -2)};
-  box-shadow: 0 -1px 0 0 ${themeVal('color.base-100a')},
-    inset 0 -1px 0 0 ${themeVal('color.base-100a')};
+  margin-bottom: ${glsp(2)};
 
   ${CardList} {
-    overflow-y: auto;
-    padding: ${glsp(2)};
+    width: 100%;
   }
 
   ${EmptyHub} {
@@ -236,15 +248,20 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
       revealed={revealed}
       closeButton={!isFirstSelection}
       onCloseClick={close}
-      content={
-        <>
+      renderHeadline={() => (
+        <ModalHeadline>
+          <Heading size='small'>Select datasets</Heading>
           <ModalIntro>
             {isFirstSelection ? (
               <p>Select datasets to start the exploration.</p>
             ) : (
               <p>Add or remove datasets to the exploration.</p>
             )}
           </ModalIntro>
+        </ModalHeadline>
+      )}
+      content={
+        <>
           <BrowseControls
             {...controlVars}
             taxonomiesOptions={datasetTaxonomies}
@@ -342,7 +359,6 @@ function DatasetLayerCard(props: DatasetLayerProps) {
           <CardSourcesList
             sources={getTaxonomy(parent, TAXONOMY_SOURCE)?.values}
           />
-          {/* <VerticalDivider variation='light' /> */}
         </CardMeta>
       }
       linkTo={getDatasetPath(parent)}