From 02968ecdb2ad5dcb26372dd3d09a6b35d85dcca9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Thu, 18 May 2017 14:33:18 +0200
Subject: [PATCH] Cleaned up next/prev error arrow styles; arrows wrap around
when clicked now (#2210)
---
packages/react-error-overlay/src/overlay.js | 10 +++++--
packages/react-error-overlay/src/styles.js | 31 +++++++++------------
2 files changed, 20 insertions(+), 21 deletions(-)
diff --git a/packages/react-error-overlay/src/overlay.js b/packages/react-error-overlay/src/overlay.js
index cfcd11829..9f3587a86 100644
--- 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
index 4ea0358ce..88213c3a0 100644
--- 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,7 +124,7 @@ const omittedFramesExpandedStyle = {
'margin-bottom': '0.6em',
};
-const primaryPreStyle = {
+const _preStyle = {
display: 'block',
padding: '0.5em',
'margin-top': '0.5em',
@@ -130,18 +132,13 @@ const primaryPreStyle = {
'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,11 +159,10 @@ 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',
};
@@ -174,13 +170,12 @@ const _groupElemStyle = {
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 = {
--
GitLab