Update preview header (codesandbox#3209)

* add icons

* add icons

* swap colors

* update design

* border fix

* move to ts

* make naming better

* fork of sara's PR (codesandbox#3215)


Co-authored-by: Siddharth Kshetrapal <[email protected]>

Author: SaraVieira

packages/app/src/app/components/Preview/DevTools/Tabs/Tab/elements.ts

@@ -34,8 +34,8 @@ export const Tab = styled.div<{ active: boolean; isOver: boolean }>`
     props.active
       ? css`
           background-color: ${props.theme['tab.activeBackground'] ||
-            props.theme['editor.background'] ||
-            'transparent'};
+            props.theme.background4};
+
           color: ${props.theme['tab.activeForeground'] ||
             (props.theme.light ? '#000000' : '#FFFFFF')};
         `

packages/app/src/app/components/Preview/DevTools/elements.ts

@@ -1,4 +1,14 @@
 import styled, { css } from 'styled-components';
+import Color from 'color';
+
+const getColor = (light, color) =>
+  light
+    ? Color(color)
+        .darken(0.2)
+        .hexString()
+    : Color(color)
+        .lighten(0.2)
+        .hexString();
 
 const getCursor = ({ primary, open }) => {
   if (primary) {
@@ -24,9 +34,12 @@ export const Header = styled.div<{ primary: boolean; open: boolean }>`
   font-size: 0.75rem;
   flex: 0 0 ${props => (props.primary ? 35 : 28)}px;
   background-color: ${props =>
-    props.theme['editorGroupHeader.tabsBackground'] ||
-    props.theme['editor.background'] ||
-    props.theme.background4};
+    getColor(
+      props.theme.light,
+      props.theme['editor.background'] ||
+        props.theme['input.background'] ||
+        props.theme.background4
+    )};
 
   ${props =>
     !props.primary &&

packages/common/src/components/Preview/AddressBar/elements.ts

@@ -1,4 +1,15 @@
 import styled from 'styled-components';
+import Color from 'color';
+import { darker } from '../Navigator/elements';
+
+const getColor = (light: boolean, color: string) =>
+  light
+    ? Color(color)
+        .darken(0.2)
+        .hexString()
+    : Color(color)
+        .lighten(0.2)
+        .hexString();
 
 export const Container = styled.div`
   position: relative;
@@ -9,17 +20,29 @@ export const Container = styled.div`
 
 export const InputContainer = styled.div`
   input {
-    border-radius: 4px;
+    border-radius: 2px;
     outline: none;
-    /* border: 1px solid #ccc; */
     border: 0px solid transparent;
     padding: 0.2rem 0.5rem;
     color: black;
     width: 100%;
+    height: 26px;
+    font-size: 13px;
     color: ${props =>
       props.theme['input.foreground'] || 'rgba(255, 255, 255, 0.8)'};
     box-sizing: border-box;
+    border: 1px solid
+      ${props =>
+        darker(
+          props.theme.light,
+          props.theme['editor.background'] || props.theme.background()
+        )};
     background-color: ${props =>
-      props.theme['input.background'] || props.theme.background4};
+      getColor(
+        props.theme.light,
+        props.theme['input.background'] ||
+          props.theme['editor.background'] ||
+          props.theme.background4
+      )};
   }
 `;

packages/common/src/components/Preview/Navigator/ExternalOpen.js

@@ -0,0 +1,86 @@
+import styled, { css } from 'styled-components';
+import Color from 'color';
+
+export const darker = (light: boolean, color: string) =>
+  Color(color)
+    .darken(light ? 0.3 : 0.7)
+    .hexString();
+
+export const Container = styled.div`
+  display: flex;
+  background-color: ${props =>
+    props.theme['tab.activeBackground'] || props.theme.background4};
+  padding: 0.25rem;
+  align-items: center;
+  line-height: 1;
+  /* box-shadow: 0 1px 3px #ddd; */
+  height: 35px;
+  min-height: 35px;
+  box-sizing: border-box;
+  z-index: 2;
+`;
+
+export const Icons = styled.div`
+  display: flex;
+`;
+
+export const Icon = styled.button<{ moduleView?: boolean }>`
+  display: inline-block;
+  border: none;
+  background-color: transparent;
+  font-size: 1.5rem;
+  line-height: 0.5;
+  margin: 0 0.25rem;
+  vertical-align: middle;
+  text-align: center;
+  padding: 0;
+  outline: none;
+  cursor: pointer;
+
+${({ moduleView, theme }) =>
+  !moduleView &&
+  css`
+    &:hover svg path,
+    &:hover svg rect {
+      fill: ${theme.light ? 'black' : 'white'};
+    }
+  `}
+
+  /* // TODO: Replace with new theme */
+${({ moduleView, theme }) =>
+  moduleView &&
+  css`
+    ${theme.light
+      ? css`
+          svg rect[fill='#E6E6E6'] {
+            fill: #343434;
+          }
+          svg rect[fill='#343434'] {
+            fill: #e6e6e6;
+          }
+          &:hover svg rect {
+            fill: black;
+          }
+        `
+      : css`
+          &:hover svg rect:not([fill='#E6E6E6']) {
+            fill: #757575;
+          }
+        `}
+  `}
+`;
+
+export const IconWithBackground = styled(Icon)`
+  border-radius: 2px;
+  background-color: ${({ theme }) =>
+    theme['editor.background'] || theme.background()};
+  border: 1px solid
+    ${({ theme }) =>
+      darker(theme.light, theme['editor.background'] || theme.background())};
+`;
+
+export const AddressBarContainer = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0 0.25rem;
+`;