OpenNoodl/dev-docs/tasks/phase-9-styles-overhaul/CLEANUP-SUBTASKS/TASK-000G-component-dialogs-panels/OVERVIEW.md

TASK-000G: Component Visual Updates - Dialogs & Panels

Overview

Apply visual refinements to dialog, modal, and panel components to create a modern, elevated UI feel. These are high-visibility components that frame content throughout the editor.

Priority: MEDIUM
Effort: 1-2 hours
Risk: Medium
Dependencies: TASK-000A, TASK-000D, TASK-000E (Color tokens, Core UI audit, Spacing tokens)

---

Objective

Make dialogs and panels feel modern and elevated with:

• Subtle borders for definition
• Refined shadows for depth
• Better backdrop styling
• Consistent header/body/footer structure
• Proper spacing using tokens

---

Part 1: Dialog/Modal Refinements

File

packages/noodl-core-ui/src/components/layout/BaseDialog/BaseDialog.module.scss

Improvements to Apply

/* Dialog wrapper - handles backdrop */
.Root {
  /* Backdrop styling */
  &.has-backdrop {
    background-color: var(--base-color-black-transparent-80);
    
    /* Optional: subtle blur for modern feel */
    /* Note: may have performance implications */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

/* The visible dialog box */
.VisibleDialog {
  /* Background */
  background-color: var(--theme-color-bg-2);
  
  /* Border for definition against backdrop */
  border: 1px solid var(--theme-color-border-subtle);
  
  /* Modern rounded corners */
  border-radius: var(--radius-lg);
  
  /* Elevated shadow */
  box-shadow: var(--shadow-popup);
  
  /* Overflow handling */
  overflow: hidden;
  
  /* Maximum size constraints */
  max-height: 90vh;
  max-width: 90vw;
}

/* Dialog header */
.DialogHeader {
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: 1px solid var(--theme-color-border-subtle);
  
  /* Flex layout for title + close button */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
}

.DialogTitle {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--theme-color-fg-highlight);
  line-height: var(--line-height-tight);
  margin: 0;
}

.DialogSubtitle {
  font-size: var(--font-size-base);
  color: var(--theme-color-fg-default-shy);
  margin-top: var(--spacing-1);
}

/* Dialog body */
.DialogBody {
  padding: var(--spacing-5);
  overflow-y: auto;
  
  /* Smooth scrolling */
  scroll-behavior: smooth;
  
  /* Scrollbar styling (webkit) */
  &::-webkit-scrollbar {
    width: 8px;
  }
  
  &::-webkit-scrollbar-track {
    background: var(--theme-color-bg-3);
  }
  
  &::-webkit-scrollbar-thumb {
    background: var(--theme-color-bg-5);
    border-radius: var(--radius-full);
    
    &:hover {
      background: var(--theme-color-fg-muted);
    }
  }
}

/* Dialog footer */
.DialogFooter {
  padding: var(--spacing-4) var(--spacing-5);
  border-top: 1px solid var(--theme-color-border-subtle);
  background-color: var(--theme-color-bg-1);
  
  /* Flex layout for buttons */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-3);
}

/* Close button in header */
.CloseButton {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-default);
  background: transparent;
  border: none;
  color: var(--theme-color-fg-muted);
  cursor: pointer;
  transition: 
    background-color var(--transition-default) var(--transition-ease),
    color var(--transition-default) var(--transition-ease);
  
  &:hover {
    background-color: var(--theme-color-bg-hover);
    color: var(--theme-color-fg-default);
  }
}

---

Part 2: Panel Refinements

Files

packages/noodl-core-ui/src/components/sidebar/BasePanel/BasePanel.module.scss
packages/noodl-core-ui/src/components/sidebar/Section/Section.module.scss

BasePanel Improvements

.Root {
  /* Background */
  background-color: var(--theme-color-bg-2);
  
  /* Border for definition */
  border: 1px solid var(--theme-color-border-subtle);
  border-radius: var(--radius-md);
  
  /* Consistent padding */
  padding: var(--spacing-panel-padding);
  
  /* Panel gap between children */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-panel-gap);
}

.PanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-3);
  border-bottom: 1px solid var(--theme-color-border-subtle);
  margin-bottom: var(--spacing-2);
}

.PanelTitle {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--theme-color-fg-default-contrast);
}

Section Improvements

.Root {
  /* Section spacing */
  padding: var(--spacing-section-padding) 0;
  
  /* Border between sections */
  &:not(:last-child) {
    border-bottom: 1px solid var(--theme-color-border-subtle);
  }
}

.SectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-3);
}

.SectionTitle {
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-letter-spacing);
  color: var(--theme-color-fg-muted);
  text-transform: uppercase;
}

.SectionContent {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* Collapsible section */
.SectionToggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  
  &:hover .SectionTitle {
    color: var(--theme-color-fg-default-shy);
  }
}

.CollapseIcon {
  transition: transform var(--transition-default) var(--transition-ease);
  
  &.is-collapsed {
    transform: rotate(-90deg);
  }
}

---

Part 3: Sidebar Item Refinements

File

packages/noodl-core-ui/src/components/sidebar/SidebarItem/SidebarItem.module.scss

Improvements

.Root {
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-default);
  
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  
  color: var(--theme-color-fg-default);
  
  transition: 
    background-color var(--transition-default) var(--transition-ease),
    color var(--transition-default) var(--transition-ease);
  
  cursor: pointer;
  
  &:hover {
    background-color: var(--theme-color-bg-hover);
  }
  
  &.is-active {
    background-color: var(--theme-color-primary);
    color: var(--theme-color-on-primary);
  }
  
  &.is-selected {
    background-color: var(--theme-color-bg-4);
    color: var(--theme-color-fg-highlight);
  }
}

.ItemIcon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: inherit;
  opacity: 0.7;
}

.ItemLabel {
  flex: 1;
  font-size: var(--font-size-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ItemBadge {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  padding: var(--spacing-0-5) var(--spacing-1);
  background-color: var(--theme-color-bg-5);
  border-radius: var(--radius-sm);
  color: var(--theme-color-fg-default-shy);
}

---

Part 4: Tooltip Refinements

File

packages/noodl-core-ui/src/components/common/Tooltip/Tooltip.module.scss

Improvements

.Root {
  background-color: var(--theme-color-bg-4);
  color: var(--theme-color-fg-default);
  
  padding: var(--spacing-1-5) var(--spacing-2);
  border-radius: var(--radius-default);
  
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  
  box-shadow: var(--shadow-md);
  border: 1px solid var(--theme-color-border-default);
  
  /* Ensure tooltip is above everything */
  z-index: var(--z-tooltip);
  
  /* Max width for long content */
  max-width: 250px;
}

/* Arrow/pointer if applicable */
.Arrow {
  fill: var(--theme-color-bg-4);
  stroke: var(--theme-color-border-default);
}

---

Testing Checklist

Dialogs/Modals

• Dialog has visible border
• Shadow creates sense of elevation
• Backdrop is semi-transparent dark
• Backdrop blur works (if enabled)
• Header/body/footer clearly separated
• Title text is prominent
• Close button works and has hover state
• Footer buttons aligned correctly
• Scrollable body works for long content
• Focus trapped inside dialog

Panels

• Panel has subtle border
• Header section distinct from content
• Section titles are uppercase/muted
• Content areas have proper spacing
• Collapsible sections animate smoothly

Sidebar Items

• Items have hover states
• Active item clearly highlighted (red)
• Selected item distinct from hover
• Icons aligned with text
• Overflow text truncates with ellipsis

Tooltips

• Tooltip has border and shadow
• Text is readable
• Position correctly relative to trigger
• Arrow points to trigger (if applicable)

General

• Consistent border radius across all components
• Consistent border colors
• Smooth transitions
• Storybook shows all variations correctly

---

Verification in Storybook

npm run storybook

Navigate to:

• Layout / BaseDialog
• Sidebar / BasePanel
• Sidebar / Section
• Sidebar / SidebarItem
• Common / Tooltip

Review all stories and variants.

---

Success Criteria

• Dialogs feel elevated and professional
• Panels have clear visual structure
• Sections organize content clearly
• Sidebar items are interactive and obvious
• Tooltips are readable and well-positioned
• Consistent use of tokens throughout
• No visual regressions from previous functionality