@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
90 lines (84 loc) • 10.3 kB
JavaScript
import { React, PropTypes } from '@gravityforms/libraries';
const { forwardRef } = React;
/**
* @module MailFailedBg
* @description The Mail Failed Bg.
*
* @since 3.6.6
*
* @param {object} props Component props.
* @param {number} props.height The height of the logo.
* @param {string} props.title The title of the logo.
* @param {number} props.width The width of the logo.
* @param {object|null} ref Ref to the component.
*
* @return {JSX.Element} The svg component.
* @example
* import MailFailedBg from '@gravityforms/components/react/admin/elements/Svgs/MailFailedBg';
*
* return (
* <MailFailedBg height={ 474 } width={ 730 } />
* );
*
*/
const MailFailedBg = forwardRef( ( {
height = 474,
title = '',
width = 730,
}, ref ) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } viewBox="0 0 730 474" fill="none" ref={ ref }>
{ title !== '' && <title>{ title }</title> }
<path opacity="0.22" d="M437 221C437 279.613 413.979 335.825 373.003 377.271C332.026 418.716 276.45 442 218.5 442C160.55 442 104.974 418.716 63.9972 377.271C23.0205 335.825 0 279.613 0 221C0 162.387 23.0205 106.175 63.9972 64.7294C104.974 23.2839 160.55 0 218.5 0C276.45 0 332.026 23.2839 373.003 64.7294C413.979 106.175 437 162.387 437 221Z" fill="url(#paint0_radial_2738_56573)" />
<path opacity="0.22" d="M730 237C730 299.856 704.188 360.138 658.241 404.584C612.295 449.03 549.978 474 485 474C420.022 474 357.705 449.03 311.759 404.584C265.812 360.138 240 299.856 240 237C240 174.144 265.812 113.862 311.759 69.4157C357.705 24.9696 420.022 0 485 0C549.978 0 612.295 24.9696 658.241 69.4157C704.188 113.862 730 174.144 730 237Z" fill="url(#paint1_radial_2738_56573)" />
<g opacity="0.3">
<circle opacity="0.08" cx="341" cy="237" r="216" fill="#FF4F00" />
<circle opacity="0.15" cx="340.5" cy="236.5" r="148.5" fill="#FF4F00" />
<circle opacity="0.45" cx="341" cy="237" r="86" fill="#FF4F00" />
</g>
<path fillRule="evenodd" clipRule="evenodd" d="M285 273C284.448 273 284 273.448 284 274C284 274.552 284.448 275 285 275H332H352H399C399.552 275 400 274.552 400 274C400 273.448 399.552 273 399 273H352H332H285Z" fill="#BBBBCE" />
<rect x="404" y="273" width="12" height="2" rx="1" fill="#BBBBCE" />
<g filter="url(#filter0_d_2738_56573)">
<rect x="297" y="197" width="90" height="76" rx="4" fill="white" />
<rect x="296" y="196" width="92" height="78" rx="5" stroke="#BBBBCE" strokeWidth="2" />
</g>
<mask id="mask0_2738_56573" style={ { maskType: 'luminance' } } maskUnits="userSpaceOnUse" x="295" y="195" width="94" height="80">
<rect x="296" y="196" width="92" height="78" rx="5" fill="white" stroke="white" strokeWidth="2" />
</mask>
<g mask="url(#mask0_2738_56573)">
<path fillRule="evenodd" clipRule="evenodd" d="M386.537 198.844L344.288 225.641C342.98 226.471 341.311 226.471 340.003 225.641L298 199L298.537 198.156L339.998 224.541C341.308 225.375 342.983 225.375 344.293 224.541L386 198L386.537 198.844Z" fill="#BBBBCE" stroke="#BBBBCE" />
<path fillRule="evenodd" clipRule="evenodd" d="M323 240C325.209 240 327 238.209 327 236C327 233.791 325.209 232 323 232C320.791 232 319 233.791 319 236C319 238.209 320.791 240 323 240ZM361 240C363.209 240 365 238.209 365 236C365 233.791 363.209 232 361 232C358.791 232 357 233.791 357 236C357 238.209 358.791 240 361 240ZM333.78 250.87C333.559 251.215 333.431 251.466 333.385 251.577C333.066 252.342 332.188 252.703 331.423 252.385C330.658 252.066 330.297 251.188 330.615 250.423C331.005 249.489 331.837 248.186 333.233 246.898C335.534 244.774 338.612 243.5 342.5 243.5C346.388 243.5 349.466 244.774 351.767 246.898C353.163 248.186 353.995 249.489 354.385 250.423C354.703 251.188 354.342 252.066 353.577 252.385C352.812 252.703 351.934 252.342 351.615 251.577C351.569 251.466 351.441 251.215 351.22 250.87C350.837 250.271 350.344 249.667 349.733 249.102C347.971 247.476 345.612 246.5 342.5 246.5C339.388 246.5 337.029 247.476 335.267 249.102C334.656 249.667 334.163 250.271 333.78 250.87Z" fill="#0F3D6C" />
</g>
<path d="M405 188.5H403.5V187C403.5 186.735 403.395 186.48 403.207 186.293C403.02 186.105 402.765 186 402.5 186C402.235 186 401.98 186.105 401.793 186.293C401.605 186.48 401.5 186.735 401.5 187V188.5H400C399.735 188.5 399.48 188.605 399.293 188.793C399.105 188.98 399 189.235 399 189.5C399 189.765 399.105 190.02 399.293 190.207C399.48 190.395 399.735 190.5 400 190.5H401.5V192C401.5 192.265 401.605 192.52 401.793 192.707C401.98 192.895 402.235 193 402.5 193C402.765 193 403.02 192.895 403.207 192.707C403.395 192.52 403.5 192.265 403.5 192V190.5H405C405.265 190.5 405.52 190.395 405.707 190.207C405.895 190.02 406 189.765 406 189.5C406 189.235 405.895 188.98 405.707 188.793C405.52 188.605 405.265 188.5 405 188.5ZM378.49 155.5H375.49V152.5C375.49 152.235 375.385 151.98 375.197 151.793C375.01 151.605 374.755 151.5 374.49 151.5C374.225 151.5 373.97 151.605 373.783 151.793C373.595 151.98 373.49 152.235 373.49 152.5V155.5H370.49C370.225 155.5 369.97 155.605 369.783 155.793C369.595 155.98 369.49 156.235 369.49 156.5C369.49 156.765 369.595 157.02 369.783 157.207C369.97 157.395 370.225 157.5 370.49 157.5H373.49V160.5C373.49 160.765 373.595 161.02 373.783 161.207C373.97 161.395 374.225 161.5 374.49 161.5C374.755 161.5 375.01 161.395 375.197 161.207C375.385 161.02 375.49 160.765 375.49 160.5V157.5H378.49C378.755 157.5 379.01 157.395 379.197 157.207C379.385 157.02 379.49 156.765 379.49 156.5C379.49 156.235 379.385 155.98 379.197 155.793C379.01 155.605 378.755 155.5 378.49 155.5ZM277.5 175.5H274.5V172.5C274.5 172.235 274.395 171.98 274.207 171.793C274.02 171.605 273.765 171.5 273.5 171.5C273.235 171.5 272.98 171.605 272.793 171.793C272.605 171.98 272.5 172.235 272.5 172.5V175.5H269.5C269.235 175.5 268.98 175.605 268.793 175.793C268.605 175.98 268.5 176.235 268.5 176.5C268.5 176.765 268.605 177.02 268.793 177.207C268.98 177.395 269.235 177.5 269.5 177.5H272.5V180.5C272.5 180.765 272.605 181.02 272.793 181.207C272.98 181.395 273.235 181.5 273.5 181.5C273.765 181.5 274.02 181.395 274.207 181.207C274.395 181.02 274.5 180.765 274.5 180.5V177.5H277.5C277.765 177.5 278.02 177.395 278.207 177.207C278.395 177.02 278.5 176.765 278.5 176.5C278.5 176.235 278.395 175.98 278.207 175.793C278.02 175.605 277.765 175.5 277.5 175.5Z" fill="#F15A2B" />
<path d="M406.5 224.9C407.328 224.9 408 224.229 408 223.4C408 222.572 407.328 221.9 406.5 221.9C405.672 221.9 405 222.572 405 223.4C405 224.229 405.672 224.9 406.5 224.9Z" fill="#F15A2B" />
<path d="M259.5 232C260.328 232 261 231.328 261 230.5C261 229.672 260.328 229 259.5 229C258.672 229 258 229.672 258 230.5C258 231.328 258.672 232 259.5 232Z" fill="#F15A2B" />
<path d="M329.5 168C329.006 168 328.522 167.853 328.111 167.579C327.7 167.304 327.38 166.914 327.19 166.457C327.001 166 326.952 165.497 327.048 165.012C327.145 164.527 327.383 164.082 327.732 163.732C328.082 163.383 328.527 163.145 329.012 163.048C329.497 162.952 330 163.001 330.457 163.19C330.914 163.38 331.304 163.7 331.579 164.111C331.853 164.522 332 165.006 332 165.5C332 165.828 331.935 166.153 331.81 166.457C331.684 166.76 331.5 167.036 331.268 167.268C331.036 167.5 330.76 167.684 330.457 167.81C330.153 167.935 329.828 168 329.5 168ZM329.5 164C329.203 164 328.913 164.088 328.667 164.253C328.42 164.418 328.228 164.652 328.114 164.926C328.001 165.2 327.971 165.502 328.029 165.793C328.087 166.084 328.23 166.351 328.439 166.561C328.649 166.77 328.916 166.913 329.207 166.971C329.498 167.029 329.8 166.999 330.074 166.886C330.348 166.772 330.582 166.58 330.747 166.333C330.912 166.087 331 165.797 331 165.5C331 165.102 330.842 164.721 330.561 164.439C330.279 164.158 329.898 164 329.5 164ZM432.49 195.5C431.897 195.5 431.317 195.324 430.823 194.994C430.33 194.665 429.945 194.196 429.718 193.648C429.491 193.1 429.432 192.497 429.548 191.915C429.663 191.333 429.949 190.798 430.369 190.379C430.788 189.959 431.323 189.673 431.905 189.558C432.487 189.442 433.09 189.501 433.638 189.728C434.186 189.955 434.655 190.34 434.984 190.833C435.314 191.327 435.49 191.907 435.49 192.5C435.49 193.296 435.174 194.059 434.611 194.621C434.049 195.184 433.286 195.5 432.49 195.5ZM432.49 190.5C432.094 190.5 431.708 190.617 431.379 190.837C431.05 191.057 430.794 191.369 430.642 191.735C430.491 192.1 430.451 192.502 430.528 192.89C430.606 193.278 430.796 193.635 431.076 193.914C431.355 194.194 431.712 194.384 432.1 194.462C432.488 194.539 432.89 194.499 433.255 194.348C433.621 194.196 433.933 193.94 434.153 193.611C434.373 193.282 434.49 192.896 434.49 192.5C434.49 191.97 434.279 191.461 433.904 191.086C433.529 190.711 433.02 190.5 432.49 190.5Z" fill="#F15A2B" />
<defs>
<filter id="filter0_d_2738_56573" x="295" y="195" width="98" height="80" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
<feFlood floodOpacity="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" result="hardAlpha" />
<feOffset dx="4" />
<feColorMatrix type="matrix" values="0 0 0 0 0.733333 0 0 0 0 0.733333 0 0 0 0 0.807843 0 0 0 0.22 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2738_56573" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2738_56573" result="shape" />
</filter>
<radialGradient id="paint0_radial_2738_56573" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(218.509 221.008) rotate(34.92) scale(226.231 223.672)">
<stop offset="0.21" stopColor="#F15A2B" stopOpacity="0.47" />
<stop offset="1" stopColor="#F15A2B" stopOpacity="0" />
</radialGradient>
<radialGradient id="paint1_radial_2738_56573" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(484.985 236.999) rotate(-48.76) scale(233.884 232.818)">
<stop offset="0.21" stopColor="#F15A2B" stopOpacity="0.38" />
<stop offset="0.82" stopColor="#F15A2B" stopOpacity="0.22" />
<stop offset="1" stopColor="#F15A2B" stopOpacity="0" />
</radialGradient>
</defs>
</svg>
);
} );
MailFailedBg.propTypes = {
height: PropTypes.number,
title: PropTypes.string,
width: PropTypes.number,
};
MailFailedBg.displayName = 'MailFailedBg';
export default MailFailedBg;