Forker/OpenNoodl
1
0
Fork 0
mirror of https://github.com/The-Low-Code-Foundation/OpenNoodl.git synced 2026-01-12 07:12:54 +01:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity
Files
ea45e8b3a3c6a69e4425988099f7ce9cd1490310
OpenNoodl/dev-docs/tasks/phase-3/TASK-000-styles-overhaul/TASK-000G-component-dialogs-panels/OVERVIEW.md
Richard Osborne ea45e8b3a3 fix(preview): add missing font MIME types to web server 
- Added MIME type mappings for .otf, .woff, and .woff2 font formats
- Fixed missing break statement after .wav case (was falling through to .mp4)
- Fonts now load correctly in editor preview without 404 errors
- Resolves OTS parsing error messages in console

The web server was already serving project directory files correctly,
but browsers were rejecting font files due to missing/incorrect MIME types.

Related to TASK-006
2025-12-15 22:57:48 +01:00

9.3 KiB
Raw Blame History

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
Reference in New Issue View Git Blame Copy Permalink