diff --git a/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap b/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap
index 4cdeab346..f87b77bf1 100644
--- a/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap
+++ b/src/__tests__/ui/box/__snapshots__/chrome.test.jsx.snap
@@ -23,7 +23,7 @@ exports[`Chrome can dislay all global messages together 1`] = `
className="auth0-lock-content-body-wrapper"
style={
Object {
- "marginTop": 0,
+ "marginTop": 200,
}
}
>
@@ -182,7 +182,7 @@ exports[`Chrome correctly sets the header size when the "signin ready" event is
className="auth0-lock-content-body-wrapper"
style={
Object {
- "marginTop": 0,
+ "marginTop": 200,
}
}
>
@@ -298,7 +298,7 @@ exports[`Chrome correctly sets the header size when the "signin ready" event is
className="auth0-lock-content-body-wrapper"
style={
Object {
- "marginTop": 200,
+ "marginTop": 250,
}
}
>
@@ -414,7 +414,7 @@ exports[`Chrome correctly sets the header size when the "signup ready" event is
className="auth0-lock-content-body-wrapper"
style={
Object {
- "marginTop": 0,
+ "marginTop": 200,
}
}
>
@@ -530,7 +530,7 @@ exports[`Chrome correctly sets the header size when the "signup ready" event is
className="auth0-lock-content-body-wrapper"
style={
Object {
- "marginTop": 200,
+ "marginTop": 250,
}
}
>
@@ -646,7 +646,7 @@ exports[`Chrome renders correctly when there is a global information message 1`]
className="auth0-lock-content-body-wrapper"
style={
Object {
- "marginTop": 0,
+ "marginTop": 200,
}
}
>
@@ -777,7 +777,7 @@ exports[`Chrome renders correctly when there is a global message 1`] = `
className="auth0-lock-content-body-wrapper"
style={
Object {
- "marginTop": 0,
+ "marginTop": 200,
}
}
>
@@ -908,7 +908,7 @@ exports[`Chrome renders correctly when there is a global success message 1`] = `
className="auth0-lock-content-body-wrapper"
style={
Object {
- "marginTop": 0,
+ "marginTop": 200,
}
}
>
@@ -1039,7 +1039,7 @@ exports[`Chrome renders correctly with basic props 1`] = `
className="auth0-lock-content-body-wrapper"
style={
Object {
- "marginTop": 0,
+ "marginTop": 200,
}
}
>
diff --git a/src/__tests__/ui/box/chrome.test.jsx b/src/__tests__/ui/box/chrome.test.jsx
index 14a1413f2..78788f623 100644
--- a/src/__tests__/ui/box/chrome.test.jsx
+++ b/src/__tests__/ui/box/chrome.test.jsx
@@ -59,12 +59,13 @@ describe('Chrome', () => {
const component = create();
const instance = component.getInstance();
- expect(instance.state.headerHeight).toBe(0);
+ expect(instance.state.headerHeight).toBe(200);
expect(component).toMatchSnapshot();
+ Chrome.prototype.getHeaderSize.mockReturnValue(250);
triggerEvent('signin ready');
- expect(instance.state.headerHeight).toBe(200);
+ expect(instance.state.headerHeight).toBe(250);
expect(component).toMatchSnapshot();
});
@@ -72,12 +73,13 @@ describe('Chrome', () => {
const component = create();
const instance = component.getInstance();
- expect(instance.state.headerHeight).toBe(0);
+ expect(instance.state.headerHeight).toBe(200);
expect(component).toMatchSnapshot();
+ Chrome.prototype.getHeaderSize.mockReturnValue(250);
triggerEvent('signup ready');
- expect(instance.state.headerHeight).toBe(200);
+ expect(instance.state.headerHeight).toBe(250);
expect(component).toMatchSnapshot();
});
diff --git a/src/ui/box/chrome.jsx b/src/ui/box/chrome.jsx
index 1ade990d3..1e08c782c 100644
--- a/src/ui/box/chrome.jsx
+++ b/src/ui/box/chrome.jsx
@@ -87,6 +87,7 @@ export default class Chrome extends React.Component {
this.state = { moving: false, reverse: false, headerHeight: 0 };
}
+ // eslint-disable-next-line react/no-deprecated
componentWillReceiveProps(nextProps) {
const { auxiliaryPane, showSubmitButton } = this.props;
const { delayingShowSubmitButton } = this.state;
@@ -151,6 +152,7 @@ export default class Chrome extends React.Component {
l.handleEvent(m, 'signup ready', fn);
l.handleEvent(m, 'signin ready', fn);
+ fn();
}
onWillSlide() {
diff --git a/src/ui/box/container.jsx b/src/ui/box/container.jsx
index 899f73be0..9d9a7b05e 100644
--- a/src/ui/box/container.jsx
+++ b/src/ui/box/container.jsx
@@ -31,7 +31,7 @@ const badgeSvg = (
const BottomBadge = ({ link }) => (
-
+
Protected with {badgeSvg}
diff --git a/src/ui/box/multisize_slide.js b/src/ui/box/multisize_slide.js
index f76a9c941..9f2b1f676 100644
--- a/src/ui/box/multisize_slide.js
+++ b/src/ui/box/multisize_slide.js
@@ -9,6 +9,7 @@ export default class Slider extends React.Component {
this.state = { children: { current: props.children } };
}
+ // eslint-disable-next-line react/no-deprecated
componentWillReceiveProps(nextProps) {
// TODO: take a prop to identify what are we rendering instead of
// infering it from children keys so we can accept more than one