mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 07:38:07 -05:00
Implement design feedback
This commit is contained in:
Andy O'Neill
parent
3c45808380
commit
7d0ff3c196
3 changed files with 60 additions and 22 deletions
|
|
@ -10,7 +10,6 @@ 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';
|
||||
|
|
@ -26,8 +25,9 @@ const ScratchLink = ({intl}) => {
|
|||
|
||||
return (
|
||||
<div className="extension-landing link">
|
||||
<ExtensionHeader
|
||||
renderCopy={
|
||||
<div className="extension-header">
|
||||
<FlexRow className="inner">
|
||||
<FlexRow className="column extension-info">
|
||||
<FlexRow className="column extension-copy">
|
||||
<h1><img
|
||||
alt={intl.formatMessage({id: 'scratchLink.linkLogo'})}
|
||||
|
|
@ -35,19 +35,19 @@ const ScratchLink = ({intl}) => {
|
|||
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
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</FlexRow>
|
||||
<div className="extension-image">
|
||||
<img src="/images/download/scratch-link-illustration.svg" />
|
||||
</div>
|
||||
</FlexRow>
|
||||
</div>
|
||||
<OSChooser
|
||||
currentOS={os}
|
||||
handleSetOS={setOS}
|
||||
|
|
|
|||
|
|
@ -3,5 +3,23 @@
|
|||
.link {
|
||||
.extension-header {
|
||||
background-color: $ui-aqua;
|
||||
|
||||
.inner {
|
||||
flex-direction: row;
|
||||
|
||||
.extension-info {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 0;
|
||||
|
||||
.extension-copy {
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
.extension-image {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
20
static/images/download/scratch-link-illustration.svg
Normal file
20
static/images/download/scratch-link-illustration.svg
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<svg width="336" height="279" viewBox="0 0 336 279" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.5" d="M336 82.3823C336 120.156 300.346 150.774 256.365 150.774C212.383 150.774 176.714 120.156 176.714 82.3823C176.714 30.7828 212.375 0 256.357 0C336 0 336 44.6156 336 82.3823Z" fill="white"/>
|
||||
<path opacity="0.5" d="M166.581 218.29C166.581 251.291 130.928 278.041 86.946 278.041C42.9643 278.041 7.29553 251.291 7.29553 218.29C7.29553 173.21 42.9568 146.316 86.9385 146.316C166.581 146.316 166.581 185.295 166.581 218.29Z" fill="white"/>
|
||||
<path opacity="0.5" d="M153.612 214.644C153.612 240.454 123.108 260.207 90.093 260.207C57.0784 260.207 27.5609 242.786 27.5609 212.741C27.5609 172.939 57.0784 154.017 90.093 154.017C149.868 154.03 153.612 188.84 153.612 214.644Z" fill="white"/>
|
||||
<path d="M157.867 234.268H235.686C240.82 234.268 250.885 233.498 250.885 224.743C250.885 213.8 242.779 214.408 235.686 214.408C230.012 214.408 211.03 214.408 202.249 214.408C195.764 214.408 187.252 211.45 187.252 198.398C187.252 182.186 200.29 181.24 207.315 181.78H274.596C278.649 181.848 285.945 176.957 285.945 171.445C285.945 164.555 279.257 159.083 274.596 159.083C270.867 159.083 205.221 159.083 172.864 159.083C163.407 158.205 144.371 156.206 144.695 130.104C145.019 104.002 169.756 102.273 181.983 102.745H207.315" stroke="white" stroke-width="4.05308" stroke-linecap="round"/>
|
||||
<path d="M203.424 95.9214C199.809 85.8771 198.891 75.0605 200.761 64.5506C202.348 55.5917 205.902 47.0961 211.165 39.675C216.429 32.2539 223.273 26.092 231.203 21.6326C231.82 21.284 232.444 20.9436 233.076 20.6193C246.608 13.6489 262.242 11.9351 276.963 15.8083C278.454 16.2136 279.934 16.6514 281.389 17.1621C293.512 21.37 304.015 29.2646 311.426 39.74C318.838 50.2153 322.788 62.7468 322.722 75.579C322.73 75.7073 322.73 75.8359 322.722 75.9641C322.718 76.037 322.718 76.11 322.722 76.1829C322.695 78.166 322.567 80.1464 322.341 82.1166C321.401 90.4575 318.762 98.5173 314.587 105.799C310.413 113.081 304.79 119.43 298.067 124.455C295.504 126.372 292.794 128.084 289.961 129.574C287.391 130.923 284.729 132.092 281.997 133.072C274.398 135.792 266.338 136.989 258.277 136.595C250.216 136.2 242.312 134.221 235.015 130.771C227.719 127.321 221.174 122.468 215.753 116.489C210.333 110.509 206.143 103.52 203.424 95.9214Z" fill="#47A8D1"/>
|
||||
<path d="M298.067 124.455C298.043 122.618 298.293 120.787 298.809 119.024C302.262 107.27 316.537 102.07 316.537 102.07C312.262 110.902 305.926 118.577 298.063 124.447L298.067 124.455Z" fill="#389438"/>
|
||||
<path d="M253.232 43.7503C250.954 42.9397 252.17 40.3173 252.17 40.3173C254.024 39.0987 255.95 37.9942 257.938 37.01C264.114 33.877 274.555 29.7388 285.661 30.3387C303.251 31.2952 301.277 55.1151 307.361 57.4537C313.444 59.7924 319.115 54.5153 319.115 54.5153C321.545 61.2742 322.765 68.4087 322.718 75.5912C322.313 70.2655 304.224 80.2726 292.393 83.8555C280.307 87.5032 270.332 72.057 274.584 60.8421C278.835 49.6272 259.778 43.8435 255.084 43.9894C254.457 44.0224 253.83 43.9414 253.232 43.7503V43.7503Z" fill="#389438"/>
|
||||
<path d="M203.156 55.2692C208.045 40.9863 218.03 29.0084 231.199 21.6287C236.55 22.3785 242.325 22.9662 246.601 22.8446C257.139 22.5122 257.95 37.0304 257.95 37.0304L255.113 43.9976C254.507 43.8374 253.883 43.7611 253.256 43.7706V43.7706C250.135 43.7058 243.047 44.7393 231.463 52.7239C215.194 63.9387 226.701 44.5164 217.099 52.8009C211.376 57.6889 206.33 56.8053 203.156 55.2692Z" fill="#389438"/>
|
||||
<path d="M203.424 95.9214C212.888 91.5238 228.07 113.414 222.473 103.724C216.876 94.0326 235.933 83.4946 240.035 92.225C244.137 100.955 244.06 109.228 245.742 119.912C247.424 130.595 253.848 124.155 255.275 120.017C256.701 115.879 255.591 108.591 250.318 105.077C245.045 101.563 248.145 102.516 251.817 95.285C255.49 88.0543 268.005 106.39 276.278 111.364C284.55 116.337 298.809 119.024 298.809 119.024L304.572 118.833C302.536 120.854 300.361 122.729 298.063 124.447C295.5 126.364 292.79 128.076 289.957 129.566C287.387 130.915 284.725 132.084 281.993 133.064C266.648 138.557 249.75 137.73 235.016 130.764C220.281 123.799 208.917 111.265 203.424 95.9214V95.9214Z" fill="#389438"/>
|
||||
<path d="M295.854 91.1753C295.854 91.1753 284.704 93.6072 281.985 90.612C279.265 87.6167 279.901 101.353 289.377 97.6521C298.853 93.9517 295.854 91.1753 295.854 91.1753Z" fill="#389438"/>
|
||||
<path d="M251.615 55.3136C251.615 55.3136 246.196 54.2071 243.914 56.8011C241.632 59.3951 247.74 60.4975 251.615 55.3136Z" fill="#389438"/>
|
||||
<path d="M116.288 150.774H5.11225C2.28884 150.774 0 153.063 0 155.887V231.633C0 234.457 2.28884 236.746 5.11225 236.746H116.288C119.111 236.746 121.4 234.457 121.4 231.633V155.887C121.4 153.063 119.111 150.774 116.288 150.774Z" fill="#4C97FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M74.6762 198.132C74.6762 206.162 68.0472 209.48 59.9015 209.48C51.7558 209.48 45.1537 206.135 45.1537 198.132C45.11 196.393 45.448 194.667 46.144 193.073L45.9031 181.475C45.9002 181.187 45.978 180.903 46.1277 180.657C46.2774 180.411 46.4931 180.211 46.7503 180.081C47.0075 179.951 47.2959 179.896 47.583 179.922C47.87 179.947 48.1442 180.052 48.3745 180.226L54.6644 184.883C56.2978 184.105 58.0933 183.729 59.9015 183.785C61.7183 183.729 63.5225 184.105 65.1654 184.883L71.4108 180.226C71.6419 180.053 71.9165 179.949 72.2037 179.924C72.4909 179.899 72.7794 179.954 73.0369 180.084C73.2944 180.213 73.5107 180.412 73.6615 180.658C73.8124 180.904 73.8919 181.186 73.891 181.475L73.6412 193.073C74.3372 194.667 74.6752 196.393 74.6316 198.132" fill="white"/>
|
||||
<path d="M155.972 210.926H97.0879C95.6491 210.926 94.4827 212.092 94.4827 213.531V250.601C94.4827 252.04 95.6491 253.207 97.0879 253.207H155.972C157.411 253.207 158.578 252.04 158.578 250.601V213.531C158.578 212.092 157.411 210.926 155.972 210.926Z" fill="#E7B50C"/>
|
||||
<path d="M154.286 208.437H95.4017C93.9629 208.437 92.7965 209.603 92.7965 211.042V248.112C92.7965 249.551 93.9629 250.717 95.4017 250.717H154.286C155.725 250.717 156.891 249.551 156.891 248.112V211.042C156.891 209.603 155.725 208.437 154.286 208.437Z" fill="#FFC709"/>
|
||||
<path opacity="0.8" d="M153.646 41.7401C154.387 41.5398 155.062 41.1486 155.603 40.6057C156.145 40.0628 156.535 39.3871 156.734 38.6464L157.653 35.2176C157.747 34.8683 157.953 34.5596 158.24 34.3395C158.526 34.1193 158.878 34 159.239 34C159.601 34 159.952 34.1193 160.239 34.3395C160.526 34.5596 160.732 34.8683 160.826 35.2176L161.752 38.6464C161.951 39.3871 162.34 40.0628 162.882 40.6057C163.424 41.1486 164.099 41.5398 164.839 41.7401L168.268 42.6597C168.617 42.7532 168.926 42.9594 169.146 43.2462C169.366 43.533 169.486 43.8845 169.486 44.246C169.486 44.6076 169.366 44.9591 169.146 45.2459C168.926 45.5327 168.617 45.7389 168.268 45.8323L164.839 46.7585C164.099 46.9577 163.425 47.3477 162.883 47.8894C162.341 48.4312 161.951 49.1058 161.752 49.8457L160.826 53.2745C160.732 53.6238 160.526 53.9324 160.239 54.1526C159.952 54.3727 159.601 54.4921 159.239 54.4921C158.878 54.4921 158.526 54.3727 158.24 54.1526C157.953 53.9324 157.747 53.6238 157.653 53.2745L156.734 49.8457C156.534 49.1058 156.144 48.4312 155.603 47.8894C155.061 47.3477 154.386 46.9577 153.646 46.7585L150.218 45.8323C149.868 45.7389 149.56 45.5327 149.339 45.2459C149.119 44.9591 149 44.6076 149 44.246C149 43.8845 149.119 43.533 149.339 43.2462C149.56 42.9594 149.868 42.7532 150.218 42.6597L153.646 41.7401Z" fill="white"/>
|
||||
<path opacity="0.8" d="M124.24 72.5537C125.395 72.243 126.448 71.6339 127.293 70.7876C128.138 69.9414 128.746 68.8877 129.055 67.7324L130.494 62.3856C130.64 61.8421 130.962 61.3621 131.409 61.0198C131.856 60.6775 132.404 60.4921 132.967 60.4921C133.53 60.4921 134.077 60.6775 134.524 61.0198C134.971 61.3621 135.293 61.8421 135.44 62.3856L136.878 67.7324C137.19 68.8876 137.799 69.9408 138.645 70.7869C139.491 71.6329 140.544 72.2422 141.7 72.5537L147.046 73.9922C147.59 74.1391 148.07 74.4609 148.412 74.9079C148.754 75.3549 148.94 75.9023 148.94 76.4653C148.94 77.0283 148.754 77.5756 148.412 78.0227C148.07 78.4697 147.59 78.7915 147.046 78.9383L141.7 80.3637C140.544 80.6753 139.491 81.2845 138.645 82.1306C137.799 82.9766 137.19 84.0298 136.878 85.185L135.44 90.5253C135.293 91.0688 134.971 91.5488 134.524 91.8911C134.077 92.2333 133.53 92.4188 132.967 92.4188C132.404 92.4188 131.856 92.2333 131.409 91.8911C130.962 91.5488 130.64 91.0688 130.494 90.5253L129.055 85.185C128.746 84.0297 128.138 82.9761 127.293 82.1298C126.448 81.2836 125.395 80.6745 124.24 80.3637L118.894 78.9252C118.35 78.7784 117.87 78.4565 117.528 78.0095C117.185 77.5625 117 77.0152 117 76.4522C117 75.8891 117.185 75.3418 117.528 74.8948C117.87 74.4478 118.35 74.1259 118.894 73.9791L124.24 72.5537Z" fill="white"/>
|
||||
<path opacity="0.8" d="M180.667 260.441C181.571 260.198 182.395 259.721 183.057 259.059C183.718 258.396 184.194 257.571 184.436 256.667L185.562 252.482C185.677 252.057 185.929 251.681 186.278 251.413C186.628 251.145 187.057 251 187.497 251C187.938 251 188.367 251.145 188.716 251.413C189.066 251.681 189.318 252.057 189.433 252.482L190.559 256.667C190.803 257.571 191.28 258.396 191.942 259.058C192.604 259.72 193.429 260.197 194.333 260.441L198.518 261.567C198.943 261.682 199.319 261.934 199.587 262.284C199.855 262.633 200 263.062 200 263.503C200 263.943 199.855 264.372 199.587 264.722C199.319 265.071 198.943 265.323 198.518 265.438L194.333 266.554C193.429 266.798 192.604 267.275 191.942 267.937C191.28 268.599 190.803 269.423 190.559 270.328L189.433 274.508C189.318 274.933 189.066 275.309 188.716 275.577C188.367 275.845 187.938 275.99 187.497 275.99C187.057 275.99 186.628 275.845 186.278 275.577C185.929 275.309 185.677 274.933 185.562 274.508L184.436 270.328C184.194 269.423 183.718 268.599 183.057 267.936C182.395 267.274 181.571 266.797 180.667 266.554L176.482 265.428C176.057 265.313 175.681 265.061 175.413 264.711C175.145 264.361 175 263.933 175 263.492C175 263.052 175.145 262.623 175.413 262.273C175.681 261.923 176.057 261.672 176.482 261.557L180.667 260.441Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.7 KiB |
Loading…
Reference in a new issue