scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 09:35:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #2943 from LLK/revert-2940-release/05-02-2019

Browse source 
Revert "[MASTER] Release/05 02 2019"
This commit is contained in:
chrisgarrity 2019-05-02 14:28:40 -04:00 committed by GitHub
commit f3cf28563e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 1 additions and 324 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -101,7 +101,7 @@
"react-responsive": "3.0.0", "react-responsive": "3.0.0",
"react-slick": "0.16.0", "react-slick": "0.16.0",
"react-string-replace": "0.4.1", "react-string-replace": "0.4.1",
"scratch-gui": "0.1.0-prerelease.20190501211108", "scratch-gui": "0.1.0-prerelease.20190424211632",
"react-telephone-input": "4.3.4", "react-telephone-input": "4.3.4",
"redux": "3.5.2", "redux": "3.5.2",
"redux-thunk": "2.0.1", "redux-thunk": "2.0.1",

6
src/components/extension-landing/extension-landing.scss
View file

@ -34,12 +34,6 @@
width: 100%; width: 100%;
} }
.headline-icon {
height: 40px;
width: 40px;
margin: auto;
}
.download { .download {
display: inline-block; display: inline-block;

5
src/lib/extensions.js
View file

@ -42,11 +42,6 @@ const EXTENSION_INFO = {
name: 'Force and Acceleration', name: 'Force and Acceleration',
icon: 'extension-gdxfor.svg', icon: 'extension-gdxfor.svg',
hasStatus: true hasStatus: true
},
boost: {
name: 'LEGO BOOST',
icon: 'extension-boost.svg',
hasStatus: true
} }
}; };

7
src/routes.json
View file

@ -321,13 +321,6 @@
"view": "gdxfor/gdxfor", "view": "gdxfor/gdxfor",
"title": "Vernier Go Direct Force and Acceleration" "title": "Vernier Go Direct Force and Acceleration"
}, },
{
"name": "boost",
"pattern": "^/boost/?$",
"routeAlias": "/boost/?$",
"view": "boost/boost",
"title": "LEGO BOOST"
},
{ {
"name":"3-faq-redirect", "name":"3-faq-redirect",
"pattern": "^/3faq/?$", "pattern": "^/3faq/?$",

257
src/views/boost/boost.jsx
View file

@ -1,257 +0,0 @@
const injectIntl = require('react-intl').injectIntl;
const intlShape = require('react-intl').intlShape;
const FormattedMessage = require('react-intl').FormattedMessage;
const React = require('react');
const Page = require('../../components/page/www/page.jsx');
const render = require('../../lib/render.jsx');
const FlexRow = require('../../components/flex-row/flex-row.jsx');
const OSChooser = require('../../components/os-chooser/os-chooser.jsx');
const ExtensionLanding = require('../../components/extension-landing/extension-landing.jsx');
const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx');
const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx');
const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
const ProjectCard = require('../../components/extension-landing/project-card.jsx');
const Steps = require('../../components/steps/steps.jsx');
const Step = require('../../components/steps/step.jsx');
require('../../components/extension-landing/extension-landing.scss');
require('./boost.scss');
class Boost extends ExtensionLanding {
render () {
return (
<div className="extension-landing boost">
<ExtensionHeader
renderCopy={
<FlexRow className="extension-copy">
<h1><img
alt=""
className="headline-icon"
src="/images/boost/boost.svg"
/>LEGO BOOST</h1>
<FormattedMessage
id="boost.headerText"
values={{
boostLink: (
<a
href="https://www.lego.com/en-us/themes/boost"
rel="noopener noreferrer"
target="_blank"
>
LEGO BOOST
</a>
)
}}
/>
</FlexRow>
}
renderImage={<img
alt={this.props.intl.formatMessage({id: 'boost.imgAltBoostIllustration'})}
src="/images/boost/boost-header.svg"
/>}
renderRequirements={
<ExtensionRequirements>
<span>
<img
alt=""
src="/svgs/extensions/windows.svg"
/>
Windows 10 version 1709+
</span>
<span>
<img
alt=""
src="/svgs/extensions/mac.svg"
/>
macOS 10.13+
</span>
<span>
<img
alt=""
src="/svgs/extensions/bluetooth.svg"
/>
Bluetooth 4.0
</span>
<span>
<img
alt=""
src="/svgs/extensions/scratch-link.svg"
/>
Scratch Link
</span>
</ExtensionRequirements>
}
/>
<OSChooser
currentOS={this.state.OS}
handleSetOS={this.onSetOS}
/>
<InstallScratchLink
currentOS={this.state.OS}
/>
<ExtensionSection className="getting-started">
<h2><FormattedMessage id="boost.gettingStarted" /></h2>
<FlexRow className="column getting-started-section">
<h3><FormattedMessage id="boost.connectingBoost" /></h3>
<Steps>
<Step number={1}>
<div className="step-image">
<img
alt=""
className="screenshot"
src="/images/boost/boost-connect-1.png"
/>
</div>
<p>
<FormattedMessage
id="boost.useScratch3"
values={{
scratch3Link: (
<a
href="/projects/editor/"
rel="noopener noreferrer"
target="_blank"
>
Scratch
</a>
)
}}
/>
</p>
</Step>
<Step number={2}>
<div className="step-image">
<img
alt={this.props.intl.formatMessage({id: 'extensionInstallation.addExtension'})}
className="screenshot"
src="/images/boost/boost-connect-2.png"
/>
</div>
<p><FormattedMessage id="boost.addExtension" /></p>
</Step>
</Steps>
</FlexRow>
</ExtensionSection>
<ExtensionSection className="blue things-to-try">
<h2><FormattedMessage id="boost.thingsToTry" /></h2>
<h3><FormattedMessage id="boost.makeAMotorMove" /></h3>
<Steps>
<Step
compact
number={1}
>
<span className="step-description">
<FormattedMessage
id="boost.findTurnMotorOnForSeconds"
values={{
turnMotorOnForSeconds: (
<strong>
<FormattedMessage id="boost.turnMotorOnForSeconds" />
</strong>
)
}}
/>
</span>
<div className="step-image">
<img
alt=""
src="/images/boost/boost-turn-motor-on-block.png"
/>
</div>
</Step>
<Step
compact
number={2}
>
<span className="step-description">
<FormattedMessage id="boost.connectALegoBeam" />
</span>
<div className="step-image">
<img
alt={this.props.intl.formatMessage({id: 'boost.imgAltConnectALegoBeam'})}
src="/images/boost/boost-connect-lego-beam.svg"
/>
</div>
</Step>
</Steps>
<hr />
<h3><FormattedMessage id="boost.starterProjects" /></h3>
<Steps>
<ProjectCard
cardUrl="/projects/305503180/editor"
description={this.props.intl.formatMessage({id: 'boost.feedTheCatDescription'})}
imageAlt={this.props.intl.formatMessage({id: 'boost.imgAltFeedTheCat'})}
imageSrc="/images/boost/boost-starter1.png"
title={this.props.intl.formatMessage({id: 'boost.feedTheCat'})}
/>
<ProjectCard
cardUrl="/projects/305501694/editor"
description={this.props.intl.formatMessage({id: 'boost.drivingDescription'})}
imageAlt={this.props.intl.formatMessage({id: 'boost.imgAltDriving'})}
imageSrc="/images/boost/boost-starter2.png"
title={this.props.intl.formatMessage({id: 'boost.driving'})}
/>
<ProjectCard
cardUrl="/projects/305503649/editor"
description={this.props.intl.formatMessage({id: 'boost.walkAroundDescription'})}
imageAlt={this.props.intl.formatMessage({id: 'boost.imgAltwalkAround'})}
imageSrc="/images/boost/boost-starter3.png"
title={this.props.intl.formatMessage({id: 'boost.walkAround'})}
/>
</Steps>
</ExtensionSection>
<ExtensionSection className="faq">
<h2><FormattedMessage id="boost.troubleshootingTitle" /></h2>
<h3 className="faq-title"><FormattedMessage id="boost.checkOSVersionTitle" /></h3>
<p>
<FormattedMessage
id="boost.checkOSVersionText"
values={{
winOSVersionLink: (
<a
href="https://support.microsoft.com/en-us/help/13443/windows-which-operating-system"
rel="noopener noreferrer"
target="_blank"
>
<FormattedMessage id="boost.winOSVersionLinkText" />
</a>
),
macOSVersionLink: (
<a
href="https://support.apple.com/en-us/HT201260"
rel="noopener noreferrer"
target="_blank"
>
<FormattedMessage id="boost.macOSVersionLinkText" />
</a>
)
}}
/>
</p>
<h3 className="faq-title"><FormattedMessage id="boost.closeScratchCopiesTitle" /></h3>
<p>
<FormattedMessage id="boost.closeScratchCopiesText" />
</p>
<h3 className="faq-title"><FormattedMessage id="boost.otherComputerConnectedTitle" /></h3>
<p>
<FormattedMessage id="boost.otherComputerConnectedText" />
</p>
</ExtensionSection>
</div>
);
}
}
Boost.propTypes = {
intl: intlShape.isRequired
};
const WrappedBoost = injectIntl(Boost);
render(<Page><WrappedBoost /></Page>, document.getElementById('app'));

9
src/views/boost/boost.scss
View file

@ -1,9 +0,0 @@
@import "../../colors";
@import "../../frameless";
.boost {
.extension-header {
background-color: $ui-orange;
background-image: url("/images/boost/boost-pattern.svg");
}
}

34
src/views/boost/l10n.json
View file

@ -1,34 +0,0 @@
{
"boost.headerText": "The {boostLink} kit brings your LEGO creations to life with powerful motors, a color sensor and more. By combining it with Scratch, you can build your own robotic creatures, tell physical-digital stories, invent new game controllers, or whatever else you can imagine.",
"boost.gettingStarted": "Getting Started",
"boost.connectingBoost": "Connecting BOOST to Scratch",
"boost.powerBoost": "Turn on your sensor by pressing the power button.",
"boost.useScratch3": "Use the {scratch3Link} editor.",
"boost.addExtension": "Add the BOOST extension.",
"boost.thingsToTry": "Things to Try",
"boost.makeAMotorMove": "Make a motor move",
"boost.findTurnMotorOnForSeconds": "Find the {turnMotorOnForSeconds} block and click on it.",
"boost.turnMotorOnForSeconds": "“turn motor A on for 1 seconds”",
"boost.connectALegoBeam": "Connect a LEGO beam with an axle to motor A and click the block again to make it spin.",
"boost.starterProjects": "Starter Projects",
"boost.troubleshootingTitle": "Troubleshooting",
"boost.checkOSVersionTitle": "Make sure your operating system is compatible with Scratch Link",
"boost.checkOSVersionText": "The minimum operating system versions are listed at the top of this page. See instructions for checking your version of {winOSVersionLink} or {macOSVersionLink}.",
"boost.winOSVersionLinkText": "Windows",
"boost.macOSVersionLinkText": "Mac OS",
"boost.closeScratchCopiesTitle": "Close other copies of Scratch",
"boost.closeScratchCopiesText": "Only one copy of Scratch can connect with a BOOST at a time. If you have Scratch open in other browser tabs, close it and try again.",
"boost.otherComputerConnectedTitle": "Make sure no other computer is connected to your sensor",
"boost.otherComputerConnectedText": "Only one computer can be connected to a BOOST at a time. If you have another computer connected to your sensor, disconnect the sensor or close Scratch on that computer and try again.",
"boost.imgAltBoostIllustration": "Illustration of the LEGO BOOST.",
"boost.imgAltConnectALegoBeam": "A LEGO BOOST hub with an axle and a short beam connected to motor A.",
"boost.feedTheCat": "Feed the Cat",
"boost.feedTheCatDescription": "Feed a robot cat with colored LEGO bricks.",
"boost.imgAltFeedTheCat": "A Scratch project with a white cat",
"boost.driving": "Driving",
"boost.drivingDescription": "Drive around a wheeled robot and make music.",
"boost.imgAltDriving": "A Scratch project with a wheeled robot with eyes",
"boost.walkAround": "Walk Around",
"boost.walkAroundDescription": "Make your own controller to move a character on the screen.",
"boost.imgAltwalkAround": "A Scratch project with character on a green background"
}

BIN
static/images/boost/boost-connect-1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.8 KiB

BIN
static/images/boost/boost-connect-2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

1
static/images/boost/boost-connect-lego-beam.svg
View file

File diff suppressed because one or more lines are too long
Side by side

Before

Width:  |  Height:  |  Size: 5.8 KiB

1
static/images/boost/boost-header.svg
View file

File diff suppressed because one or more lines are too long
Side by side

Before

Width:  |  Height:  |  Size: 27 KiB

1
static/images/boost/boost-pattern.svg
View file

@ -1 +0,0 @@
<svg width="1300" height="600" xmlns="http://www.w3.org/2000/svg"><path d="M819.238 24.882c-15.453 50.637-171.79 78.323-174.619 122.486-2.832 44.167 158.779-53.78 170.339-27.831 11.56 25.951-166.905 157.034-261.357 195.352-56.915 23.088-101.814-9.541-36.284-60.043 43.842-33.786 23.208-62.818-17.132-42.96-40.34 19.862-61.803-31.358-6.072-75.133C549.843 92.98 836.72-32.424 819.238 24.882zm-424.15 130.384c-43.278 64.57-126.014 24.289-73.574-43.422C367.916 51.941 516.957-10.143 524.24 23.198c5.348 24.485-78.235 56.095-129.152 132.068zM39.18 24.945c70.452-68.347 129.964-134.959 171.871-132.898 43.543 2.142 4.651 85.474-69.283 149.4-52.382 45.292-1.227 68.275 49.006 41.232C251.48 50 298.8 71.866 220.453 143.521 142.106 215.18 23.143 267.91-41.747 254.39c-64.887-13.52 91.144-54.813 97.336-109.511 6.082-53.746-88.547 54.755-137.887 18.661-47.89-35.03 56.044-75.12 121.479-138.594zm789.576 203.203c-7.956-38.917 89.149-161.533 208.23-193.86 119.7-32.493 232.24-45.129 237.068-17.025 4.794 27.94-71.126 49.046-165.439 94.264-45.6 21.86 2.645 40.283 32.33 28.474 98.182-39.053 90.512 20.626 7.616 62.702-64.775 32.881-119.565 50.128-152.023 58.04-47.075 11.476-56.888-18.93-30.011-36.088 52.463-33.493 27.236-64.409-19.727-38.42-29.745 16.461-105.172 104.856-118.044 41.913zm-43.813 33.442c27.838-11.143 35.06 9.28 35.06 25.781 0 16.505-27.842 22.69-43.312 13.408-15.47-9.28-11.135-31.433 8.252-39.19zM1.533 331.98c10.618-24.573 129.645-28.5 218.154-107.875 31.844-28.559 70.878 6.325 61.613 33.096-9.261 26.77-37.565 33.826-81.866 51.049-44.297 17.226 12.032 40.185 85.123 5.695 41.809-19.725 86.606 13.527 36.124 47.772-42.196 28.62-139.42 36.825-136.764 61.376 1.469 13.635 72.047-19.165 84.872 10.228 10.662 24.428-14.603 52.5-85.202 58.2-71.925 5.807-127.863-8.987-128.7-44.32-.948-40.002 83.437-50.842 45.522-63.209-38.127-12.428-117.589-8.691-98.876-52.011zm427.198-85.602c14.215 9.885 14.657 22.49-.452 39.977-19.587 22.677-52.277 21.623-61.878 13.33-9.601-8.294 12.104-29.77 20.39-42.144 8.288-12.37 23.639-23.887 41.94-11.163zm-.873 136.232c84.277-20.147 131.698 13.629 112.822 36.707-20.39 24.92-69.195 24.863-73.03 73.654-7.167 91.292-96.968 107.447-58.651 43.712 13.422-22.33-6.287-36.48-17.84-7.93-6.976 17.23-40.06 40.875-57.543 49.618-79.347 39.671-142.612-17.968-85.86-33.987 36.929-10.422 70.105-35.489 91.297-92.893 11.29-30.59 51.787-60.03 88.805-68.88zm-251.11 185c31.945 40.84-66.744 43.122-103.19 55.39-36.448 12.27 38.66 18.499 104.733 17.812 66.08-.687 56.081 50.06-19.023 74.92-115.389 38.188-218.25-1.47-129.831-26.809 32.975-9.456 9.536-36.73-27.067-32.796-69.12 7.43-120.35-26.686-108.718-53.338 13.127-30.079 45.61-9.83 78.459-7.582 32.85 2.25 4.416-29.947-38.12-52.117-73.063-38.08-11.94-102.85 50.798-44.296 89.387 83.427 168.04 38.236 191.958 68.816zm331.42 99.01c-47.168 96.318-144.01 86.855-130.414 53.977 13.593-32.877-42.329-6.093-68.233-12.088-25.9-5.988-41.26-51.015 54.919-59.682 118.497-10.684 121.267-127.57 160.839-103.163 27.21 16.777.374 85.253-17.112 120.957zm707.417-435.885c79-13.578 96.496 13.625 63.605 35.397-20.396 13.506-99.82 56.575-41.812 60.794 58.016 4.22 14.78 59.377-53.35 110.725C1115.9 489 967.058 516.74 973.562 473.436c6.508-43.303 181.78-64.082 150.218-109.783-13.708-19.85-80.75 62.478-110.514 15.108-29.766-47.37 152.795-139.519 202.318-148.026zm-514.18 81.15c25.216-21.347 76.786 9.48 30.4 51.784-10.736 9.793-38.333 19.17-21.847 28.835 49.812 29.195 201.628-122.463 226.743-72.706 12.076 23.924-48.473 77.429-114.563 110.854-48.789 24.673-31 69.877 41.414 25.339 72.418-44.54 85.195 7.96 45.08 42.416-40.113 34.452-296.397 153.78-313.859 90.01-13.59-49.597 129.597-40.512 111.779-72.556-13.08-23.514-112.663 38.92-147.913-1.626-34.115-39.233 93.586-65.228 85.409-88.752-6.457-18.562-67.563 7.593-68.746-37.849-.915-35.22 65.074-24.098 126.102-75.749zm354.278 317.046c15.33-80.642 157.371-155.82 211.868-176.035 85.75-31.793 175.35-21.194 124.77 4.819-50.58 26.019-183.537 112.17-115.104 118.083 33.68 2.91 71.748 27.896 0 87.157-45.545 37.621-204.28 89.609-212.949 56.367-8.67-33.241 182.088-91.054 122.838-96.838-59.25-5.78-138.586 44.157-131.423 6.447zm-209.166-28.946c46.283-23.135 89.084-51.154 138.355-61.73 64.258-13.79.88 73.152-60.804 101.358-27.627 12.632 5.454 29.467 32.038 16.56 72.24-35.068 103.659-8.127 29.059 41.487-18.547 12.336-75.852 41.542-145.434 50.464-70.242 9.011-68.417-16.849-46.681-26.543 31.259-13.938 52.671-44.157-31.136-18.634-149.813 45.623-238.557 38.026-204.453 0 31.854-35.51 139.243-28.08 289.056-102.962z" fill="#FFF" fill-rule="evenodd" opacity=".1"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 4.5 KiB

BIN
static/images/boost/boost-starter1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.3 KiB

BIN
static/images/boost/boost-starter2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.4 KiB

BIN
static/images/boost/boost-starter3.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 3.4 KiB

BIN
static/images/boost/boost-turn-motor-on-block.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 8.8 KiB

1
static/images/boost/boost.svg
View file

@ -1 +0,0 @@
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path stroke="#7C87A5" fill="#FFF" stroke-linecap="round" stroke-linejoin="round" d="M1 12h38v16H1z"/><path stroke="#E6E7E8" fill="#E6E7E8" stroke-linecap="round" stroke-linejoin="round" d="M16 12v2h1v-1h2v1h1v-2z"/><path d="M14.5 12H22" stroke="#7C87A5" stroke-linecap="square"/><path stroke="#7C87A5" fill="#FFF" stroke-linecap="round" stroke-linejoin="round" d="M1 16h19v6h4v4h-4v2H1z"/><path stroke="#7C87A5" fill="#E6E7E8" stroke-linecap="round" stroke-linejoin="round" d="M1 26h38v2H1zm0-7h9l3 3h4v4H1z"/><circle fill="#FF661A" cx="4.5" cy="22.5" r="1.5"/><circle fill="#7C87A5" cx="22" cy="24" r="1"/><path stroke="#7C87A5" fill="#FFF" stroke-linecap="round" stroke-linejoin="round" d="M29 22h10v4H29z"/><circle fill="#7C87A5" cx="31" cy="24" r="1"/><circle fill="#7C87A5" cx="34" cy="24" r="1"/><circle fill="#7C87A5" cx="37" cy="24" r="1"/><path d="M3 16v-.5m2 .5v-.5m2 .5v-.5m2 .5v-.5m2 .5v-.5m2 .5v-.5M21 22v-.5m2 .5v-.5M3 12v-.5m2 .5v-.5m2 .5v-.5m2 .5v-.5m2 .5v-.5m2 .5v-.5M28 12v-.5m-2 .5v-.5m-2 .5v-.5m6 .5v-.5m2 .5v-.5m2 .5v-.5m2 .5v-.5m2 .5v-.5M31 22v-.5m2 .5v-.5m2 .5v-.5m2 .5v-.5" stroke="#7C87A5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.2 KiB

1
static/svgs/project/extension-boost.svg
View file

@ -1 +0,0 @@
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path stroke="#7C87A5" fill="#FFF" stroke-linecap="round" stroke-linejoin="round" d="M1 12h38v16H1z"/><path stroke="#E6E7E8" fill="#E6E7E8" stroke-linecap="round" stroke-linejoin="round" d="M16 12v2h1v-1h2v1h1v-2z"/><path d="M14.5 12H22" stroke="#7C87A5" stroke-linecap="square"/><path stroke="#7C87A5" fill="#FFF" stroke-linecap="round" stroke-linejoin="round" d="M1 16h19v6h4v4h-4v2H1z"/><path stroke="#7C87A5" fill="#E6E7E8" stroke-linecap="round" stroke-linejoin="round" d="M1 26h38v2H1zM1 19h9l3 3h4v4H1z"/><circle fill="#FF661A" cx="4.5" cy="22.5" r="1.5"/><circle fill="#7C87A5" cx="22" cy="24" r="1"/><path stroke="#7C87A5" fill="#FFF" stroke-linecap="round" stroke-linejoin="round" d="M29 22h10v4H29z"/><circle fill="#7C87A5" cx="31" cy="24" r="1"/><circle fill="#7C87A5" cx="34" cy="24" r="1"/><circle fill="#7C87A5" cx="37" cy="24" r="1"/><g stroke="#7C87A5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 16v-.5M5 16v-.5M7 16v-.5M9 16v-.5M11 16v-.5M13 16v-.5"/></g><g stroke="#7C87A5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 22v-.5M23 22v-.5"/></g><g stroke="#7C87A5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12v-.5M5 12v-.5M7 12v-.5M9 12v-.5M11 12v-.5M13 12v-.5"/></g><g stroke="#7C87A5" stroke-linecap="round" stroke-linejoin="round"><path d="M28 12v-.5M26 12v-.5M24 12v-.5M30 12v-.5M32 12v-.5M34 12v-.5M36 12v-.5M38 12v-.5"/></g><g stroke="#7C87A5" stroke-linecap="round" stroke-linejoin="round"><path d="M31 22v-.5M33 22v-.5M35 22v-.5M37 22v-.5"/></g></g></svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.6 KiB