Skip to content

Commit 326ba70

Browse files
author
Ives van Hoorne
committed
Deployment modal
1 parent 77c89b9 commit 326ba70

File tree

11 files changed

+504
-105
lines changed

11 files changed

+504
-105
lines changed

‎src/app/components/ZeitLogo.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22
import IconBase from 'react-icons/IconBase';
33

4-
export default () => (
5-
<IconBase viewBox="0 0 226 200">
4+
export default ({ className }: { className: string }) => (
5+
<IconBase className={className} viewBox="0 0 226 200">
66
<defs>
77
<linearGradient
88
x1="196.572434%"

src/app/containers/Preferences/Integrations/Integration.js renamed to src/app/components/user/Integration.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import React from 'react';
22
import styled, { css } from 'styled-components';
33

44
import CrossIcon from 'react-icons/lib/md/clear';
5-
import ChevronIcon from 'react-icons/lib/md/keyboard-arrow-right';
5+
66
import Margin from 'app/components/spacing/Margin';
77
import Tooltip from 'app/components/Tooltip';
8+
import Button from '../buttons/Button';
89

910
const Container = styled.div`
1011
display: inline-flex;
@@ -100,11 +101,9 @@ const DetailInfo = ({ heading, info, signOut, signIn }: DetailProps) => (
100101
</Action>
101102
</Tooltip>
102103
) : (
103-
<Tooltip title="Sign in">
104-
<Action onClick={signIn}>
105-
<ChevronIcon />
106-
</Action>
107-
</Tooltip>
104+
<Button small onClick={signIn}>
105+
Sign in
106+
</Button>
108107
)}
109108
</Details>
110109
);

‎src/app/containers/Deployment/Cube.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from 'react';
2+
import styled, { keyframes } from 'styled-components';
3+
4+
const Cube = styled.div`
5+
position: absolute;
6+
width: ${props => props.size + 1}px;
7+
height: ${props => props.size + 1}px;
8+
9+
* {
10+
position: absolute;
11+
width: ${props => props.size + 1}px;
12+
height: ${props => props.size + 1}px;
13+
}
14+
`;
15+
16+
const rotateAnimation = keyframes`
17+
0% {
18+
transform: rotateX(-37.5deg) rotateY(45deg);
19+
}
20+
100% {
21+
transform: rotateX(-37.5deg) rotateY(405deg);
22+
}
23+
`;
24+
25+
const Sides = styled.div`
26+
${({ noAnimation }) =>
27+
!noAnimation && `animation: ${rotateAnimation} 1s linear infinite;`};
28+
transform-style: preserve-3d;
29+
transform: rotateX(-37.5deg) rotateY(45deg);
30+
31+
* {
32+
box-sizing: border-box;
33+
background-color: rgba(242, 119, 119, 0.5);
34+
border: ${({ size }) => size / 10}px solid white;
35+
}
36+
`;
37+
38+
const Side = styled.div`
39+
transform-origin: 50% 50%;
40+
transform: ${({ rotate }) => rotate} translateZ(${({ size }) => size / 2}px);
41+
`;
42+
43+
type Props = {
44+
size: number,
45+
className: string,
46+
noAnimation: ?boolean,
47+
};
48+
49+
export default ({ size = 150, noAnimation, className }: Props) => (
50+
<Cube className={className} size={size}>
51+
<Sides noAnimation={noAnimation} size={size}>
52+
<Side rotate="rotateX(90deg)" size={size} />
53+
<Side rotate="rotateX(-90deg)" size={size} />
54+
<Side rotate="rotateY(0deg)" size={size} />
55+
<Side rotate="rotateY(-180deg)" size={size} />
56+
<Side rotate="rotateY(-90deg)" size={size} />
57+
<Side rotate="rotateY(90deg)" size={size} />
58+
</Sides>
59+
</Cube>
60+
);

‎src/app/containers/Deployment/OpaqueLogo.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React from 'react';
2+
3+
export default ({
4+
width = 35,
5+
height = 35,
6+
className,
7+
}: {
8+
width: number,
9+
height: number,
10+
className: ?string,
11+
}) => (
12+
<svg
13+
x="0px"
14+
y="0px"
15+
className={className}
16+
width={`${width}px`}
17+
height={`${height}px`}
18+
viewBox="0 0 747 833"
19+
>
20+
<g id="Page-1" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
21+
<g id="Artboard">
22+
<g id="Logo" transform="translate(40.000000, 46.000000)">
23+
<g id="Layer_1">
24+
<polygon
25+
id="Shape"
26+
stroke="#FFFFFF"
27+
strokeWidth={80}
28+
fill="#24282A"
29+
points="0 556.355883 333.160828 740.381929 666.463493 555.739612 666.463493 185.703126 333.231747 0 0 186.524821"
30+
/>
31+
<polyline
32+
id="Shape"
33+
fill="#FFFFFF"
34+
fillRule="nonzero"
35+
points="515.246464 648.658551 515.246464 475.155956 671.608198 388.018462 671.608198 561.778247 515.246464 648.658551"
36+
/>
37+
<polyline
38+
id="Shape"
39+
fill="#FFFFFF"
40+
fillRule="nonzero"
41+
points="159.72664 477.832217 6 392.126938 6 563.537497 159.72664 649.677453 159.72664 477.832217"
42+
/>
43+
<polyline
44+
id="Shape"
45+
fill="#FFFFFF"
46+
fillRule="nonzero"
47+
points="338.843831 175.85264 495.169679 88.6198293 338.910477 1 182.014717 88.9107094 338.843831 175.85264"
48+
/>
49+
</g>
50+
<g
51+
id="Layer_2"
52+
transform="translate(1.000000, 185.000000)"
53+
strokeWidth={80}
54+
stroke="#FFFFFF"
55+
>
56+
<polyline
57+
id="Shape"
58+
points="663.754613 0.703126 330.522866 185.72178 330.522866 555.484641"
59+
/>
60+
<path d="M0.70888075,1.524821 L333.370716,185.584557" id="Shape" />
61+
</g>
62+
</g>
63+
</g>
64+
</g>
65+
</svg>
66+
);

0 commit comments

Comments
 (0)