paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 43 Packages Projects Releases Wiki Activity

add svgs and EmptyStateImage component

Browse Source
This commit is contained in:
Samira Mokaram
2020-09-29 11:07:19 +02:00
parent 15da130211
commit 0d6c094d0c
6 changed files with 245 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/EmptyState/EmptyStateImage.tsx
+74
View File
@@ -0,0 +1,74 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import missingAnnotation from './assets/missingAnnotation.svg';
import noInformation from './assets/noInformation.svg';
import createComponent from './assets/createComponent.svg';
import noBuild from './assets/noBuild.svg';
import { makeStyles } from '@material-ui/core';
type Props = {
type: 'missingAnnotation' | 'noInformation' | 'createComponent' | 'noBuild';
};
const useStyles = makeStyles(() => ({
generalImg: {
width: '75%',
zIndex: 2,
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, 15%)',
},
}));
export const EmptyStateImage = ({ type }: Props) => {
const classes = useStyles();
switch (type) {
case 'missingAnnotation':
return (
<img
src={missingAnnotation}
className={classes.generalImg}
alt="annotation is missing"
data-testid="missingAnnotation"
/>
);
case 'noInformation':
return (
<img
src={noInformation}
alt="no Information"
className={classes.generalImg}
/>
);
case 'createComponent':
return (
<img
src={createComponent}
alt="create Component"
className={classes.generalImg}
/>
);
case 'noBuild':
return (
<img src={noBuild} alt="no Build" className={classes.generalImg} />
);
default:
return null;
}
};
packages/core/src/components/EmptyState/assets/Background.svg
+10
View File
@@ -0,0 +1,10 @@
<svg width="641" height="393" viewBox="0 0 641 393" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="15.1477" y="106.723" width="380.051" height="45.2281" rx="22.6141" transform="rotate(-10.5556 15.1477 106.723)" fill="#EEEEEE"/>
<rect x="52.761" y="141.21" width="315.147" height="45.2281" rx="22.6141" transform="rotate(-10.5556 52.761 141.21)" fill="#EEEEEE"/>
<rect x="51.0568" y="256.093" width="411.631" height="45.2281" rx="22.6141" transform="rotate(-10.5556 51.0568 256.093)" fill="#EEEEEE"/>
<rect x="35.5782" y="300.474" width="411.033" height="45.2281" rx="22.6141" transform="rotate(-10.5556 35.5782 300.474)" fill="#EEEEEE"/>
<rect x="199.649" y="137.293" width="406.8" height="45.2281" rx="22.6141" transform="rotate(-10.5556 199.649 137.293)" fill="#EEEEEE"/>
<rect x="186.507" y="181.238" width="402.291" height="45.2281" rx="22.6141" transform="rotate(-10.5556 186.507 181.238)" fill="#EEEEEE"/>
<rect x="219.599" y="273.399" width="368.583" height="45.2281" rx="22.6141" transform="rotate(-10.5556 219.599 273.399)" fill="#EEEEEE"/>
<rect x="186.526" y="321.058" width="425.836" height="45.2281" rx="22.6141" transform="rotate(-10.5556 186.526 321.058)" fill="#EEEEEE"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

packages/core/src/components/EmptyState/assets/createComponent.svg
+35
View File
@@ -0,0 +1,35 @@
<svg width="282" height="186" viewBox="0 0 282 186" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M254.494 16.3785H23.3728C20.6336 16.3785 18.4131 18.5995 18.4131 21.3392V36.221C18.4131 38.9607 20.6336 41.1816 23.3728 41.1816H254.494C257.233 41.1816 259.454 38.9607 259.454 36.221V21.3392C259.454 18.5995 257.233 16.3785 254.494 16.3785Z" fill="#9E9E9E"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="18" y="16" width="242" height="146">
<path d="M254.494 16.3785H23.3728C20.6336 16.3785 18.4131 18.5995 18.4131 21.3392V156.268C18.4131 159.008 20.6336 161.228 23.3728 161.228H254.494C257.233 161.228 259.454 159.008 259.454 156.268V21.3392C259.454 18.5995 257.233 16.3785 254.494 16.3785Z" fill="#404040"/>
</mask>
<g mask="url(#mask0)">
<path d="M259.495 30.2683H18.4131V161.432H259.495V30.2683Z" fill="#EEEEEE"/>
<path opacity="0.4" d="M25.3567 25.306C26.4524 25.306 27.3406 24.418 27.3406 23.3226C27.3406 22.2272 26.4524 21.3392 25.3567 21.3392C24.261 21.3392 23.3728 22.2272 23.3728 23.3226C23.3728 24.418 24.261 25.306 25.3567 25.306Z" fill="#D9D9D9"/>
<path opacity="0.4" d="M32.4084 25.306C33.5041 25.306 34.3923 24.418 34.3923 23.3226C34.3923 22.2272 33.5041 21.3392 32.4084 21.3392C31.3127 21.3392 30.4246 22.2272 30.4246 23.3226C30.4246 24.418 31.3127 25.306 32.4084 25.306Z" fill="#D9D9D9"/>
<path opacity="0.3" d="M39.2439 25.306C40.3395 25.306 41.2278 24.418 41.2278 23.3226C41.2278 22.2272 40.3395 21.3392 39.2439 21.3392C38.1482 21.3392 37.26 22.2272 37.26 23.3226C37.26 24.418 38.1482 25.306 39.2439 25.306Z" fill="#D9D9D9"/>
<path d="M32.5328 29.9937H18.4131V161.432H32.5328V29.9937Z" fill="#616161"/>
<path d="M259.495 29.9937H32.533V46.2271H259.495V29.9937Z" fill="#D9D9D9"/>
<path d="M67.3094 50.94H39.5928C38.5819 50.94 37.7625 51.7606 37.7625 52.7729C37.7625 53.7851 38.5819 54.6057 39.5928 54.6057H67.3094C68.3202 54.6057 69.1397 53.7851 69.1397 52.7729C69.1397 51.7606 68.3202 50.94 67.3094 50.94Z" fill="white"/>
<path d="M97.6407 57.224H39.5928C38.5819 57.224 37.7625 58.0445 37.7625 59.0568C37.7625 60.069 38.5819 60.8896 39.5928 60.8896H97.6407C98.6516 60.8896 99.471 60.069 99.471 59.0568C99.471 58.0445 98.6516 57.224 97.6407 57.224Z" fill="white"/>
<path d="M253.219 50.9401H228.118C227.54 50.9401 227.072 51.409 227.072 51.9874V58.2713C227.072 58.8497 227.54 59.3186 228.118 59.3186H253.219C253.797 59.3186 254.265 58.8497 254.265 58.2713V51.9874C254.265 51.409 253.797 50.9401 253.219 50.9401Z" fill="#BDBDBD"/>
<path d="M99.994 66.9117H40.3772C39.3663 66.9117 38.5469 67.7322 38.5469 68.7445V114.303C38.5469 115.315 39.3663 116.136 40.3772 116.136H99.994C101.005 116.136 101.824 115.315 101.824 114.303V68.7445C101.824 67.7322 101.005 66.9117 99.994 66.9117Z" stroke="#D9D9D9" stroke-width="2" stroke-dasharray="5 5"/>
<path d="M175.822 66.9117H112.545C111.534 66.9117 110.714 67.7322 110.714 68.7445V114.303C110.714 115.315 111.534 116.136 112.545 116.136H175.822C176.833 116.136 177.652 115.315 177.652 114.303V68.7445C177.652 67.7322 176.833 66.9117 175.822 66.9117Z" stroke="#D9D9D9" stroke-width="2" stroke-dasharray="5 5"/>
<path d="M251.65 66.9117H188.373C187.362 66.9117 186.543 67.7322 186.543 68.7445V114.303C186.543 115.315 187.362 116.136 188.373 116.136H251.65C252.661 116.136 253.481 115.315 253.481 114.303V68.7445C253.481 67.7322 252.661 66.9117 251.65 66.9117Z" stroke="#D9D9D9" stroke-width="2" stroke-dasharray="5 5"/>
<path d="M139.739 124.514H40.3772C39.3663 124.514 38.5469 125.335 38.5469 126.347V163.527C38.5469 164.539 39.3663 165.36 40.3772 165.36H139.739C140.749 165.36 141.569 164.539 141.569 163.527V126.347C141.569 125.335 140.749 124.514 139.739 124.514Z" stroke="#D9D9D9" stroke-width="2" stroke-dasharray="5 5"/>
<path d="M251.651 124.514H152.289C151.278 124.514 150.459 125.335 150.459 126.347V163.527C150.459 164.539 151.278 165.36 152.289 165.36H251.651C252.661 165.36 253.481 164.539 253.481 163.527V126.347C253.481 125.335 252.661 124.514 251.651 124.514Z" stroke="#D9D9D9" stroke-width="2" stroke-dasharray="5 5"/>
</g>
</g>
<defs>
<filter id="filter0_d" x="0.413086" y="0.37854" width="281.041" height="184.85" 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 dx="2" dy="4"/>
<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.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

packages/core/src/components/EmptyState/assets/missingAnnotation.svg
+41
View File
@@ -0,0 +1,41 @@
<svg width="259" height="162" viewBox="0 0 259 162" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<rect x="6" y="4" width="243" height="25" rx="5" fill="#9E9E9E"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="6" y="4" width="243" height="146">
<rect x="6" y="4" width="243" height="146" rx="5" fill="#404040"/>
</mask>
<g mask="url(#mask0)">
<rect x="6" y="18" width="247" height="139" fill="#EEEEEE"/>
<rect x="42" y="61" width="181" height="4" rx="2" fill="white"/>
<rect x="42" y="70" width="113" height="4" rx="2" fill="white"/>
<rect x="42" y="43" width="50" height="4" rx="2" fill="white"/>
<rect x="22" y="25" width="36" height="4" rx="2" fill="white"/>
<rect x="11" y="25" width="4" height="4" rx="2" fill="#F8F8F8"/>
<rect x="11" y="34" width="4" height="4" rx="2" fill="#F8F8F8"/>
<rect x="11" y="43" width="4" height="4" rx="2" fill="#F8F8F8"/>
<rect x="11" y="52" width="4" height="4" rx="2" fill="#F8F8F8"/>
<rect x="11" y="62" width="4" height="4" rx="2" fill="#F8F8F8"/>
<rect x="11" y="70" width="4" height="4" rx="2" fill="#F8F8F8"/>
<rect x="11" y="79" width="4" height="4" rx="2" fill="#F8F8F8"/>
<rect x="11" y="88" width="4" height="4" rx="2" fill="#F8F8F8"/>
<rect x="42" y="52" width="181" height="4" rx="2" fill="white"/>
<rect x="22" y="88" width="35" height="4" rx="2" fill="white"/>
<rect x="32" y="79" width="92" height="4" rx="2" fill="white"/>
<rect x="32" y="34" width="45" height="4" rx="2" fill="white"/>
</g>
<ellipse opacity="0.4" cx="13" cy="10.9992" rx="2" ry="1.9992" fill="#D9D9D9"/>
<ellipse opacity="0.4" cx="20.1089" cy="10.9992" rx="2" ry="1.9992" fill="#D9D9D9"/>
<ellipse opacity="0.3" cx="27" cy="10.9992" rx="2" ry="1.9992" fill="#D9D9D9"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="259" height="162" 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 dx="2" dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

packages/core/src/components/EmptyState/assets/noBuild.svg
+43
View File
@@ -0,0 +1,43 @@
<svg width="270" height="177" viewBox="0 0 270 177" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M250.664 8H15.3362C12.3891 8 10 10.3891 10 13.3362V155.28C10 158.227 12.3891 160.616 15.3362 160.616H250.664C253.611 160.616 256 158.227 256 155.28V13.3362C256 10.3891 253.611 8 250.664 8Z" fill="#F8F8F8"/>
<path d="M52.423 21.8742H26.8091C25.7776 21.8742 24.9414 22.7104 24.9414 23.7419C24.9414 24.7734 25.7776 25.6095 26.8091 25.6095H52.423C53.4545 25.6095 54.2906 24.7734 54.2906 23.7419C54.2906 22.7104 53.4545 21.8742 52.423 21.8742Z" fill="#D9D9D9"/>
<path d="M45.4859 42.6855H26.8091C25.7776 42.6855 24.9414 43.5217 24.9414 44.5531C24.9414 45.5846 25.7776 46.4208 26.8091 46.4208H45.4859C46.5174 46.4208 47.3536 45.5846 47.3536 44.5531C47.3536 43.5217 46.5174 42.6855 45.4859 42.6855Z" fill="#BDBDBD"/>
<path d="M57.7592 63.4967H26.8091C25.7776 63.4967 24.9414 64.3329 24.9414 65.3644C24.9414 66.3959 25.7776 67.2321 26.8091 67.2321H57.7592C58.7907 67.2321 59.6269 66.3959 59.6269 65.3644C59.6269 64.3329 58.7907 63.4967 57.7592 63.4967Z" fill="#BDBDBD"/>
<path d="M55.0911 84.308H26.8091C25.7776 84.308 24.9414 85.1442 24.9414 86.1757C24.9414 87.2072 25.7776 88.0434 26.8091 88.0434H55.0911C56.1226 88.0434 56.9588 87.2072 56.9588 86.1757C56.9588 85.1442 56.1226 84.308 55.0911 84.308Z" fill="#BDBDBD"/>
<path d="M67.898 105.119H26.8091C25.7776 105.119 24.9414 105.955 24.9414 106.987C24.9414 108.018 25.7776 108.855 26.8091 108.855H67.898C68.9295 108.855 69.7657 108.018 69.7657 106.987C69.7657 105.955 68.9295 105.119 67.898 105.119Z" fill="#BDBDBD"/>
<path d="M45.4859 125.931H26.8091C25.7776 125.931 24.9414 126.767 24.9414 127.798C24.9414 128.83 25.7776 129.666 26.8091 129.666H45.4859C46.5174 129.666 47.3536 128.83 47.3536 127.798C47.3536 126.767 46.5174 125.931 45.4859 125.931Z" fill="#BDBDBD"/>
<path d="M57.7592 146.742H26.8091C25.7776 146.742 24.9414 147.578 24.9414 148.61C24.9414 149.641 25.7776 150.477 26.8091 150.477H57.7592C58.7907 150.477 59.6269 149.641 59.6269 148.61C59.6269 147.578 58.7907 146.742 57.7592 146.742Z" fill="#BDBDBD"/>
<path d="M112.189 21.8742H97.2473C96.2158 21.8742 95.3796 22.7104 95.3796 23.7419C95.3796 24.7734 96.2158 25.6095 97.2473 25.6095H112.189C113.22 25.6095 114.056 24.7734 114.056 23.7419C114.056 22.7104 113.22 21.8742 112.189 21.8742Z" fill="#D9D9D9"/>
<path d="M147.941 42.6855H97.2473C96.2158 42.6855 95.3796 43.5217 95.3796 44.5531C95.3796 45.5846 96.2158 46.4208 97.2473 46.4208H147.941C148.973 46.4208 149.809 45.5846 149.809 44.5531C149.809 43.5217 148.973 42.6855 147.941 42.6855Z" fill="#BDBDBD"/>
<path d="M134.601 63.4967H97.2473C96.2158 63.4967 95.3796 64.3329 95.3796 65.3644C95.3796 66.3959 96.2158 67.2321 97.2473 67.2321H134.601C135.632 67.2321 136.469 66.3959 136.469 65.3644C136.469 64.3329 135.632 63.4967 134.601 63.4967Z" fill="#BDBDBD"/>
<path d="M143.139 84.308H97.2473C96.2158 84.308 95.3796 85.1442 95.3796 86.1757C95.3796 87.2072 96.2158 88.0434 97.2473 88.0434H143.139C144.17 88.0434 145.007 87.2072 145.007 86.1757C145.007 85.1442 144.17 84.308 143.139 84.308Z" fill="#BDBDBD"/>
<path d="M115.924 105.119H97.2473C96.2158 105.119 95.3796 105.955 95.3796 106.987C95.3796 108.018 96.2158 108.855 97.2473 108.855H115.924C116.956 108.855 117.792 108.018 117.792 106.987C117.792 105.955 116.956 105.119 115.924 105.119Z" fill="#BDBDBD"/>
<path d="M130.332 125.931H97.2473C96.2158 125.931 95.3796 126.767 95.3796 127.798C95.3796 128.83 96.2158 129.666 97.2473 129.666H130.332C131.363 129.666 132.2 128.83 132.2 127.798C132.2 126.767 131.363 125.931 130.332 125.931Z" fill="#BDBDBD"/>
<path d="M145.273 146.742H97.2473C96.2158 146.742 95.3796 147.578 95.3796 148.61C95.3796 149.641 96.2158 150.477 97.2473 150.477H145.273C146.305 150.477 147.141 149.641 147.141 148.61C147.141 147.578 146.305 146.742 145.273 146.742Z" fill="#BDBDBD"/>
<path d="M217.313 21.8742H171.955C170.923 21.8742 170.087 22.7104 170.087 23.7419C170.087 24.7734 170.923 25.6095 171.955 25.6095H217.313C218.344 25.6095 219.18 24.7734 219.18 23.7419C219.18 22.7104 218.344 21.8742 217.313 21.8742Z" fill="#D9D9D9"/>
<path d="M201.304 42.6855H171.955C170.923 42.6855 170.087 43.5217 170.087 44.5531C170.087 45.5846 170.923 46.4208 171.955 46.4208H201.304C202.335 46.4208 203.172 45.5846 203.172 44.5531C203.172 43.5217 202.335 42.6855 201.304 42.6855Z" fill="#BDBDBD"/>
<path d="M179.425 63.4967H171.955C170.923 63.4967 170.087 64.3329 170.087 65.3644C170.087 66.3959 170.923 67.2321 171.955 67.2321H179.425C180.457 67.2321 181.293 66.3959 181.293 65.3644C181.293 64.3329 180.457 63.4967 179.425 63.4967Z" fill="#BDBDBD"/>
<path d="M189.031 84.308H171.955C170.923 84.308 170.087 85.1442 170.087 86.1757C170.087 87.2072 170.923 88.0434 171.955 88.0434H189.031C190.062 88.0434 190.898 87.2072 190.898 86.1757C190.898 85.1442 190.062 84.308 189.031 84.308Z" fill="#BDBDBD"/>
<path d="M227.985 105.119H171.955C170.923 105.119 170.087 105.955 170.087 106.987C170.087 108.018 170.923 108.855 171.955 108.855H227.985C229.016 108.855 229.853 108.018 229.853 106.987C229.853 105.955 229.016 105.119 227.985 105.119Z" fill="#BDBDBD"/>
<path d="M202.905 125.931H171.955C170.923 125.931 170.087 126.767 170.087 127.798C170.087 128.83 170.923 129.666 171.955 129.666H202.905C203.936 129.666 204.772 128.83 204.772 127.798C204.772 126.767 203.936 125.931 202.905 125.931Z" fill="#BDBDBD"/>
<path d="M184.228 146.742H171.955C170.923 146.742 170.087 147.578 170.087 148.61C170.087 149.641 170.923 150.477 171.955 150.477H184.228C185.259 150.477 186.096 149.641 186.096 148.61C186.096 147.578 185.259 146.742 184.228 146.742Z" fill="#BDBDBD"/>
<path d="M18.5381 33.8807H247.462" stroke="#EEEEEE"/>
<path d="M18.5381 54.692H247.462" stroke="#EEEEEE"/>
<path d="M18.5381 75.5032H247.462" stroke="#EEEEEE"/>
<path d="M18.5381 96.3145H247.462" stroke="#EEEEEE"/>
<path d="M18.5381 117.126H247.462" stroke="#EEEEEE"/>
<path d="M18.5381 137.937H247.462" stroke="#EEEEEE"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="270" height="176.616" 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 dx="2" dy="4"/>
<feGaussianBlur stdDeviation="6"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

packages/core/src/components/EmptyState/assets/noInformation.svg
+42
View File
@@ -0,0 +1,42 @@
<svg width="267" height="172" viewBox="0 0 267 172" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<rect x="10" y="50.1651" width="139" height="104.906" rx="5" fill="#EEEEEE"/>
</g>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="19" y="58" width="121" height="98">
<rect x="19.835" y="85.5708" width="9.17924" height="70.1557" rx="4.58962" fill="white"/>
<rect x="38.1938" y="77.0472" width="9.17924" height="78.6792" rx="4.58962" fill="white"/>
<rect x="56.5522" y="58.033" width="9.17924" height="97.6934" rx="4.58962" fill="white"/>
<rect x="74.9102" y="73.7689" width="9.17924" height="81.9575" rx="4.58962" fill="white"/>
<rect x="93.269" y="95.4057" width="9.17924" height="60.3208" rx="4.58962" fill="white"/>
<rect x="111.627" y="81.6368" width="9.17924" height="74.0896" rx="4.58962" fill="white"/>
<rect x="129.986" y="62.6227" width="9.17924" height="93.1038" rx="4.58962" fill="white"/>
</mask>
<g mask="url(#mask0)">
<rect x="10.6558" y="50.1651" width="139" height="100.316" fill="#C4C4C4"/>
</g>
<g filter="url(#filter1_d)">
<rect x="109" y="8" width="144" height="108.679" rx="5" fill="#EEEEEE"/>
</g>
<path d="M173.85 62.1192C144.607 37.3215 129.993 65.1991 120.077 80.5984V106.585H241.923V25.7384C208.172 24.5834 212.569 94.9538 173.85 62.1192Z" fill="#D9D9D9"/>
<path d="M120.077 80.5984C129.993 65.1991 144.607 37.3215 173.85 62.1192C212.569 94.9539 208.172 24.5834 241.923 25.7384" stroke="#9E9E9E" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<filter id="filter0_d" x="0" y="42.1651" width="163" height="128.906" 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 dx="2" dy="4"/>
<feGaussianBlur stdDeviation="6"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_d" x="99" y="0" width="168" height="132.679" 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 dx="2" dy="4"/>
<feGaussianBlur stdDeviation="6"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB