From 0c27a5bca16d2a0bd363e967e17f06aea9cba4aa Mon Sep 17 00:00:00 2001 From: Nabeelah Date: Sun, 6 Oct 2019 17:55:23 +0100 Subject: [PATCH 1/4] Refactor /app/pages/Sandbox/ZenModeIntroductionModal/index.js --- .../{elements.js => elements.ts} | 0 .../Sandbox/ZenModeIntroductionModal/index.js | 34 ------------------- .../ZenModeIntroductionModal/index.tsx | 32 +++++++++++++++++ yarn.lock | 2 +- 4 files changed, 33 insertions(+), 35 deletions(-) rename packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/{elements.js => elements.ts} (100%) delete mode 100644 packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.js create mode 100644 packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.tsx diff --git a/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/elements.js b/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/elements.ts similarity index 100% rename from packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/elements.js rename to packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/elements.ts diff --git a/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.js b/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.js deleted file mode 100644 index 045d62d7e05..00000000000 --- a/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { inject, hooksObserver } from 'app/componentConnectors'; - -import { Button } from '@codesandbox/common/lib/components/Button'; -import Row from '@codesandbox/common/lib/components/flex/Row'; - -import { Container, Heading, Explanation } from './elements'; - -function ZenModeIntroduction({ signals }) { - return ( - - Zen Mode Explained - - Zen Mode is perfect for giving instruction videos and presentations. You - can toggle the sidebar by double tapping shift. You can leave - Zen Mode by hovering over the file name above the editor and clicking - the icon on the right. - - - - - - - ); -} - -export default inject('signals')(hooksObserver(ZenModeIntroduction)); diff --git a/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.tsx b/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.tsx new file mode 100644 index 00000000000..f2b5ccb32ae --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.tsx @@ -0,0 +1,32 @@ +import React, { FunctionComponent } from 'react'; +import { useOvermind } from 'app/overmind'; +import { Button } from '@codesandbox/common/lib/components/Button'; +import Row from '@codesandbox/common/lib/components/flex/Row'; + +import { Container, Heading, Explanation } from './elements'; + +const ZenModeIntroduction: FunctionComponent = () => { + const { + actions: { modalClosed }, + } = useOvermind(); + + return ( + + Zen Mode Explained + + Zen Mode is perfect for giving instruction videos and presentations. You + can toggle the sidebar by double tapping shift. You can + leave Zen Mode by hovering over the file name above the editor and + clicking the icon on the right. + + + + + + + ); +}; + +export default ZenModeIntroduction; diff --git a/yarn.lock b/yarn.lock index 66222a2fa7b..c03cfd459c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1144,7 +1144,7 @@ exec-sh "^0.3.2" minimist "^1.2.0" -"@codesandbox/template-icons@^1.0.1", "@codesandbox/template-icons@^1.01": +"@codesandbox/template-icons@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@codesandbox/template-icons/-/template-icons-1.0.1.tgz#c29068ce93d7d1db8dfbf0c82d618ee7192d9fb8" integrity sha512-o7Zgw88GoV/xogZ56rwXFohIYoYsB2UiKERC49Y1yuwV6SFAshPLdUBx9GX6HAHLUQg5R0pOoRrSeEsan+dHEw== From 744fc357fb4d50d2a5562d05ed0b2e0cb67918be Mon Sep 17 00:00:00 2001 From: Nabeelah Date: Sun, 6 Oct 2019 18:12:28 +0100 Subject: [PATCH 2/4] Remove export default --- .../Modals/Changelog/Dashboard/index.tsx | 158 ++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 packages/app/src/app/pages/common/Modals/Changelog/Dashboard/index.tsx diff --git a/packages/app/src/app/pages/common/Modals/Changelog/Dashboard/index.tsx b/packages/app/src/app/pages/common/Modals/Changelog/Dashboard/index.tsx new file mode 100644 index 00000000000..6f4d42b405a --- /dev/null +++ b/packages/app/src/app/pages/common/Modals/Changelog/Dashboard/index.tsx @@ -0,0 +1,158 @@ +import React, { FunctionComponent } from 'react'; +import CSS from 'csstype'; +import { useOvermind } from 'app/overmind'; +import { Link } from 'react-router-dom'; +import theme from '@codesandbox/common/lib/theme'; +import { Button } from '@codesandbox/common/lib/components/Button'; + +// Inline styles because styled-components didn't load the styles +const titleStyles: CSS.Properties = { + fontWeight: 600, + color: 'rgba(255, 255, 255, 0.9)', + fontSize: '1.125rem', + marginTop: 0, + marginBottom: 0, + width: '100%', + textTransform: 'uppercase', +}; + +const dateStyles: CSS.Properties = { + color: 'rgba(255, 255, 255, 0.5)', + fontSize: '.875rem', + float: 'right', + width: '100%', + textAlign: 'right', +}; + +const subTitleStyles: CSS.Properties = { + fontWeight: 600, + color: 'rgba(255, 255, 255, .9)', + fontSize: '1rem', + marginTop: '1rem', + marginBottom: 0, +}; + +const descriptionStyles: CSS.Properties = { + lineHeight: 1.6, + color: 'rgba(255, 255, 255, 0.7)', + fontWeight: 600, + fontSize: '.875rem', + marginTop: '.5rem', + marginBottom: 0, +}; + +const W: FunctionComponent = props => ( + +); + +export const DashboardChangelog: FunctionComponent = () => { + const { + actions: { modalClosed }, + } = useOvermind(); + + return ( +
+
+

+ What + {"'"}s New +

+
July 2nd, 2018
+
+ + CodeSandbox Announcement + +

+ We + {"'"} + re back with a new update! This update is very focused on{' '} + collaboration and organization. Let + {"'"}s take a look! +

+ +

Dashboard

+

+ You can now manage your sandboxes in your own{' '} + dashboard! You + {"'"} + re able to filter, sort, search, delete, create and update{' '} + multiple sandboxes at the same time. The possibilities are endless! +

+ +

Create Teams

+

+ An extension to the dashboard is teams! You can now create a team + with unlimited members to share sandboxes for collaboration. All + sandboxes automatically sync using live collaboration between + team members. +

+ +

Free CodeSandbox Live

+

+ Teams is not our only feature that allows for collaboration. We also + have real time collaboration with{' '} + + CodeSandbox Live + + . Until now this was behind a{' '} + + Patron + {' '} + subscription, but we + {"'"} + re happy to announce that{' '} + CodeSandbox Live is from now on free for everyone! +

+ +

And More

+

+ There + {"'"}s a lot more included in this update! Make sure to check out the + announcement post to find out more about this update. +

+ +
+ + {/* + // @ts-ignore */} + +
+
+ ); +}; From 0d732f01e9e509506c32a47ff970f459ede9fa09 Mon Sep 17 00:00:00 2001 From: Nabeelah Date: Sun, 6 Oct 2019 18:16:37 +0100 Subject: [PATCH 3/4] Remove export default --- .../src/app/pages/Sandbox/ZenModeIntroductionModal/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.tsx b/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.tsx index f2b5ccb32ae..3985426b855 100644 --- a/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.tsx +++ b/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.tsx @@ -5,7 +5,7 @@ import Row from '@codesandbox/common/lib/components/flex/Row'; import { Container, Heading, Explanation } from './elements'; -const ZenModeIntroduction: FunctionComponent = () => { +export const ZenModeIntroduction: FunctionComponent = () => { const { actions: { modalClosed }, } = useOvermind(); @@ -28,5 +28,3 @@ const ZenModeIntroduction: FunctionComponent = () => { ); }; - -export default ZenModeIntroduction; From 32e46260a4881e2acd970616e455e1223fee47f3 Mon Sep 17 00:00:00 2001 From: Nabeelah Date: Sun, 6 Oct 2019 18:19:25 +0100 Subject: [PATCH 4/4] Fix error --- .../Modals/Changelog/Dashboard/index.tsx | 158 ------------------ 1 file changed, 158 deletions(-) delete mode 100644 packages/app/src/app/pages/common/Modals/Changelog/Dashboard/index.tsx diff --git a/packages/app/src/app/pages/common/Modals/Changelog/Dashboard/index.tsx b/packages/app/src/app/pages/common/Modals/Changelog/Dashboard/index.tsx deleted file mode 100644 index 6f4d42b405a..00000000000 --- a/packages/app/src/app/pages/common/Modals/Changelog/Dashboard/index.tsx +++ /dev/null @@ -1,158 +0,0 @@ -import React, { FunctionComponent } from 'react'; -import CSS from 'csstype'; -import { useOvermind } from 'app/overmind'; -import { Link } from 'react-router-dom'; -import theme from '@codesandbox/common/lib/theme'; -import { Button } from '@codesandbox/common/lib/components/Button'; - -// Inline styles because styled-components didn't load the styles -const titleStyles: CSS.Properties = { - fontWeight: 600, - color: 'rgba(255, 255, 255, 0.9)', - fontSize: '1.125rem', - marginTop: 0, - marginBottom: 0, - width: '100%', - textTransform: 'uppercase', -}; - -const dateStyles: CSS.Properties = { - color: 'rgba(255, 255, 255, 0.5)', - fontSize: '.875rem', - float: 'right', - width: '100%', - textAlign: 'right', -}; - -const subTitleStyles: CSS.Properties = { - fontWeight: 600, - color: 'rgba(255, 255, 255, .9)', - fontSize: '1rem', - marginTop: '1rem', - marginBottom: 0, -}; - -const descriptionStyles: CSS.Properties = { - lineHeight: 1.6, - color: 'rgba(255, 255, 255, 0.7)', - fontWeight: 600, - fontSize: '.875rem', - marginTop: '.5rem', - marginBottom: 0, -}; - -const W: FunctionComponent = props => ( - -); - -export const DashboardChangelog: FunctionComponent = () => { - const { - actions: { modalClosed }, - } = useOvermind(); - - return ( -
-
-

- What - {"'"}s New -

-
July 2nd, 2018
-
- - CodeSandbox Announcement - -

- We - {"'"} - re back with a new update! This update is very focused on{' '} - collaboration and organization. Let - {"'"}s take a look! -

- -

Dashboard

-

- You can now manage your sandboxes in your own{' '} - dashboard! You - {"'"} - re able to filter, sort, search, delete, create and update{' '} - multiple sandboxes at the same time. The possibilities are endless! -

- -

Create Teams

-

- An extension to the dashboard is teams! You can now create a team - with unlimited members to share sandboxes for collaboration. All - sandboxes automatically sync using live collaboration between - team members. -

- -

Free CodeSandbox Live

-

- Teams is not our only feature that allows for collaboration. We also - have real time collaboration with{' '} - - CodeSandbox Live - - . Until now this was behind a{' '} - - Patron - {' '} - subscription, but we - {"'"} - re happy to announce that{' '} - CodeSandbox Live is from now on free for everyone! -

- -

And More

-

- There - {"'"}s a lot more included in this update! Make sure to check out the - announcement post to find out more about this update. -

- -
- - {/* - // @ts-ignore */} - -
-
- ); -};