Adjusted demo pane styles

Author: forman

examples/serve/panels-demo/demo_panels/panel_demo.py

@@ -8,7 +8,7 @@
 from xcube.server.api import Context
 from xcube.webapi.viewer.contrib import Panel, get_datasets_ctx
 
-panel = Panel(__name__, title="Demo Panel", position=5)
+panel = Panel(__name__, title="Demo Panel", position=6)
 
 
 COLORS = [(0, "red"), (1, "green"), (2, "blue"), (3, "yellow")]
@@ -56,7 +56,8 @@ def render_panel(
             "This panel just demonstrates how server-side extensions work. "
             "It has no useful functionality.",
         ],
-        variant="body2",
+        variant="caption",
+        color="textSecondary",
     )
 
     return Box(

examples/serve/panels-demo/demo_panels/panel_histo2d.py

@@ -28,7 +28,7 @@
 from xcube.webapi.viewer.contrib import Panel, get_dataset
 from xcube.webapi.viewer.contrib.helpers import get_place_label
 
-panel = Panel(__name__, title="2D Histogram (Demo)", icon="equalizer", position=3)
+panel = Panel(__name__, title="2D Histogram (Demo)", icon="equalizer", position=4)
 
 
 # Number of bins in x and y directions.
@@ -108,16 +108,19 @@ def render_panel(
         children=[""],
     )
 
-    instructions_text = Markdown(
-        text="Create or select a region shape in the map, then select two "
-        "variables from the dropdowns, and press **Update** to create "
-        "a 2D histogram plot.",
-    )
-
     instructions = Typography(
         id="instructions",
-        children=[instructions_text],
-        variant="body2",
+        children=[
+            Markdown(
+                text=(
+                    "Create or select a region shape in the map, then select "
+                    "two variables from the dropdowns, and press **Update** "
+                    "to create a 2D histogram plot."
+                ),
+            )
+        ],
+        variant="caption",
+        color="textSecondary",
     )
 
     return Box(

examples/serve/panels-demo/demo_panels/panel_spectrum.py

@@ -26,7 +26,7 @@
 from xcube.core.extract import get_cube_values_for_points
 from xcube.core.gridmapping import GridMapping
 
-panel = Panel(__name__, title="Spectrum View (Demo)", icon="light", position=4)
+panel = Panel(__name__, title="Spectrum View (Demo)", icon="sunny", position=5)
 
 _THROTTLE_TOTAL_SPECTRUM_PLOTS = 10
 
@@ -68,8 +68,11 @@ def render_panel(
             "display": "flex",
             "flexDirection": "row",
         },
-        tooltip="Add: Current spectrum is added and new point selections will be "
-        "added as new spectra. 'Update': Clear the chart but the current selection if any. ",
+        tooltip=(
+            "Add: Current spectrum is added and new point selections will be "
+            "added as new spectra. Update: Clear the chart but the current "
+            "selection if any. "
+        ),
     )
 
     control_bar = Box(
@@ -91,26 +94,24 @@ def render_panel(
     instructions = Typography(
         id="instructions",
         children=[
-            "Choose an exploration mode and select points to visualize their spectral "
-            "reflectance across available wavelengths in this highly dynamic Spectrum View.",
+            "Choose an exploration mode and select points to visualize "
+            "their spectral reflectance across available wavelengths in "
+            "this highly dynamic Spectrum View.",
+            Markdown(
+                text=(
+                    "_Note: Only 10 spectra can be added at a time as older "
+                    "ones are removed. When switching from **Add** to **Update** "
+                    "mode, the existing bar plots will be cleared if any._"
+                )
+            ),
         ],
-        variant="body2",
-    )
-    note_text = Markdown(
-        text="**NOTE**: Only 10 spectrum plots can be added at a time as older "
-        "ones are removed. When switching from **Add** to **Update** "
-        "mode, the existing bar plots will be cleared if any."
-    )
-    note = Typography(
-        id="note",
-        children=[note_text],
-        variant="body2",
+        variant="caption",
+        color="textSecondary",
     )
 
     return Box(
         children=[
             instructions,
-            note,
             control_bar,
             error_message,
             plot,