Updated panel helper styling

Author: davenquinn

pages/columns/@column/column-inspector/index.module.sass

@@ -33,10 +33,24 @@
   & > *
     border-radius: 4px
 
+  h3
+    color: var(--secondary-color)
+
+.column-settings-panel
   :global
-    .bp5-label
-      flex-grow: 1
+    .bp5-form-group, .bp5-control-group
+      .bp5-label
+        color: var(--text-color)
+        flex-grow: 1
+
+.facet-control
+  :global(.bp5-html-select).unset select
+    color: var(--secondary-color)
+    font-style: italic
 
+  :global(.bp5-label) .facet-label :global(.bp5-popover-target)
+    margin-left: 0.2em
+    display: inline
 
 .range-control
   :global
@@ -76,8 +90,7 @@
   top: 2.2em
 
   h3
-    color: #444
-    margin-bottom: 0.3em
+    color: var(--secondary-color)
 
 .default-buttons
   width: 100%

pages/columns/@column/column-inspector/index.ts

@@ -21,14 +21,15 @@ import { navigate } from "vike/client/router";
 import { SGPMeasurementsColumn, StableIsotopesColumn } from "./facets";
 import { ModalUnitPanel } from "./modal-panel";
 
-import { PageBreadcrumbs } from "~/components";
+import { AlphaTag, BetaTag, PageBreadcrumbs } from "~/components";
 import { onDemand } from "~/_utils";
-import { ErrorBoundary } from "@macrostrat/ui-components";
+import { CollapsePanel, ErrorBoundary } from "@macrostrat/ui-components";
 import { DataField, Parenthetical } from "@macrostrat/data-components";
 import { ColumnAxisType } from "@macrostrat/column-components";
 import { atom, useAtom, useAtomValue, useSetAtom, WritableAtom } from "jotai";
 import {
   Button,
+  Collapse,
   ControlGroup,
   FormGroup,
   HTMLSelect,
@@ -78,15 +79,15 @@ function validateAxis(value: string | null): ColumnAxisType | undefined {
 }
 
 const facets = [
-  { label: "None", value: null },
+  { label: "None", value: "none" },
   { label: "Carbon/oxygen isotopes", value: "stable-isotopes" },
   { label: "SGP", value: "sgp-samples" },
   { label: "Fossils (taxa)", value: "fossil-taxa" },
   { label: "Fossils (collections)", value: "fossil-collections" },
   { label: "Detrital zircons", value: "detrital-zircons" },
 ];
 
-const validFacets = facets.map((d) => d.value).filter((d) => d != null);
+const validFacets = facets.map((d) => d.value).filter((d) => d != "none");
 
 function getStateFromHash(): ColumnHashState {
   const hash = document.location.hash.substring(1);
@@ -483,6 +484,7 @@ function ColumnSettingsPanel() {
   }
 
   return h("div.column-settings-panel", [
+    h("h3", "Settings"),
     h(AxisTypeControl),
     h(FacetControl),
     h(RangeControl, {
@@ -613,6 +615,7 @@ function AxisTypeControl() {
     return { label: k, value: v };
   });
   const axisType = useAtomValue(inferredAxisTypeAtom);
+  const defaultAxisType = useAtomValue(defaultAxisTypeAtom);
   const setAxisType = useSetAtom(axisTypeAtom);
   return h(
     FormGroup,
@@ -627,7 +630,11 @@ function AxisTypeControl() {
           setAxisType(value);
         },
       }),
-      h(ClearButton, { value: axisType, setValue: setAxisType }),
+      h(ClearButton, {
+        value: axisType,
+        setValue: setAxisType,
+        disabled: axisType === defaultAxisType,
+      }),
     ])
   );
 }
@@ -637,15 +644,15 @@ function FacetControl() {
   return h("div.facet-control", [
     h(
       FormGroup,
-      { label: "Facet", inline: true },
+      { label: h("span.facet-label", ["Facet ", h(AlphaTag, {content: "This feature is in early development"})]), inline: true },
       h(ControlGroup, { fill: true }, [
         h(HTMLSelect, {
           options: facets,
-          value: facet,
-          intent: facet == null ? "none" : "primary",
+          value: facet ?? "none",
+          className: facet == null ? "unset" : null,
           onChange: (evt) => {
             const value = evt.target.value;
-            setFacet(value);
+            setFacet(value === "none" ? null : value);
           },
         }),
         h(ClearButton, { value: facet, setValue: setFacet }),

pages/maps/main.module.sass

@@ -35,10 +35,6 @@
   display: inline-block
   font-size: 0.8em
 
-h1,
-h3
-  margin: 0
-
 .maps-list
   padding: 0
   display: flex
@@ -189,4 +185,4 @@ h3
 
 .top-row
   display: flex
-  gap: .5em
+  gap: .5em

src/components/general/index.ts

@@ -172,25 +172,43 @@ export function IDTag({ id }) {
   return h("div.id-tag", "ID: #" + id);
 }
 
-export function BetaTag({ content = "This page is in beta and may be incomplete."} ) {
+export function BetaTag({
+  content = "This page is in beta and may be incomplete.",
+}) {
+  let _content = content;
+  if (typeof content === "string") {
+    _content = h("div.tag-content", content);
+  }
+
   return h(
     Popover,
     {
-      content: h("div.tag-content", content),
-      interactionKind: "hover"
+      content: _content,
+      interactionKind: "hover",
+      inline: true,
     },
-    [h(Tag, { intent: "warning" }, "Beta")]
+    h(Tag, { intent: "warning" }, "Beta")
   );
 }
 
-export function AlphaTag({ content = "This page is in alpha and highly experimental." }) {
+export function AlphaTag({
+  content = "This page is in alpha and highly experimental.",
+}: {
+  content?: React.ReactNode;
+}) {
+  let _content = content;
+  if (typeof content === "string") {
+    _content = h("div.tag-content", content);
+  }
+
   return h(
     Popover,
     {
-      content: h("div.tag-content", content),
-      interactionKind: "hover"
+      content: _content,
+      interactionKind: "hover",
+      minimal: true,
     },
-    [h(Tag, { intent: "danger" }, "Alpha")]
+    h(Tag, { intent: "danger" }, "Alpha")
   );
 }
 

src/components/general/layout.module.sass

@@ -189,6 +189,7 @@ a.macrostrat-logo-link
     font-weight: 400
     font-family: "Maven Pro", sans-serif
     margin: 0
+
   *
     font-family: "Publico Text", serif
 
@@ -205,4 +206,8 @@ a.macrostrat-logo-link
   height: 16px
 
 .tag-content
-  padding: .5em
+  padding: .25em
+  font-size: 0.9em
+  font-style: italic
+  color: var(--secondary-color)
+  background-color: var(--secondary-background)