From 7b5663fcdb1d3429d151518a5e1b1039d662b8ac Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 17 May 2017 08:42:20 +0200 Subject: [PATCH 1/8] Tweaked overlay styles --- packages/react-dev-utils/ansiHTML.js | 10 ++-- .../react-dev-utils/webpackHotDevClient.js | 19 +++++-- .../src/components/overlay.js | 8 ++- packages/react-error-overlay/src/overlay.js | 29 +--------- packages/react-error-overlay/src/styles.js | 54 +++++++++++++------ 5 files changed, 65 insertions(+), 55 deletions(-) diff --git a/packages/react-dev-utils/ansiHTML.js b/packages/react-dev-utils/ansiHTML.js index c4e850736ac..5d3e792036c 100644 --- a/packages/react-dev-utils/ansiHTML.js +++ b/packages/react-dev-utils/ansiHTML.js @@ -15,18 +15,18 @@ var Anser = require('anser'); // var base00 = 'ffffff'; // Default Background var base01 = 'f5f5f5'; // Lighter Background (Used for status bars) // var base02 = 'c8c8fa'; // Selection Background -var base03 = '969896'; // Comments, Invisibles, Line Highlighting +var base03 = '6e6e6e'; // Comments, Invisibles, Line Highlighting // var base04 = 'e8e8e8'; // Dark Foreground (Used for status bars) var base05 = '333333'; // Default Foreground, Caret, Delimiters, Operators // var base06 = 'ffffff'; // Light Foreground (Not often used) // var base07 = 'ffffff'; // Light Background (Not often used) -var base08 = 'ed6a43'; // Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted +var base08 = '881280'; // Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted // var base09 = '0086b3'; // Integers, Boolean, Constants, XML Attributes, Markup Link Url // var base0A = '795da3'; // Classes, Markup Bold, Search Text Background -var base0B = '183691'; // Strings, Inherited Class, Markup Code, Diff Inserted -var base0C = '183691'; // Support, Regular Expressions, Escape Characters, Markup Quotes +var base0B = '1155cc'; // Strings, Inherited Class, Markup Code, Diff Inserted +var base0C = '994500'; // Support, Regular Expressions, Escape Characters, Markup Quotes // var base0D = '795da3'; // Functions, Methods, Attribute IDs, Headings -var base0E = 'a71d5d'; // Keywords, Storage, Selector, Markup Italic, Diff Changed +var base0E = 'c80000'; // Keywords, Storage, Selector, Markup Italic, Diff Changed // var base0F = '333333'; // Deprecated, Opening/Closing Embedded Language Tags e.g. // Map ANSI colors from what babel-code-frame uses to base16-github diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js index 4e2d3cf1355..5a19cf06328 100644 --- a/packages/react-dev-utils/webpackHotDevClient.js +++ b/packages/react-dev-utils/webpackHotDevClient.js @@ -26,7 +26,7 @@ var Entities = require('html-entities').AllHtmlEntities; var ansiHTML = require('./ansiHTML'); var entities = new Entities(); -var red = '#E36049'; +var red = '#ce1126'; function createOverlayIframe(onIframeLoad) { var iframe = document.createElement('iframe'); @@ -59,15 +59,24 @@ function addOverlayDivTo(iframe) { div.style.backgroundColor = '#fafafa'; div.style.color = '#333'; div.style.fontFamily = 'Menlo, Consolas, monospace'; - div.style.fontSize = 'large'; + div.style.fontSize = '10px'; div.style.padding = '2rem'; div.style.lineHeight = '1.2'; - div.style.whiteSpace = 'pre-wrap'; + div.style.whiteSpace = 'pre'; div.style.overflow = 'auto'; iframe.contentDocument.body.appendChild(div); return div; } +function overlayHeaderStyle() { + return 'font-size: 1.7em;' + + 'font-family: sans-serif;' + + 'color: ' + + red + + ';' + + 'white-space: pre-wrap;'; +} + var overlayIframe = null; var overlayDiv = null; var lastOnOverlayDivReady = null; @@ -104,8 +113,8 @@ function ensureOverlayDivExists(onOverlayDivReady) { function showErrorOverlay(message) { ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) { // Make it look similar to our terminal. - overlayDiv.innerHTML = 'Failed to compile.

' + ansiHTML(entities.encode(message)); }); diff --git a/packages/react-error-overlay/src/components/overlay.js b/packages/react-error-overlay/src/components/overlay.js index 8633524be13..d808e597fd5 100644 --- a/packages/react-error-overlay/src/components/overlay.js +++ b/packages/react-error-overlay/src/components/overlay.js @@ -1,6 +1,11 @@ /* @flow */ import { applyStyles } from '../utils/dom/css'; -import { overlayStyle, headerStyle, additionalStyle } from '../styles'; +import { + craContainer, + overlayStyle, + headerStyle, + additionalStyle, +} from '../styles'; import { createClose } from './close'; import { createFrames } from './frames'; import { createFooter } from './footer'; @@ -32,6 +37,7 @@ function createOverlay( // Create container const container = document.createElement('div'); + applyStyles(container, craContainer); container.className = 'cra-container'; overlay.appendChild(container); diff --git a/packages/react-error-overlay/src/overlay.js b/packages/react-error-overlay/src/overlay.js index fe29a6c7b36..fb3fb4dcae6 100644 --- a/packages/react-error-overlay/src/overlay.js +++ b/packages/react-error-overlay/src/overlay.js @@ -45,33 +45,6 @@ let additionalReference = null; let errorReferences: ErrorRecordReference[] = []; let currReferenceIndex: number = -1; -const css = [ - '.cra-container {', - ' padding-right: 15px;', - ' padding-left: 15px;', - ' margin-right: auto;', - ' margin-left: auto;', - '}', - '', - '@media (min-width: 768px) {', - ' .cra-container {', - ' width: calc(750px - 6em);', - ' }', - '}', - '', - '@media (min-width: 992px) {', - ' .cra-container {', - ' width: calc(970px - 6em);', - ' }', - '}', - '', - '@media (min-width: 1200px) {', - ' .cra-container {', - ' width: calc(1170px - 6em);', - ' }', - '}', -].join('\n'); - function render(name: ?string, message: string, resolvedFrames: StackFrame[]) { disposeCurrentView(); @@ -105,8 +78,8 @@ function render(name: ?string, message: string, resolvedFrames: StackFrame[]) { keyEventHandler(type => shortcutHandler(type), event); }; } - injectCss(iframeReference.contentDocument, css); if (document.body != null) { + document.body.style.margin = 0; document.body.appendChild(overlay); } additionalReference = additional; diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js index 855778cbd13..43c04410618 100644 --- a/packages/react-error-overlay/src/styles.js +++ b/packages/react-error-overlay/src/styles.js @@ -4,10 +4,11 @@ const black = '#293238', lightGray = '#fafafa', red = '#ce1126', lightRed = '#fccfcf', - yellow = '#fbf5b4'; + yellow = '#fbf5b4', + white = '#ffffff'; const iframeStyle = { - 'background-color': lightGray, + 'background-color': 'rgba(0,0,0,.5)', position: 'fixed', top: '1em', left: '1em', @@ -22,22 +23,38 @@ const iframeStyle = { }; const overlayStyle = { + position: 'absolute', + top: '0.5rem', + left: '50%', + 'margin-left': '0', + 'margin-right': '-50%', + transform: 'translate(-50%, 0)', + display: 'inline-block', + margin: '0.5rem', + 'max-height': 'calc(100% - 1rem)', + 'max-width': 'calc(100% - 1rem)', 'box-sizing': 'border-box', - padding: '4rem', + padding: '0 1rem', 'font-family': 'Consolas, Menlo, monospace', + 'font-size': '10px', color: black, 'white-space': 'pre-wrap', overflow: 'auto', 'overflow-x': 'hidden', 'word-break': 'break-word', 'line-height': 1.5, + 'background-color': white, + 'border-radius': '0.25rem', + 'box-shadow': '0 0 10px 0 rgba(0, 0, 0, 0.15)', +}; + +const craContainer = { + display: 'flex', + 'flex-direction': 'column', + 'max-height': '100%', }; const hintsStyle = { - 'font-size': '0.8em', - 'margin-top': '-3em', - 'margin-bottom': '3em', - 'text-align': 'right', color: darkGray, }; @@ -49,7 +66,9 @@ const hintStyle = { const closeButtonStyle = { 'font-size': '26px', color: black, - padding: '0.5em 1em', + 'line-height': '1rem', + 'font-size': '1.5rem', + padding: '1rem', cursor: 'pointer', position: 'absolute', right: 0, @@ -63,14 +82,15 @@ const additionalStyle = { const headerStyle = { 'font-size': '1.7em', - 'font-weight': 'bold', + 'font-family': 'sans-serif', color: red, 'white-space': 'pre-wrap', + flex: '0 0 auto', + margin: '0.75rem 0 0', }; const functionNameStyle = { 'margin-top': '1em', - 'font-size': '1.2em', }; const linkStyle = { @@ -84,11 +104,11 @@ const anchorStyle = { const traceStyle = { 'font-size': '1em', + overflow: 'auto', + flex: '1 1 auto', }; -const depStyle = { - 'font-size': '1.2em', -}; +const depStyle = {}; const primaryErrorStyle = { 'background-color': lightRed, @@ -100,7 +120,6 @@ const secondaryErrorStyle = { const omittedFramesStyle = { color: black, - 'font-size': '0.9em', margin: '1.5em 0', cursor: 'pointer', }; @@ -111,7 +130,6 @@ const preStyle = { 'margin-top': '1.5em', 'margin-bottom': '0px', 'overflow-x': 'auto', - 'font-size': '1.1em', 'white-space': 'pre', }; @@ -156,11 +174,15 @@ const groupElemRight = Object.assign({}, _groupElemStyle, { }); const footerStyle = { - 'text-align': 'center', + 'font-family': 'sans-serif', color: darkGray, + flex: '0 0 auto', + 'margin-top': '0.5rem', + 'margin-bottom': '1rem', }; export { + craContainer, iframeStyle, overlayStyle, hintsStyle, From 404c66cc3bfa078013bda1f3e0fa67f8734bc2d4 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 17 May 2017 11:22:46 +0200 Subject: [PATCH 2/8] Tweaked pre-style --- packages/react-error-overlay/src/overlay.js | 2 +- packages/react-error-overlay/src/styles.js | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/react-error-overlay/src/overlay.js b/packages/react-error-overlay/src/overlay.js index fb3fb4dcae6..3c1207dcc34 100644 --- a/packages/react-error-overlay/src/overlay.js +++ b/packages/react-error-overlay/src/overlay.js @@ -35,7 +35,7 @@ import type { ErrorRecordReference } from './utils/errorRegister'; import type { StackFrame } from './utils/stack-frame'; import { iframeStyle } from './styles'; -import { injectCss, applyStyles } from './utils/dom/css'; +import { applyStyles } from './utils/dom/css'; import { createOverlay } from './components/overlay'; import { updateAdditional } from './components/additional'; diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js index 43c04410618..c4ae5d254f6 100644 --- a/packages/react-error-overlay/src/styles.js +++ b/packages/react-error-overlay/src/styles.js @@ -1,7 +1,6 @@ /* @flow */ const black = '#293238', darkGray = '#878e91', - lightGray = '#fafafa', red = '#ce1126', lightRed = '#fccfcf', yellow = '#fbf5b4', @@ -64,7 +63,6 @@ const hintStyle = { }; const closeButtonStyle = { - 'font-size': '26px', color: black, 'line-height': '1rem', 'font-size': '1.5rem', @@ -120,17 +118,18 @@ const secondaryErrorStyle = { const omittedFramesStyle = { color: black, - margin: '1.5em 0', cursor: 'pointer', }; const preStyle = { display: 'block', padding: '0.5em', - 'margin-top': '1.5em', - 'margin-bottom': '0px', + 'margin-top': '0.5em', + 'margin-bottom': '0.5em', 'overflow-x': 'auto', 'white-space': 'pre', + 'border-radius': '0.25rem', + 'background-color': 'rgba(206, 17, 38, .05)', }; const toggleStyle = { From 9e453dabffd95e6092d376b352efdf1a364e0c19 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 17 May 2017 11:45:17 +0200 Subject: [PATCH 3/8] Clicked to background overlay dismiss --- packages/react-error-overlay/src/components/overlay.js | 5 +++++ packages/react-error-overlay/src/overlay.js | 4 +++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react-error-overlay/src/components/overlay.js b/packages/react-error-overlay/src/components/overlay.js index d808e597fd5..8959267fe6c 100644 --- a/packages/react-error-overlay/src/components/overlay.js +++ b/packages/react-error-overlay/src/components/overlay.js @@ -32,6 +32,11 @@ function createOverlay( const frameSettings: FrameSetting[] = frames.map(() => ({ compiled: false })); // Create overlay const overlay = document.createElement('div'); + overlay.addEventListener('click', function(event: Event) { + // Clicks to background layer dismiss the popup + // Prevent clicks within the panel from accidentally dismissing + event.stopPropagation(); + }); applyStyles(overlay, overlayStyle); overlay.appendChild(createClose(document, closeCallback)); diff --git a/packages/react-error-overlay/src/overlay.js b/packages/react-error-overlay/src/overlay.js index 3c1207dcc34..8e340e09a82 100644 --- a/packages/react-error-overlay/src/overlay.js +++ b/packages/react-error-overlay/src/overlay.js @@ -79,8 +79,10 @@ function render(name: ?string, message: string, resolvedFrames: StackFrame[]) { }; } if (document.body != null) { - document.body.style.margin = 0; + document.body.style.margin = '0'; document.body.appendChild(overlay); + // Clicks to background overlay should dismiss error popup + (document.body: any).addEventListener('click', unmount); } additionalReference = additional; }; From 540c8c857b62baa7197b7bfd63048a6f15fc2ec0 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 17 May 2017 14:35:12 +0200 Subject: [PATCH 4/8] Tidied up styles tobe more mobile Safari friendly --- .../src/components/overlay.js | 20 +++--- packages/react-error-overlay/src/overlay.js | 8 ++- packages/react-error-overlay/src/styles.js | 61 +++++++++---------- 3 files changed, 44 insertions(+), 45 deletions(-) diff --git a/packages/react-error-overlay/src/components/overlay.js b/packages/react-error-overlay/src/components/overlay.js index 8959267fe6c..c61053d9b58 100644 --- a/packages/react-error-overlay/src/components/overlay.js +++ b/packages/react-error-overlay/src/components/overlay.js @@ -1,7 +1,7 @@ /* @flow */ import { applyStyles } from '../utils/dom/css'; import { - craContainer, + containerStyle, overlayStyle, headerStyle, additionalStyle, @@ -32,19 +32,13 @@ function createOverlay( const frameSettings: FrameSetting[] = frames.map(() => ({ compiled: false })); // Create overlay const overlay = document.createElement('div'); - overlay.addEventListener('click', function(event: Event) { - // Clicks to background layer dismiss the popup - // Prevent clicks within the panel from accidentally dismissing - event.stopPropagation(); - }); applyStyles(overlay, overlayStyle); - overlay.appendChild(createClose(document, closeCallback)); // Create container const container = document.createElement('div'); - applyStyles(container, craContainer); - container.className = 'cra-container'; + applyStyles(container, containerStyle); overlay.appendChild(container); + container.appendChild(createClose(document, closeCallback)); // Create additional const additional = document.createElement('div'); @@ -90,6 +84,14 @@ function createOverlay( // Show message container.appendChild(createFooter(document)); + // Clicks to background overlay should dismiss error popup. + overlay.addEventListener('click', closeCallback); + + // Clicks within the popup should not dismiss it. + container.addEventListener('click', function(event: Event) { + event.stopPropagation(); + }); + return { overlay, additional, diff --git a/packages/react-error-overlay/src/overlay.js b/packages/react-error-overlay/src/overlay.js index 8e340e09a82..cfcd1182911 100644 --- a/packages/react-error-overlay/src/overlay.js +++ b/packages/react-error-overlay/src/overlay.js @@ -80,9 +80,11 @@ function render(name: ?string, message: string, resolvedFrames: StackFrame[]) { } if (document.body != null) { document.body.style.margin = '0'; - document.body.appendChild(overlay); - // Clicks to background overlay should dismiss error popup - (document.body: any).addEventListener('click', unmount); + // Keep popup within body boundaries for iOS Safari + // $FlowFixMe + document.body.style['max-width'] = '100vw'; + + (document.body: any).appendChild(overlay); } additionalReference = additional; }; diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js index c4ae5d254f6..f43552363c5 100644 --- a/packages/react-error-overlay/src/styles.js +++ b/packages/react-error-overlay/src/styles.js @@ -7,52 +7,46 @@ const black = '#293238', white = '#ffffff'; const iframeStyle = { - 'background-color': 'rgba(0,0,0,.5)', position: 'fixed', - top: '1em', - left: '1em', - bottom: '1em', - right: '1em', - width: 'calc(100% - 2em)', - height: 'calc(100% - 2em)', + top: '0', + left: '0', + width: '100%', + height: '100%', border: 'none', - 'border-radius': '3px', - 'box-shadow': '0 0 6px 0 rgba(0, 0, 0, 0.5)', 'z-index': 1337, }; const overlayStyle = { - position: 'absolute', - top: '0.5rem', - left: '50%', - 'margin-left': '0', - 'margin-right': '-50%', - transform: 'translate(-50%, 0)', - display: 'inline-block', - margin: '0.5rem', - 'max-height': 'calc(100% - 1rem)', - 'max-width': 'calc(100% - 1rem)', + width: '100%', + height: '100%', + 'box-sizing': 'border-box', + 'background-color': 'rgba(0,0,0,.5)', + padding: '0.5rem', + 'text-align': 'center', +}; + +const containerStyle = { + position: 'relative', + display: 'inline-flex', + 'flex-direction': 'column', + 'max-height': '100%', + 'max-width': '100%', + 'overflow-x': 'hidden', + 'overflow-y': 'auto', + padding: '0.5rem', 'box-sizing': 'border-box', - padding: '0 1rem', + 'text-align': 'start', 'font-family': 'Consolas, Menlo, monospace', 'font-size': '10px', - color: black, 'white-space': 'pre-wrap', - overflow: 'auto', - 'overflow-x': 'hidden', 'word-break': 'break-word', 'line-height': 1.5, 'background-color': white, + color: black, 'border-radius': '0.25rem', 'box-shadow': '0 0 10px 0 rgba(0, 0, 0, 0.15)', }; -const craContainer = { - display: 'flex', - 'flex-direction': 'column', - 'max-height': '100%', -}; - const hintsStyle = { color: darkGray, }; @@ -83,8 +77,8 @@ const headerStyle = { 'font-family': 'sans-serif', color: red, 'white-space': 'pre-wrap', + margin: '0.75rem 2rem 0 0', // Prevent overlap with close button flex: '0 0 auto', - margin: '0.75rem 0 0', }; const functionNameStyle = { @@ -102,8 +96,9 @@ const anchorStyle = { const traceStyle = { 'font-size': '1em', + flex: '0 1 auto', + 'min-height': '0px', overflow: 'auto', - flex: '1 1 auto', }; const depStyle = {}; @@ -175,13 +170,13 @@ const groupElemRight = Object.assign({}, _groupElemStyle, { const footerStyle = { 'font-family': 'sans-serif', color: darkGray, - flex: '0 0 auto', 'margin-top': '0.5rem', 'margin-bottom': '1rem', + flex: '0 0 auto', }; export { - craContainer, + containerStyle, iframeStyle, overlayStyle, hintsStyle, From 531a595e8c0acf298a4498f5c98808d00711fa06 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 17 May 2017 14:53:50 +0200 Subject: [PATCH 5/8] Re-enabled pre-wrap --- packages/react-dev-utils/webpackHotDevClient.js | 2 +- packages/react-error-overlay/src/styles.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js index 5a19cf06328..358be53eafd 100644 --- a/packages/react-dev-utils/webpackHotDevClient.js +++ b/packages/react-dev-utils/webpackHotDevClient.js @@ -62,7 +62,7 @@ function addOverlayDivTo(iframe) { div.style.fontSize = '10px'; div.style.padding = '2rem'; div.style.lineHeight = '1.2'; - div.style.whiteSpace = 'pre'; + div.style.whiteSpace = 'pre-wrap'; div.style.overflow = 'auto'; iframe.contentDocument.body.appendChild(div); return div; diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js index f43552363c5..9c7dc8c975d 100644 --- a/packages/react-error-overlay/src/styles.js +++ b/packages/react-error-overlay/src/styles.js @@ -122,7 +122,7 @@ const preStyle = { 'margin-top': '0.5em', 'margin-bottom': '0.5em', 'overflow-x': 'auto', - 'white-space': 'pre', + 'white-space': 'pre-wrap', 'border-radius': '0.25rem', 'background-color': 'rgba(206, 17, 38, .05)', }; From 7004be039d9f7caae8657d9d2321b7844df28e5d Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 17 May 2017 16:26:44 +0200 Subject: [PATCH 6/8] Margin fixes --- packages/react-error-overlay/src/styles.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js index 9c7dc8c975d..c951a6ed3f8 100644 --- a/packages/react-error-overlay/src/styles.js +++ b/packages/react-error-overlay/src/styles.js @@ -77,7 +77,7 @@ const headerStyle = { 'font-family': 'sans-serif', color: red, 'white-space': 'pre-wrap', - margin: '0.75rem 2rem 0 0', // Prevent overlap with close button + margin: '0.25rem 2rem 0 0', // Prevent overlap with close button flex: '0 0 auto', }; @@ -171,7 +171,6 @@ const footerStyle = { 'font-family': 'sans-serif', color: darkGray, 'margin-top': '0.5rem', - 'margin-bottom': '1rem', flex: '0 0 auto', }; From 7936dde37050761af4fbb8e08078c2c517361419 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 17 May 2017 18:39:13 +0200 Subject: [PATCH 7/8] Base font-size 10 -> 11px --- packages/react-error-overlay/src/styles.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js index c951a6ed3f8..ac13777991c 100644 --- a/packages/react-error-overlay/src/styles.js +++ b/packages/react-error-overlay/src/styles.js @@ -37,7 +37,7 @@ const containerStyle = { 'box-sizing': 'border-box', 'text-align': 'start', 'font-family': 'Consolas, Menlo, monospace', - 'font-size': '10px', + 'font-size': '11px', 'white-space': 'pre-wrap', 'word-break': 'break-word', 'line-height': 1.5, @@ -77,7 +77,7 @@ const headerStyle = { 'font-family': 'sans-serif', color: red, 'white-space': 'pre-wrap', - margin: '0.25rem 2rem 0 0', // Prevent overlap with close button + margin: '0.75rem 2rem 0 0', // Prevent overlap with close button flex: '0 0 auto', }; From f8a2a5e3184053ddf8dfa6da4ca540cad4fc0fff Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 17 May 2017 22:59:37 +0200 Subject: [PATCH 8/8] Error overlay is full-screen now based on feedback --- .../react-error-overlay/src/components/overlay.js | 8 -------- packages/react-error-overlay/src/styles.js | 13 ++++++------- 2 files changed, 6 insertions(+), 15 deletions(-) diff --git a/packages/react-error-overlay/src/components/overlay.js b/packages/react-error-overlay/src/components/overlay.js index c61053d9b58..85e3d03cd5b 100644 --- a/packages/react-error-overlay/src/components/overlay.js +++ b/packages/react-error-overlay/src/components/overlay.js @@ -84,14 +84,6 @@ function createOverlay( // Show message container.appendChild(createFooter(document)); - // Clicks to background overlay should dismiss error popup. - overlay.addEventListener('click', closeCallback); - - // Clicks within the popup should not dismiss it. - container.addEventListener('click', function(event: Event) { - event.stopPropagation(); - }); - return { overlay, additional, diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js index ac13777991c..6b31ee17e8e 100644 --- a/packages/react-error-overlay/src/styles.js +++ b/packages/react-error-overlay/src/styles.js @@ -20,16 +20,16 @@ const overlayStyle = { width: '100%', height: '100%', 'box-sizing': 'border-box', - 'background-color': 'rgba(0,0,0,.5)', - padding: '0.5rem', 'text-align': 'center', + 'background-color': white, }; const containerStyle = { position: 'relative', display: 'inline-flex', 'flex-direction': 'column', - 'max-height': '100%', + height: '100%', + width: '1024px', 'max-width': '100%', 'overflow-x': 'hidden', 'overflow-y': 'auto', @@ -41,10 +41,7 @@ const containerStyle = { 'white-space': 'pre-wrap', 'word-break': 'break-word', 'line-height': 1.5, - 'background-color': white, color: black, - 'border-radius': '0.25rem', - 'box-shadow': '0 0 10px 0 rgba(0, 0, 0, 0.15)', }; const hintsStyle = { @@ -73,12 +70,14 @@ const additionalStyle = { }; const headerStyle = { - 'font-size': '1.7em', + 'font-size': '2em', 'font-family': 'sans-serif', color: red, 'white-space': 'pre-wrap', margin: '0.75rem 2rem 0 0', // Prevent overlap with close button flex: '0 0 auto', + 'max-height': '35%', + overflow: 'auto', }; const functionNameStyle = {