From fc6f402d5245a500f1715883ca54088648263b16 Mon Sep 17 00:00:00 2001 From: David Crespo Date: Tue, 5 Mar 2024 15:32:20 -0600 Subject: [PATCH 1/4] put text-accent back on sidebar link, fix button styling --- app/components/Sidebar.tsx | 2 +- app/ui/lib/Button.tsx | 2 -- app/ui/{lib => styles/components}/button.css | 0 app/ui/styles/index.css | 9 +++++---- 4 files changed, 6 insertions(+), 7 deletions(-) rename app/ui/{lib => styles/components}/button.css (100%) diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx index 72c758066d..e4b383282b 100644 --- a/app/components/Sidebar.tsx +++ b/app/components/Sidebar.tsx @@ -94,7 +94,7 @@ export const NavLinkItem = (props: { to={props.to} className={({ isActive }) => cn(linkStyles, { - '!bg-accent-secondary hover:!bg-accent-secondary-hover svg:!text-accent-tertiary': + 'text-accent !bg-accent-secondary hover:!bg-accent-secondary-hover svg:!text-accent-tertiary': isActive, 'pointer-events-none text-disabled': props.disabled, }) diff --git a/app/ui/lib/Button.tsx b/app/ui/lib/Button.tsx index be66496273..6c7c627e4c 100644 --- a/app/ui/lib/Button.tsx +++ b/app/ui/lib/Button.tsx @@ -12,8 +12,6 @@ import { Spinner } from '~/ui/lib/Spinner' import { Tooltip } from '~/ui/lib/Tooltip' import { Wrap } from '~/ui/util/wrap' -import './button.css' - export const buttonSizes = ['sm', 'icon', 'base'] as const export const variants = ['primary', 'secondary', 'ghost', 'danger'] as const diff --git a/app/ui/lib/button.css b/app/ui/styles/components/button.css similarity index 100% rename from app/ui/lib/button.css rename to app/ui/styles/components/button.css diff --git a/app/ui/styles/index.css b/app/ui/styles/index.css index 57c20eebcf..91a51af141 100644 --- a/app/ui/styles/index.css +++ b/app/ui/styles/index.css @@ -6,7 +6,12 @@ * Copyright Oxide Computer Company */ +@import 'tailwindcss/base'; +@import 'tailwindcss/components'; +@import 'tailwindcss/utilities'; + @import './fonts.css'; +@import './components/button.css'; @import './components/dialog.css'; @import './components/menu-button.css'; @import './components/menu-list.css'; @@ -17,10 +22,6 @@ @import 'xterm/css/xterm.css'; -@tailwind base; -@tailwind components; -@tailwind utilities; - :root { --content-gutter: 2.5rem; } From e95c4b708ddaeaff49d382c7d0f06fa1826ba9ee Mon Sep 17 00:00:00 2001 From: David Crespo Date: Tue, 5 Mar 2024 18:07:14 -0600 Subject: [PATCH 2/4] fix dialog styles, get rid of dialog.css --- app/ui/lib/ActionMenu.tsx | 8 ++++++-- .../dialog.css => lib/DialogOverlay.tsx} | 18 +++--------------- app/ui/lib/Modal.tsx | 8 +++++--- app/ui/lib/SideModal.tsx | 8 ++++++-- app/ui/styles/index.css | 1 - 5 files changed, 20 insertions(+), 23 deletions(-) rename app/ui/{styles/components/dialog.css => lib/DialogOverlay.tsx} (50%) diff --git a/app/ui/lib/ActionMenu.tsx b/app/ui/lib/ActionMenu.tsx index 68b496047f..59cc6c74d4 100644 --- a/app/ui/lib/ActionMenu.tsx +++ b/app/ui/lib/ActionMenu.tsx @@ -16,6 +16,7 @@ import { KEYS } from '~/ui/util/keys' import { groupBy } from '~/util/array' import { classed } from '~/util/classed' +import { DialogOverlay } from './DialogOverlay' import { useSteppedScroll } from './use-stepped-scroll' export interface QuickActionItem { @@ -90,8 +91,11 @@ export function ActionMenu(props: ActionMenuProps) { }} > - - + + {/* TODO: it was getting z-20 from .DialogContent before. this should + probably go in the z-* things in the tw config. also: Modal and SideModal put + pointer-events-auto on their modals, but this one works fine (click overlay to dismiss works) without it */} +
{ const lastIdx = itemsInOrder.length - 1 diff --git a/app/ui/styles/components/dialog.css b/app/ui/lib/DialogOverlay.tsx similarity index 50% rename from app/ui/styles/components/dialog.css rename to app/ui/lib/DialogOverlay.tsx index a789429772..f03004e27e 100644 --- a/app/ui/styles/components/dialog.css +++ b/app/ui/lib/DialogOverlay.tsx @@ -2,21 +2,9 @@ * This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, you can obtain one at https://mozilla.org/MPL/2.0/. - * + * * Copyright Oxide Computer Company */ +import { classed } from '~/util/classed' -.DialogOverlay { - /* background: hsla(0, 0%, 0%, 0.33); */ - @apply fixed inset-0 z-10 overflow-auto bg-scrim; -} - -.DialogContent { - @apply z-20; - - width: 50vw; - margin: 10vh auto; - background: white; - padding: 2rem; - outline: none; -} +export const DialogOverlay = classed.div`fixed inset-0 z-10 overflow-auto bg-scrim` diff --git a/app/ui/lib/Modal.tsx b/app/ui/lib/Modal.tsx index e1d600c64b..50c1e011f2 100644 --- a/app/ui/lib/Modal.tsx +++ b/app/ui/lib/Modal.tsx @@ -14,6 +14,7 @@ import { Close12Icon } from '@oxide/design-system/icons/react' import { classed } from '~/util/classed' import { Button } from './Button' +import { DialogOverlay } from './DialogOverlay' const ModalContext = createContext(false) @@ -56,13 +57,14 @@ export function Modal({ children, onDismiss, title, isOpen }: ModalProps) { modal={false} > -
`translate3d(-50%, ${-50 + value}%, 0px)`), diff --git a/app/ui/lib/SideModal.tsx b/app/ui/lib/SideModal.tsx index 9b86de01f6..ce45250617 100644 --- a/app/ui/lib/SideModal.tsx +++ b/app/ui/lib/SideModal.tsx @@ -19,6 +19,8 @@ import { classed } from '~/util/classed' import './side-modal.css' +import { DialogOverlay } from './DialogOverlay' + const SideModalContext = createContext(false) export const useIsInSideModal = () => useContext(SideModalContext) @@ -82,9 +84,11 @@ export function SideModal({ modal={false} > -
Date: Tue, 5 Mar 2024 20:59:57 -0600 Subject: [PATCH 3/4] move all remaining css imports into css. render unto css what is css's --- .eslintrc.cjs | 84 +++++++++++++++++++ .eslintrc.json | 75 ----------------- app/components/form/Form.tsx | 2 - app/main.tsx | 3 +- app/pages/LoginPage.tsx | 5 +- app/pages/LoginPageSaml.tsx | 2 - app/ui/lib/MiniTable.tsx | 2 - app/ui/lib/PropertiesTable.tsx | 2 - app/ui/lib/SideModal.tsx | 2 - app/ui/lib/Spinner.tsx | 2 - app/ui/lib/Table.tsx | 4 - app/ui/lib/Tabs.tsx | 2 - app/ui/lib/Tooltip.tsx | 2 - app/ui/{lib => styles/components}/Tabs.css | 0 .../form => ui/styles/components}/form.css | 0 app/{ => ui/styles}/components/login-page.css | 0 .../{lib => styles/components}/mini-table.css | 0 .../components}/properties-table.css | 0 .../{lib => styles/components}/side-modal.css | 0 app/ui/{lib => styles/components}/spinner.css | 0 app/ui/{lib => styles/components}/table.css | 0 app/ui/{lib => styles/components}/tooltip.css | 0 app/ui/styles/index.css | 23 ++++- 23 files changed, 109 insertions(+), 101 deletions(-) create mode 100644 .eslintrc.cjs delete mode 100644 .eslintrc.json rename app/ui/{lib => styles/components}/Tabs.css (100%) rename app/{components/form => ui/styles/components}/form.css (100%) rename app/{ => ui/styles}/components/login-page.css (100%) rename app/ui/{lib => styles/components}/mini-table.css (100%) rename app/ui/{lib => styles/components}/properties-table.css (100%) rename app/ui/{lib => styles/components}/side-modal.css (100%) rename app/ui/{lib => styles/components}/spinner.css (100%) rename app/ui/{lib => styles/components}/table.css (100%) rename app/ui/{lib => styles/components}/tooltip.css (100%) diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000000..ecd9063c4e --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,84 @@ +/** + * @type {import("eslint").Linter.Config} + */ +module.exports = { + root: true, + parser: '@typescript-eslint/parser', + parserOptions: { + warnOnUnsupportedTypeScriptVersion: false, + }, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/strict', + 'plugin:@typescript-eslint/stylistic', + 'plugin:jsx-a11y/recommended', + 'plugin:react/recommended', + 'prettier', + 'plugin:react-hook-form/recommended', + ], + plugins: ['@typescript-eslint', 'react-hooks', 'prettier', 'jsx-a11y', 'react-hook-form'], + settings: { + react: { + version: 'detect', + }, + }, + env: { + node: true, + }, + rules: { + '@typescript-eslint/array-type': 'off', + '@typescript-eslint/consistent-type-definitions': 'off', + '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }], + '@typescript-eslint/no-empty-function': 'off', + '@typescript-eslint/no-empty-interface': 'off', + '@typescript-eslint/ban-ts-comment': 'off', + '@typescript-eslint/no-non-null-assertion': 'off', + '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }], + eqeqeq: ['error', 'always', { null: 'ignore' }], + 'jsx-a11y/label-has-associated-control': [2, { controlComponents: ['button'] }], + 'no-param-reassign': 'error', + 'no-restricted-imports': [ + 'error', + { + paths: [ + '.', // preventing confusion due to auto-imports and barrel files + ], + patterns: [ + // import all CSS except index.css at top level through CSS @import statements + // to avoid bad ordering situations. See https://github.com/oxidecomputer/console/pull/2035 + '*.css', + ], + }, + ], + 'no-return-assign': 'error', + 'no-unused-vars': 'off', + 'prefer-arrow-callback': 'off', + 'prettier/prettier': 'error', + radix: 'error', + 'react-hooks/exhaustive-deps': 'error', + 'react-hooks/rules-of-hooks': 'error', + 'react/jsx-boolean-value': 'error', + 'react/display-name': 'off', + 'react/react-in-jsx-scope': 'off', + 'react/prop-types': 'off', + }, + ignorePatterns: ['dist/'], + overrides: [ + { + files: ['*.js'], + rules: { + '@typescript-eslint/no-var-requires': 'off', + }, + }, + { + files: ['*.e2e.ts'], + extends: ['plugin:playwright/playwright-test'], + rules: { + 'playwright/expect-expect': [ + 'warn', + { assertFunctionNames: ['expectVisible', 'expectRowVisible'] }, + ], + }, + }, + ], +} diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index a833779c95..0000000000 --- a/.eslintrc.json +++ /dev/null @@ -1,75 +0,0 @@ -{ - "root": true, - "parser": "@typescript-eslint/parser", - "parserOptions": { - "warnOnUnsupportedTypeScriptVersion": false - }, - "extends": [ - "eslint:recommended", - "plugin:@typescript-eslint/strict", - "plugin:@typescript-eslint/stylistic", - "plugin:jsx-a11y/recommended", - "plugin:react/recommended", - "prettier", - "plugin:react-hook-form/recommended" - ], - "plugins": [ - "@typescript-eslint", - "react-hooks", - "prettier", - "jsx-a11y", - "react-hook-form" - ], - "settings": { - "react": { - "version": "detect" - } - }, - "env": { - "node": true - }, - "rules": { - "@typescript-eslint/array-type": "off", - "@typescript-eslint/consistent-type-definitions": "off", - "@typescript-eslint/consistent-type-imports": ["error", { "prefer": "type-imports" }], - "@typescript-eslint/no-empty-function": "off", - "@typescript-eslint/no-empty-interface": "off", - "@typescript-eslint/ban-ts-comment": "off", - "@typescript-eslint/no-non-null-assertion": "off", - "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }], - "eqeqeq": ["error", "always", { "null": "ignore" }], - "jsx-a11y/label-has-associated-control": [2, { "controlComponents": ["button"] }], - "no-param-reassign": "error", - "no-restricted-imports": ["error", { "paths": ["."] }], - "no-return-assign": "error", - "no-unused-vars": "off", - "prefer-arrow-callback": "off", - "prettier/prettier": "error", - "radix": "error", - "react-hooks/exhaustive-deps": "error", - "react-hooks/rules-of-hooks": "error", - "react/jsx-boolean-value": "error", - "react/display-name": "off", - "react/react-in-jsx-scope": "off", - "react/prop-types": "off" - }, - "ignorePatterns": ["dist/"], - "overrides": [ - { - "files": ["*.js"], - "rules": { - "@typescript-eslint/no-var-requires": "off" - } - }, - { - "files": ["*.e2e.ts"], - "extends": ["plugin:playwright/playwright-test"], - "rules": { - "playwright/expect-expect": [ - "warn", - { "assertFunctionNames": ["expectVisible", "expectRowVisible"] } - ] - } - } - ] -} diff --git a/app/components/form/Form.tsx b/app/components/form/Form.tsx index 072caf9609..58397069d0 100644 --- a/app/components/form/Form.tsx +++ b/app/components/form/Form.tsx @@ -15,8 +15,6 @@ import { flattenChildren, isOneOf, pluckFirstOfType } from '~/util/children' import { classed } from '~/util/classed' import { invariant } from '~/util/invariant' -import './form.css' - interface FormActionsProps { formId?: string children: React.ReactNode diff --git a/app/main.tsx b/app/main.tsx index 07583dd030..20cde9eb73 100644 --- a/app/main.tsx +++ b/app/main.tsx @@ -19,7 +19,8 @@ import { ReduceMotion } from './hooks' // stripped out by rollup in production import { startMockAPI } from './msw-mock-api' import { routes } from './routes' - +// this is the only allowed css import +// eslint-disable-next-line no-restricted-imports import '~/ui/styles/index.css' import { SkipLink } from '~/ui/lib/SkipLink' diff --git a/app/pages/LoginPage.tsx b/app/pages/LoginPage.tsx index 6ac944f2c3..ed21d57337 100644 --- a/app/pages/LoginPage.tsx +++ b/app/pages/LoginPage.tsx @@ -11,12 +11,9 @@ import { useNavigate, useSearchParams } from 'react-router-dom' import { useApiMutation, type UsernamePasswordCredentials } from '@oxide/api' import { TextFieldInner } from '~/components/form/fields/TextField' +import { useForm } from '~/hooks' import { Button } from '~/ui/lib/Button' import { Identicon } from '~/ui/lib/Identicon' - -import '~/components/login-page.css' - -import { useForm } from '~/hooks' import { pb } from '~/util/path-builder' import { useSiloSelector, useToast } from '../hooks' diff --git a/app/pages/LoginPageSaml.tsx b/app/pages/LoginPageSaml.tsx index 01c5b869e8..578ac58457 100644 --- a/app/pages/LoginPageSaml.tsx +++ b/app/pages/LoginPageSaml.tsx @@ -11,8 +11,6 @@ import { useSearchParams } from 'react-router-dom' import { buttonStyle } from '~/ui/lib/Button' import { Identicon } from '~/ui/lib/Identicon' -import '~/components/login-page.css' - import { useIdpSelector } from '../hooks' /** SAML "login page" that just links to the actual IdP */ diff --git a/app/ui/lib/MiniTable.tsx b/app/ui/lib/MiniTable.tsx index 3684a879eb..c50ba0e0b6 100644 --- a/app/ui/lib/MiniTable.tsx +++ b/app/ui/lib/MiniTable.tsx @@ -9,8 +9,6 @@ import { classed } from '~/util/classed' import { Table as BigTable } from './Table' -import './mini-table.css' - type Children = { children: React.ReactNode } export const Table = classed.table`ox-mini-table w-full border-separate text-sans-md` diff --git a/app/ui/lib/PropertiesTable.tsx b/app/ui/lib/PropertiesTable.tsx index d03cb8f4b6..58590a2feb 100644 --- a/app/ui/lib/PropertiesTable.tsx +++ b/app/ui/lib/PropertiesTable.tsx @@ -12,8 +12,6 @@ import { Badge } from '~/ui/lib/Badge' import { isOneOf } from '~/util/children' import { invariant } from '~/util/invariant' -import './properties-table.css' - export interface PropertiesTableProps { className?: string children: ReactNode diff --git a/app/ui/lib/SideModal.tsx b/app/ui/lib/SideModal.tsx index ce45250617..f8ffc84ce9 100644 --- a/app/ui/lib/SideModal.tsx +++ b/app/ui/lib/SideModal.tsx @@ -17,8 +17,6 @@ import { Message } from '~/ui/lib/Message' import { useIsInModal } from '~/ui/lib/Modal' import { classed } from '~/util/classed' -import './side-modal.css' - import { DialogOverlay } from './DialogOverlay' const SideModalContext = createContext(false) diff --git a/app/ui/lib/Spinner.tsx b/app/ui/lib/Spinner.tsx index 28a044e05c..e9d6d9dadc 100644 --- a/app/ui/lib/Spinner.tsx +++ b/app/ui/lib/Spinner.tsx @@ -8,8 +8,6 @@ import cn from 'classnames' import { useEffect, useRef, useState, type ReactNode } from 'react' -import './spinner.css' - export const spinnerSizes = ['base', 'lg'] as const export const spinnerVariants = ['primary', 'secondary', 'ghost', 'danger'] as const export type SpinnerSize = (typeof spinnerSizes)[number] diff --git a/app/ui/lib/Table.tsx b/app/ui/lib/Table.tsx index 8016ec4179..4f3014943d 100644 --- a/app/ui/lib/Table.tsx +++ b/app/ui/lib/Table.tsx @@ -9,13 +9,9 @@ import cn from 'classnames' import React, { useRef, type ReactElement } from 'react' import SimpleBar from 'simplebar-react' -import 'simplebar-react/dist/simplebar.min.css' - import { useIsOverflow } from '~/hooks' import { classed } from '~/util/classed' -import './table.css' - export type TableProps = JSX.IntrinsicElements['table'] export function Table({ className, ...props }: TableProps) { const overflowRef = useRef(null) diff --git a/app/ui/lib/Tabs.tsx b/app/ui/lib/Tabs.tsx index 8e873b11bf..6b08c644dc 100644 --- a/app/ui/lib/Tabs.tsx +++ b/app/ui/lib/Tabs.tsx @@ -18,8 +18,6 @@ import { import cn from 'classnames' import type { SetRequired } from 'type-fest' -import './Tabs.css' - // They don't require a default value, but without it there is no tab selected // by default. export type TabsRootProps = SetRequired diff --git a/app/ui/lib/Tooltip.tsx b/app/ui/lib/Tooltip.tsx index becc54e4bd..101f34b237 100644 --- a/app/ui/lib/Tooltip.tsx +++ b/app/ui/lib/Tooltip.tsx @@ -34,8 +34,6 @@ import { mergeRefs } from 'react-merge-refs' import { usePopoverZIndex } from './SideModal' -import './tooltip.css' - export interface TooltipProps { delay?: number children?: React.ReactNode diff --git a/app/ui/lib/Tabs.css b/app/ui/styles/components/Tabs.css similarity index 100% rename from app/ui/lib/Tabs.css rename to app/ui/styles/components/Tabs.css diff --git a/app/components/form/form.css b/app/ui/styles/components/form.css similarity index 100% rename from app/components/form/form.css rename to app/ui/styles/components/form.css diff --git a/app/components/login-page.css b/app/ui/styles/components/login-page.css similarity index 100% rename from app/components/login-page.css rename to app/ui/styles/components/login-page.css diff --git a/app/ui/lib/mini-table.css b/app/ui/styles/components/mini-table.css similarity index 100% rename from app/ui/lib/mini-table.css rename to app/ui/styles/components/mini-table.css diff --git a/app/ui/lib/properties-table.css b/app/ui/styles/components/properties-table.css similarity index 100% rename from app/ui/lib/properties-table.css rename to app/ui/styles/components/properties-table.css diff --git a/app/ui/lib/side-modal.css b/app/ui/styles/components/side-modal.css similarity index 100% rename from app/ui/lib/side-modal.css rename to app/ui/styles/components/side-modal.css diff --git a/app/ui/lib/spinner.css b/app/ui/styles/components/spinner.css similarity index 100% rename from app/ui/lib/spinner.css rename to app/ui/styles/components/spinner.css diff --git a/app/ui/lib/table.css b/app/ui/styles/components/table.css similarity index 100% rename from app/ui/lib/table.css rename to app/ui/styles/components/table.css diff --git a/app/ui/lib/tooltip.css b/app/ui/styles/components/tooltip.css similarity index 100% rename from app/ui/lib/tooltip.css rename to app/ui/styles/components/tooltip.css diff --git a/app/ui/styles/index.css b/app/ui/styles/index.css index 51a8a2f9d8..3c15338f2a 100644 --- a/app/ui/styles/index.css +++ b/app/ui/styles/index.css @@ -6,17 +6,38 @@ * Copyright Oxide Computer Company */ +/* + * We import all of these here instead of in the corresponding component files + * so we can control the order things are imported in. In theory that's what the + * @layer directives are for, but Vite's usage of postcss-import didn't seem + * to be aware of the @tailwind directives here. I suspect it was not following + * the order specified in our postcss config. In any case we don't need to worry + * about that if we're controlling the order directly here. All of these end up + * inlined into a single file by postcss-import. + */ + @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; +@import '@oxide/design-system/styles/dist/main.css'; +@import 'simplebar-react/dist/simplebar.min.css'; + @import './fonts.css'; @import './components/button.css'; @import './components/menu-button.css'; @import './components/menu-list.css'; @import './components/loading-bar.css'; +@import './components/Tabs.css'; +@import './components/form.css'; +@import './components/login-page.css'; +@import './components/mini-table.css'; +@import './components/properties-table.css'; +@import './components/side-modal.css'; +@import './components/spinner.css'; +@import './components/table.css'; +@import './components/tooltip.css'; -@import '@oxide/design-system/styles/dist/main.css'; @import './themes/selection.css'; @import 'xterm/css/xterm.css'; From 802b8fe9f49b66bfe877b9c771f34fdd1b44625d Mon Sep 17 00:00:00 2001 From: David Crespo Date: Tue, 5 Mar 2024 22:00:41 -0600 Subject: [PATCH 4/4] clean up modal stuff. take pointer events and onclicks off modal overlay --- app/ui/lib/ActionMenu.tsx | 5 +---- app/ui/lib/DialogOverlay.tsx | 5 +++-- app/ui/lib/Modal.tsx | 7 +------ app/ui/lib/SideModal.tsx | 8 +------- 4 files changed, 6 insertions(+), 19 deletions(-) diff --git a/app/ui/lib/ActionMenu.tsx b/app/ui/lib/ActionMenu.tsx index 59cc6c74d4..175e0fdafb 100644 --- a/app/ui/lib/ActionMenu.tsx +++ b/app/ui/lib/ActionMenu.tsx @@ -92,10 +92,7 @@ export function ActionMenu(props: ActionMenuProps) { > - {/* TODO: it was getting z-20 from .DialogContent before. this should - probably go in the z-* things in the tw config. also: Modal and SideModal put - pointer-events-auto on their modals, but this one works fine (click overlay to dismiss works) without it */} - +
{ const lastIdx = itemsInOrder.length - 1 diff --git a/app/ui/lib/DialogOverlay.tsx b/app/ui/lib/DialogOverlay.tsx index f03004e27e..adceac41c7 100644 --- a/app/ui/lib/DialogOverlay.tsx +++ b/app/ui/lib/DialogOverlay.tsx @@ -5,6 +5,7 @@ * * Copyright Oxide Computer Company */ -import { classed } from '~/util/classed' -export const DialogOverlay = classed.div`fixed inset-0 z-10 overflow-auto bg-scrim` +export const DialogOverlay = () => ( +
+) diff --git a/app/ui/lib/Modal.tsx b/app/ui/lib/Modal.tsx index 50c1e011f2..a5cd7a477f 100644 --- a/app/ui/lib/Modal.tsx +++ b/app/ui/lib/Modal.tsx @@ -57,12 +57,7 @@ export function Modal({ children, onDismiss, title, isOpen }: ModalProps) { modal={false} > - {/* TODO: what's up with aria-hidden and pointer-events-auto */} - + - {/* TODO: what's up with aria-hidden and pointer-events-auto? click background to dismiss - actually works without either one... what's that about? */} - +