Fix url change and sign in button

Author: Ives van Hoorne

src/app/components/sandbox/Preview/index.js

@@ -291,9 +291,10 @@ export default class Preview extends React.PureComponent {
   };
 
   commitUrl = (url: string) => {
-    const { history, historyPosition, urlInAddressBar = '' } = this.state;
+    const { history, historyPosition } = this.state;
 
-    if (urlInAddressBar !== url) {
+    const currentHistory = history[historyPosition] || '';
+    if (currentHistory !== url) {
       history.length = historyPosition + 1;
       this.setState({
         history: [...history, url],

src/app/pages/Sandbox/Editor/Content/Header/Action.js

@@ -21,15 +21,17 @@ const styles = props =>
   box-sizing: inherit;
   border-bottom: 2px solid transparent;
   z-index: 1;
-  ${props.highlight ? `
+  ${props.highlight
+    ? `
       background-color: ${props.theme.secondary.darken(0.1)()};
       color: white;
       border-bottom: 1px solid ${props.theme.secondary.darken(0.1)()};
 
       &:hover {
         background-color: ${props.theme.secondary.darken(0.2)()};
       }
-  ` : `
+  `
+    : `
 
     &:hover {
       color: rgba(255,255,255, 1);
@@ -40,29 +42,28 @@ const styles = props =>
 
 const Title = styled.span`
   padding-left: 0.5rem;
-  ${props => !props.unresponsive && `
+  ${props =>
+    !props.unresponsive &&
+    `
   @media (max-width: 1300px) {
     display: none;
-  }`}
+  }`};
 `;
 
-const Action = styled.div`
-  ${styles}
-`;
+const Action = styled.div`${styles};`;
 
 const ActionLink = styled(Link)`
   ${styles}
   text-decoration: none;
 `;
 
-const ActionA = styled.a`
-  ${styles}
-  text-decoration: none;
-`;
+const ActionA = styled.a`${styles} text-decoration: none;`;
 
 const ActionTooltip = styled(Tooltip)`
   ${styles}
-  ${props => props.disabledAction && `
+  ${props =>
+    props.disabledAction &&
+    `
     color: rgba(255,255,255,0.3);
     cursor: default;
 
@@ -114,7 +115,9 @@ export default ({
         <IconContainer onClick={onClick}>
           <Icon />
           {title !== undefined &&
-            <Title unresponsive={unresponsive}>{title}</Title>}
+            <Title unresponsive={unresponsive}>
+              {title}
+            </Title>}
           {moreInfo && <MoreInfoIcon style={{ fontSize: '1.1rem' }} />}
         </IconContainer>
       </ActionTooltip>
@@ -126,7 +129,9 @@ export default ({
         <IconContainer onClick={onClick}>
           <Icon />
           {title !== undefined &&
-            <Title unresponsive={unresponsive}>{title}</Title>}
+            <Title unresponsive={unresponsive}>
+              {title}
+            </Title>}
           {moreInfo && <MoreInfoIcon style={{ fontSize: '1.1rem' }} />}
         </IconContainer>
       </Action>
@@ -140,7 +145,9 @@ export default ({
           <IconContainer>
             <Icon />
             {title !== undefined &&
-              <Title unresponsive={unresponsive}>{title}</Title>}
+              <Title unresponsive={unresponsive}>
+                {title}
+              </Title>}
             {moreInfo && <MoreInfoIcon style={{ fontSize: '1.1rem' }} />}
           </IconContainer>
         </Tooltip>
@@ -155,7 +162,9 @@ export default ({
           <IconContainer>
             <Icon />
             {title !== undefined &&
-              <Title unresponsive={unresponsive}>{title}</Title>}
+              <Title unresponsive={unresponsive}>
+                {title}
+              </Title>}
             {moreInfo && <MoreInfoIcon style={{ fontSize: '1.1rem' }} />}
           </IconContainer>
         </Tooltip>
@@ -168,7 +177,9 @@ export default ({
       <IconContainer>
         <Icon />
         {title !== undefined &&
-          <Title unresponsive={unresponsive}>{title}</Title>}
+          <Title unresponsive={unresponsive}>
+            {title}
+          </Title>}
         {moreInfo && <MoreInfoIcon style={{ fontSize: '1.1rem' }} />}
       </IconContainer>
     </ActionLink>

src/app/pages/Sandbox/Editor/Content/Header/index.js

@@ -235,7 +235,13 @@ export default class Header extends React.PureComponent {
             tooltip="New Sandbox"
             Icon={PlusIcon}
           />
-          <Margin left={1}>
+          <Margin
+            style={{
+              zIndex: 20,
+              height: '100%',
+            }}
+            left={1}
+          >
             {user.jwt
               ? <div style={{ fontSize: '.875rem', margin: '6px 0.5rem' }}>
                   <UserMenu small />