diff --git a/packages/app/src/app/components/GitProgress/index.ts b/packages/app/src/app/components/GitProgress/index.ts deleted file mode 100644 index d08ea6e22dd..00000000000 --- a/packages/app/src/app/components/GitProgress/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { GitProgress } from './GitProgress'; diff --git a/packages/app/src/app/components/GitProgress/GitProgress.tsx b/packages/app/src/app/components/GitProgress/index.tsx similarity index 62% rename from packages/app/src/app/components/GitProgress/GitProgress.tsx rename to packages/app/src/app/components/GitProgress/index.tsx index 87d26cbc8d2..5d020164311 100644 --- a/packages/app/src/app/components/GitProgress/GitProgress.tsx +++ b/packages/app/src/app/components/GitProgress/index.tsx @@ -1,4 +1,5 @@ -import React from 'react'; +import React, { FunctionComponent, ReactNode } from 'react'; + import { Container, Cube, @@ -9,27 +10,26 @@ import { Result, } from './elements'; -interface IGitProgressProps { - result: string | null; +type Props = { message: string; -} - -export const GitProgress: React.FC = ({ - message, - result, -}) => ( + result: ReactNode; +}; +export const GitProgress: FunctionComponent = ({ message, result }) => ( {result ? ( {result} ) : ( <> - + + {[0, 1, 2, 3].map(i => ( - + ))} + + {message} )} diff --git a/packages/app/src/app/pages/common/Modals/PRModal/elements.ts b/packages/app/src/app/pages/common/Modals/PRModal/elements.ts new file mode 100644 index 00000000000..5dcbdc3713e --- /dev/null +++ b/packages/app/src/app/pages/common/Modals/PRModal/elements.ts @@ -0,0 +1,6 @@ +import styled from 'styled-components'; + +export const ButtonContainer = styled.div` + font-size: 0.875rem; + margin-top: 1rem; +`; diff --git a/packages/app/src/app/pages/common/Modals/PRModal/index.tsx b/packages/app/src/app/pages/common/Modals/PRModal/index.tsx index 386b0143189..9023f27a7ff 100644 --- a/packages/app/src/app/pages/common/Modals/PRModal/index.tsx +++ b/packages/app/src/app/pages/common/Modals/PRModal/index.tsx @@ -1,36 +1,36 @@ import React, { FunctionComponent } from 'react'; -import { useOvermind } from 'app/overmind'; + import { GitProgress } from 'app/components/GitProgress'; +import { useOvermind } from 'app/overmind'; + +import { ButtonContainer } from './elements'; -const PRModal: FunctionComponent = () => { +export const PRModal: FunctionComponent = () => { const { state: { - git: { isCreatingPr, pr }, + git: { + isCreatingPr, + pr: { prURL }, + }, }, } = useOvermind(); - let result = null; - - if (!isCreatingPr) { - result = ( -
- Done! We{"'"}ll now open the new sandbox of this PR and GitHub in 3 - seconds... -
- - Click here if nothing happens. - -
-
- ); - } - return ( + {`Done! We'll now open the new sandbox of this PR and GitHub in 3 seconds...`} + + + + Click here if nothing happens. + + + + ) : null + } /> ); }; - -export default PRModal; diff --git a/packages/app/src/app/pages/common/Modals/index.tsx b/packages/app/src/app/pages/common/Modals/index.tsx index 9cbbc7199fc..020dc9e9314 100644 --- a/packages/app/src/app/pages/common/Modals/index.tsx +++ b/packages/app/src/app/pages/common/Modals/index.tsx @@ -26,7 +26,7 @@ import LiveSessionVersionMismatch from './LiveSessionVersionMismatch'; import { NetlifyLogs } from './NetlifyLogs'; import { PickSandboxModal } from './PickSandboxModal'; import PreferencesModal from './PreferencesModal'; -import PRModal from './PRModal'; +import { PRModal } from './PRModal'; import { SearchDependenciesModal } from './SearchDependenciesModal'; import { SelectSandboxModal } from './SelectSandboxModal'; import { ShareModal } from './ShareModal';