fix: "Fix" ugly error UI https://github.com/pocka/figspec/issues/10 Previous error UI is not clearly different than normal views. This commit "fixes" the UI and improve readability. Added a new CSS variable: --figspec-viewer-error-color close #10

Changes

2 changed files (+46/-16)

• packages/components/src/FigspecViewer/ErrorMessage.ts
  • @@ -7,30 +7,49 @@ children?: string | TemplateResult;
    } export const ErrorMessage = ({ title, children }: ErrorMessageProps) => html` - <p class="error"> - <span class="error-title">${title}</span> - <span class="error-description">${children}</span> - </p> + <div class="error-background"> + <div class="error-container"> + <span class="error-title" + ><span class="error-badge">Error</span>${title}</span + > + <span class="error-description">${children}</span> + </div> + </div> `; export const styles = css` - .error { + .error-background { position: absolute; - top: 50%; - left: 50%; - max-width: 80%; - padding: 0.75em 1em; + top: 0; + left: 0; + width: 100%; + height: 100%; - background-color: var(--error-bg); - border-radius: 4px; + background: var(--error-bg); color: var(--error-fg); + } - transform: translate(-50%, -50%); + .error-container { + max-width: 800px; + margin: auto; + padding: 1em; + } + + .error-badge { + display: inline-block; + font-size: 0.8em; + padding: 0.2em 0.5em; + margin-inline-end: 0.5em; + + background: var(--error-color); + border-radius: 2px; + color: var(--error-bg); + text-transform: uppercase; } .error-title { display: block; - font-size: 0.8em; + font-size: 1.2em; font-weight: bold; text-transform: capitalize;
  • @@ -38,6 +57,6 @@ }
    .error-description { display: block; - margin-block-start: 0.5em; + margin-block-start: 1em; } `;
• packages/components/src/FigspecViewer/ViewerMixin.ts
  • @@ -61,10 +61,14 @@
    return extendStyles(styles, [ css` :host { + --default-error-bg: #fff; + --default-error-fg: #333; + --bg: var(--figspec-viewer-bg, #666); --z-index: var(--figspec-viewer-z-index, 0); - --error-bg: var(--figspec-viewer-error-bg, #870909); - --error-fg: var(--figspec-viewer-error-fg, white); + --error-bg: var(--figspec-viewer-error-bg, var(--default-error-bg)); + --error-fg: var(--figspec-viewer-error-fg, var(--default-error-fg)); + --error-color: var(--figspec-viewer-error-color, tomato); --guide-thickness: var(--figspec-viewer-guide-thickness, 1.5px); --guide-color: var(--figspec-viewer-guide-color, tomato);
  • @@ -97,6 +101,13 @@ background-color: var(--bg);
    user-select: none; overflow: hidden; z-index: var(--z-index); + } + + @media (prefers-color-scheme: dark) { + :host { + --default-error-bg: #222; + --default-error-fg: #fff; + } } .spec-canvas-wrapper {