diff --git a/src/components/CssSettingsModal.jsx b/src/components/CssSettingsModal.jsx index 36e43a5..e760660 100644 --- a/src/components/CssSettingsModal.jsx +++ b/src/components/CssSettingsModal.jsx @@ -42,7 +42,7 @@ export default class CssSettingsModal extends Component { />
-
diff --git a/src/components/HelpModal.jsx b/src/components/HelpModal.jsx index 97bdf6c..c4c179c 100644 --- a/src/components/HelpModal.jsx +++ b/src/components/HelpModal.jsx @@ -11,9 +11,8 @@ export function HelpModal(props) {

- Made with - 💖 & - 🙌 by + Made with 💖 &{' '} + 🙌 by{' '} .

- Tweet out your feature requests, comments & suggestions to + Tweet out your feature requests, comments & suggestions to{' '} .

- Like this extension? Please + Like this extension? Please{' '} Support the developer - + {' '} Share Web Maker - + {' '} Chat - + {' '}

License

- "Web Maker" is + "Web Maker" is{' '} open-source {' '} - under the + under the{' '} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* By Sam Herbert (@sherb), for everyone. More http://goo.gl/7AJzbL */} + + + + + + + + + + + + + + ); +} diff --git a/src/components/Notifications.jsx b/src/components/Notifications.jsx index 6f47519..107bbc2 100644 --- a/src/components/Notifications.jsx +++ b/src/components/Notifications.jsx @@ -5,6 +5,87 @@ export function Notifications() {

Whats new?

+
+ 3.2.0 + +
+
3.1.1
    diff --git a/src/components/OnboardingModal.jsx b/src/components/OnboardingModal.jsx new file mode 100644 index 0000000..64ce802 --- /dev/null +++ b/src/components/OnboardingModal.jsx @@ -0,0 +1,102 @@ +import { h } from 'preact'; +import Modal from './Modal.jsx'; + +export function OnboardingModal(props) { + return ( + +
    + +

    Welcome to Web Maker

    +
    + +
    +
    +
    + + + +
    +

    + Open Web Maker anytime by visiting{' '} + https://webmakerapp.com/app/ - Even when you are offline! It + just works! 😱 Drag the following bookmarklet on + your bookmark bar to create a quick access shortcut: + + + Web Maker + +

    +
    +
    +
    + + + +
    +

    + Open Web Maker anytime by clicking the + + + {' '} + button in top-right side of your browser. +

    +
    +
    +
    + + + +
    +

    + Configure and customize settings by clicking the gear icon ( + + + ) in bottom right of the app. +

    +
    +
    +
    + + + +
    +

    + Follow{' '} + + @webmakerApp + {' '} + to know about the new upcoming features! +

    +
    +
    + +

    + If you are an existing Chrome extension user, you can import your + creations from there to here.{' '} + + Learn how to export/import + . +

    + +

    + +

    +     + ); +} diff --git a/src/components/app.jsx b/src/components/app.jsx index 88054c2..d36200a 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -37,6 +37,8 @@ import { AskToImportModal } from './AskToImportModal'; import { Alerts } from './Alerts'; import Portal from 'preact-portal'; import { HelpModal } from './HelpModal'; +import { OnboardingModal } from './OnboardingModal'; +import { Icons } from './Icons'; if (module.hot) { require('preact/debug'); @@ -66,6 +68,7 @@ export default class App extends Component { isSupportDeveloperModalOpen: false, isKeyboardShortcutsModalOpen: false, isAskToImportModalOpen: false, + isOnboardModalOpen: false, prefs: {}, currentItem: { title: '', @@ -1094,165 +1097,16 @@ export default class App extends Component { dontAskBtnClickHandler={this.dontAskToImportAnymore.bind(this)} /> + this.setState({ isOnboardModalOpen: false })} + /> +
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {/* By Sam Herbert (@sherb), for everyone. More http://goo.gl/7AJzbL */} - - - - - - - - - - - - - +