Skip to content

Commit 802de38

Browse files
SaraVieiraMichaelDeBoey
SaraVieira
and
MichaelDeBoey
authored
New modals (#3673)
* add zeit * signInForTemplates * add deleteDeployment * liveSessionEnded * add liveVersionMismatch * add forkServerModal * add netlifyLogs * add exportGithub * add pr * add pickSandbox * comment state * fix ts * start adding Alert Common Component * add new alert everywhere * Apply suggestions from code review Co-Authored-By: Michaël De Boey <info@michaeldeboey.be> * fix ts * add select sandbox * put overmind back * Apply suggestions from code review Co-Authored-By: Michaël De Boey <info@michaeldeboey.be> * add uploading * add storageManagement * make delete file only red on hover * add feedback * add userSurvey * add deletefile * add frozen Sandbox * add moveSandbox * Apply suggestions from code review Co-Authored-By: Michaël De Boey <info@michaeldeboey.be> * fix ts * fix ts * add checkbox * update storgame management * remove border * fix input * Apply suggestions from code review Co-Authored-By: Michaël De Boey <info@michaeldeboey.be> * delete forced state * Apply suggestions from code review Co-Authored-By: Michaël De Boey <info@michaeldeboey.be> * fix styles Co-authored-by: Michaël De Boey <info@michaeldeboey.be>
1 parent 05f3ec0 commit 802de38

File tree

68 files changed

+993
-1403
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+993
-1403
lines changed

‎packages/app/src/app/components/GitProgress/elements.ts‎

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,6 @@ import { OpaqueLogo as BaseOpaqueLogo } from 'app/components/OpaqueLogo';
44
import { GitHubLogo as BaseGitHubLogo } from 'app/components/GitHubLogo';
55
import { Cube as BaseCube } from '../Cube';
66

7-
export const Container = styled.div`
8-
${({ theme }) => css`
9-
position: relative;
10-
padding: 1rem 2rem;
11-
background-color: ${theme.background};
12-
color: rgba(255, 255, 255, 0.8);
13-
font-size: 1.125rem;
14-
font-weight: 500;
15-
text-align: center;
16-
`}
17-
`;
18-
197
export const DeployAnimationContainer = styled.div<{ deploying: boolean }>`
208
${({ deploying }) => css`
219
display: flex;
@@ -65,16 +53,3 @@ export const OpaqueLogo = styled(BaseOpaqueLogo)`
6553
z-index: 10;
6654
transform: translateY(15px) translateX(-100px);
6755
`;
68-
69-
export const DeployText = styled.div`
70-
${delayInEffect()};
71-
margin-top: 2rem;
72-
margin-bottom: 2rem;
73-
font-size: 1.125rem;
74-
`;
75-
76-
export const Result = styled.div`
77-
${delayInEffect(0.25)};
78-
margin-bottom: 1rem;
79-
font-size: 1.125rem;
80-
`;

‎packages/app/src/app/components/GitProgress/index.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
11
import React, { FunctionComponent, ReactNode } from 'react';
2-
2+
import { Element, Text } from '@codesandbox/components';
33
import {
4-
Container,
54
Cube,
65
DeployAnimationContainer,
7-
DeployText,
86
GitHubLogo,
97
OpaqueLogo,
10-
Result,
118
} from './elements';
129

1310
type Props = {
1411
message: string;
1512
result: ReactNode;
1613
};
1714
export const GitProgress: FunctionComponent<Props> = ({ message, result }) => (
18-
<Container>
15+
<Element padding={4} paddingTop={6}>
1916
{result ? (
20-
<Result>{result}</Result>
17+
<Text marginBottom={4} size={3} block>
18+
{result}
19+
</Text>
2120
) : (
2221
<>
2322
<DeployAnimationContainer deploying>
@@ -29,9 +28,10 @@ export const GitProgress: FunctionComponent<Props> = ({ message, result }) => (
2928

3029
<GitHubLogo />
3130
</DeployAnimationContainer>
32-
33-
<DeployText>{message}</DeployText>
31+
<Text align="center" weight="bold" block size={4} marginTop={4}>
32+
{message}
33+
</Text>
3434
</>
3535
)}
36-
</Container>
36+
</Element>
3737
);

‎packages/app/src/app/components/Modal/elements.js‎

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

‎packages/app/src/app/components/Modal/index.js‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import React from 'react';
22
import Modal from 'react-modal';
33
import { createGlobalStyle } from 'styled-components';
4+
import css from '@styled-system/css';
5+
import { Text } from '@codesandbox/components';
46

5-
import { CLOSE_TIMEOUT_MS, BaseModal, ModalTitle, ModalBody } from './elements';
7+
const CLOSE_TIMEOUT_MS = 300;
68

79
if (document.getElementById('root')) {
810
Modal.setAppElement('#root');
@@ -72,8 +74,7 @@ class ModalComponent extends React.Component {
7274
left: 0,
7375
right: 0,
7476
margin: `0 auto ${top}vh`,
75-
border: 'none',
76-
borderRadius: '4px',
77+
outline: 'none',
7778
},
7879
});
7980

@@ -101,15 +102,28 @@ class ModalComponent extends React.Component {
101102
onClose(e.type === 'keydown');
102103
}}
103104
contentLabel={title || 'Modal'}
105+
css={css({
106+
border: '1px solid',
107+
borderColor: 'sideBar.border',
108+
borderRadius: 'medium',
109+
backgroundColor: 'sideBar.background',
110+
boxShadow: 2,
111+
color: 'sideBar.foreground',
112+
lineHeight: 1.2,
113+
})}
104114
style={this.getStyles(width, top)}
105115
closeTimeoutMS={CLOSE_TIMEOUT_MS}
106116
htmlOpenClassName="ReactModal__Html--open"
107117
{...props}
108118
>
109-
<BaseModal>
110-
{title && <ModalTitle>{title}</ModalTitle>}
111-
<ModalBody>{children}</ModalBody>
112-
</BaseModal>
119+
<div>
120+
{title && (
121+
<Text weight="bold" block size={4} paddingBottom={2}>
122+
{title}
123+
</Text>
124+
)}
125+
<div>{children}</div>
126+
</div>
113127
</Modal>
114128
</>
115129
);

‎packages/app/src/app/components/UploadProgress/UploadProgress.tsx‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,45 @@
11
import React from 'react';
2+
import { Element, Text } from '@codesandbox/components';
3+
import css from '@styled-system/css';
24
import {
3-
Container,
4-
DeployAnimationContainer,
5+
UploadAnimationContainer,
56
StyledLocalLogo,
67
StyledCube,
78
StyledLogo,
8-
DeployText,
9-
Result,
109
} from './elements';
1110

1211
interface IUploadProgressProps {
13-
result: string;
12+
result?: string;
1413
message: string;
1514
}
1615

1716
export const UploadProgress: React.FC<IUploadProgressProps> = ({
1817
message,
1918
result,
2019
}) => (
21-
<Container>
20+
<Element padding={4} paddingTop={6}>
2221
{result ? (
23-
<Result>{result}</Result>
22+
<Text marginBottom={4} size={3} block>
23+
{result}
24+
</Text>
2425
) : (
2526
<>
26-
<DeployAnimationContainer deploying>
27-
<StyledLocalLogo />
27+
<UploadAnimationContainer>
28+
<StyledLocalLogo
29+
css={css({
30+
backgroundColor: 'sideBar.background',
31+
color: 'sideBar.foreground',
32+
})}
33+
/>
2834
{[0, 1, 2, 3].map(i => (
2935
<StyledCube key={i} delay={i} size={20} />
3036
))}
3137
<StyledLogo width={70} height={70} />
32-
</DeployAnimationContainer>
33-
<DeployText>{message}</DeployText>
38+
</UploadAnimationContainer>
39+
<Text align="center" weight="bold" block size={4} marginTop={4}>
40+
{message}
41+
</Text>
3442
</>
3543
)}
36-
</Container>
44+
</Element>
3745
);

‎packages/app/src/app/components/UploadProgress/elements.ts‎

Lines changed: 10 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,19 @@ import delayInEffect from '@codesandbox/common/lib/utils/animation/delay-effect'
44
import { OpaqueLogo } from 'app/components/OpaqueLogo';
55
import { Cube } from '../Cube';
66

7-
export const Container = styled.div`
8-
${({ theme }) => css`
9-
position: relative;
10-
padding: 1rem 2rem;
11-
background-color: ${theme.background};
12-
color: rgba(255, 255, 255, 0.8);
13-
font-size: 1.125rem;
14-
font-weight: 500;
15-
text-align: center;
16-
`}
17-
`;
18-
19-
export const DeployAnimationContainer = styled.div<{ deploying: boolean }>`
20-
${({ deploying }) => css`
21-
display: flex;
22-
justify-content: center;
23-
align-items: center;
24-
padding: 3rem;
25-
${deploying && delayInEffect(0, false)};
26-
`}
7+
export const UploadAnimationContainer = styled.div`
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
padding: 3rem;
12+
${delayInEffect(0, false)}
2713
`;
2814

2915
export const StyledLocalLogo = styled(LocalLogo)`
30-
${({ theme }) => css`
31-
position: absolute;
32-
z-index: 20;
33-
background-color: ${theme.background};
34-
color: white;
35-
font-size: 4rem;
36-
transform: translateY(15px) translateX(-100px);
37-
`}
16+
position: absolute;
17+
z-index: 20;
18+
font-size: 4rem;
19+
transform: translateY(15px) translateX(-100px);
3820
`;
3921

4022
const cubeAnimation = keyframes`
@@ -69,16 +51,3 @@ export const StyledLogo = styled(OpaqueLogo)`
6951
z-index: 10;
7052
transform: translateY(10px) translateX(80px);
7153
`;
72-
73-
export const DeployText = styled.div`
74-
margin-top: 2rem;
75-
margin-bottom: 2rem;
76-
font-size: 1.125rem;
77-
${delayInEffect()};
78-
`;
79-
80-
export const Result = styled.div`
81-
margin-bottom: 1rem;
82-
font-size: 1.125rem;
83-
${delayInEffect(0.25)};
84-
`;

‎packages/app/src/app/overmind/namespaces/editor/actions.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -441,8 +441,7 @@ export const forkSandboxClicked: AsyncAction = async ({
441441

442442
if (
443443
state.editor.currentSandbox.owned &&
444-
!state.editor.currentSandbox.customTemplate &&
445-
!effects.browser.confirm('Do you want to fork your own sandbox?')
444+
!state.editor.currentSandbox.customTemplate
446445
) {
447446
return;
448447
}

‎packages/app/src/app/pages/Sandbox/Editor/ForkFrozenSandboxModal/ForkFrozenSandboxModal.tsx‎

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,11 @@
1-
import { Button } from '@codesandbox/common/lib/components/Button';
21
import Modal from 'app/components/Modal';
2+
import { withTheme } from 'styled-components';
3+
import { ThemeProvider } from '@codesandbox/components';
4+
import { Alert } from 'app/pages/common/Modals/Common/Alert';
35
import { useOvermind } from 'app/overmind';
4-
import React from 'react';
6+
import React, { FunctionComponent } from 'react';
57
import useKeyPressEvent from 'react-use/lib/useKeyPressEvent';
68

7-
import {
8-
Actions,
9-
Close,
10-
Container,
11-
Enter,
12-
Title,
13-
UnlockButton,
14-
} from './elements';
15-
169
const ModalContent: React.FC = () => {
1710
const {
1811
state: {
@@ -35,40 +28,49 @@ const ModalContent: React.FC = () => {
3528
};
3629

3730
useKeyPressEvent('Enter', fork);
38-
3931
return (
40-
<Container>
41-
<Close onClick={() => modalsActions.forkFrozenModal.close('cancel')} />
42-
<Title>Frozen {customTemplate ? 'Template' : 'Sandbox'}</Title>
43-
<p>
44-
This {type} is frozen, which means you can’t make edits without
45-
unfreezing it.
46-
</p>
47-
<p>Do you want to unfreeze the {type} for this session or make a fork?</p>
48-
<Actions>
49-
<UnlockButton onClick={unlock}>Unfreeze</UnlockButton>
50-
<Button small onClick={fork}>
51-
Fork
52-
<Enter />
53-
</Button>
54-
</Actions>
55-
</Container>
32+
<Alert
33+
title={`Frozen ${customTemplate ? 'Template' : 'Sandbox'}`}
34+
description={
35+
<>
36+
<p>
37+
This {type} is frozen, which means you can’t make edits without
38+
unfreezing it.
39+
</p>
40+
<p>
41+
Do you want to unfreeze the {type} for this session or make a fork?
42+
</p>
43+
</>
44+
}
45+
onCancel={unlock}
46+
cancelMessage="Unfreeze"
47+
onPrimaryAction={fork}
48+
confirmMessage="Fork"
49+
/>
5650
);
5751
};
5852

59-
export const ForkFrozenSandboxModal: React.FC = () => {
53+
const ForkFrozenSandboxModalComponent: FunctionComponent<{ theme: any }> = ({
54+
theme,
55+
}) => {
6056
const {
6157
state: { modals },
6258
actions: { modals: modalsActions },
6359
} = useOvermind();
6460

6561
return (
66-
<Modal
67-
isOpen={modals.forkFrozenModal.isCurrent}
68-
width={450}
69-
onClose={() => modalsActions.forkFrozenModal.close('cancel')}
70-
>
71-
<ModalContent />
72-
</Modal>
62+
<ThemeProvider theme={theme.vscodeTheme}>
63+
<Modal
64+
isOpen={modals.forkFrozenModal.isCurrent}
65+
width={450}
66+
onClose={() => modalsActions.forkFrozenModal.close('cancel')}
67+
>
68+
<ModalContent />
69+
</Modal>
70+
</ThemeProvider>
7371
);
7472
};
73+
74+
export const ForkFrozenSandboxModal = withTheme(
75+
ForkFrozenSandboxModalComponent
76+
);

0 commit comments

Comments
 (0)