Clean sandbox editor header

Author: CompuIves

packages/app/src/app/pages/Sandbox/Editor/Header/Action/elements.js

@@ -11,28 +11,26 @@ const blink = keyframes`
 `;
 
 const styles = props =>
-  `
-  ${props.blink &&
-    css`
-      animation: ${blink} 1s infinite;
-      font-weight: 600;
-    `}
-
-  display: flex !important;
-  transition: 0.3s ease all;
-  flex-direction: row;
-  align-items: center;
-  vertical-align: middle;
-  font-size: .875rem;
-  line-height: 1;
-  height: 100%;
-  color: ${props.theme.light ? '#636363' : 'rgba(255, 255, 255, 0.7)'};
-  cursor: pointer;
-  box-sizing: inherit;
-  border-bottom: 2px solid transparent;
-  z-index: 1;
-  ${
-    props.highlight
+  css`
+    ${props.blink &&
+      css`
+        animation: ${blink} 1s infinite;
+        font-weight: 600;
+      `};
+    display: flex !important;
+    transition: 0.3s ease all;
+    flex-direction: row;
+    align-items: center;
+    vertical-align: middle;
+    font-size: 0.875rem;
+    line-height: 1;
+    height: 100%;
+    color: ${props.theme.light ? '#636363' : 'rgba(255, 255, 255, 0.7)'};
+    cursor: pointer;
+    box-sizing: inherit;
+    border-bottom: 2px solid transparent;
+    z-index: 1;
+    ${props.highlight
       ? css`
           background-color: ${props.theme.secondary.darken(0.1)()};
           color: rgba(255, 255, 255, 0.7);
@@ -50,9 +48,8 @@ const styles = props =>
               ? 'transparent'
               : props.theme.secondary()};
           }
-        `
-  }
-`;
+        `};
+  `;
 
 export const Title = styled.span`
   padding-left: 0.5rem;

packages/app/src/app/pages/Sandbox/Editor/Header/Logo/elements.js

@@ -17,17 +17,6 @@ export const Container = styled.a`
   text-decoration: none;
 `;
 
-export const Title = styled.span`
-  font-size: 1rem;
-  font-weight: 400;
-  margin: 0;
-  margin-left: calc(1rem + 1px);
-  padding-left: 1rem;
-  border-left: 1px solid
-    ${props => props.theme['panel.border'] || 'rgba(255, 255, 255, 0.3)'};
-  color: ${props => props.theme['editor.foreground'] || 'white'};
-`;
-
 export const GithubContainer = styled.a`
   position: absolute;
   right: 1rem;

packages/app/src/app/pages/Sandbox/Editor/Header/Logo/index.js

@@ -2,13 +2,12 @@ import * as React from 'react';
 
 import LogoIcon from 'common/components/Logo';
 
-import { Container, Title } from './elements';
+import { Container } from './elements';
 
 export default () => (
   <Container id="logo" href="/">
     <div style={{ position: 'relative', display: 'flex' }}>
       <LogoIcon title="CodeSandbox" width={30} height={30} />
     </div>
-    <Title>Sandbox Editor</Title>
   </Container>
 );