feat: Create landing page for Scratch Link download (ENA-69)

src/components/extension-landing/extension-landing.scss

@@ -258,7 +258,47 @@
         }
     }
 
-    div.cards + div.faq {
+    .hardware-cards {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 3em;
+
+        // 1 column
+        @media #{$medium-and-smaller} {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    .hardware-card {
+        border: 1px solid $ui-border;
+        border-radius: .5rem;
+        background-color: $ui-white;
+        overflow: hidden;
+        flex-basis: 0;
+        flex-grow: 1;
+    }
+
+    .hardware-card-image {
+        background-color: $ui-blue-10percent;
+        padding: 1rem 0 1rem;
+
+        img {
+            display: block;
+            margin: 0 auto;
+            height: 100px;
+            max-width: 100%;
+        }
+    }
+
+    .hardware-card-info {
+        padding: 1rem;
+
+        p {
+            margin: .2rem 0;
+        }
+    }
+
+    div.cards+div.faq {
         padding-top: 2rem;
     }
 

src/components/extension-landing/extension-requirements.jsx

@@ -12,8 +12,7 @@ const ExtensionRequirements = props => (
             <FormattedMessage id="extensionHeader.requirements" />
         </span>
         <FlexRow className="extension-requirements">
-            {props.bluetoothStandard ? (
+            {!props.hideWindows && (
-                <React.Fragment>
                 <span>
                     <img
                         alt=""
@@ -21,6 +20,8 @@ const ExtensionRequirements = props => (
                     />
                     Windows 10 version 1709+
                 </span>
+            )}
+            {!props.hideMac && (
                 <span>
                     <img
                         alt=""
@@ -28,7 +29,8 @@ const ExtensionRequirements = props => (
                     />
                     macOS 10.13+
                 </span>
-                    <React.Fragment>
+            )}
+            {!props.hideChromeOS && (
                 <span>
                     <img
                         alt=""
@@ -36,6 +38,8 @@ const ExtensionRequirements = props => (
                     />
                     ChromeOS
                 </span>
+            )}
+            {!props.hideAndroid && (
                 <span>
                     <img
                         alt=""
@@ -43,11 +47,14 @@ const ExtensionRequirements = props => (
                     />
                     Android 6.0+
                 </span>
-                    </React.Fragment>
+            )}
+            {!props.hideBluetooth && (
                 <span>
                     <img src="/svgs/extensions/bluetooth.svg" />
                     Bluetooth
                 </span>
+            )}
+            {!props.hideScratchLink && (
                 <span>
                     <img
                         alt=""
@@ -55,19 +62,27 @@ const ExtensionRequirements = props => (
                     />
                     Scratch Link
                 </span>
-                </React.Fragment>
+            )}
-            ) : props.children}
         </FlexRow>
     </FlexRow>
 );
 
 ExtensionRequirements.propTypes = {
-    bluetoothStandard: PropTypes.bool,
+    hideAndroid: PropTypes.bool,
-    children: PropTypes.node
+    hideBluetooth: PropTypes.bool,
+    hideChromeOS: PropTypes.bool,
+    hideMac: PropTypes.bool,
+    hideScratchLink: PropTypes.bool,
+    hideWindows: PropTypes.bool,
 };
 
 ExtensionRequirements.defaultProps = {
-    bluetoothStandard: false
+    hideAndroid: false,
+    hideBluetooth: false,
+    hideChromeOS: false,
+    hideMac: false,
+    hideScratchLink: false,
+    hideWindows: false,
 };
 
 module.exports = ExtensionRequirements;

src/components/extension-landing/hardware-card.jsx

@@ -0,0 +1,32 @@
+const PropTypes = require('prop-types');
+const React = require('react');
+
+const HardwareCard = props => (
+    <a
+        className="hardware-card short"
+        href={props.cardUrl}
+        rel="noopener noreferrer"
+        target="_blank"
+    >
+        <div className="hardware-card-image">
+            <img
+                alt={props.imageAlt}
+                src={props.imageSrc}
+            />
+        </div>
+        <div className="hardware-card-info">
+            <h4>{props.title}</h4>
+            <p>{props.description}</p>
+        </div>
+    </a>
+);
+
+HardwareCard.propTypes = {
+    cardUrl: PropTypes.string,
+    description: PropTypes.string,
+    imageAlt: PropTypes.string,
+    imageSrc: PropTypes.string,
+    title: PropTypes.string
+};
+
+module.exports = HardwareCard;

src/components/os-chooser/os-chooser.jsx

@@ -15,8 +15,9 @@ const OSChooser = props => (
     <div className="os-chooser">
         <FlexRow className="inner">
             <FormattedMessage id="oschooser.choose" />
+            {!props.hideWindows && (
                 <Button
-                className={classNames({active: props.currentOS === OS_ENUM.WINDOWS})}
+                    className={classNames({ active: props.currentOS === OS_ENUM.WINDOWS })}
                     onClick={() => // eslint-disable-line react/jsx-no-bind
                         props.handleSetOS(OS_ENUM.WINDOWS)
                     }
@@ -24,8 +25,10 @@ const OSChooser = props => (
                     <img src="/svgs/extensions/windows.svg" />
                     Windows
                 </Button>
+            )}
+            {!props.hideMac && (
                 <Button
-                className={classNames({active: props.currentOS === OS_ENUM.MACOS})}
+                    className={classNames({ active: props.currentOS === OS_ENUM.MACOS })}
                     onClick={() => // eslint-disable-line react/jsx-no-bind
                         props.handleSetOS(OS_ENUM.MACOS)
                     }
@@ -33,8 +36,10 @@ const OSChooser = props => (
                     <img src="/svgs/extensions/mac.svg" />
                     macOS
                 </Button>
+            )}
+            {!props.hideChromeOS && (
                 <Button
-                className={classNames({active: props.currentOS === OS_ENUM.CHROMEOS})}
+                    className={classNames({ active: props.currentOS === OS_ENUM.CHROMEOS })}
                     onClick={() => // eslint-disable-line react/jsx-no-bind
                         props.handleSetOS(OS_ENUM.CHROMEOS)
                     }
@@ -42,8 +47,10 @@ const OSChooser = props => (
                     <img src="/svgs/extensions/chromeos.svg" />
                     ChromeOS
                 </Button>
+            )}
+            {!props.hideAndroid && (
                 <Button
-                className={classNames({active: props.currentOS === OS_ENUM.ANDROID})}
+                    className={classNames({ active: props.currentOS === OS_ENUM.ANDROID })}
                     onClick={() => // eslint-disable-line react/jsx-no-bind
                         props.handleSetOS(OS_ENUM.ANDROID)
                     }
@@ -51,13 +58,25 @@ const OSChooser = props => (
                     <img src="/svgs/extensions/android.svg" />
                     Android
                 </Button>
+            )}
         </FlexRow>
     </div>
 );
 
 OSChooser.propTypes = {
     currentOS: PropTypes.string,
-    handleSetOS: PropTypes.func
+    handleSetOS: PropTypes.func,
+    hideAndroid: PropTypes.bool,
+    hideChromeOS: PropTypes.bool,
+    hideMac: PropTypes.bool,
+    hideWindows: PropTypes.bool,
+};
+
+OSChooser.defaultProps = {
+    hideAndroid: false,
+    hideChromeOS: false,
+    hideMac: false,
+    hideWindows: false,
 };
 
 const wrappedOSChooser = injectIntl(OSChooser);

src/routes.json

@@ -298,6 +298,19 @@
         "view": "download/scratch2/download",
         "title": "Scratch 2.0"
     },
+    {
+        "name": "download-scratch-link",
+        "pattern": "^/download/scratch-link/?(\\?.*)?$",
+        "routeAlias": "/download/scratch-link",
+        "view": "download/scratch-link/download",
+        "title": "Scratch Link Download"
+    },
+    {
+        "name": "download-scratch-link-redirect",
+        "pattern": "^/download/link/?(\\?.*)?$",
+        "routeAlias": "/download/link",
+        "redirect": "/download/scratch-link"
+    },
     {
         "name": "search",
         "pattern": "^/search/:projects/?$",

src/views/boost/boost.jsx

@@ -59,7 +59,7 @@ class Boost extends ExtensionLanding {
                         src="/images/boost/boost-header.svg"
                     />}
                     renderRequirements={
-                        <ExtensionRequirements bluetoothStandard />
+                        <ExtensionRequirements />
                     }
                 />
                 <OSChooser

src/views/download/scratch-link/download.jsx

@@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+
+import Page from '../../../components/page/www/page.jsx';
+import render from '../../../lib/render.jsx';
+
+import FlexRow from '../../../components/flex-row/flex-row.jsx';
+
+import OSChooser from '../../../components/os-chooser/os-chooser.jsx';
+import detectOS from '../../../lib/detect-os.js';
+
+import HardwareCard from '../../../components/extension-landing/hardware-card.jsx';
+import ExtensionHeader from '../../../components/extension-landing/extension-header.jsx';
+import ExtensionRequirements from '../../../components/extension-landing/extension-requirements.jsx';
+import ExtensionSection from '../../../components/extension-landing/extension-section.jsx';
+import ExtensionTroubleshooting from '../../../components/extension-landing/extension-troubleshooting.jsx';
+import InstallScratchLink from '../../../components/extension-landing/install-scratch-link.jsx'
+
+import { isDownloaded } from '../../../components/install-scratch/install-util.js';
+
+import '../../../components/extension-landing/extension-landing.scss';
+import './download.scss';
+
+const ScratchLink = ({ intl }) => {
+    const [os, setOS] = useState(detectOS());
+
+    return (
+        <div className="extension-landing link">
+            <ExtensionHeader
+                renderCopy={
+                    <FlexRow className="column extension-copy">
+                        <h1><img
+                            alt={intl.formatMessage({ id: 'scratchLink.linkLogo' })}
+                            width="40px"
+                            src="/images/scratchlink/scratch-link-logo.svg"
+                        />{intl.formatMessage({ id: "scratchLink.headerTitle" })}</h1>
+                        <FormattedMessage id="scratchLink.headerText" />
+                    </FlexRow>
+                }
+                renderImage={
+                    <img src="/images/download/download.png" />
+                }
+                renderRequirements={
+                    <ExtensionRequirements hideAndroid hideChromeOS hideScratchLink />
+                }
+            />
+            <OSChooser
+                currentOS={os}
+                handleSetOS={setOS}
+                hideChromeOS
+                hideAndroid
+            />
+            {(isDownloaded(os)) && (
+                <InstallScratchLink
+                    currentOS={os}
+                />
+            )}
+            <ExtensionSection className="things-to-try">
+                <h2><FormattedMessage id="scratchLink.thingsToTry" /></h2>
+                <h3><FormattedMessage id="scratchLink.compatibleDevices" /></h3>
+                <div className="hardware-cards">
+                    <HardwareCard
+                        cardUrl="/microbit"
+                        description={intl.formatMessage({ id: 'scratchLink.microbitDescription' })}
+                        imageAlt={intl.formatMessage({ id: 'scratchLink.microbitTitle' })}
+                        imageSrc="/images/microbit/microbit.svg"
+                        title={intl.formatMessage({ id: 'scratchLink.microbitTitle' })}
+                    />
+                    <HardwareCard
+                        cardUrl="/ev3"
+                        description={intl.formatMessage({ id: 'scratchLink.ev3Description' })}
+                        imageAlt={intl.formatMessage({ id: 'scratchLink.ev3Title' })}
+                        imageSrc="/images/ev3/ev3.svg"
+                        title={intl.formatMessage({ id: 'scratchLink.ev3Title' })}
+                    />
+                    <HardwareCard
+                        cardUrl="/wedo"
+                        description={intl.formatMessage({ id: 'scratchLink.wedoDescription' })}
+                        imageAlt={intl.formatMessage({ id: 'scratchLink.wedoTitle' })}
+                        imageSrc="/images/wedo2/wedo2.svg"
+                        title={intl.formatMessage({ id: 'scratchLink.wedoTitle' })}
+                    />
+                    <HardwareCard
+                        cardUrl="/boost"
+                        description={intl.formatMessage({ id: 'scratchLink.boostDescription' })}
+                        imageAlt={intl.formatMessage({ id: 'scratchLink.boostTitle' })}
+                        imageSrc="/images/boost/boost.svg"
+                        title={intl.formatMessage({ id: 'scratchLink.boostTitle' })}
+                    />
+                    <HardwareCard
+                        cardUrl="/vernier"
+                        description={intl.formatMessage({ id: 'scratchLink.vernierDescription' })}
+                        imageAlt={intl.formatMessage({ id: 'scratchLink.vernierTitle' })}
+                        imageSrc="/images/gdxfor/gdxfor.svg"
+                        title={intl.formatMessage({ id: 'scratchLink.vernierTitle' })}
+                    />
+                </div>
+            </ExtensionSection>
+            <ExtensionTroubleshooting
+                deviceName={intl.formatMessage({ id: "scratchLink.headerTitle" })}
+                scratchLinkOnly
+            >
+                {isDownloaded(os) && (
+                    <React.Fragment>
+                        <h3 className="faq-title"><FormattedMessage id="scratchLink.checkOSVersionTitle" /></h3>
+                        <p>
+                            <FormattedMessage
+                                id="scratchLink.checkOSVersionText"
+                                values={{
+                                    winOSVersionLink: (
+                                        <a
+                                            href="https://support.microsoft.com/en-us/help/13443/windows-which-operating-system"
+                                            rel="noopener noreferrer"
+                                            target="_blank"
+                                        >
+                                            <FormattedMessage id="scratchLink.winOSVersionLinkText" />
+                                        </a>
+                                    ),
+                                    macOSVersionLink: (
+                                        <a
+                                            href="https://support.apple.com/en-us/HT201260"
+                                            rel="noopener noreferrer"
+                                            target="_blank"
+                                        >
+                                            <FormattedMessage id="scratchLink.macOSVersionLinkText" />
+                                        </a>
+                                    )
+                                }}
+                            />
+                        </p>
+                        <p><FormattedMessage id="extensions.checkOsVersionText2" /></p>
+                    </React.Fragment>
+                )}
+                <h3 className="faq-title"><FormattedMessage id="scratchLink.closeScratchCopiesTitle" /></h3>
+                <p>
+                    <FormattedMessage id="scratchLink.closeScratchCopiesText" />
+                </p>
+            </ExtensionTroubleshooting>
+        </div>
+    );
+};
+
+ScratchLink.propTypes = {
+    intl: intlShape.isRequired
+};
+
+const WrappedScratchLink = injectIntl(ScratchLink);
+
+render(<Page><WrappedScratchLink /></Page>, document.getElementById('app'));

src/views/download/scratch-link/download.scss

@@ -0,0 +1,7 @@
+@import "../../../colors";
+
+.link {
+    .extension-header {
+        background-color: $ui-aqua;
+    }
+}

src/views/download/scratch-link/l10n.json

@@ -0,0 +1,24 @@
+{
+    "scratchLink.headerText": "Scratch Link allows you to connect hardware to interact with your Scratch projects. Open new possibilities by combining your digital projects with the physical world.",
+    "scratchLink.headerTitle": "Scratch Link",
+    "scratchLink.linkLogo": "Scratch Link logo",
+    "scratchLink.troubleshootingTitle": "Troubleshooting",
+    "scratchLink.checkOSVersionTitle": "Make sure your operating system is compatible with Scratch Link",
+    "scratchLink.checkOSVersionText": "The minimum operating system versions are listed at the top of this page. See instructions for checking your version of {winOSVersionLink} or {macOSVersionLink}.",
+    "scratchLink.winOSVersionLinkText": "Windows",
+    "scratchLink.macOSVersionLinkText": "Mac OS",
+    "scratchLink.closeScratchCopiesTitle": "Close other copies of Scratch",
+    "scratchLink.closeScratchCopiesText": "Only one copy of Scratch can connect with Scratch Link at a time. If you have Scratch open in other browser tabs, close it and try again.",
+    "scratchLink.thingsToTry": "Things to Try",
+    "scratchLink.compatibleDevices": "Compatible with Scratch Link",
+    "scratchLink.microbitTitle": "micro:bit",
+    "scratchLink.microbitDescription": "micro:bit is a tiny circuit board designed to help kids learn to code and create with technology.",
+    "scratchLink.ev3Title": "LEGO MINDSTORMS EV3",
+    "scratchLink.ev3Description": "LEGO MINDSTORMS Education EV3 is an invention kit with motors and sensors you can use to build interactive robotic creations.",
+    "scratchLink.wedoTitle": "LEGO Education WeDo 2.0",
+    "scratchLink.wedoDescription": "LEGO Education WeDo 2.0 is an introductory invention kit you can use to build interactive robots and other creations.",
+    "scratchLink.boostTitle": "LEGO BOOST",
+    "scratchLink.boostDescription": "The LEGO BOOST kit brings your LEGO creations to life with powerful motors, a color sensor and more.",
+    "scratchLink.vernierTitle": "Vernier Force & Acceleration",
+    "scratchLink.vernierDescription": "The Vernier Go Direct Force & Acceleration sensor is a powerful scientific tool that unlocks new ways to connect the physical world to your Scratch projects."
+}

src/views/ev3/ev3.jsx

@@ -63,7 +63,7 @@ class EV3 extends ExtensionLanding {
                             videoId="0huu6wfiki"
                         />}
                     renderRequirements={
-                        <ExtensionRequirements bluetoothStandard />
+                        <ExtensionRequirements />
                     }
                 />
                 <OSChooser

src/views/gdxfor/gdxfor.jsx

@@ -58,7 +58,7 @@ class GdxFor extends ExtensionLanding {
                         src="/images/gdxfor/gdxfor-header.svg"
                     />}
                     renderRequirements={
-                        <ExtensionRequirements bluetoothStandard />
+                        <ExtensionRequirements />
                     }
                 />
                 <OSChooser

src/views/microbit/microbit.jsx

@@ -62,7 +62,7 @@ class MicroBit extends ExtensionLanding {
                         src="/images/microbit/microbit-heart.png"
                     />}
                     renderRequirements={
-                        <ExtensionRequirements bluetoothStandard />
+                        <ExtensionRequirements />
                     }
                 />
                 <OSChooser

src/views/wedo2/wedo2.jsx

@@ -60,7 +60,7 @@ class Wedo2 extends ExtensionLanding {
                         />
                     }
                     renderRequirements={
-                        <ExtensionRequirements bluetoothStandard />
+                        <ExtensionRequirements />
                     }
                 />
                 <OSChooser

static/images/scratchlink/scratch-link-logo.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
+    <title>Master 1024x1024 </title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Master-1024x1024-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M864,32 C934.692,32 992,89.308 992,160 L992,864 C992,934.692 934.692,992 864,992 L160,992 C89.308,992 32,934.692 32,864 L32,160 C32,89.308 89.308,32 160,32 L864,32 Z" id="bg" fill="#0FBD8C"></path>
+        <path d="M575.040199,579.119317 C575.784506,641.504968 548.860009,701.556404 501.224361,743.740188 C463.313246,777.678653 415.483431,797.175219 365.744307,799.072817 C342.751693,817.796909 314.872542,828.930606 285.019359,830.895376 C281.831783,831.113684 278.644208,831.248027 275.456632,831.248027 C199.197526,831.248027 135.025318,769.433336 129.184126,690.506671 C129.119404,689.599854 129.054682,688.323594 128.989959,686.694681 C128.909056,686.140516 128.844334,685.569557 128.844334,684.948219 C127.35572,651.715056 128.100027,624.258652 129.054682,606.777236 C129.928433,590.656045 130.478573,561.654694 130.543296,554.903945 L130.543296,554.484122 C130.94781,530.890088 136.578655,507.867012 146.820966,487.228529 C143.90846,464.138281 143.973183,439.435915 147.096036,413.524459 L147.500551,409.494161 C147.581454,409.007167 147.581454,408.436208 147.629995,407.949213 C147.710898,407.529391 147.775621,407.042396 147.840343,406.555402 C150.413056,384.506315 154.895079,348.384771 173.891088,311.356411 C205.507955,249.256239 265.48939,212.211086 334.273065,212.211086 L337.185571,212.211086 C358.835196,199.683577 383.18698,193 408.218348,193 L410.871964,193 C490.512813,194.477776 555.299883,262.77453 555.299883,345.294876 C555.299883,346.201693 552.581544,445.195882 549.523413,479.067176 C566.011431,508.992137 574.700406,542.930602 575.040199,579.119317" id="scratch-outline-2" fill="#FFFFFF"></path>
+        <path d="M507.345453,579.495657 C507.895593,620.823002 489.579168,661.243529 457.072369,690.043365 C429.468288,714.762525 394.194609,728.415159 357.901552,728.415159 C351.655846,728.347987 345.345417,727.995336 339.164433,727.138898 C337.740541,729.120461 336.251927,731.018059 334.698591,732.848486 C320.718564,749.255157 301.447484,758.97825 280.412722,760.237718 C278.794663,760.372061 277.225146,760.439233 275.607087,760.439233 C234.556938,760.439233 200.027566,727.071726 196.969435,684.552085 C196.904712,683.712439 196.83999,682.856001 196.83999,681.949184 L196.775268,681.311054 C195.416098,651.033442 196.095683,626.112767 196.904712,610.545742 C197.924089,592.526953 198.474229,561.89669 198.538952,555.280284 C198.878744,534.57463 206.532162,515.783367 218.958852,501.47581 C212.777868,479.309172 210.803837,452.692414 214.606275,421.222506 L215.091692,416.638042 C215.156415,416.285391 215.156415,415.93274 215.221137,415.580089 C217.389336,397.141476 220.641633,369.886588 234.006798,343.840789 C253.957462,304.696522 290.590311,282.227612 334.423521,282.227612 C336.866789,282.227612 339.439503,282.294784 342.093119,282.44592 C346.704586,282.731399 351.380776,283.285565 355.927521,284.142003 C370.166437,270.825228 389.097724,262.57991 409.857417,263.016526 C452.735972,263.789 487.605137,300.531881 487.605137,344.898742 C487.605137,345.872731 483.802699,464.380277 481.974293,474.657537 C480.890193,481.072427 479.061787,487.185045 476.683241,492.961806 C496.423557,516.623012 507.070383,546.12815 507.345453,579.495657" id="scratch-outline-1" fill="#F9A83A"></path>
+        <path d="M336.175207,494.929302 C315.83621,491.637892 304.979036,477.515057 310.367171,433.819912 L310.998214,428.546939 C315.528779,390.578176 319.331216,382.131343 336.935695,383.122125 C342.081122,383.457983 348.019397,386.833357 353.941492,391.888022 C359.442891,398.487635 371.659235,407.035225 378.535984,423.962475 C383.471063,436.389227 385.170025,444.500201 385.88197,453.21572 L386.96607,463.912802 L386.96607,463.862423 C388.422323,471.184131 393.826639,477.195992 401.30207,478.505838 C410.929519,480.336265 420.217176,473.686274 421.899957,463.694494 C422.126485,462.502198 426.479063,347.420404 426.479063,345.539598 C426.479063,335.396682 418.647659,327.168158 408.809862,327.000229 C399.004426,326.94985 391.043578,335.228753 391.043578,345.338083 C391.043578,345.556391 390.995036,361.442482 390.671424,377.462915 C376.691397,361.677582 358.795668,347.537954 338.764101,346.312072 C285.141636,343.339728 279.284264,394.507716 275.756896,423.996061 L275.222937,429.218655 C267.990214,487.490044 286.727334,524.249718 330.72235,531.386703 C378.535984,539.178612 410.460282,550.580996 410.751532,581.110502 C410.929519,592.983087 404.910341,605.157945 394.40914,614.528387 C381.755921,625.695671 364.831027,630.71675 348.876968,627.996299 C343.925709,627.207032 339.28188,625.796428 334.832219,624.268274 C328.570332,620.641006 312.794259,610.682812 304.784869,599.17967 C298.037564,589.47337 295.691379,574.22541 294.963253,564.552695 C295.044156,560.220125 295.060336,557.348538 295.060336,557.029473 C295.238323,546.836178 287.358377,538.540482 277.650025,538.305381 C267.796047,538.07028 259.705754,546.298805 259.527767,556.475307 C259.527767,556.811165 259.090891,592.865537 257.812625,614.578766 C255.984219,649.558392 257.812625,679.18108 257.812625,680.474134 C258.540751,690.633843 266.954657,698.291409 276.760092,697.619693 C286.533167,697.08232 293.976237,688.282836 293.296652,678.106334 C293.296652,677.938405 292.4229,663.58047 292.536165,643.748046 C305.545356,652.362808 322.632056,660.742468 342.971054,664.33615 C369.507216,668.9542 396.642061,660.994362 417.369393,642.505371 C435.928526,626.031529 446.559171,603.51224 446.267921,580.724265 C445.636878,512.696198 371.659235,500.739648 336.175207,494.929302" id="scratch-fill" fill="#FFFFFF"></path>
+        <path d="M779.06356,762 C774.622648,762 770.327887,760.232486 767.091541,756.9623 C760.463197,750.216229 760.493012,739.265542 767.164319,732.573091 C825.831943,673.602502 858.131554,595.271768 858.131554,512.008111 C858.131554,428.736438 825.837379,350.418889 767.168472,291.43153 C760.491766,284.733659 760.461915,273.777012 767.091595,267.053866 C773.685978,260.342534 784.355971,260.312853 790.978619,266.980568 C856.109373,332.454236 892,419.492628 892,512.008111 C892,604.509927 856.107892,691.547704 790.974256,757.024264 C787.755641,760.253082 783.483577,762 779.06356,762 Z M718.103479,684.394903 C713.646999,684.394903 709.350112,682.632852 706.13146,679.357203 C699.503117,672.611133 699.53293,661.676216 706.203319,654.984689 C744.245892,616.728832 765.175937,565.977155 765.175937,512.009688 C765.175937,458.028454 744.247305,407.276194 706.208391,369.024011 C699.53293,362.327389 699.503117,351.392472 706.13146,344.646402 C712.710213,337.950802 723.395834,337.921079 730.003105,344.573224 C774.499695,389.307818 799.028775,448.794707 799.028775,512.009688 C799.028775,575.213322 774.496547,634.69936 730.013648,679.403984 C726.808089,682.643006 722.530133,684.394903 718.103479,684.394903 Z M656.923332,606.581635 C652.482419,606.581635 648.187659,604.814121 644.951312,601.543935 C638.322969,594.797865 638.352782,583.862948 645.022003,577.172595 C662.37045,559.717134 671.906607,536.594539 671.906607,512.008111 C671.906607,487.406332 662.370826,464.284648 645.020683,446.842297 C638.354008,440.130259 638.324233,429.2013 644.951312,422.456516 C651.534978,415.755916 662.22635,415.733611 668.820535,422.396675 C692.628442,446.304212 705.759445,478.158031 705.759445,512.008111 C705.759445,545.844592 692.626914,577.697773 668.8335,601.590716 C665.627941,604.829738 661.349985,606.581635 656.923332,606.581635 Z" id="signal" fill="#FFFFFF" fill-rule="nonzero"></path>
+    </g>
+</svg>