Style extension activation page
MODIFY
src/routes/extension-activation.svelte
src/routes/extension-activation.svelte
window.navigator.userAgent.includes(browser)
);
- const repositoryProviders = [
- {
- icon: "",
- label: "Go to GitLab",
- href: "https://gitlab.com",
- },
- {
- icon: "",
- label: "Go to GitHub",
- href: "https://github.com",
- },
- {
- icon: "",
- label: "Go to Bitbucket",
- href: "https://bitbucket.org",
- },
- ];
-
const features = [
{
- icon: "",
+ icon: "/images/extension-activation/prebuild.svg",
title: "Skip the Waiting",
description:
"Gitpod continuously builds your git branches like a CI server. This means no more waiting for dependencies to be downloaded and builds to finish.",
},
{
- icon: "",
+ icon: "/images/extension-activation/collaborate.svg",
title: "Code Together",
description:
"Do code reviews within Gitpod, work together in one workspace in real-time and share reproducible workspaces with your team.",
},
{
- icon: "",
+ icon: "/images/extension-activation/fresh.svg",
title: "Work Remotely",
description:
"You no longer need an over-powered laptop, Gitpod works just as smoothly on a Chromebook or iPad. All you need is a browser.",
];
</script>
+<style lang="scss">
+ .buttons {
+ display: inline-flex;
+ flex-direction: row;
+ align-items: baseline;
+
+ @media (max-width: 848px) {
+ flex-direction: column;
+ display: block;
+ text-align: center;
+ }
+
+ .btn {
+ display: flex;
+ padding: var(--macro) var(--x-small);
+ border-radius: 0.75rem;
+ color: var(--white);
+ border: 1px solid transparent;
+ place-items: center;
+ transition: all 0.2s;
+ margin: 8px;
+
+ @media (max-width: 768px) {
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ opacity: 0.9;
+ }
+
+ &:not(:last-child) {
+ margin-bottom: var(--micro);
+ }
+
+ &--github {
+ background: #000000;
+
+ &:hover,
+ &:focus,
+ &:active {
+ opacity: 1;
+ background: var(--black-hover);
+ }
+ }
+
+ &--bitbucket {
+ background: #2684ff;
+ }
+
+ &--gitlab {
+ background: #fc6d26;
+ }
+ }
+
+ svg {
+ height: 1.75rem;
+ width: 1.75rem;
+ margin-right: var(--micro);
+
+ @media (max-width: 1400px) {
+ display: none;
+ }
+ }
+ }
+</style>
+
+<header>
+ Extension Installed
<h1>Gitpod for {currentBrowser} is Now Active</h1>
-<p>Now you can easily spin up dev environments with a single click.</p>
+</header>
+<section class="halfimages">
+ <article>
+ <div>
<img
src="/images/extension-activation/extension-screenshot.png"
alt="A GitHub project page with the Gitpod button highlighted"
+ height="688"
+ width="688"
/>
-
-<h2>Get started</h2>
-<ol>
- <li>Go to one of your projects at GitLab, GitHub or Bitbucket.</li>
- <li>
- Click on the Gitpod button and start a dev environment for your project.
- </li>
-</ol>
-
-<div>
- {#each repositoryProviders as repositoryProvider}
+ </div>
<div>
- <!-- TODO: Insert GitLab logo -->
- <a href={repositoryProvider.href}>{repositoryProvider.label}</a>
+ <h2 class="h3">
+ Now you can easily spin up dev environments with a single click.
+ </h2>
+ <p class="text-large">
+ The extension adds a Gitpod button on every project and branch across
+ GitLab, GitHub, and Bitbucket so you can easily open a new workspace for
+ any existing project.
+ </p>
+ <div class="buttons">
+ <a href="https://gitlab.com" class="btn btn--gitlab">
+ <svg
+ viewBox="0 0 30 28"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <title>Bitbucket</title>
+ <path
+ d="M14.583 27.214L9.21 10.954h10.738l-5.365 16.26z"
+ fill="#fff"
+ /><path
+ d="M27.476 10.954l1.637 4.94c.148.449-.012.944-.403 1.223L14.584 27.214l12.892-16.26z"
+ fill="#fff"
+ fill-opacity=".65"
+ /><path
+ d="M27.476 10.954h-7.527l3.24-9.793c.165-.5.888-.5 1.06 0l3.227 9.793z"
+ fill="#fff"
+ /><path
+ d="M1.685 10.954l-1.63 4.94c-.148.449.012.944.403 1.223l14.127 10.097-12.9-16.26z"
+ fill="#fff"
+ fill-opacity=".65"
+ /><path
+ d="M1.685 10.954H9.21L5.978 1.161c-.166-.5-.888-.5-1.06 0l-3.233 9.793z"
+ fill="#fff"
+ /><path
+ d="M14.585 27.214l-5.373-16.26H1.685l12.9 16.26z"
+ fill="#fff"
+ fill-opacity=".85"
+ /><path
+ d="M14.584 27.214l12.892-16.26h-7.527l-5.365 16.26z"
+ fill="#fff"
+ fill-opacity=".85"
+ /></svg
+ >
+ Open GitLab
+ </a>
+ <a href="https://github.com" class="btn btn--github">
+ <svg
+ viewBox="0 0 29 30"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <title>GitHub Octocat</title>
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M14.57.5a14.374 14.374 0 00-9.442 3.54 14.947 14.947 0 00-4.94 8.946A15.133 15.133 0 002.106 23.07a14.615 14.615 0 007.862 6.406c.733.137.992-.329.992-.721v-2.528c-4.065.903-4.923-1.999-4.923-1.999a3.97 3.97 0 00-1.617-2.181c-1.314-.913.107-.913.107-.913.46.067.9.24 1.285.505.386.265.707.617.94 1.029.197.366.464.688.784.949a3.047 3.047 0 003.45.292c.057-.751.374-1.457.894-1.99-3.234-.374-6.63-1.652-6.63-7.3a5.82 5.82 0 011.493-3.989 5.529 5.529 0 01.143-3.933s1.224-.402 4.002 1.524a13.49 13.49 0 017.291 0c2.779-1.926 3.994-1.524 3.994-1.524.536 1.233.6 2.627.179 3.906a5.82 5.82 0 011.492 3.988c0 5.713-3.404 6.963-6.648 7.3.348.358.617.787.788 1.26.17.472.24.976.204 1.479v4.079c0 .484.26.858 1 .712a14.623 14.623 0 007.752-6.43 15.134 15.134 0 001.87-10.019 14.949 14.949 0 00-4.89-8.892A14.377 14.377 0 0014.57.5z"
+ fill="#F9F9F9"
+ />
+ </svg>
+ Open GitHub
+ </a>
+ <a href="http://bitbucket.org/" class="btn btn--bitbucket">
+ <svg
+ viewBox="0 0 27 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <title>Bitbucket</title>
+ <path
+ d="M.848.25h-.01a.841.841 0 00-.827.971L3.565 22.8c.091.543.563.945 1.114.95h17.053a.84.84 0 00.837-.703l3.554-21.822a.841.841 0 00-.826-.971h-.011L.848.25zm14.968 15.595h-5.443L8.899 8.146h8.236l-1.32 7.7z"
+ fill="#fff"
+ />
+ </svg>
+ Open Bitbucket
+ </a>
</div>
- {/each}
</div>
+ </article>
+</section>
-<div>
+<section class="cards triple">
{#each features as feature}
+ <div class="card">
<div>
- <!-- TODO: Insert icon -->
+ <img
+ src={feature.icon}
+ alt=""
+ role="presentation"
+ height="100"
+ width="100"
+ />
<h2>{feature.title}</h2>
<p>{feature.description}</p>
</div>
- {/each}
</div>
+ {/each}
+</section>
-<div>
+<section class="brief">
<h2>Learn More About Gitpod</h2>
- <a href="/docs">See Docs</a>
-</div>
+ <a href="/docs" class="btn-conversion">See Docs</a>
+</section>

ADD
static/images/extension-activation/collaborate.svg
+<svg width="115" height="117" viewBox="0 0 115 117" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g filter="url(#filter0_dd)">
+ <path
+ d="M60 44C60 32.9543 51.0457 24 40 24C28.9543 24 20 32.9543 20 44C20 55.0457 28.9543 64 40 64C51.0457 64 60 55.0457 60 44Z"
+ fill="#90E084" />
+ <path
+ d="M39.998 49.7139C43.9429 49.7139 47.1409 46.5159 47.1409 42.571C47.1409 38.6261 43.9429 35.4282 39.998 35.4282C36.0531 35.4282 32.8551 38.6261 32.8551 42.571C32.8551 46.5159 36.0531 49.7139 39.998 49.7139Z"
+ fill="black" fill-opacity="0.2" />
+ <path
+ d="M39.999 73.9996C46.3108 73.9996 51.4276 68.8828 51.4276 62.571C51.4276 56.2591 46.3108 51.1424 39.999 51.1424C33.6872 51.1424 28.5704 56.2591 28.5704 62.571C28.5704 68.8828 33.6872 73.9996 39.999 73.9996Z"
+ fill="black" fill-opacity="0.2" />
+ <path
+ d="M59 44C59 33.5066 50.4934 25 40 25C29.5066 25 21 33.5066 21 44C21 54.4934 29.5066 63 40 63C50.4934 63 59 54.4934 59 44Z"
+ stroke="#F9F9F9" stroke-width="2" />
+ </g>
+ <g filter="url(#filter1_dd)">
+ <path
+ d="M95 35C95 23.9543 86.0457 15 75 15C63.9543 15 55 23.9543 55 35C55 46.0457 63.9543 55 75 55C86.0457 55 95 46.0457 95 35Z"
+ fill="#CEB1FF" />
+ <path
+ d="M74.998 40.7139C78.9429 40.7139 82.1409 37.5159 82.1409 33.571C82.1409 29.6261 78.9429 26.4282 74.998 26.4282C71.0531 26.4282 67.8551 29.6261 67.8551 33.571C67.8551 37.5159 71.0531 40.7139 74.998 40.7139Z"
+ fill="black" fill-opacity="0.2" />
+ <path
+ d="M74.999 64.9996C81.3108 64.9996 86.4276 59.8828 86.4276 53.571C86.4276 47.2591 81.3108 42.1424 74.999 42.1424C68.6872 42.1424 63.5704 47.2591 63.5704 53.571C63.5704 59.8828 68.6872 64.9996 74.999 64.9996Z"
+ fill="black" fill-opacity="0.2" />
+ <path
+ d="M94 35C94 24.5066 85.4934 16 75 16C64.5066 16 56 24.5066 56 35C56 45.4934 64.5066 54 75 54C85.4934 54 94 45.4934 94 35Z"
+ stroke="#F9F9F9" stroke-width="2" />
+ </g>
+ <g filter="url(#filter2_dd)">
+ <path
+ d="M79 62C79 50.9543 70.0457 42 59 42C47.9543 42 39 50.9543 39 62C39 73.0457 47.9543 82 59 82C70.0457 82 79 73.0457 79 62Z"
+ fill="#ABEBFF" />
+ <path
+ d="M58.998 67.7139C62.9429 67.7139 66.1409 64.5159 66.1409 60.571C66.1409 56.6261 62.9429 53.4282 58.998 53.4282C55.0531 53.4282 51.8551 56.6261 51.8551 60.571C51.8551 64.5159 55.0531 67.7139 58.998 67.7139Z"
+ fill="black" fill-opacity="0.2" />
+ <path
+ d="M58.999 91.9996C65.3108 91.9996 70.4276 86.8828 70.4276 80.571C70.4276 74.2591 65.3108 69.1424 58.999 69.1424C52.6872 69.1424 47.5704 74.2591 47.5704 80.571C47.5704 86.8828 52.6872 91.9996 58.999 91.9996Z"
+ fill="black" fill-opacity="0.2" />
+ <path
+ d="M78 62C78 51.5066 69.4934 43 59 43C48.5066 43 40 51.5066 40 62C40 72.4934 48.5066 81 59 81C69.4934 81 78 72.4934 78 62Z"
+ stroke="#F9F9F9" stroke-width="2" />
+ </g>
+ <defs>
+ <filter id="filter0_dd" x="0" y="9" width="80" height="89.9996" filterUnits="userSpaceOnUse"
+ color-interpolation-filters="sRGB">
+ <feFlood flood-opacity="0" result="BackgroundImageFix" />
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+ <feOffset dy="5" />
+ <feGaussianBlur stdDeviation="10" />
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+ <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+ <feOffset dy="2" />
+ <feGaussianBlur stdDeviation="2.5" />
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" />
+ <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+ <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+ </filter>
+ <filter id="filter1_dd" x="35" y="0" width="80" height="89.9996" filterUnits="userSpaceOnUse"
+ color-interpolation-filters="sRGB">
+ <feFlood flood-opacity="0" result="BackgroundImageFix" />
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+ <feOffset dy="5" />
+ <feGaussianBlur stdDeviation="10" />
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+ <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+ <feOffset dy="2" />
+ <feGaussianBlur stdDeviation="2.5" />
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" />
+ <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+ <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+ </filter>
+ <filter id="filter2_dd" x="19" y="27" width="80" height="89.9996" filterUnits="userSpaceOnUse"
+ color-interpolation-filters="sRGB">
+ <feFlood flood-opacity="0" result="BackgroundImageFix" />
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+ <feOffset dy="5" />
+ <feGaussianBlur stdDeviation="10" />
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+ <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+ <feOffset dy="2" />
+ <feGaussianBlur stdDeviation="2.5" />
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" />
+ <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+ <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+ </filter>
+ </defs>
+</svg>
\ No newline at end of file

ADD
static/images/extension-activation/fresh.svg
+<svg width="138" height="122" viewBox="0 0 138 122" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g opacity="0.35" filter="url(#filter0_dd)">
+ <path opacity="0.35"
+ d="M79 15H24C21.7909 15 20 16.7909 20 19V69C20 71.2091 21.7909 73 24 73H79C81.2091 73 83 71.2091 83 69V19C83 16.7909 81.2091 15 79 15Z"
+ fill="#F3F1F0" />
+ <path opacity="0.35" d="M20 19C20 16.791 21.791 15 24 15H79C81.209 15 83 16.791 83 19V25H20V19Z"
+ fill="#DADADA" />
+ <path opacity="0.35"
+ d="M27 22C28.1046 22 29 21.1046 29 20C29 18.8954 28.1046 18 27 18C25.8954 18 25 18.8954 25 20C25 21.1046 25.8954 22 27 22Z"
+ fill="#C4C4C4" />
+ <path opacity="0.35" d="M48 32H27V36H48V32Z" fill="#DADADA" />
+ <path opacity="0.35" d="M70 42H33V46H70V42Z" fill="#DADADA" />
+ <path opacity="0.35" d="M70 52H33V56H70V52Z" fill="#DADADA" />
+ <path opacity="0.35" d="M83 65H20V73H83V65Z" fill="#FAB15A" />
+ </g>
+ <g opacity="0.5" filter="url(#filter1_dd)">
+ <path opacity="0.5"
+ d="M114 39H59C56.7909 39 55 40.7909 55 43V93C55 95.2091 56.7909 97 59 97H114C116.209 97 118 95.2091 118 93V43C118 40.7909 116.209 39 114 39Z"
+ fill="#F3F1F0" />
+ <path opacity="0.5" d="M55 43C55 40.791 56.791 39 59 39H114C116.209 39 118 40.791 118 43V49H55V43Z"
+ fill="#DADADA" />
+ <path opacity="0.5"
+ d="M62 46C63.1046 46 64 45.1046 64 44C64 42.8954 63.1046 42 62 42C60.8954 42 60 42.8954 60 44C60 45.1046 60.8954 46 62 46Z"
+ fill="#C4C4C4" />
+ <path opacity="0.5" d="M83 56H62V60H83V56Z" fill="#DADADA" />
+ <path opacity="0.5" d="M105 66H68V70H105V66Z" fill="#DADADA" />
+ <path opacity="0.5" d="M105 76H68V80H105V76Z" fill="#DADADA" />
+ <path opacity="0.5" d="M118 89H55V97H118V89Z" fill="#FFB45B" />
+ </g>
+ <g filter="url(#filter2_dd)">
+ <path
+ d="M98 25H43C40.7909 25 39 26.7909 39 29V79C39 81.2091 40.7909 83 43 83H98C100.209 83 102 81.2091 102 79V29C102 26.7909 100.209 25 98 25Z"
+ fill="#F3F1F0" />
+ <path d="M39 29C39 26.791 40.791 25 43 25H98C100.209 25 102 26.791 102 29V35H39V29Z" fill="#DADADA" />
+ <path
+ d="M46 32C47.1046 32 48 31.1046 48 30C48 28.8954 47.1046 28 46 28C44.8954 28 44 28.8954 44 30C44 31.1046 44.8954 32 46 32Z"
+ fill="#C4C4C4" />
+ <path d="M67 42H46V46H67V42Z" fill="#DADADA" />
+ <path d="M89 52H52V56H89V52Z" fill="#DADADA" />
+ <path d="M89 62H52V66H89V62Z" fill="#DADADA" />
+ <path d="M102 75H39V83H102V75Z" fill="#FFB45B" />
+ </g>
+ <defs>
+ <filter id="filter0_dd" x="0" y="0" width="103" height="98" filterUnits="userSpaceOnUse"
+ color-interpolation-filters="sRGB">
+ <feFlood flood-opacity="0" result="BackgroundImageFix" />
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+ <feOffset dy="5" />
+ <feGaussianBlur stdDeviation="10" />
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+ <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+ <feOffset dy="2" />
+ <feGaussianBlur stdDeviation="2.5" />
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" />
+ <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+ <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+ </filter>
+ <filter id="filter1_dd" x="35" y="24" width="103" height="98" filterUnits="userSpaceOnUse"
+ color-interpolation-filters="sRGB">
+ <feFlood flood-opacity="0" result="BackgroundImageFix" />
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+ <feOffset dy="5" />
+ <feGaussianBlur stdDeviation="10" />
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+ <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+ <feOffset dy="2" />
+ <feGaussianBlur stdDeviation="2.5" />
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" />
+ <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+ <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+ </filter>
+ <filter id="filter2_dd" x="19" y="10" width="103" height="98" filterUnits="userSpaceOnUse"
+ color-interpolation-filters="sRGB">
+ <feFlood flood-opacity="0" result="BackgroundImageFix" />
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+ <feOffset dy="5" />
+ <feGaussianBlur stdDeviation="10" />
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+ <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+ <feOffset dy="2" />
+ <feGaussianBlur stdDeviation="2.5" />
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" />
+ <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+ <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+ </filter>
+ </defs>
+</svg>
\ No newline at end of file

ADD
static/images/extension-activation/prebuild.svg
+<svg width="110" height="106" viewBox="0 0 110 106" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g filter="url(#filter0_dd)">
+ <path
+ d="M86 15H24C21.7909 15 20 16.7909 20 19V77C20 79.2091 21.7909 81 24 81H86C88.2091 81 90 79.2091 90 77V19C90 16.7909 88.2091 15 86 15Z"
+ fill="#F3F1F0" />
+ <path d="M20 19C20 16.791 21.791 15 24 15H86C88.209 15 90 16.791 90 19V25H20V19Z" fill="#DADADA" />
+ <path
+ d="M27 22C28.1046 22 29 21.1046 29 20C29 18.8954 28.1046 18 27 18C25.8954 18 25 18.8954 25 20C25 21.1046 25.8954 22 27 22Z"
+ fill="#C4C4C4" />
+ <path d="M79 34H42V38H79V34Z" fill="#DADADA" />
+ <path d="M30 36.1L31.944 38.5L36.444 34" stroke="#65C651" stroke-width="2" stroke-linecap="round"
+ stroke-linejoin="round" />
+ <path d="M79 45.5H42V49.5H79V45.5Z" fill="#DADADA" />
+ <path d="M30 47.6L31.944 50L36.444 45.5" stroke="#65C651" stroke-width="2" stroke-linecap="round"
+ stroke-linejoin="round" />
+ <path d="M79 57H42V61H79V57Z" fill="#DADADA" />
+ <path d="M30 59.1L31.944 61.5L36.444 57" stroke="#65C651" stroke-width="2" stroke-linecap="round"
+ stroke-linejoin="round" />
+ <path d="M52 68H30V72H52V68Z" fill="#DADADA" />
+ </g>
+ <defs>
+ <filter id="filter0_dd" x="0" y="0" width="110" height="106" filterUnits="userSpaceOnUse"
+ color-interpolation-filters="sRGB">
+ <feFlood flood-opacity="0" result="BackgroundImageFix" />
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+ <feOffset dy="5" />
+ <feGaussianBlur stdDeviation="10" />
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+ <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+ <feOffset dy="2" />
+ <feGaussianBlur stdDeviation="2.5" />
+ <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" />
+ <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+ <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+ </filter>
+ </defs>
+</svg>
\ No newline at end of file

Style extension activation page