Standardize all filter and segment modals styles (#6298)

* Standardize all filter and segment modals styles

- Add a shared ModalLayout/ModalFooter to give every modal the same header, body spacing, and button alignment
- Add a shared Button component (matching the Phoenix variant) and switch all modal buttons to it for consistent sizing and theming
- Align footer buttons to the right in all modal footers
- Restructure the segment details modal: fixed "Segment details" title, with the segment name, type, and authorship shown inline in the body
- Update the delete segment modal with a clearer title and a confirmation message
- Make filter pills better visible inside modals with a gray background
- Add a Cancel button to the filter modal when no filters are applied
- Refine button theme borders so ghost, yellow, and icon variants line up at the same height as bordered buttons, and fix the visible border on disabled primary buttons

* Dark mode and responsive fixes

* Implement feedback

- Move shared button styles into `.btn-*` Tailwind component classes used by both the React Button and the Phoenix `button` component
- Tweak filter pill styling inside modals for dark mode

Author: sanne-san

CHANGELOG.md

@@ -24,6 +24,7 @@ All notable changes to this project will be documented in this file.
 - "Top referrers" and "Search terms" breakdowns are rendered side by side with other "Sources" tabs instead of replacing them
 - Improved top bar and top stats UI/styling
 - Moved graph interval picker, export button, imported data toggle and notices out of the graph and into a new options menu in the top bar
+- Standardised and improved segment and filter modals styling
 
 ### Fixed
 

assets/css/app.css

@@ -51,6 +51,71 @@
   }
 }
 
+@layer components {
+  /*
+   * Button component classes shared between the React `Button` component
+   * (assets/js/dashboard/components/button.tsx) and the Phoenix `button`
+   * component (lib/plausible_web/components/generic.ex). Update here only.
+   */
+  .btn-base {
+    @apply whitespace-nowrap truncate inline-flex items-center justify-center
+      gap-x-2 text-sm font-medium rounded-md cursor-pointer
+      disabled:cursor-not-allowed;
+  }
+
+  .btn-sm {
+    @apply px-3 py-2;
+  }
+
+  .btn-md {
+    @apply px-3.5 py-2.5;
+  }
+
+  .btn-theme-primary {
+    @apply border border-indigo-600 bg-indigo-600 text-white
+      hover:bg-indigo-700 focus-visible:outline-indigo-600
+      disabled:border-transparent disabled:bg-indigo-400/60
+      disabled:dark:bg-indigo-600/30 disabled:dark:text-white/35;
+  }
+
+  .btn-theme-secondary {
+    @apply border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700
+      text-gray-800 dark:text-gray-100 hover:bg-gray-50 hover:text-gray-900
+      dark:hover:bg-gray-600 dark:hover:border-gray-600 dark:hover:text-white
+      disabled:text-gray-700/40 dark:disabled:text-gray-500
+      dark:disabled:bg-gray-800 dark:disabled:border-gray-800;
+  }
+
+  .btn-theme-yellow {
+    @apply border border-yellow-600/90 bg-yellow-600/90 text-white
+      hover:bg-yellow-600 focus-visible:outline-yellow-600
+      disabled:border-yellow-400/60 disabled:bg-yellow-400/60
+      disabled:dark:border-yellow-600/30 disabled:dark:bg-yellow-600/30
+      disabled:dark:text-white/35;
+  }
+
+  .btn-theme-danger {
+    @apply border border-gray-300 dark:border-gray-800 text-red-600 bg-white
+      dark:bg-gray-800 hover:text-red-700 dark:hover:text-red-400
+      dark:text-red-500 active:text-red-800 disabled:text-red-700/40
+      disabled:hover:shadow-none dark:disabled:text-red-500/35
+      dark:disabled:bg-gray-800;
+  }
+
+  .btn-theme-ghost {
+    @apply border border-transparent text-gray-700 dark:text-gray-300
+      hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100
+      dark:hover:bg-gray-800 hover:border-gray-100 dark:hover:border-gray-800
+      disabled:text-gray-500 disabled:dark:text-gray-600
+      disabled:hover:bg-transparent disabled:hover:border-transparent;
+  }
+
+  .btn-theme-icon {
+    @apply border border-transparent text-gray-400 dark:text-gray-400
+      hover:text-gray-900 dark:hover:text-gray-100;
+  }
+}
+
 @theme {
   /* Color aliases from tailwind.config.js */
 

assets/js/dashboard/components/button.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import classNames from 'classnames'
+
+/**
+ * Themes and sizes are kept in sync with the Phoenix `button` component in
+ * `lib/plausible_web/components/generic.ex`. The actual Tailwind classes live
+ * in `assets/css/app.css` (.btn-base, .btn-{sm,md}, .btn-theme-*).
+ */
+
+export type ButtonTheme =
+  | 'primary'
+  | 'secondary'
+  | 'danger'
+  | 'yellow'
+  | 'ghost'
+  | 'icon'
+
+export type ButtonSize = 'sm' | 'md'
+
+const buttonBaseClass = 'btn-base'
+
+const buttonSizes: Record<ButtonSize, string> = {
+  sm: 'btn-sm',
+  md: 'btn-md'
+}
+
+const buttonThemes: Record<ButtonTheme, string> = {
+  primary: 'btn-theme-primary',
+  secondary: 'btn-theme-secondary',
+  yellow: 'btn-theme-yellow',
+  danger: 'btn-theme-danger',
+  ghost: 'btn-theme-ghost',
+  icon: 'btn-theme-icon'
+}
+
+export const buttonClassName = ({
+  theme = 'primary',
+  size = 'md',
+  className
+}: {
+  theme?: ButtonTheme
+  size?: ButtonSize
+  className?: string
+} = {}): string =>
+  classNames(buttonBaseClass, buttonSizes[size], buttonThemes[theme], className)
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  theme?: ButtonTheme
+  size?: ButtonSize
+}
+
+export const Button = ({
+  theme = 'primary',
+  size = 'md',
+  type = 'button',
+  className,
+  ...rest
+}: ButtonProps) => (
+  <button
+    type={type}
+    className={buttonClassName({ theme, size, className })}
+    {...rest}
+  />
+)

assets/js/dashboard/components/modal-layout.tsx

@@ -0,0 +1,46 @@
+import React, { ReactNode } from 'react'
+import { XMarkIcon } from '@heroicons/react/20/solid'
+import ModalWithRouting from '../stats/modals/modal'
+
+export function ModalLayout({
+  title,
+  onClose,
+  children,
+  maxWidth = '460px',
+  allowScroll = true
+}: {
+  title: ReactNode
+  onClose: () => void
+  children: ReactNode
+  maxWidth?: string
+  allowScroll?: boolean
+}) {
+  return (
+    <ModalWithRouting
+      maxWidth={maxWidth}
+      allowScroll={allowScroll}
+      onClose={onClose}
+    >
+      <div className="flex flex-col gap-6 p-1 md:py-2 md:px-0">
+        <div className="flex items-center justify-between gap-3">
+          <h1 className="text-base font-bold leading-tight dark:text-gray-100">
+            {title}
+          </h1>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close modal"
+            className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
+          >
+            <XMarkIcon className="size-4.5" />
+          </button>
+        </div>
+        {children}
+      </div>
+    </ModalWithRouting>
+  )
+}
+
+export function ModalFooter({ children }: { children: ReactNode }) {
+  return <div className="flex gap-x-3 items-center justify-end">{children}</div>
+}

assets/js/dashboard/components/remove-filter-button.tsx

@@ -37,7 +37,7 @@ export function FilterPill({
   return (
     <div
       className={classNames(
-        'flex h-8 shadow rounded-md bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm items-center',
+        'flex h-8 shadow-sm rounded-md bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm items-center',
         className
       )}
     >

assets/js/dashboard/nav-menu/filter-pill.tsx

@@ -24,17 +24,20 @@ export function SegmentAuthorship({
   const showUpdatedAt = updated_at !== inserted_at
 
   return (
-    <div className={className}>
-      <div>
+    <span className={className}>
+      <span>
         {`Created at ${formatDayShort(dateForSite(inserted_at, site))}`}
         {!showUpdatedAt && !!authorLabel && ` by ${authorLabel}`}
-      </div>
+      </span>
       {showUpdatedAt && (
-        <div>
-          {`Last updated at ${formatDayShort(dateForSite(updated_at, site))}`}
-          {!!authorLabel && ` by ${authorLabel}`}
-        </div>
+        <>
+          {' • '}
+          <span>
+            {`Last updated at ${formatDayShort(dateForSite(updated_at, site))}`}
+            {!!authorLabel && ` by ${authorLabel}`}
+          </span>
+        </>
       )}
-    </div>
+    </span>
   )
 }