Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 62ba2f9

Browse files
SaraVieiraSaraVieira
committed
Revert "Update preview header (codesandbox#3209)"
This reverts commit aee7b72.
1 parent aee7b72 commit 62ba2f9

File tree

18 files changed

+177
-286
lines changed

18 files changed

+177
-286
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ export const Tab = styled.div<{ active: boolean; isOver: boolean }>`
3434
props.active
3535
? css`
3636
background-color: ${props.theme['tab.activeBackground'] ||
37-
props.theme.background4};
38-
37+
props.theme['editor.background'] ||
38+
'transparent'};
3939
color: ${props.theme['tab.activeForeground'] ||
4040
(props.theme.light ? '#000000' : '#FFFFFF')};
4141
`

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

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,4 @@
11
import styled, { css } from 'styled-components';
2-
import Color from 'color';
3-
4-
const getColor = (light, color) =>
5-
light
6-
? Color(color)
7-
.darken(0.2)
8-
.hexString()
9-
: Color(color)
10-
.lighten(0.2)
11-
.hexString();
122

133
const getCursor = ({ primary, open }) => {
144
if (primary) {
@@ -34,12 +24,9 @@ export const Header = styled.div<{ primary: boolean; open: boolean }>`
3424
font-size: 0.75rem;
3525
flex: 0 0 ${props => (props.primary ? 35 : 28)}px;
3626
background-color: ${props =>
37-
getColor(
38-
props.theme.light,
39-
props.theme['editor.background'] ||
40-
props.theme['input.background'] ||
41-
props.theme.background4
42-
)};
27+
props.theme['editorGroupHeader.tabsBackground'] ||
28+
props.theme['editor.background'] ||
29+
props.theme.background4};
4330
4431
${props =>
4532
!props.primary &&

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

Lines changed: 3 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,4 @@
11
import styled from 'styled-components';
2-
import Color from 'color';
3-
import { darker } from '../Navigator/elements';
4-
5-
const getColor = (light: boolean, color: string) =>
6-
light
7-
? Color(color)
8-
.darken(0.2)
9-
.hexString()
10-
: Color(color)
11-
.lighten(0.2)
12-
.hexString();
132

143
export const Container = styled.div`
154
position: relative;
@@ -20,29 +9,17 @@ export const Container = styled.div`
209

2110
export const InputContainer = styled.div`
2211
input {
23-
border-radius: 2px;
12+
border-radius: 4px;
2413
outline: none;
14+
/* border: 1px solid #ccc; */
2515
border: 0px solid transparent;
2616
padding: 0.2rem 0.5rem;
2717
color: black;
2818
width: 100%;
29-
height: 26px;
30-
font-size: 13px;
3119
color: ${props =>
3220
props.theme['input.foreground'] || 'rgba(255, 255, 255, 0.8)'};
3321
box-sizing: border-box;
34-
border: 1px solid
35-
${props =>
36-
darker(
37-
props.theme.light,
38-
props.theme['editor.background'] || props.theme.background()
39-
)};
4022
background-color: ${props =>
41-
getColor(
42-
props.theme.light,
43-
props.theme['input.background'] ||
44-
props.theme['editor.background'] ||
45-
props.theme.background4
46-
)};
23+
props.theme['input.background'] || props.theme.background4};
4724
}
4825
`;

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import IconBase from 'react-icons/lib/IconBase';
3+
4+
export default props => (
5+
<IconBase
6+
width="1em"
7+
height="1em"
8+
viewBox="0 0 12 12"
9+
version="1.1"
10+
xmlnsXlink="http://www.w3.org/1999/xlink"
11+
{...props}
12+
>
13+
<path
14+
d="M1.50001 0H0L1.43051e-06 6.90909C1.43051e-06 7.50909 0.49091 8 1.09091 8L8.5 8V6.5H1.50001L1.50001 0Z"
15+
transform="translate(0 4)"
16+
fill="currentColor"
17+
/>
18+
<rect
19+
width="9.5"
20+
height="9.5"
21+
rx="1"
22+
transform="translate(2.5)"
23+
fill="currentColor"
24+
/>
25+
</IconBase>
26+
);

‎packages/common/src/components/Preview/Navigator/HorizontalAlign.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import IconBase from 'react-icons/lib/IconBase';
3+
4+
export default props => (
5+
<IconBase
6+
width="1em"
7+
height="1em"
8+
viewBox="0 0 12 12"
9+
version="1.1"
10+
xmlnsXlink="http://www.w3.org/1999/xlink"
11+
{...props}
12+
>
13+
<path
14+
d="M1.5 1.5V7.5H10.5V1.5H1.5ZM1 0H11C11.5523 0 12 0.447715 12 1V11C12 11.5523 11.5523 12 11 12H1C0.447715 12 0 11.5523 0 11V1C0 0.447715 0.447715 0 1 0Z"
15+
fill="currentColor"
16+
/>
17+
</IconBase>
18+
);

‎packages/common/src/components/Preview/Navigator/VerticalAlign.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import IconBase from 'react-icons/lib/IconBase';
3+
4+
export default props => (
5+
<IconBase
6+
width="1em"
7+
height="1em"
8+
viewBox="0 0 12 12"
9+
version="1.1"
10+
xmlnsXlink="http://www.w3.org/1999/xlink"
11+
{...props}
12+
>
13+
<path
14+
d="M5.25 1.5V10.5H10.5V1.5H5.25ZM1 9.53674e-07H11C11.5523 9.53674e-07 12 0.447716 12 1V11C12 11.5523 11.5523 12 11 12H1C0.447715 12 0 11.5523 0 11V1C0 0.447716 0.447715 9.53674e-07 1 9.53674e-07Z"
15+
transform="translate(12 12) rotate(-180)"
16+
fill="currentColor"
17+
/>
18+
</IconBase>
19+
);

‎packages/common/src/components/Preview/Navigator/elements.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import styled, { css } from 'styled-components';
2+
3+
export const Container = styled.div`
4+
display: flex;
5+
background-color: ${props =>
6+
props.theme['editor.background'] || props.theme.background()};
7+
padding: 0.5rem;
8+
align-items: center;
9+
line-height: 1;
10+
/* box-shadow: 0 1px 3px #ddd; */
11+
height: 35px;
12+
min-height: 35px;
13+
box-sizing: border-box;
14+
z-index: 2;
15+
`;
16+
17+
export const Icons = styled.div`
18+
display: flex;
19+
`;
20+
21+
export const Icon = styled.button`
22+
display: inline-block;
23+
border: none;
24+
background-color: transparent;
25+
color: ${props =>
26+
props.disabled
27+
? props.theme.light
28+
? 'rgba(0, 0, 0, 0.3)'
29+
: 'rgba(255, 255, 255, 0.3)'
30+
: props.theme.light
31+
? 'rgba(0, 0, 0, 0.5)'
32+
: 'rgba(255, 255, 255, 0.6)'};
33+
font-size: 1.5rem;
34+
line-height: 0.5;
35+
margin: 0 0.1rem;
36+
vertical-align: middle;
37+
text-align: center;
38+
padding: 0;
39+
outline: none;
40+
41+
${props =>
42+
!props.disabled &&
43+
`
44+
&:hover {
45+
cursor: pointer;
46+
color: ${
47+
props.theme.light ? 'rgba(0, 0, 0, 1)' : 'rgba(255, 255, 255, 1)'
48+
};
49+
}`};
50+
51+
${props =>
52+
props.selected &&
53+
css`
54+
color: ${props.theme.templateColor || props.theme.secondary};
55+
`};
56+
`;
57+
58+
export const AddressBarContainer = styled.div`
59+
width: 100%;
60+
box-sizing: border-box;
61+
margin: 0 0.5rem;
62+
`;
63+
64+
export const SwitchContainer = styled.div`
65+
flex: 0 0 3.5rem;
66+
`;

‎packages/common/src/components/Preview/Navigator/elements.ts

Lines changed: 0 additions & 86 deletions
This file was deleted.

‎packages/common/src/components/Preview/Navigator/external-open.svg

Lines changed: 4 additions & 0 deletions
Loading

‎packages/common/src/components/Preview/Navigator/horizontal-align.svg

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)