Skip to content

Commit

Permalink
Cleaned up next/prev error arrow styles; arrows wrap around when clic…
Browse files Browse the repository at this point in the history
…ked now (facebook#2210)
  • Loading branch information
bvaughn authored and romaindso committed Jul 10, 2017
1 parent cb16392 commit 82692e5
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 21 deletions.
10 changes: 7 additions & 3 deletions packages/react-error-overlay/src/overlay.js
Original file line number Diff line number Diff line change
Expand Up @@ -110,10 +110,14 @@ function renderErrorByIndex(index: number) {
}

function switchError(offset) {
const nextView = currReferenceIndex + offset;
if (nextView < 0 || nextView >= errorReferences.length) {
return;
let nextView = currReferenceIndex + offset;

if (nextView < 0) {
nextView = errorReferences.length - 1;
} else if (nextView >= errorReferences.length) {
nextView = 0;
}

renderErrorByIndex(nextView);
}

Expand Down
31 changes: 13 additions & 18 deletions packages/react-error-overlay/src/styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@
const black = '#293238',
darkGray = '#878e91',
red = '#ce1126',
redTransparent = 'rgba(206, 17, 38, 0.05)',
lightRed = '#fccfcf',
yellow = '#fbf5b4',
yellowTransparent = 'rgba(251, 245, 180, 0.3)',
white = '#ffffff';

const iframeStyle = {
Expand Down Expand Up @@ -122,26 +124,21 @@ const omittedFramesExpandedStyle = {
'margin-bottom': '0.6em',
};

const primaryPreStyle = {
const _preStyle = {
display: 'block',
padding: '0.5em',
'margin-top': '0.5em',
'margin-bottom': '0.5em',
'overflow-x': 'auto',
'white-space': 'pre-wrap',
'border-radius': '0.25rem',
'background-color': 'rgba(206, 17, 38, .05)',
};
const secondaryPreStyle = {
display: 'block',
padding: '0.5em',
'margin-top': '0.5em',
'margin-bottom': '0.5em',
'overflow-x': 'auto',
'white-space': 'pre-wrap',
'border-radius': '0.25rem',
'background-color': 'rgba(251, 245, 180,.3)',
};
const primaryPreStyle = Object.assign({}, _preStyle, {
'background-color': redTransparent,
});
const secondaryPreStyle = Object.assign({}, _preStyle, {
'background-color': yellowTransparent,
});

const toggleStyle = {
'margin-bottom': '1.5em',
Expand All @@ -162,25 +159,23 @@ const groupStyle = {
};

const _groupElemStyle = {
'background-color': 'inherit',
'border-color': '#ddd',
'border-width': '1px',
'background-color': redTransparent,
color: red,
border: 'none',
'border-radius': '4px',
'border-style': 'solid',
padding: '3px 6px',
cursor: 'pointer',
};

const groupElemLeft = Object.assign({}, _groupElemStyle, {
'border-top-right-radius': '0px',
'border-bottom-right-radius': '0px',
'margin-right': '0px',
'margin-right': '1px',
});

const groupElemRight = Object.assign({}, _groupElemStyle, {
'border-top-left-radius': '0px',
'border-bottom-left-radius': '0px',
'margin-right': '-1px',
});

const footerStyle = {
Expand Down

0 comments on commit 82692e5

Please sign in to comment.