<commit_before>/** @jsx jsx */
import { css, jsx } from '@emotion/core';
import styled from '@emotion/styled';
import browser from 'webextension-polyfill';

import { Content, Row, Heading, Subheading, Button, Link } from '../@toggl/ui/components';

const closePage = async () => {
  const tab = await browser.tabs.getCurrent();
  browser.tabs.remove(tab.id);
};

export default function QuickStartGuide () {
  return (
    <Content>
      <Row>
        <Heading>Welcome to Toggl Button!</Heading>
        <Subheading>Track time from anywhere on the web.</Subheading>
      </Row>
      <Row>
        <a href="#quickstart">
          <Button>Get started</Button>
        </a>
      </Row>
      <Guide id="quickstart">
        <GuideHeading>
          <h2>Quick start</h2>
          <p>Toggl Button's top features and how to use them:</p>
        </GuideHeading>
        <div css={[section, right, salmon]}>
          <div>
            <div>
              <h5>Easy & fast</h5>
              <h3>Create time entries</h3>
              <p>Just click the "Play" icon to start recording your first time entry!</p>
              <p>When you're done with your task, click on the "Stop" icon to save your entry.</p>
              <p>The Toggl Button popup also shows a list of all your recent time entries*.</p>
              <p>You can also enable useful time tracking features like idle detection and reminders from the Settings page.</p>
              <Link href="settings.html"><Button>Settings</Button></Link>
              <Link href="https://toggl.com/app" target="_blank"><p className="small">*To see older time entries, or run more complex reports, check out our web app!</p></Link>
            </div>
          </div>
          <div>
            <img src="../images/button-create.gif" />
          </div>
        </div>
        <div css={[section, left, gold]}>
          <div>
            <div>
              <h5>Supercharge your tools</h5>
              <h3>Use integrations</h3>
              <p>Add a Toggl Button to 130+ services for super fast time tracking!</p>
              <p>Once enabled, just click on the Toggl Button icon to start a time entry. Toggl Button will automatically fill in the description for you.</p>
              <p>If Toggl Button can detect a project, <em>and</em> there's project with the same name in any of your Toggl workspaces, it'll be selected too!</p>
              <p>You can stop entries by clicking the same icon again, or move straight onto another task by clicking the new task's icon.</p>
              <p>Check out the Integrations page now to see if your tool is supported!</p>
              <Link href="settings.html?tab=integrations"><Button>Integrations</Button></Link>
            </div>
          </div>
          <div>
            <img src="../images/button-integrations.gif" />
          </div>
        </div>
        <div css={[section, right, green]}>
          <div>
            <div>
              <h5>Increase your productivity</h5>
              <h3>Pomodoro mode</h3>
              <p>Need help managing your time?</p>
              <p>Pomodoro® is a technique to help you focus on a task, by working hard for short intervals then taking a break.</p>
              <p>Toggl Button's pomodoro mode lets you set your interval length, and reminds you to take a break when time's up. You can also enable a ticking sound to help keep you on track.</p>
              <p>Turn it on from the Pomodoro page.</p>
              <Link href="settings.html?tab=pomodoro"><Button>Pomodoro</Button></Link>
            </div>
          </div>
          <div>
            <img src="../images/button-pomodoro.gif" />
          </div>
        </div>
      </Guide>
      <Spotty>
        <h2>100% Open Source</h2>
        <p>Want to help us make Toggl Button better?</p>
        <Link href="https://github.com/toggl/toggl-button/" target="_blank">
          <p>All our code is available on GitHub and we ❤ PRs!</p>
          <svg height="32" viewBox="0 0 16 16"><commit_msg>fix(onboarding): Update guide text<commit_after>/** @jsx jsx */
import { css, jsx } from '@emotion/core';
import styled from '@emotion/styled';
import browser from 'webextension-polyfill';

import { Content, Row, Heading, Subheading, Button, Link } from '../@toggl/ui/components';

const closePage = async () => {
  const tab = await browser.tabs.getCurrent();
  browser.tabs.remove(tab.id);
};

export default function QuickStartGuide () {
  return (
    <Content>
      <Row>
        <Heading>Welcome to Toggl Button!</Heading>
        <Subheading>Track time from anywhere on the web.</Subheading>
      </Row>
      <Row>
        <a href="#quickstart">
          <Button>Get started</Button>
        </a>
      </Row>
      <Guide id="quickstart">
        <GuideHeading>
          <h2>Quick start</h2>
          <p>Toggl Button's top features and how to use them:</p>
        </GuideHeading>
        <div css={[section, right, salmon]}>
          <div>
            <div>
              <h5>Easy & fast</h5>
              <h3>Create time entries</h3>
              <p>Just click the "Play" icon to start tracking your first time entry!</p>
              <p>When you're done with your task, click on the "Stop" icon to save your entry.</p>
              <p>The Toggl Button popup shows a list of your recent time entries*. You can edit them from here.</p>
              <p>You can also enable useful time tracking features like idle detection and reminders from the Settings page.</p>
              <Link href="settings.html"><Button>Settings</Button></Link>
              <Link href="https://toggl.com/app" target="_blank"><p className="small">*To see older time entries or run more complex reports, check out our web app on toggl.com!</p></Link>
            </div>
          </div>
          <div>
            <img src="../images/button-create.gif" />
          </div>
        </div>
        <div css={[section, left, gold]}>
          <div>
            <div>
              <h5>Supercharge your tools</h5>
              <h3>Use integrations</h3>
              <p>Add Toggl Button to 130+ tools for super fast time tracking!</p>
              <p>Once enabled, Toggl Button will show up inside the tool - just click on the Toggl Button icon to start a time entry. The description will automatically be filled in for you.</p>
              <p>If Toggl Button can detect a project, <em>and</em> there's a project with the same name in any of your Toggl workspaces, it'll be selected too!</p>
              <p>You can stop entries by clicking the same icon again, or move straight onto another task by clicking the new task's icon.</p>
              <p>Check out the Integrations page now to see if your favourite tools are supported!</p>
              <Link href="settings.html?tab=integrations"><Button>Integrations</Button></Link>
            </div>
          </div>
          <div>
            <img src="../images/button-integrations.gif" />
          </div>
        </div>
        <div css={[section, right, green]}>
          <div>
            <div>
              <h5>Increase your productivity</h5>
              <h3>Pomodoro mode</h3>
              <p>Need help managing your time?</p>
              <p>Pomodoro® is a technique to help you focus on a task, by working hard for short intervals then taking a break.</p>
              <p>Toggl Button's pomodoro mode lets you set your interval length, and reminds you to take a break when time's up. You can also enable a ticking sound to help keep you on track.</p>
              <p>Turn it on from the Pomodoro page.</p>
              <Link href="settings.html?tab=pomodoro"><Button>Pomodoro</Button></Link>
            </div>
          </div>
          <div>
            <img src="../images/button-pomodoro.gif" />
          </div>
        </div>
      </Guide>
      <Spotty>
        <h2>100% Open Source</h2>
        <p>Want to help us make Toggl Button better?</p>
        <Link href="https://github.com/toggl/toggl-button/" target="_blank">
          <p>All our code is available on GitHub and we ❤ PRs!</p>
          <svg height="32" viewBox="0 0 16 16">
{'fraction_non_alphanumeric': 0.12384700528840241, 'fraction_numerical': 0.007379166154224573, 'mean_word_length': 2.0779712339137015, 'pattern_counts': {'":': 0, '<': 229, '<?xml version=': 0, '>': 231, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6529494', 'n_tokens_mistral': 2403, 'n_tokens_neox': 2332, 'n_words': 824}