Skip to content

Commit 94b3148

Browse files
MichaelDeBoeySaraVieira
MichaelDeBoey
authored and
SaraVieira
committed
🔨 Switch DashboardChangelog to use useOvermind (codesandbox#3142)
* 🔨 Switch DashboardChangelog to use useOvermind * Fix types
1 parent 55dec38 commit 94b3148

File tree

8 files changed

+170
-136
lines changed

8 files changed

+170
-136
lines changed

packages/app/src/app/pages/common/Modals/Changelog/Dashboard/Helmet.js renamed to packages/app/src/app/pages/common/Modals/Changelog/Dashboard/Helmet.tsx

File renamed without changes.

‎packages/app/src/app/pages/common/Modals/Changelog/Dashboard/elements.ts‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { Button as ButtonBase } from '@codesandbox/common/lib/components/Button';
2+
import styled, { css } from 'styled-components';
3+
4+
export const Button = styled(ButtonBase)`
5+
margin-top: 1rem;
6+
`;
7+
8+
export const ButtonContainer = styled.div`
9+
display: flex;
10+
`;
11+
12+
export const Container = styled.div`
13+
${({ theme }) => css`
14+
background-color: ${theme.background()};
15+
padding: 1.5rem;
16+
`};
17+
`;
18+
19+
export const Date = styled.div`
20+
color: rgba(255, 255, 255, 0.5);
21+
font-size: 0.875rem;
22+
float: right;
23+
width: 100%;
24+
text-align: right;
25+
`;
26+
27+
export const Description = styled.p`
28+
line-height: 1.6;
29+
color: rgba(255, 255, 255, 0.7);
30+
font-weight: 600;
31+
font-size: 0.875rem;
32+
margin-top: 0.5rem;
33+
margin-bottom: 0;
34+
`;
35+
36+
export const Image = styled.img`
37+
background-color: rgba(0, 0, 0, 0.3);
38+
border-radius: 2px;
39+
width: 100%;
40+
`;
41+
42+
export const SubTitle = styled.h2`
43+
font-weight: 600;
44+
color: rgba(255, 255, 255, 0.9);
45+
font-size: 1rem;
46+
margin-top: 1rem;
47+
margin-bottom: 0;
48+
`;
49+
50+
export const Title = styled.h1`
51+
font-weight: 600;
52+
color: rgba(255, 255, 255, 0.9);
53+
font-size: 1.125rem;
54+
margin-top: 0;
55+
margin-bottom: 0;
56+
width: 100%;
57+
text-transform: uppercase;
58+
`;
59+
60+
export const TitleContainer = styled.div`
61+
align-items: center;
62+
display: flex;
63+
margin-bottom: 1rem;
64+
`;
65+
66+
export const White = styled.span`
67+
color: #ffffff;
68+
`;

‎packages/app/src/app/pages/common/Modals/Changelog/Dashboard/index.tsx‎

Lines changed: 63 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,75 @@
11
import React, { FunctionComponent } from 'react';
2-
import CSS from 'csstype';
3-
import { useOvermind } from 'app/overmind';
42
import { Link } from 'react-router-dom';
5-
import theme from '@codesandbox/common/lib/theme';
6-
import { Button } from '@codesandbox/common/lib/components/Button';
7-
8-
// Inline styles because styled-components didn't load the styles
9-
const titleStyles: CSS.Properties = {
10-
fontWeight: 600,
11-
color: 'rgba(255, 255, 255, 0.9)',
12-
fontSize: '1.125rem',
13-
marginTop: 0,
14-
marginBottom: 0,
15-
width: '100%',
16-
textTransform: 'uppercase',
17-
};
18-
19-
const dateStyles: CSS.Properties = {
20-
color: 'rgba(255, 255, 255, 0.5)',
21-
fontSize: '.875rem',
22-
float: 'right',
23-
width: '100%',
24-
textAlign: 'right',
25-
};
26-
27-
const subTitleStyles: CSS.Properties = {
28-
fontWeight: 600,
29-
color: 'rgba(255, 255, 255, .9)',
30-
fontSize: '1rem',
31-
marginTop: '1rem',
32-
marginBottom: 0,
33-
};
343

35-
const descriptionStyles: CSS.Properties = {
36-
lineHeight: 1.6,
37-
color: 'rgba(255, 255, 255, 0.7)',
38-
fontWeight: 600,
39-
fontSize: '.875rem',
40-
marginTop: '.5rem',
41-
marginBottom: 0,
42-
};
4+
import { useOvermind } from 'app/overmind';
435

44-
const W: FunctionComponent = props => (
45-
<span {...props} style={{ color: 'white' }} />
46-
);
6+
import {
7+
Button,
8+
ButtonContainer,
9+
Container,
10+
Date,
11+
Description,
12+
Image,
13+
SubTitle,
14+
Title,
15+
TitleContainer,
16+
White,
17+
} from './elements';
4718

4819
export const DashboardChangelog: FunctionComponent = () => {
4920
const {
5021
actions: { modalClosed },
5122
} = useOvermind();
5223

5324
return (
54-
<div
55-
style={{
56-
padding: '1.5rem',
57-
backgroundColor: theme.background(),
58-
}}
59-
>
60-
<div
61-
style={{
62-
marginBottom: '1rem',
63-
display: 'flex',
64-
alignItems: 'center',
65-
}}
66-
>
67-
<h1 style={titleStyles}>
25+
<Container>
26+
<TitleContainer>
27+
<Title>
6828
What
6929
{"'"}s New
70-
</h1>
71-
<div style={dateStyles}>July 2nd, 2018</div>
72-
</div>
30+
</Title>
31+
32+
<Date>July 2nd, 2018</Date>
33+
</TitleContainer>
7334

74-
<img
35+
<Image
7536
alt="CodeSandbox Announcement"
76-
style={{
77-
width: '100%',
78-
backgroundColor: 'rgba(0, 0, 0, 0.3)',
79-
borderRadius: 2,
80-
}}
8137
src="https://cdn-images-1.medium.com/max/1600/1*wIMw31_Phf1WNEP6zjuTUw.png"
8238
/>
8339

84-
<p style={descriptionStyles}>
40+
<Description>
8541
We
8642
{"'"}
8743
re back with a new update! This update is very focused on{' '}
88-
<W>collaboration</W> and <W>organization</W>. Let
44+
<White>collaboration</White> and <White>organization</White>. Let
8945
{"'"}s take a look!
90-
</p>
46+
</Description>
9147

92-
<h2 style={subTitleStyles}>Dashboard</h2>
93-
<p style={descriptionStyles}>
48+
<SubTitle>Dashboard</SubTitle>
49+
50+
<Description>
9451
You can now manage your sandboxes in your own{' '}
9552
<Link to="/dashboard">dashboard</Link>! You
9653
{"'"}
97-
re able to <W>filter, sort, search, delete, create and update</W>{' '}
98-
multiple sandboxes at the same time. The possibilities are endless!
99-
</p>
100-
101-
<h2 style={subTitleStyles}>Create Teams</h2>
102-
<p style={descriptionStyles}>
103-
An extension to the dashboard is <W>teams</W>! You can now create a team
104-
with unlimited members to share sandboxes for collaboration. All
105-
sandboxes automatically sync using <W>live collaboration</W> between
106-
team members.
107-
</p>
108-
109-
<h2 style={subTitleStyles}>Free CodeSandbox Live</h2>
110-
<p style={descriptionStyles}>
54+
re able to{' '}
55+
<White>filter, sort, search, delete, create and update</White> multiple
56+
sandboxes at the same time. The possibilities are endless!
57+
</Description>
58+
59+
<SubTitle>Create Teams</SubTitle>
60+
61+
<Description>
62+
An extension to the dashboard is <White>teams</White>! You can now
63+
create a team with unlimited members to share sandboxes for
64+
collaboration. All sandboxes automatically sync using{' '}
65+
<White>live collaboration</White> between team members.
66+
</Description>
67+
68+
<SubTitle>Free CodeSandbox Live</SubTitle>
69+
70+
<Description>
11171
Teams is not our only feature that allows for collaboration. We also
112-
have <W>real time collaboration</W> with{' '}
72+
have <White>real time collaboration</White> with{' '}
11373
<Link target="_blank" to="/docs/live">
11474
CodeSandbox Live
11575
</Link>
@@ -120,39 +80,41 @@ export const DashboardChangelog: FunctionComponent = () => {
12080
subscription, but we
12181
{"'"}
12282
re happy to announce that{' '}
123-
<W>CodeSandbox Live is from now on free for everyone</W>!
124-
</p>
83+
<White>CodeSandbox Live is from now on free for everyone</White>!
84+
</Description>
85+
86+
<SubTitle>And More</SubTitle>
12587

126-
<h2 style={subTitleStyles}>And More</h2>
127-
<p style={descriptionStyles}>
88+
<Description>
12889
There
12990
{"'"}s a lot more included in this update! Make sure to check out the
13091
announcement post to find out more about this update.
131-
</p>
92+
</Description>
13293

133-
<div style={{ display: 'flex' }}>
94+
<ButtonContainer>
13495
<Button
135-
style={{ marginTop: '1rem', marginRight: '.25rem' }}
13696
block
137-
small
138-
secondary
13997
onClick={() => modalClosed()}
98+
secondary
99+
small
100+
style={{ marginRight: '.25rem' }}
140101
>
141102
Close
142103
</Button>
143-
{/*
144-
// @ts-ignore */}
104+
105+
{/*
106+
// @ts-ignore */}
145107
<Button
146-
href="/post/announcing-codesandbox-dashboard-teams"
147-
style={{ marginTop: '1rem', marginLeft: '.25rem' }}
148108
block
109+
href="/post/announcing-codesandbox-dashboard-teams"
110+
rel="noreferrer noopener"
149111
small
112+
style={{ marginLeft: '.25rem' }}
150113
target="_blank"
151-
rel="noreferrer noopener"
152114
>
153115
View Announcement
154116
</Button>
155-
</div>
156-
</div>
117+
</ButtonContainer>
118+
</Container>
157119
);
158120
};

‎packages/common/src/components/Button/elements.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import React from 'react';
2-
import styled, { css } from 'styled-components';
1+
import React, { ComponentProps } from 'react';
32
import { Link } from 'react-router-dom';
4-
import { Button as ReakitButton } from 'reakit/Button';
3+
import { Button as ReakitButtonBase } from 'reakit/Button';
4+
import styled, { css } from 'styled-components';
5+
56
import theme from '../../theme';
6-
import { IButtonProps } from '.';
77
import { withoutProps } from '../../utils';
88

9+
import { Button } from '.';
10+
911
export type OptionProps = {
1012
theme: any;
1113
disabled?: boolean;
@@ -102,7 +104,7 @@ const getBorder = ({
102104
return '2px solid #66B9F4';
103105
};
104106

105-
export const styles = css<IButtonProps | any>`
107+
export const styles = css<ComponentProps<typeof Button> | any>`
106108
transition: 0.3s ease all;
107109
font-family: Poppins, Roboto, sans-serif;
108110
@@ -160,6 +162,6 @@ export const LinkButton = styled(withoutProps(`small`)(Link))`
160162
export const AButton = styled(withoutProps(`small`)(props => <a {...props} />))`
161163
${styles};
162164
`;
163-
export const Button = styled(withoutProps(`small`)(ReakitButton))`
165+
export const ReakitButton = styled(withoutProps(`small`)(ReakitButtonBase))`
164166
${styles}
165167
`;

‎packages/common/src/components/Button/index.tsx‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,34 @@
1-
import React from 'react';
2-
import { LinkButton, AButton, Button, styles } from './elements';
1+
import React, { FunctionComponent } from 'react';
32

4-
export interface IButtonProps {
3+
import { LinkButton, AButton, ReakitButton, styles } from './elements';
4+
5+
type Props = {
56
to?: string;
67
href?: string;
78
big?: boolean;
89
small?: boolean;
910
style?: React.CSSProperties;
1011
block?: boolean;
1112
onClick?: (event: React.MouseEvent) => void;
12-
children?: React.ReactNode;
1313
disabled?: boolean;
1414
type?: 'button' | 'reset' | 'submit';
1515
danger?: boolean;
1616
secondary?: boolean;
1717
red?: boolean;
1818
target?: string;
1919
rel?: string;
20-
}
21-
22-
function ButtonComponent({ style = {}, ...props }: IButtonProps) {
20+
};
21+
const Button: FunctionComponent<Props> = ({ style = {}, ...props }) => {
2322
// Link
2423
if (typeof props.to === 'string') {
25-
return <LinkButton style={style} to={props.to} {...props} />;
24+
return <LinkButton {...props} style={style} to={props.to} />;
2625
}
2726

2827
if (props.href) {
29-
// @ts-ignore
30-
return <AButton style={style} {...props} />;
28+
return <AButton {...props} style={style} />;
3129
}
3230

33-
// @ts-ignore
34-
return <Button style={style} {...props} />;
35-
}
31+
return <ReakitButton {...props} style={style} />;
32+
};
3633

37-
export { ButtonComponent as Button, styles as buttonStyles };
34+
export { Button, styles as buttonStyles };

‎packages/common/src/components/Modal/Modal.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import React from 'react';
1+
import React, { ComponentProps } from 'react';
22
import {
33
useDialogState,
44
DialogDisclosure,
55
DialogBackdrop,
66
Dialog,
77
} from 'reakit/Dialog';
88
import { Portal } from 'reakit/Portal';
9-
import { Button, IButtonProps } from '../Button';
9+
import { Button } from '../Button';
1010
import { Backdrop, Container } from './elements';
1111

12-
export interface IModalProps extends IButtonProps {
12+
export interface IModalProps extends ComponentProps<typeof Button> {
1313
label?: string;
1414
button?: React.ElementType;
1515
backdrop?: React.ElementType;

0 commit comments

Comments
 (0)