modals

modals is an object within the theme property for overriding modal styles.

<Vizzly.Dashboard
  // ...
  theme={{
    modals: {
      overlay: {
        background: "#000000",
        opacity: 0.3,
      },
      base: {
        background: "#ffffff",
      },
      content: {
        background: "rgb(229 231 235 / 0.2)",
      },
      header: {
        background: "rgb(229 231 235 / 0.2)",
      },
      footer: {
        background: "none",
      },
      options: {
        disableOutsideClick: false,
        closeButton: "outside",
        showTitle: {
          editor: false, // "Editor" title shown in the View Editor
          library: false, // "Select Template" title shown in View Library
        },
      },
    },
  }}
/>

A title

Some Content in here

Modals

Modals are featured within <Vizzly.Dashboard/> in the following loctions:

The Dashboard Save confirmation modal.
The Dashboard Filters modal.
The Dashboard Download modal.
The Dashboard Reset confirmation modal.
The View Library modal.
The View Editor modal.
The View Download modal.
The View Click Settings modal.
The View Add Local Filters modal.
The View Parameters modal.
The View JSON Results modal.
The View JSON Attributes modal.
The View Remove confirmation modal.

Default Values

import Vizzly, { type VizzlyTheming } from "@vizzly/dashboard"
 
export function Dashboard() {
  const theme: VizzlyTheming.Base = {
    modals: {
      // Default Values
      overlay: {
        background: "#000000",
        opacity: 0.3,
      },
      base: {
        color: "inherit",
        border: "0px solid",
        background: "#ffffff",
        boxShadow:
          "0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
        borderRadius: "8px",
        zIndex: 2147483147,
      },
      content: {
        background: "rgb(229 231 235 / 0.2)",
        fontWeight: "inherit",
        fontSize: "14px",
        padding: "1rem 2rem",
        alternativeBackground: "rgb(229 231 235 / 0.2)", // Shown in the View Library only
      },
      header: {
        background: "rgb(229 231 235 / 0.2)",
        padding: "1.5rem 2rem 0.5rem 2rem",
        borderBottom: "0",
        fontSize: 18,
        fontWeight: 700,
      },
      footer: {
        background: "none",
        borderTop: "0",
        padding: "0.5rem 2rem 0.5rem 2rem",
        borderRadius: "0",
      },
      options: {
        disableOutsideClick: false,
        closeButton: "outside",
        showTitle: {
          editor: false, // "Editor" title shown in the View Editor
          library: false, // "Select Template" title shown in the View Library
        },
      },
    },
  }
 
  return (
    <Vizzly.Dashboard
      // ...
      theme={theme}
    />
  )
}