Cleaned up next/prev error arrow styles; arrows wrap around when clic…

…ked now (facebook#2210)
romaindso · Jul 10, 2017 · 82692e5 · 82692e5
1 parent cb16392
commit 82692e5
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 21 deletions.
diff --git a/packages/react-error-overlay/src/overlay.js b/packages/react-error-overlay/src/overlay.js
@@ -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);
 }
 

diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js
@@ -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 = {
@@ -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',
@@ -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 = {