import React, { PureComponent } from 'react'
import { browser } from 'webextension-polyfill-ts'

const styles = require('./CongratsMessage.css')

const partyPopperIcon = browser.runtime.getURL('/img/party_popper.svg')

class CongratsMessage extends PureComponent {
    moreAboutSidebar = () => {
        browser.tabs.create({
            url: 'https://worldbrain.io',
        })
    }

    goToDashboard = () => {
        browser.tabs.create({
            url: browser.runtime.getURL('/options.html#/overview'),
        })
    }

    render() {
        return (
            <div className={styles.container}>
                <div className={styles.firstRow}>
                    <img
                        src={partyPopperIcon}
                        alt="🎉"
                        className={styles.partyPopper}
                    />
                    <p className={styles.title}>
                        Congrats on your first annotation
                    </p>
                </div>
                <div className={styles.learnMore} onClick={this.goToDashboard}>
                    Go back to Dashboard
                </div>
            </div>
        )
    }
}

export default CongratsMessage

import React, { PureComponent } from 'react'
import { browser } from 'webextension-polyfill-ts'
import { remoteFunction } from 'src/util/webextensionRPC'

const styles = require('./CongratsMessage.css')

const partyPopperIcon = browser.runtime.getURL('/img/party_popper.svg')

class CongratsMessage extends PureComponent {
    openOptionsTab = remoteFunction('openOptionsTab')

    moreAboutSidebar = () => {
        browser.tabs.create({
            url: 'https://worldbrain.io',
        })
    }

    goToDashboard = () => this.openOptionsTab('overview')

    render() {
        return (
            <div className={styles.container}>
                <div className={styles.firstRow}>
                    <img
                        src={partyPopperIcon}
                        alt="🎉"
                        className={styles.partyPopper}
                    />
                    <p className={styles.title}>
                        Congrats on your first annotation
                    </p>
                </div>
                <div className={styles.learnMore} onClick={this.goToDashboard}>
                    Go back to Dashboard
                </div>
            </div>
        )
    }
}

export default CongratsMessage

Use remote function to open dashboard.
Use remote function to open dashboard.

In the CongratsMessage button. Fixes issue where the button wasn't
working in Firefox. Also, should fix the issue where this didn't work
in content script.
