Initial commit: Atomaste website
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
@@ -0,0 +1 @@
|
||||
body{--st-color-accent: #2563eb;--st-color-accent-hover: #1d4ed8;--st-color-heading: #1f2937;--st-color-body: #4b5563;--st-color-light-gray: #e5e7eb;--st-color-placeholder: #6b7280;--st-color-white: #ffffff;--st-color-favorite: #e91e63;--st-background-secondary: #f7f7f9;--st-background-primary: #ffffff;--st-background-light: #f9fafb;--st-tooltip-background: #020617;--st-font-size-xxl: 30px;--st-font-size-xl: 24px;--st-font-size-l: 20px;--st-font-size-m: 18px;--st-font-size-s: 16px;--st-font-size-xs: 14px;--st-font-weight-extra-bold: 600;--st-font-weight-bold: 500;--st-font-weight-normal: 400;--st-font-line-height-xl: 36px;--st-font-line-height-l: 32px;--st-font-line-height-m: 28px;--st-font-line-height-s: 24px;--st-font-line-height-xs: 20px;--st-border-color: #d1d5db;--st-border-radius-6: 6px;--st-border-radius-4: 4px;--st-border-radius-3: 3px;--st-border-radius-2: 2px;--st-border-radius-1: 1px}.zw-xxs-medium{font-size:.625rem;font-weight:500;line-height:.75rem}.zw-xs-normal{font-size:.75rem;font-weight:400;line-height:1rem}.zw-xs-medium{font-size:.75rem;font-weight:500;line-height:1rem}.zw-xs-semibold{font-size:.75rem;font-weight:600;line-height:1rem}.zw-sm-normal{font-size:.875rem;font-weight:400;line-height:1.25rem}.zw-sm-medium{font-size:.875rem;font-weight:500;line-height:1.25rem}.zw-sm-semibold{font-size:.875rem;font-weight:600;line-height:1.25rem}.zw-base-normal{font-size:1rem;font-weight:400;line-height:1.5rem}.zw-base-medium{font-size:1rem;font-weight:500;line-height:1.5rem}.zw-base-semibold{font-size:1rem;font-weight:600;line-height:1.5rem}.zw-base-bold{font-size:1rem;font-weight:700;line-height:1.5rem}.zw-h1{font-size:1.875rem;font-weight:700;line-height:2.25rem;color:var(--app-heading)}.zw-h2{font-size:1.5rem;font-weight:600;line-height:2rem;color:var(--app-heading)}.zw-h3{font-size:1.25rem;font-weight:600;line-height:1.25rem;color:var(--app-heading)}.zw-h4{font-size:1.125rem;font-weight:700;line-height:1.75rem;color:var(--app-heading)}.zw-h5{font-size:1rem;font-weight:600;line-height:1rem;color:var(--app-heading)}.zw-h6{font-size:.875rem;font-weight:600;line-height:.875rem;color:var(--app-heading)}
|
||||
@@ -0,0 +1 @@
|
||||
<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-components', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-media-utils', 'wp-url'), 'version' => '74502822c2b44b65985a');
|
||||
@@ -0,0 +1 @@
|
||||
body{--st-color-accent: #2563eb;--st-color-accent-hover: #1d4ed8;--st-color-heading: #1f2937;--st-color-body: #4b5563;--st-color-light-gray: #e5e7eb;--st-color-placeholder: #6b7280;--st-color-white: #ffffff;--st-color-favorite: #e91e63;--st-background-secondary: #f7f7f9;--st-background-primary: #ffffff;--st-background-light: #f9fafb;--st-tooltip-background: #020617;--st-font-size-xxl: 30px;--st-font-size-xl: 24px;--st-font-size-l: 20px;--st-font-size-m: 18px;--st-font-size-s: 16px;--st-font-size-xs: 14px;--st-font-weight-extra-bold: 600;--st-font-weight-bold: 500;--st-font-weight-normal: 400;--st-font-line-height-xl: 36px;--st-font-line-height-l: 32px;--st-font-line-height-m: 28px;--st-font-line-height-s: 24px;--st-font-line-height-xs: 20px;--st-border-color: #d1d5db;--st-border-radius-6: 6px;--st-border-radius-4: 4px;--st-border-radius-3: 3px;--st-border-radius-2: 2px;--st-border-radius-1: 1px}.zw-xxs-medium{font-size:.625rem;font-weight:500;line-height:.75rem}.zw-xs-normal{font-size:.75rem;font-weight:400;line-height:1rem}.zw-xs-medium{font-size:.75rem;font-weight:500;line-height:1rem}.zw-xs-semibold{font-size:.75rem;font-weight:600;line-height:1rem}.zw-sm-normal{font-size:.875rem;font-weight:400;line-height:1.25rem}.zw-sm-medium{font-size:.875rem;font-weight:500;line-height:1.25rem}.zw-sm-semibold{font-size:.875rem;font-weight:600;line-height:1.25rem}.zw-base-normal{font-size:1rem;font-weight:400;line-height:1.5rem}.zw-base-medium{font-size:1rem;font-weight:500;line-height:1.5rem}.zw-base-semibold{font-size:1rem;font-weight:600;line-height:1.5rem}.zw-base-bold{font-size:1rem;font-weight:700;line-height:1.5rem}.zw-h1{font-size:1.875rem;font-weight:700;line-height:2.25rem;color:var(--app-heading)}.zw-h2{font-size:1.5rem;font-weight:600;line-height:2rem;color:var(--app-heading)}.zw-h3{font-size:1.25rem;font-weight:600;line-height:1.25rem;color:var(--app-heading)}.zw-h4{font-size:1.125rem;font-weight:700;line-height:1.75rem;color:var(--app-heading)}.zw-h5{font-size:1rem;font-weight:600;line-height:1rem;color:var(--app-heading)}.zw-h6{font-size:.875rem;font-weight:600;line-height:.875rem;color:var(--app-heading)}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
<?php return array('dependencies' => array('wp-dom-ready'), 'version' => '06758d4d807d9d22c6ea');
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,14 @@
|
||||
<svg width="25" height="20" viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 6C1 3.23858 3.23858 1 6 1H19C21.7614 1 24 3.23858 24 6V14C24 16.7614 21.7614 19 19 19H6C3.23858 19 1 16.7614 1 14V6Z" stroke="url(#paint0_linear_25352_52655)" stroke-width="2"/>
|
||||
<path d="M12.732 14L9.516 5.6H11.16L14.472 14H12.732ZM6.096 14L9.408 5.6H11.052L7.836 14H6.096ZM7.656 12.152V10.7H12.924V12.152H7.656ZM15.4784 14V5.6H17.1224V14H15.4784Z" fill="url(#paint1_linear_25352_52655)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_25352_52655" x1="25" y1="20" x2="5.4878" y2="-4.39024" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FE5BE4"/>
|
||||
<stop offset="1" stop-color="#5A03EF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_25352_52655" x1="19" y1="14" x2="11.8584" y2="2.39485" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FE5BE4"/>
|
||||
<stop offset="1" stop-color="#5A03EF"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 936 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1,15 @@
|
||||
<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 668 668" width="668" height="668">
|
||||
<title>W Mark</title>
|
||||
<style>
|
||||
tspan { white-space:pre }
|
||||
.shp0 { opacity: 0;fill: #ffffff }
|
||||
.shp1 { fill: #32373c }
|
||||
</style>
|
||||
<g id="W Mark">
|
||||
<path id="Safety Area 2 " class="shp0" d="M834 834L-166 834L-166 -166L834 -166L834 834Z" />
|
||||
<g id="W Mark 2 ">
|
||||
<path id="<Compound Path>" fill-rule="evenodd" class="shp1" d="M667.33 334C667.33 518.09 518.09 667.33 334 667.33C149.91 667.33 0.67 518.09 0.67 334C0.67 149.9 149.91 0.67 334 0.67C518.09 0.67 667.33 149.9 667.33 334ZM212.04 45.28C193.48 53.13 175.58 62.85 158.83 74.17C142.23 85.38 126.62 98.26 112.44 112.44C98.26 126.62 85.38 142.23 74.17 158.83C62.85 175.58 53.13 193.48 45.28 212.04C28.95 250.66 20.67 291.69 20.67 334C20.67 376.31 28.95 417.34 45.28 455.96C53.13 474.52 62.85 492.42 74.17 509.17C85.38 525.77 98.26 541.38 112.44 555.56C126.62 569.74 142.23 582.62 158.83 593.83C175.58 605.15 193.48 614.87 212.04 622.72C250.66 639.05 291.69 647.33 334 647.33C376.31 647.33 417.34 639.05 455.96 622.72C474.52 614.87 492.42 605.15 509.17 593.83C525.77 582.62 541.38 569.74 555.56 555.56C569.74 541.38 582.62 525.77 593.83 509.17C605.15 492.42 614.87 474.52 622.72 455.96C639.05 417.34 647.33 376.31 647.33 334C647.33 291.69 639.05 250.66 622.72 212.04C614.87 193.48 605.15 175.58 593.83 158.83C582.62 142.23 569.74 126.62 555.56 112.44C541.38 98.26 525.77 85.38 509.17 74.17C492.42 62.85 474.52 53.13 455.96 45.28C417.34 28.95 376.31 20.67 334 20.67C291.69 20.67 250.66 28.95 212.04 45.28Z" />
|
||||
<path id="<Compound Path>" class="shp1" d="M79.27 220.94L211.78 583.98C119.11 538.96 55.22 443.93 55.22 333.99C55.22 293.72 63.86 255.49 79.27 220.94ZM500.33 411.55L471.67 502.35L371.29 203.76C382.43 203.17 393.03 202.29 403.08 201.12C418.04 199.35 416.28 177.35 401.31 178.23C371.31 180.58 346.63 181.76 327.26 181.76C309.07 181.76 284.68 180.58 254.11 178.23C239.13 177.35 237.37 200.23 252.35 201.12C261.79 202.29 271.5 203.17 281.48 203.76L324.76 322.33L263.96 504.64L162.81 203.76C173.97 203.17 184.56 202.29 194.6 201.12C209.56 199.35 207.79 177.35 192.82 178.23C162.83 180.58 138.15 181.76 118.79 181.76C113.58 181.76 107.43 181.63 100.91 181.42C150.58 106.02 235.95 56.22 333 56.22C405.32 56.22 471.16 83.87 520.58 129.15C519.38 129.08 518.22 128.93 516.98 128.93C489.7 128.93 470.34 152.7 470.34 178.23C470.34 201.12 483.54 220.48 497.62 243.38C508.19 261.87 520.52 285.64 520.52 319.98C520.52 343.75 513.06 371.86 500.33 411.55ZM423.26 592.2C423.82 593.58 424.51 594.84 425.25 596.03C396.38 606.19 365.35 611.78 333 611.78C305.74 611.78 279.42 607.78 254.52 600.46L337.88 358.29L423.26 592.2ZM610.78 333.99C610.78 436.47 555.24 525.93 472.66 574.08L557.5 328.78C573.35 289.16 578.63 257.47 578.63 229.29C578.63 219.07 577.95 209.58 576.76 200.73C598.44 240.29 610.78 285.69 610.78 333.99Z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="88" height="72" viewBox="0 0 88 72" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.1449 8.01619L13.984 26.0526L44.1449 44.0891L74.3058 26.0526L44.1449 8.01619ZM0.579102 26.0526L44.1449 52.1053L87.7107 26.0526L44.1449 0L0.579102 26.0526Z" fill="black"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 45.8816L8.68421 40.671L44.7954 61.3684L78.8816 40.671L88 45.0132L44.7954 71.7894L0 45.8816Z" fill="#AAB3DD"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 488 B |
@@ -0,0 +1,5 @@
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="tabler:wand">
|
||||
<path id="Vector" d="M30 12L36 18M12 42L42 12L36 6L6 36L12 42ZM18 6C18 7.06087 18.4214 8.07828 19.1716 8.82843C19.9217 9.57857 20.9391 10 22 10C20.9391 10 19.9217 10.4214 19.1716 11.1716C18.4214 11.9217 18 12.9391 18 14C18 12.9391 17.5786 11.9217 16.8284 11.1716C16.0783 10.4214 15.0609 10 14 10C15.0609 10 16.0783 9.57857 16.8284 8.82843C17.5786 8.07828 18 7.06087 18 6ZM38 26C38 27.0609 38.4214 28.0783 39.1716 28.8284C39.9217 29.5786 40.9391 30 42 30C40.9391 30 39.9217 30.4214 39.1716 31.1716C38.4214 31.9217 38 32.9391 38 34C38 32.9391 37.5786 31.9217 36.8284 31.1716C36.0783 30.4214 35.0609 30 34 30C35.0609 30 36.0783 29.5786 36.8284 28.8284C37.5786 28.0783 38 27.0609 38 26Z" stroke="#3D4592" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 895 B |
@@ -0,0 +1,197 @@
|
||||
<svg width="390" height="281" viewBox="0 0 390 281" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_16917_26998)">
|
||||
<rect x="3" y="0.856934" width="384" height="274.286" rx="10.2857" fill="white"/>
|
||||
<path d="M29.1551 14.9322C29.6198 13.7957 31.2293 13.7957 31.694 14.9322L33.9831 20.5307C34.03 20.6455 34.0923 20.7534 34.1683 20.8515L37.8721 25.6331C38.624 26.6038 37.8193 27.9976 36.6027 27.8318L30.6098 27.015C30.4869 26.9983 30.3623 26.9983 30.2393 27.015L24.2464 27.8318C23.0298 27.9976 22.2251 26.6038 22.977 25.6331L26.6808 20.8515C26.7568 20.7534 26.8191 20.6455 26.866 20.5307L29.1551 14.9322Z" fill="url(#paint0_linear_16917_26998)"/>
|
||||
<rect x="133.281" y="20.7417" width="21.9429" height="4.11429" rx="1.37143" fill="url(#paint1_linear_16917_26998)"/>
|
||||
<rect x="163.453" y="20.7417" width="21.9429" height="4.11429" rx="1.37143" fill="url(#paint2_linear_16917_26998)"/>
|
||||
<rect x="193.625" y="20.7417" width="21.9429" height="4.11429" rx="1.37143" fill="url(#paint3_linear_16917_26998)"/>
|
||||
<rect x="223.795" y="20.7417" width="21.9429" height="4.11429" rx="1.37143" fill="url(#paint4_linear_16917_26998)"/>
|
||||
<rect x="337.625" y="17.3135" width="32.9143" height="10.9714" rx="3.42857" fill="url(#paint5_linear_16917_26998)"/>
|
||||
<rect x="41.4043" y="225.748" width="77.4919" height="2.76757" rx="1.38378" fill="url(#paint6_linear_16917_26998)"/>
|
||||
<rect x="41.4043" y="232.666" width="66.4216" height="2.76757" rx="1.38378" fill="url(#paint7_linear_16917_26998)"/>
|
||||
<rect x="41.4043" y="239.585" width="49.8162" height="2.76757" rx="1.38378" fill="url(#paint8_linear_16917_26998)"/>
|
||||
<path d="M46.4601 209.972C46.6731 209.603 47.2057 209.603 47.4188 209.972L49.3362 213.293L51.2536 216.615C51.4667 216.984 51.2004 217.445 50.7743 217.445H46.9394H43.1046C42.6785 217.445 42.4122 216.984 42.6252 216.615L44.5426 213.293L46.4601 209.972Z" fill="url(#paint9_linear_16917_26998)"/>
|
||||
<rect x="156.258" y="225.748" width="77.4919" height="2.76757" rx="1.38378" fill="url(#paint10_linear_16917_26998)"/>
|
||||
<rect x="156.258" y="232.666" width="66.4216" height="2.76757" rx="1.38378" fill="url(#paint11_linear_16917_26998)"/>
|
||||
<rect x="156.258" y="239.585" width="49.8162" height="2.76757" rx="1.38378" fill="url(#paint12_linear_16917_26998)"/>
|
||||
<path d="M161.307 210.03C161.517 209.646 162.069 209.646 162.279 210.03L163.672 212.578C163.723 212.671 163.799 212.747 163.892 212.798L166.44 214.192C166.824 214.402 166.824 214.953 166.44 215.163L163.892 216.556C163.799 216.607 163.723 216.684 163.672 216.776L162.279 219.324C162.069 219.708 161.517 219.708 161.307 219.324L159.914 216.776C159.863 216.684 159.787 216.607 159.694 216.556L157.146 215.163C156.762 214.953 156.762 214.402 157.146 214.192L159.694 212.798C159.787 212.747 159.863 212.671 159.914 212.578L161.307 210.03Z" fill="url(#paint13_linear_16917_26998)"/>
|
||||
<rect x="271.113" y="225.748" width="77.4919" height="2.76757" rx="1.38378" fill="url(#paint14_linear_16917_26998)"/>
|
||||
<rect x="271.113" y="232.666" width="66.4216" height="2.76757" rx="1.38378" fill="url(#paint15_linear_16917_26998)"/>
|
||||
<rect x="271.113" y="239.585" width="49.8162" height="2.76757" rx="1.38378" fill="url(#paint16_linear_16917_26998)"/>
|
||||
<path d="M276.152 210.148C276.355 209.736 276.942 209.736 277.145 210.148L278.146 212.177C278.227 212.341 278.383 212.454 278.563 212.48L280.803 212.805C281.257 212.871 281.438 213.429 281.11 213.75L279.489 215.329C279.358 215.456 279.299 215.64 279.33 215.819L279.712 218.05C279.79 218.502 279.315 218.847 278.909 218.633L276.906 217.58C276.745 217.495 276.552 217.495 276.391 217.58L274.388 218.633C273.982 218.847 273.507 218.502 273.585 218.05L273.967 215.819C273.998 215.64 273.938 215.456 273.808 215.329L272.187 213.75C271.859 213.429 272.04 212.871 272.494 212.805L274.734 212.48C274.914 212.454 275.07 212.341 275.15 212.177L276.152 210.148Z" fill="url(#paint17_linear_16917_26998)"/>
|
||||
<rect x="19.2852" y="44.5708" width="351.429" height="141.429" rx="10.9714" fill="url(#paint18_linear_16917_26998)"/>
|
||||
<path d="M46.7129 108.514C46.7129 107.757 47.3269 107.143 48.0843 107.143H229.113C229.87 107.143 230.484 107.757 230.484 108.514C230.484 109.271 229.87 109.885 229.113 109.885H48.0843C47.3269 109.885 46.7129 109.271 46.7129 108.514Z" fill="url(#paint19_linear_16917_26998)"/>
|
||||
<rect x="46.7129" y="115.372" width="112.457" height="2.74286" rx="1.37143" fill="url(#paint20_linear_16917_26998)"/>
|
||||
<rect x="46.7129" y="93.4282" width="87.7714" height="5.48571" rx="1.37143" fill="url(#paint21_linear_16917_26998)"/>
|
||||
<rect x="46.7129" y="126.343" width="32.9143" height="10.9714" rx="2.74286" fill="url(#paint22_linear_16917_26998)"/>
|
||||
<rect x="85.799" y="127.028" width="31.5429" height="9.6" rx="2.05714" stroke="url(#paint23_linear_16917_26998)" stroke-width="1.37143"/>
|
||||
<path d="M128.1 67.7834C128.313 66.7509 129.788 66.7509 130.001 67.7834L130.415 69.789C130.597 70.6711 131.286 71.3604 132.168 71.5425L134.174 71.9565C135.206 72.1697 135.206 73.6445 134.174 73.8576L132.168 74.2717C131.286 74.4538 130.597 75.1431 130.415 76.0252L130.001 78.0308C129.788 79.0632 128.313 79.0632 128.1 78.0308L127.686 76.0252C127.503 75.1431 126.814 74.4538 125.932 74.2717L123.926 73.8576C122.894 73.6445 122.894 72.1697 123.926 71.9565L125.932 71.5425C126.814 71.3604 127.503 70.6711 127.686 69.789L128.1 67.7834Z" stroke="url(#paint24_linear_16917_26998)" stroke-width="1.28571"/>
|
||||
<path d="M254.957 86.6403C255.17 85.6078 256.645 85.6078 256.858 86.6403L257.272 88.6459C257.454 89.528 258.144 90.2173 259.026 90.3994L261.031 90.8135C262.064 91.0266 262.064 92.5014 261.031 92.7146L259.026 93.1286C258.144 93.3107 257.454 94 257.272 94.8821L256.858 96.8877C256.645 97.9202 255.17 97.9202 254.957 96.8877L254.543 94.8821C254.361 94 253.672 93.3107 252.789 93.1286L250.784 92.7146C249.751 92.5014 249.751 91.0266 250.784 90.8135L252.789 90.3994C253.672 90.2173 254.361 89.528 254.543 88.6459L254.957 86.6403Z" stroke="url(#paint25_linear_16917_26998)" stroke-width="1.28571"/>
|
||||
<rect opacity="0.5" x="233.57" y="66.856" width="75.1684" height="75.1684" fill="url(#paint26_linear_16917_26998)"/>
|
||||
<rect opacity="0.5" x="268.973" y="94.6309" width="75.1684" height="75.1684" rx="37.5842" fill="url(#paint27_linear_16917_26998)"/>
|
||||
<path d="M137.529 186.926C137.742 185.893 139.217 185.893 139.43 186.926L139.844 188.932C140.027 189.814 140.716 190.503 141.598 190.685L143.604 191.099C144.636 191.312 144.636 192.787 143.604 193L141.598 193.414C140.716 193.596 140.027 194.286 139.844 195.168L139.43 197.173C139.217 198.206 137.742 198.206 137.529 197.173L137.115 195.168C136.933 194.286 136.244 193.596 135.362 193.414L133.356 193C132.324 192.787 132.324 191.312 133.356 191.099L135.362 190.685C136.244 190.503 136.933 189.814 137.115 188.932L137.529 186.926Z" stroke="url(#paint28_linear_16917_26998)" stroke-width="1.28571"/>
|
||||
<rect x="3.42857" y="1.28551" width="383.143" height="273.429" rx="9.85714" stroke="url(#paint29_linear_16917_26998)" stroke-width="0.857143"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_16917_26998" x="0.257143" y="0.856934" width="389.486" height="279.771" 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" result="hardAlpha"/>
|
||||
<feMorphology radius="2.74286" operator="erode" in="SourceAlpha" result="effect1_dropShadow_16917_26998"/>
|
||||
<feOffset dy="2.74286"/>
|
||||
<feGaussianBlur stdDeviation="2.74286"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<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="BackgroundImageFix" result="effect1_dropShadow_16917_26998"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_16917_26998" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_16917_26998" x1="19.4531" y1="22.7988" x2="41.396" y2="22.7988" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_16917_26998" x1="133.281" y1="22.7988" x2="155.224" y2="22.7988" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_16917_26998" x1="163.453" y1="22.7988" x2="185.396" y2="22.7988" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_16917_26998" x1="193.625" y1="22.7988" x2="215.568" y2="22.7988" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_16917_26998" x1="223.795" y1="22.7988" x2="245.738" y2="22.7988" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_16917_26998" x1="337.625" y1="22.7991" x2="370.539" y2="22.7991" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear_16917_26998" x1="41.4043" y1="227.131" x2="118.896" y2="227.131" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear_16917_26998" x1="41.4043" y1="234.05" x2="107.826" y2="234.05" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear_16917_26998" x1="41.4043" y1="240.969" x2="91.2205" y2="240.969" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint9_linear_16917_26998" x1="41.4043" y1="214.677" x2="52.4746" y2="214.677" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint10_linear_16917_26998" x1="156.258" y1="227.131" x2="233.75" y2="227.131" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint11_linear_16917_26998" x1="156.258" y1="234.049" x2="222.679" y2="234.049" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint12_linear_16917_26998" x1="156.258" y1="240.969" x2="206.074" y2="240.969" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint13_linear_16917_26998" x1="156.258" y1="214.677" x2="167.328" y2="214.677" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint14_linear_16917_26998" x1="271.113" y1="227.131" x2="348.605" y2="227.131" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint15_linear_16917_26998" x1="271.113" y1="234.05" x2="337.535" y2="234.05" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint16_linear_16917_26998" x1="271.113" y1="240.969" x2="320.929" y2="240.969" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint17_linear_16917_26998" x1="271.113" y1="214.677" x2="282.184" y2="214.677" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint18_linear_16917_26998" x1="19.2852" y1="115.283" x2="370.714" y2="115.283" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint19_linear_16917_26998" x1="46.7129" y1="108.514" x2="230.484" y2="108.514" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint20_linear_16917_26998" x1="46.7129" y1="116.743" x2="159.17" y2="116.743" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint21_linear_16917_26998" x1="46.7129" y1="96.171" x2="134.484" y2="96.171" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint22_linear_16917_26998" x1="46.7129" y1="131.828" x2="79.6272" y2="131.828" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint23_linear_16917_26998" x1="85.1133" y1="131.828" x2="118.028" y2="131.828" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint24_linear_16917_26998" x1="129.05" y1="59.9995" x2="129.05" y2="85.8146" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B809A7"/>
|
||||
<stop offset="0.46875" stop-color="#E90B76"/>
|
||||
<stop offset="1" stop-color="#FC8536"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint25_linear_16917_26998" x1="255.908" y1="78.8564" x2="255.908" y2="104.672" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B809A7"/>
|
||||
<stop offset="0.46875" stop-color="#E90B76"/>
|
||||
<stop offset="1" stop-color="#FC8536"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint26_linear_16917_26998" x1="233.57" y1="104.439" x2="308.739" y2="104.439" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint27_linear_16917_26998" x1="268.973" y1="132.214" x2="344.141" y2="132.214" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D1DAE5"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0.25"/>
|
||||
<stop offset="1" stop-color="#D1DAE5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint28_linear_16917_26998" x1="138.48" y1="179.142" x2="138.48" y2="204.957" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B809A7"/>
|
||||
<stop offset="0.46875" stop-color="#E90B76"/>
|
||||
<stop offset="1" stop-color="#FC8536"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint29_linear_16917_26998" x1="3" y1="0.856934" x2="387" y2="275.143" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B809A7"/>
|
||||
<stop offset="0.46875" stop-color="#E90B76"/>
|
||||
<stop offset="1" stop-color="#FC8536"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 16 KiB |
@@ -0,0 +1,61 @@
|
||||
<svg width="480" height="345" viewBox="0 0 480 345" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_25567_55585" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="480" height="345">
|
||||
<rect y="0.427734" width="480" height="344.571" fill="url(#paint0_radial_25567_55585)"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_25567_55585)">
|
||||
<line x1="11.1462" y1="2.14258" x2="11.1462" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="28.2868" y1="2.14258" x2="28.2868" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="45.4275" y1="2.14258" x2="45.4274" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="62.5759" y1="2.14258" x2="62.5759" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="79.7165" y1="2.14258" x2="79.7165" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="96.8571" y1="2.14258" x2="96.8571" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="114.006" y1="2.14258" x2="114.006" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="131.146" y1="2.14258" x2="131.146" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="148.287" y1="2.14258" x2="148.287" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="165.427" y1="2.14258" x2="165.427" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="182.576" y1="2.14258" x2="182.576" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="199.717" y1="2.14258" x2="199.717" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="216.857" y1="2.14258" x2="216.857" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="234.006" y1="2.14258" x2="234.006" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="251.146" y1="2.14258" x2="251.146" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="268.287" y1="2.14258" x2="268.287" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="285.427" y1="2.14258" x2="285.427" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="302.576" y1="2.14258" x2="302.576" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="319.717" y1="2.14258" x2="319.716" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="336.857" y1="2.14258" x2="336.857" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="354.006" y1="2.14258" x2="354.006" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="371.146" y1="2.14258" x2="371.146" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="388.287" y1="2.14258" x2="388.287" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="405.427" y1="2.14258" x2="405.427" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="422.576" y1="2.14258" x2="422.576" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="439.717" y1="2.14258" x2="439.716" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="456.857" y1="2.14258" x2="456.857" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="474.006" y1="2.14258" x2="474.006" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57813" y1="335.568" x2="476.578" y2="335.568" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57813" y1="318.425" x2="476.578" y2="318.425" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57813" y1="301.282" x2="476.578" y2="301.282" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57813" y1="284.139" x2="476.578" y2="284.139" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57813" y1="266.996" x2="476.578" y2="266.996" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57813" y1="249.853" x2="476.578" y2="249.853" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57813" y1="232.71" x2="476.578" y2="232.71" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57813" y1="215.568" x2="476.578" y2="215.568" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57813" y1="198.425" x2="476.578" y2="198.425" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57813" y1="181.282" x2="476.578" y2="181.282" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57813" y1="164.139" x2="476.578" y2="164.139" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57813" y1="146.996" x2="476.578" y2="146.996" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57813" y1="129.853" x2="476.578" y2="129.853" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57813" y1="112.71" x2="476.578" y2="112.71" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57813" y1="95.5675" x2="476.578" y2="95.5675" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57813" y1="78.4247" x2="476.578" y2="78.4247" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57813" y1="61.2818" x2="476.578" y2="61.2818" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57813" y1="44.139" x2="476.578" y2="44.1389" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57813" y1="26.996" x2="476.578" y2="26.996" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57813" y1="9.85318" x2="476.578" y2="9.85318" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
</g>
|
||||
<defs>
|
||||
<radialGradient id="paint0_radial_25567_55585" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(240 172.713) rotate(90) scale(172.286 240)">
|
||||
<stop offset="0.912036" stop-color="#D9D9D9"/>
|
||||
<stop offset="1" stop-color="#D9D9D9" stop-opacity="0.5"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
@@ -0,0 +1,76 @@
|
||||
<svg width="84" height="84" viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.73497 41.9998C6.73497 43.6228 5.41924 44.9386 3.7962 44.9386C2.17316 44.9386 0.857422 43.6228 0.857422 41.9998C0.857422 40.3768 2.17316 39.061 3.7962 39.061C5.41924 39.061 6.73497 40.3768 6.73497 41.9998Z" fill="url(#paint0_angular_16917_27467)"/>
|
||||
<path d="M83.1431 41.9998C83.1431 43.6228 81.8274 44.9386 80.2044 44.9386C78.5813 44.9386 77.2656 43.6228 77.2656 41.9998C77.2656 40.3768 78.5813 39.061 80.2044 39.061C81.8274 39.061 83.1431 40.3768 83.1431 41.9998Z" fill="url(#paint1_angular_16917_27467)"/>
|
||||
<path d="M42.0003 6.73448C40.3772 6.73448 39.0615 5.41875 39.0615 3.79571C39.0615 2.17267 40.3772 0.856934 42.0003 0.856934C43.6233 0.856934 44.9391 2.17267 44.9391 3.79571C44.9391 5.41875 43.6233 6.73448 42.0003 6.73448Z" fill="url(#paint2_angular_16917_27467)"/>
|
||||
<path d="M42.0003 83.1426C40.3772 83.1426 39.0615 81.8269 39.0615 80.2039C39.0615 78.5808 40.3772 77.2651 42.0003 77.2651C43.6233 77.2651 44.9391 78.5808 44.9391 80.2039C44.9391 81.8269 43.6233 83.1426 42.0003 83.1426Z" fill="url(#paint3_angular_16917_27467)"/>
|
||||
<path d="M24.3695 11.459C22.9639 12.2706 21.1666 11.789 20.3551 10.3834C19.5436 8.97778 20.0252 7.18045 21.4307 6.36893C22.8363 5.55741 24.6337 6.039 25.4452 7.4446C26.2567 8.85019 25.7751 10.6475 24.3695 11.459Z" fill="url(#paint4_angular_16917_27467)"/>
|
||||
<path d="M62.5736 77.6304C61.168 78.442 59.3707 77.9604 58.5592 76.5548C57.7476 75.1492 58.2292 73.3519 59.6348 72.5403C61.0404 71.7288 62.8377 72.2104 63.6493 73.616C64.4608 75.0216 63.9792 76.8189 62.5736 77.6304Z" fill="url(#paint5_angular_16917_27467)"/>
|
||||
<path d="M72.5428 24.367C71.7313 22.9614 72.2129 21.1641 73.6185 20.3526C75.0241 19.5411 76.8214 20.0227 77.6329 21.4283C78.4445 22.8339 77.9629 24.6312 76.5573 25.4427C75.1517 26.2542 73.3543 25.7726 72.5428 24.367Z" fill="url(#paint6_angular_16917_27467)"/>
|
||||
<path d="M6.37141 62.5711C5.55989 61.1655 6.04148 59.3682 7.44708 58.5567C8.85267 57.7451 10.65 58.2267 11.4615 59.6323C12.273 61.0379 11.7914 62.8353 10.3859 63.6468C8.98026 64.4583 7.18293 63.9767 6.37141 62.5711Z" fill="url(#paint7_angular_16917_27467)"/>
|
||||
<path d="M11.4606 24.367C10.6491 25.7726 8.85176 26.2542 7.44616 25.4427C6.04057 24.6312 5.55898 22.8339 6.3705 21.4283C7.18202 20.0227 8.97934 19.5411 10.3849 20.3526C11.7905 21.1641 12.2721 22.9614 11.4606 24.367Z" fill="url(#paint8_angular_16917_27467)"/>
|
||||
<path d="M77.632 62.5711C76.8205 63.9767 75.0232 64.4583 73.6176 63.6468C72.212 62.8353 71.7304 61.0379 72.5419 59.6323C73.3534 58.2267 75.1507 57.7452 76.5563 58.5567C77.9619 59.3682 78.4435 61.1655 77.632 62.5711Z" fill="url(#paint9_angular_16917_27467)"/>
|
||||
<path d="M59.6339 11.459C58.2283 10.6475 57.7467 8.85019 58.5582 7.4446C59.3698 6.039 61.1671 5.55741 62.5727 6.36893C63.9783 7.18045 64.4599 8.97778 63.6483 10.3834C62.8368 11.789 61.0395 12.2706 59.6339 11.459Z" fill="url(#paint10_angular_16917_27467)"/>
|
||||
<path d="M21.4298 77.6304C20.0242 76.8189 19.5426 75.0216 20.3542 73.616C21.1657 72.2104 22.963 71.7288 24.3686 72.5403C25.7742 73.3519 26.2558 75.1492 25.4443 76.5548C24.6327 77.9604 22.8354 78.442 21.4298 77.6304Z" fill="url(#paint11_angular_16917_27467)"/>
|
||||
<defs>
|
||||
<radialGradient id="paint0_angular_16917_27467" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(42.0003 41.9998) rotate(98.2971) scale(41.5781)">
|
||||
<stop stop-color="#B809A7" stop-opacity="0"/>
|
||||
<stop offset="0.46875" stop-color="#E90B76"/>
|
||||
<stop offset="1" stop-color="#FC8536"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint1_angular_16917_27467" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(42.0003 41.9998) rotate(98.2971) scale(41.5781)">
|
||||
<stop stop-color="#B809A7" stop-opacity="0"/>
|
||||
<stop offset="0.46875" stop-color="#E90B76"/>
|
||||
<stop offset="1" stop-color="#FC8536"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint2_angular_16917_27467" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(42.0003 41.9998) rotate(98.2971) scale(41.5781)">
|
||||
<stop stop-color="#B809A7" stop-opacity="0"/>
|
||||
<stop offset="0.46875" stop-color="#E90B76"/>
|
||||
<stop offset="1" stop-color="#FC8536"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint3_angular_16917_27467" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(42.0003 41.9998) rotate(98.2971) scale(41.5781)">
|
||||
<stop stop-color="#B809A7" stop-opacity="0"/>
|
||||
<stop offset="0.46875" stop-color="#E90B76"/>
|
||||
<stop offset="1" stop-color="#FC8536"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint4_angular_16917_27467" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(42.0003 41.9998) rotate(98.2971) scale(41.5781)">
|
||||
<stop stop-color="#B809A7" stop-opacity="0"/>
|
||||
<stop offset="0.46875" stop-color="#E90B76"/>
|
||||
<stop offset="1" stop-color="#FC8536"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint5_angular_16917_27467" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(42.0003 41.9998) rotate(98.2971) scale(41.5781)">
|
||||
<stop stop-color="#B809A7" stop-opacity="0"/>
|
||||
<stop offset="0.46875" stop-color="#E90B76"/>
|
||||
<stop offset="1" stop-color="#FC8536"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint6_angular_16917_27467" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(42.0003 41.9998) rotate(98.2971) scale(41.5781)">
|
||||
<stop stop-color="#B809A7" stop-opacity="0"/>
|
||||
<stop offset="0.46875" stop-color="#E90B76"/>
|
||||
<stop offset="1" stop-color="#FC8536"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint7_angular_16917_27467" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(42.0003 41.9998) rotate(98.2971) scale(41.5781)">
|
||||
<stop stop-color="#B809A7" stop-opacity="0"/>
|
||||
<stop offset="0.46875" stop-color="#E90B76"/>
|
||||
<stop offset="1" stop-color="#FC8536"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint8_angular_16917_27467" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(42.0003 41.9998) rotate(98.2971) scale(41.5781)">
|
||||
<stop stop-color="#B809A7" stop-opacity="0"/>
|
||||
<stop offset="0.46875" stop-color="#E90B76"/>
|
||||
<stop offset="1" stop-color="#FC8536"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint9_angular_16917_27467" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(42.0003 41.9998) rotate(98.2971) scale(41.5781)">
|
||||
<stop stop-color="#B809A7" stop-opacity="0"/>
|
||||
<stop offset="0.46875" stop-color="#E90B76"/>
|
||||
<stop offset="1" stop-color="#FC8536"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint10_angular_16917_27467" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(42.0003 41.9998) rotate(98.2971) scale(41.5781)">
|
||||
<stop stop-color="#B809A7" stop-opacity="0"/>
|
||||
<stop offset="0.46875" stop-color="#E90B76"/>
|
||||
<stop offset="1" stop-color="#FC8536"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint11_angular_16917_27467" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(42.0003 41.9998) rotate(98.2971) scale(41.5781)">
|
||||
<stop stop-color="#B809A7" stop-opacity="0"/>
|
||||
<stop offset="0.46875" stop-color="#E90B76"/>
|
||||
<stop offset="1" stop-color="#FC8536"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.0 KiB |
@@ -0,0 +1,10 @@
|
||||
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M26.1437 10.7151L31.2866 15.858M10.7151 36.4294L36.4294 10.7151L31.2866 5.57227L5.57227 31.2866L10.7151 36.4294ZM15.858 5.57227C15.858 6.48158 16.2192 7.35365 16.8622 7.99663C17.5052 8.63961 18.3772 9.00084 19.2866 9.00084C18.3772 9.00084 17.5052 9.36206 16.8622 10.005C16.2192 10.648 15.858 11.5201 15.858 12.4294C15.858 11.5201 15.4968 10.648 14.8538 10.005C14.2108 9.36206 13.3387 9.00084 12.4294 9.00084C13.3387 9.00084 14.2108 8.63961 14.8538 7.99663C15.4968 7.35365 15.858 6.48158 15.858 5.57227ZM33.0008 22.7151C33.0008 23.6244 33.3621 24.4965 34.005 25.1395C34.648 25.7825 35.5201 26.1437 36.4294 26.1437C35.5201 26.1437 34.648 26.5049 34.005 27.1479C33.3621 27.7909 33.0008 28.663 33.0008 29.5723C33.0008 28.663 32.6396 27.7909 31.9966 27.1479C31.3536 26.5049 30.4816 26.1437 29.5723 26.1437C30.4816 26.1437 31.3536 25.7825 31.9966 25.1395C32.6396 24.4965 33.0008 23.6244 33.0008 22.7151Z" stroke="url(#paint0_linear_16917_27468)" stroke-width="3.42857" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_16917_27468" x1="21.0008" y1="5.57227" x2="21.0008" y2="36.4294" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B809A7"/>
|
||||
<stop offset="0.46875" stop-color="#E90B76"/>
|
||||
<stop offset="1" stop-color="#FC8536"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,241 @@
|
||||
<svg width="480" height="345" viewBox="0 0 480 345" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_23095_67984)">
|
||||
<g opacity="0.5">
|
||||
<mask id="mask0_23095_67984" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="480" height="345">
|
||||
<rect y="0.427734" width="480" height="344.571" fill="url(#paint0_radial_23095_67984)"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_23095_67984)">
|
||||
<line x1="11.1423" y1="2.14258" x2="11.1423" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="28.2829" y1="2.14258" x2="28.2829" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="45.4275" y1="2.14258" x2="45.4274" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="62.5681" y1="2.14258" x2="62.5681" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="79.7126" y1="2.14258" x2="79.7126" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="96.8571" y1="2.14258" x2="96.8571" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="113.998" y1="2.14258" x2="113.998" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="131.142" y1="2.14258" x2="131.142" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="148.283" y1="2.14258" x2="148.283" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="165.427" y1="2.14258" x2="165.427" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="182.568" y1="2.14258" x2="182.568" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="199.713" y1="2.14258" x2="199.713" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="216.857" y1="2.14258" x2="216.857" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="233.998" y1="2.14258" x2="233.998" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="251.142" y1="2.14258" x2="251.142" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="268.283" y1="2.14258" x2="268.283" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="285.427" y1="2.14258" x2="285.427" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="302.572" y1="2.14258" x2="302.572" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="319.713" y1="2.14258" x2="319.713" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="336.857" y1="2.14258" x2="336.857" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="353.998" y1="2.14258" x2="353.998" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="371.142" y1="2.14258" x2="371.142" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="388.283" y1="2.14258" x2="388.283" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="405.427" y1="2.14258" x2="405.427" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="422.572" y1="2.14258" x2="422.572" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="439.713" y1="2.14258" x2="439.713" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="456.857" y1="2.14258" x2="456.857" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="473.998" y1="2.14258" x2="473.998" y2="345" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57031" y1="335.569" x2="476.57" y2="335.569" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57031" y1="318.424" x2="476.57" y2="318.424" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57031" y1="301.282" x2="476.57" y2="301.282" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57031" y1="284.139" x2="476.57" y2="284.139" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57031" y1="266.996" x2="476.57" y2="266.996" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57031" y1="249.854" x2="476.57" y2="249.854" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57031" y1="232.711" x2="476.57" y2="232.711" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57031" y1="215.569" x2="476.57" y2="215.569" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57031" y1="198.424" x2="476.57" y2="198.424" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57031" y1="181.282" x2="476.57" y2="181.282" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57031" y1="164.139" x2="476.57" y2="164.139" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57031" y1="146.996" x2="476.57" y2="146.996" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57031" y1="129.854" x2="476.57" y2="129.854" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57031" y1="112.711" x2="476.57" y2="112.711" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57031" y1="95.5667" x2="476.57" y2="95.5667" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57031" y1="78.4241" x2="476.57" y2="78.4241" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57031" y1="61.2815" x2="476.57" y2="61.2815" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57031" y1="44.139" x2="476.57" y2="44.1389" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57031" y1="26.9964" x2="476.57" y2="26.9964" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
<line x1="8.57031" y1="9.85379" x2="476.57" y2="9.85379" stroke="#E4EAF1" stroke-width="1.71429"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle opacity="0.2" cx="240" cy="171.998" r="172" fill="white"/>
|
||||
<circle opacity="0.4" cx="240" cy="171.998" r="127.5" fill="white" stroke="url(#paint1_angular_23095_67984)"/>
|
||||
<circle cx="240" cy="171.998" r="80" fill="white"/>
|
||||
<path d="M185 171.428C184.448 171.428 184 171.875 184 172.428C184 172.98 184.448 173.428 185 173.428V171.428ZM239.707 173.135C240.098 172.744 240.098 172.111 239.707 171.721L233.343 165.357C232.953 164.966 232.319 164.966 231.929 165.357C231.538 165.747 231.538 166.38 231.929 166.771L237.586 172.428L231.929 178.085C231.538 178.475 231.538 179.108 231.929 179.499C232.319 179.889 232.953 179.889 233.343 179.499L239.707 173.135ZM189.5 173.428C190.052 173.428 190.5 172.98 190.5 172.428C190.5 171.875 190.052 171.428 189.5 171.428V173.428ZM198.5 171.428C197.948 171.428 197.5 171.875 197.5 172.428C197.5 172.98 197.948 173.428 198.5 173.428V171.428ZM207.5 173.428C208.052 173.428 208.5 172.98 208.5 172.428C208.5 171.875 208.052 171.428 207.5 171.428V173.428ZM216.5 171.428C215.948 171.428 215.5 171.875 215.5 172.428C215.5 172.98 215.948 173.428 216.5 173.428V171.428ZM225.5 173.428C226.052 173.428 226.5 172.98 226.5 172.428C226.5 171.875 226.052 171.428 225.5 171.428V173.428ZM234.5 171.428C233.948 171.428 233.5 171.875 233.5 172.428C233.5 172.98 233.948 173.428 234.5 173.428V171.428ZM185 173.428H189.5V171.428H185V173.428ZM198.5 173.428H207.5V171.428H198.5V173.428ZM216.5 173.428H225.5V171.428H216.5V173.428ZM234.5 173.428H239V171.428H234.5V173.428Z" fill="url(#paint2_linear_23095_67984)"/>
|
||||
<path d="M249 172.428H295" stroke="url(#paint3_linear_23095_67984)" stroke-width="2" stroke-linecap="round" stroke-dasharray="10 10"/>
|
||||
<path d="M184 196.428C183.448 196.428 183 196.875 183 197.428C183 197.98 183.448 198.428 184 198.428V196.428ZM218.707 198.135C219.098 197.744 219.098 197.111 218.707 196.721L212.343 190.357C211.953 189.966 211.319 189.966 210.929 190.357C210.538 190.747 210.538 191.38 210.929 191.771L216.586 197.428L210.929 203.085C210.538 203.475 210.538 204.108 210.929 204.499C211.319 204.889 211.953 204.889 212.343 204.499L218.707 198.135ZM188.25 198.428C188.802 198.428 189.25 197.98 189.25 197.428C189.25 196.875 188.802 196.428 188.25 196.428V198.428ZM196.75 196.428C196.198 196.428 195.75 196.875 195.75 197.428C195.75 197.98 196.198 198.428 196.75 198.428V196.428ZM205.25 198.428C205.802 198.428 206.25 197.98 206.25 197.428C206.25 196.875 205.802 196.428 205.25 196.428V198.428ZM213.75 196.428C213.198 196.428 212.75 196.875 212.75 197.428C212.75 197.98 213.198 198.428 213.75 198.428V196.428ZM184 198.428H188.25V196.428H184V198.428ZM196.75 198.428H205.25V196.428H196.75V198.428ZM213.75 198.428H218V196.428H213.75V198.428Z" fill="#D8DFE9"/>
|
||||
<path d="M224 197.428H294" stroke="#D8DFE9" stroke-width="2" stroke-linecap="round" stroke-dasharray="10 10"/>
|
||||
<path d="M185 147.428C184.448 147.428 184 147.875 184 148.428C184 148.98 184.448 149.428 185 149.428V147.428ZM263.707 149.135C264.098 148.744 264.098 148.111 263.707 147.721L257.343 141.357C256.953 140.966 256.319 140.966 255.929 141.357C255.538 141.747 255.538 142.38 255.929 142.771L261.586 148.428L255.929 154.085C255.538 154.475 255.538 155.108 255.929 155.499C256.319 155.889 256.953 155.889 257.343 155.499L263.707 149.135ZM189.875 149.428C190.427 149.428 190.875 148.98 190.875 148.428C190.875 147.875 190.427 147.428 189.875 147.428V149.428ZM199.625 147.428C199.073 147.428 198.625 147.875 198.625 148.428C198.625 148.98 199.073 149.428 199.625 149.428V147.428ZM209.375 149.428C209.927 149.428 210.375 148.98 210.375 148.428C210.375 147.875 209.927 147.428 209.375 147.428V149.428ZM219.125 147.428C218.573 147.428 218.125 147.875 218.125 148.428C218.125 148.98 218.573 149.428 219.125 149.428V147.428ZM228.875 149.428C229.427 149.428 229.875 148.98 229.875 148.428C229.875 147.875 229.427 147.428 228.875 147.428V149.428ZM238.625 147.428C238.073 147.428 237.625 147.875 237.625 148.428C237.625 148.98 238.073 149.428 238.625 149.428V147.428ZM248.375 149.428C248.927 149.428 249.375 148.98 249.375 148.428C249.375 147.875 248.927 147.428 248.375 147.428V149.428ZM258.125 147.428C257.573 147.428 257.125 147.875 257.125 148.428C257.125 148.98 257.573 149.428 258.125 149.428V147.428ZM185 149.428H189.875V147.428H185V149.428ZM199.625 149.428H209.375V147.428H199.625V149.428ZM219.125 149.428H228.875V147.428H219.125V149.428ZM238.625 149.428H248.375V147.428H238.625V149.428ZM258.125 149.428H263V147.428H258.125V149.428Z" fill="#D8DFE9"/>
|
||||
<path d="M270 148.428H295" stroke="#D8DFE9" stroke-width="2" stroke-linecap="round" stroke-dasharray="10 10"/>
|
||||
<path d="M48.5 100.428C48.5 96.2856 51.8579 92.9277 56 92.9277H176C180.142 92.9277 183.5 96.2856 183.5 100.428V236.428C183.5 240.57 180.142 243.928 176 243.928H56C51.8579 243.928 48.5 240.57 48.5 236.428V100.428Z" fill="white"/>
|
||||
<path d="M48.5 100.428C48.5 96.2856 51.8579 92.9277 56 92.9277H176C180.142 92.9277 183.5 96.2856 183.5 100.428V236.428C183.5 240.57 180.142 243.928 176 243.928H56C51.8579 243.928 48.5 240.57 48.5 236.428V100.428Z" stroke="#475569"/>
|
||||
<path d="M60.5 243.928H79.5V246.428C79.5 247.808 78.3807 248.928 77 248.928H63C61.6193 248.928 60.5 247.808 60.5 246.428V243.928Z" fill="white" stroke="#475569"/>
|
||||
<path d="M152.5 243.928H171.5V246.428C171.5 247.808 170.381 248.928 169 248.928H155C153.619 248.928 152.5 247.808 152.5 246.428V243.928Z" fill="white" stroke="#475569"/>
|
||||
<path d="M56 104.428C56 102.219 57.7909 100.428 60 100.428H172C174.209 100.428 176 102.219 176 104.428V128.428C176 130.637 174.209 132.428 172 132.428H60C57.7909 132.428 56 130.637 56 128.428V104.428Z" fill="#F0F4FA"/>
|
||||
<rect x="66" y="106.428" width="6" height="20" rx="3" fill="url(#paint4_linear_23095_67984)"/>
|
||||
<rect x="78" y="106.428" width="6" height="20" rx="3" fill="url(#paint5_linear_23095_67984)"/>
|
||||
<rect x="90" y="106.428" width="6" height="20" rx="3" fill="url(#paint6_linear_23095_67984)"/>
|
||||
<rect x="102" y="106.428" width="6" height="20" rx="3" fill="url(#paint7_linear_23095_67984)"/>
|
||||
<circle cx="164" cy="116.428" r="2" fill="#FF6C0A"/>
|
||||
<path d="M56 144.428C56 142.219 57.7909 140.428 60 140.428H172C174.209 140.428 176 142.219 176 144.428V168.428C176 170.637 174.209 172.428 172 172.428H60C57.7909 172.428 56 170.637 56 168.428V144.428Z" fill="#F0F4FA"/>
|
||||
<rect x="66" y="146.428" width="6" height="20" rx="3" fill="url(#paint8_linear_23095_67984)"/>
|
||||
<rect x="78" y="146.428" width="6" height="20" rx="3" fill="url(#paint9_linear_23095_67984)"/>
|
||||
<rect x="90" y="146.428" width="6" height="20" rx="3" fill="url(#paint10_linear_23095_67984)"/>
|
||||
<rect x="102" y="146.428" width="6" height="20" rx="3" fill="url(#paint11_linear_23095_67984)"/>
|
||||
<circle cx="164" cy="156.428" r="2" fill="#FF6C0A"/>
|
||||
<path d="M56 184.428C56 182.219 57.7909 180.428 60 180.428H172C174.209 180.428 176 182.219 176 184.428V208.428C176 210.637 174.209 212.428 172 212.428H60C57.7909 212.428 56 210.637 56 208.428V184.428Z" fill="#F0F4FA"/>
|
||||
<rect x="66" y="186.428" width="6" height="20" rx="3" fill="url(#paint12_linear_23095_67984)"/>
|
||||
<rect x="78" y="186.428" width="6" height="20" rx="3" fill="url(#paint13_linear_23095_67984)"/>
|
||||
<rect x="90" y="186.428" width="6" height="20" rx="3" fill="url(#paint14_linear_23095_67984)"/>
|
||||
<rect x="102" y="186.428" width="6" height="20" rx="3" fill="url(#paint15_linear_23095_67984)"/>
|
||||
<circle cx="164" cy="196.428" r="2" fill="#FF6C0A"/>
|
||||
<rect x="60" y="230.428" width="4" height="30" rx="2" transform="rotate(-90 60 230.428)" fill="#F0F4FA"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M141.154 221.678V235.178H144.56V230.963C145.263 230.874 145.929 230.749 146.542 230.571C147.173 230.392 147.732 230.124 148.2 229.767C148.687 229.41 149.047 228.963 149.336 228.41C149.606 227.838 149.75 227.16 149.75 226.321C149.75 225.66 149.66 225.088 149.498 224.606C149.317 224.106 149.101 223.696 148.795 223.356C148.507 223.017 148.146 222.731 147.75 222.517C147.353 222.303 146.903 222.124 146.434 221.999C145.984 221.874 145.479 221.803 144.956 221.749C144.434 221.696 143.911 221.678 143.388 221.678H141.154ZM145.263 227.606C145.1 227.678 144.884 227.696 144.65 227.696V224.66H144.938C145.155 224.66 145.335 224.713 145.479 224.803C145.623 224.892 145.749 224.999 145.821 225.16C145.911 225.303 145.966 225.463 146.002 225.66C146.056 225.838 146.056 226.017 146.056 226.231C146.056 226.446 146.02 226.642 145.966 226.821C145.911 227.017 145.821 227.16 145.695 227.303C145.587 227.428 145.443 227.535 145.263 227.606Z" fill="#111827"/>
|
||||
<path d="M139.688 221.803V235.143H136.408V221.803H139.688Z" fill="#111827"/>
|
||||
<path d="M130.235 224.91H126.775V221.838H135.299L130.83 232.16H134.668V235.142H126L130.235 224.927V224.91Z" fill="#111827"/>
|
||||
<path d="M175.894 223.933L175.885 223.934C175.882 223.934 175.879 223.934 175.876 223.934L175.894 223.933Z" fill="#FF580E"/>
|
||||
<path d="M166.883 227.489C166.931 227.537 166.931 227.666 166.931 227.666L166.803 228.389C166.786 228.454 166.754 228.518 166.69 228.566C166.626 228.615 166.497 228.631 166.497 228.631H164.681C164.632 228.631 164.632 228.582 164.632 228.582L164.825 227.489C164.841 227.441 164.89 227.424 164.89 227.424H166.722C166.786 227.424 166.851 227.441 166.883 227.489Z" fill="#FF580E"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M175.885 223.934C175.967 223.932 176.021 223.998 175.992 224.07C175.697 224.784 174.171 227.755 168.903 230.236C168.801 230.28 168.832 230.441 168.936 230.433L173.362 230.453C173.451 230.464 173.512 230.568 173.446 230.628C172.48 231.757 166.628 238.026 158.012 236.043C154.614 235.253 152.264 232.11 152.25 228.313C152.236 224.516 154.52 221.595 158.371 220.987C162.724 220.286 170.021 220.428 171.183 220.465C171.252 220.459 171.312 220.545 171.264 220.604C171.015 221.023 170.116 222.328 167.676 224.153C167.609 224.195 167.638 224.338 167.725 224.331C168.571 224.374 171.397 224.409 175.885 223.934ZM162.993 226.219C162.993 226.219 163.089 226.235 163.122 226.283C163.138 226.331 163.138 226.38 163.122 226.428L160.63 230.899C160.566 231.028 160.469 231.076 160.341 231.076H159.36C159.36 231.076 159.248 231.076 159.199 231.028C159.151 230.979 159.135 230.947 159.119 230.899L158.685 228.68C158.685 228.68 158.669 228.631 158.621 228.631C158.572 228.631 158.556 228.631 158.556 228.663L157.286 230.915C157.222 231.028 157.11 231.092 156.997 231.092H156.017C156.017 231.092 155.904 231.092 155.872 231.044C155.824 231.012 155.808 230.963 155.792 230.915L154.94 226.444C154.94 226.444 154.94 226.348 154.988 226.299C155.036 226.251 155.084 226.235 155.133 226.235H156.29C156.29 226.235 156.402 226.235 156.435 226.283C156.444 226.298 156.454 226.311 156.463 226.323C156.484 226.352 156.504 226.378 156.515 226.412L156.965 228.68C156.965 228.68 156.981 228.728 157.029 228.728C157.078 228.728 157.094 228.728 157.11 228.696L158.38 226.396C158.444 226.283 158.54 226.219 158.669 226.219H159.473C159.473 226.219 159.585 226.219 159.633 226.267C159.682 226.299 159.698 226.348 159.714 226.396L160.148 228.663C160.148 228.663 160.18 228.712 160.212 228.728C160.244 228.744 160.276 228.728 160.276 228.696L161.562 226.396C161.627 226.283 161.723 226.219 161.852 226.219H162.993ZM168.265 228.582L168.458 227.473L168.474 227.457C168.539 227.103 168.458 226.797 168.249 226.556C168.04 226.315 167.751 226.186 167.397 226.186H163.877C163.797 226.186 163.732 226.218 163.668 226.267C163.604 226.315 163.555 226.459 163.555 226.459L162.768 230.802C162.752 230.882 162.768 230.947 162.816 230.995C162.864 231.043 162.993 231.075 162.993 231.075H163.925C164.006 231.075 164.07 231.043 164.134 230.995C164.198 230.947 164.247 230.802 164.247 230.802L164.407 229.901C164.407 229.869 164.472 229.853 164.472 229.853H166.722C167.092 229.853 167.413 229.724 167.719 229.483C168.008 229.242 168.201 228.936 168.265 228.582Z" fill="#FF580E"/>
|
||||
<path d="M296.5 100.428C296.5 96.2856 299.858 92.9277 304 92.9277H424C428.142 92.9277 431.5 96.2856 431.5 100.428V236.428C431.5 240.57 428.142 243.928 424 243.928H304C299.858 243.928 296.5 240.57 296.5 236.428V100.428Z" fill="white"/>
|
||||
<path d="M296.5 100.428C296.5 96.2856 299.858 92.9277 304 92.9277H424C428.142 92.9277 431.5 96.2856 431.5 100.428V236.428C431.5 240.57 428.142 243.928 424 243.928H304C299.858 243.928 296.5 240.57 296.5 236.428V100.428Z" stroke="#475569"/>
|
||||
<path d="M304 104.428C304 102.219 305.791 100.428 308 100.428H420C422.209 100.428 424 102.219 424 104.428V128.428C424 130.637 422.209 132.428 420 132.428H308C305.791 132.428 304 130.637 304 128.428V104.428Z" fill="#F0F4FA"/>
|
||||
<rect x="314" y="106.428" width="6" height="20" rx="3" fill="url(#paint16_linear_23095_67984)"/>
|
||||
<rect x="326" y="106.428" width="6" height="20" rx="3" fill="url(#paint17_linear_23095_67984)"/>
|
||||
<rect x="338" y="106.428" width="6" height="20" rx="3" fill="url(#paint18_linear_23095_67984)"/>
|
||||
<rect x="350" y="106.428" width="6" height="20" rx="3" fill="url(#paint19_linear_23095_67984)"/>
|
||||
<circle cx="412" cy="116.428" r="2" fill="#3D4592"/>
|
||||
<path d="M304 144.428C304 142.219 305.791 140.428 308 140.428H420C422.209 140.428 424 142.219 424 144.428V168.428C424 170.637 422.209 172.428 420 172.428H308C305.791 172.428 304 170.637 304 168.428V144.428Z" fill="#F0F4FA"/>
|
||||
<rect x="314" y="146.428" width="6" height="20" rx="3" fill="url(#paint20_linear_23095_67984)"/>
|
||||
<rect x="326" y="146.428" width="6" height="20" rx="3" fill="url(#paint21_linear_23095_67984)"/>
|
||||
<rect x="338" y="146.428" width="6" height="20" rx="3" fill="url(#paint22_linear_23095_67984)"/>
|
||||
<rect x="350" y="146.428" width="6" height="20" rx="3" fill="url(#paint23_linear_23095_67984)"/>
|
||||
<circle cx="412" cy="156.428" r="2" fill="#3D4592"/>
|
||||
<path d="M304 184.428C304 182.219 305.791 180.428 308 180.428H420C422.209 180.428 424 182.219 424 184.428V208.428C424 210.637 422.209 212.428 420 212.428H308C305.791 212.428 304 210.637 304 208.428V184.428Z" fill="#F0F4FA"/>
|
||||
<rect x="314" y="186.428" width="6" height="20" rx="3" fill="url(#paint24_linear_23095_67984)"/>
|
||||
<rect x="326" y="186.428" width="6" height="20" rx="3" fill="url(#paint25_linear_23095_67984)"/>
|
||||
<rect x="338" y="186.428" width="6" height="20" rx="3" fill="url(#paint26_linear_23095_67984)"/>
|
||||
<rect x="350" y="186.428" width="6" height="20" rx="3" fill="url(#paint27_linear_23095_67984)"/>
|
||||
<circle cx="412" cy="196.428" r="2" fill="#3D4592"/>
|
||||
<rect x="308" y="230.428" width="4" height="30" rx="2" transform="rotate(-90 308 230.428)" fill="#F0F4FA"/>
|
||||
<circle cx="414" cy="228.428" r="4" fill="#F0F4FA"/>
|
||||
<path d="M308.5 243.928H327.5V246.428C327.5 247.808 326.381 248.928 325 248.928H311C309.619 248.928 308.5 247.808 308.5 246.428V243.928Z" fill="white" stroke="#475569"/>
|
||||
<path d="M400.5 243.928H419.5V246.428C419.5 247.808 418.381 248.928 417 248.928H403C401.619 248.928 400.5 247.808 400.5 246.428V243.928Z" fill="white" stroke="#475569"/>
|
||||
</g>
|
||||
<defs>
|
||||
<radialGradient id="paint0_radial_23095_67984" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(240 172.713) rotate(90) scale(172.286 240)">
|
||||
<stop offset="0.912036" stop-color="#D9D9D9"/>
|
||||
<stop offset="1" stop-color="#D9D9D9" stop-opacity="0.5"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint1_angular_23095_67984" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(240 171.998) rotate(-180) scale(128)">
|
||||
<stop stop-color="#B809A7" stop-opacity="0"/>
|
||||
<stop offset="0.46875" stop-color="#E90B76"/>
|
||||
<stop offset="1" stop-color="#FC8536"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="paint2_linear_23095_67984" x1="185" y1="172.928" x2="239" y2="172.928" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B809A7"/>
|
||||
<stop offset="0.46875" stop-color="#E90B76"/>
|
||||
<stop offset="1" stop-color="#FC8536"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_23095_67984" x1="249" y1="172.928" x2="295" y2="172.928" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B809A7"/>
|
||||
<stop offset="0.46875" stop-color="#E90B76"/>
|
||||
<stop offset="1" stop-color="#FC8536"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_23095_67984" x1="69" y1="106.428" x2="69" y2="126.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_23095_67984" x1="81" y1="106.428" x2="81" y2="126.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear_23095_67984" x1="93" y1="106.428" x2="93" y2="126.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear_23095_67984" x1="105" y1="106.428" x2="105" y2="126.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear_23095_67984" x1="69" y1="146.428" x2="69" y2="166.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint9_linear_23095_67984" x1="81" y1="146.428" x2="81" y2="166.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint10_linear_23095_67984" x1="93" y1="146.428" x2="93" y2="166.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint11_linear_23095_67984" x1="105" y1="146.428" x2="105" y2="166.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint12_linear_23095_67984" x1="69" y1="186.428" x2="69" y2="206.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint13_linear_23095_67984" x1="81" y1="186.428" x2="81" y2="206.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint14_linear_23095_67984" x1="93" y1="186.428" x2="93" y2="206.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint15_linear_23095_67984" x1="105" y1="186.428" x2="105" y2="206.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint16_linear_23095_67984" x1="317" y1="106.428" x2="317" y2="126.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint17_linear_23095_67984" x1="329" y1="106.428" x2="329" y2="126.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint18_linear_23095_67984" x1="341" y1="106.428" x2="341" y2="126.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint19_linear_23095_67984" x1="353" y1="106.428" x2="353" y2="126.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint20_linear_23095_67984" x1="317" y1="146.428" x2="317" y2="166.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint21_linear_23095_67984" x1="329" y1="146.428" x2="329" y2="166.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint22_linear_23095_67984" x1="341" y1="146.428" x2="341" y2="166.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint23_linear_23095_67984" x1="353" y1="146.428" x2="353" y2="166.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint24_linear_23095_67984" x1="317" y1="186.428" x2="317" y2="206.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint25_linear_23095_67984" x1="329" y1="186.428" x2="329" y2="206.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint26_linear_23095_67984" x1="341" y1="186.428" x2="341" y2="206.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint27_linear_23095_67984" x1="353" y1="186.428" x2="353" y2="206.428" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D8DFE9"/>
|
||||
<stop offset="1" stop-color="#D8DFE9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_23095_67984">
|
||||
<rect width="480" height="344" fill="white" transform="translate(0 0.427734)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 26 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="heroicons-outline/rectangle-stack">
|
||||
<path id="Vector" d="M12 13.7561V12C12 9.51472 14.0147 7.5 16.5 7.5H31.5C33.9853 7.5 36 9.51472 36 12V13.7561M12 13.7561C12.4692 13.5902 12.974 13.5 13.5 13.5H34.5C35.026 13.5 35.5308 13.5902 36 13.7561M12 13.7561C10.2522 14.3738 9 16.0407 9 18V19.7561M36 13.7561C37.7478 14.3738 39 16.0407 39 18V19.7561M39 19.7561C38.5308 19.5902 38.026 19.5 37.5 19.5H10.5C9.97405 19.5 9.46917 19.5902 9 19.7561M39 19.7561C40.7478 20.3738 42 22.0407 42 24V36C42 38.4853 39.9853 40.5 37.5 40.5H10.5C8.01472 40.5 6 38.4853 6 36V24C6 22.0407 7.25221 20.3738 9 19.7561" stroke="#3D4592" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 786 B |
@@ -0,0 +1,8 @@
|
||||
<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24 11.7871C24 5.27788 18.6274 0.0011034 12 0.0011034C5.37258 0.0011034 0 5.27788 0 11.7871C7.32159 11.7866 13.7445 11.787 24 11.7871Z" fill="#EFEFEF"/>
|
||||
<path d="M36 0C36 6.50923 30.6274 11.786 24 11.786C17.3726 11.786 12 6.50923 12 0C19.3216 0.000514961 25.7445 8.9524e-05 36 0Z" fill="white"/>
|
||||
<path d="M36 25.8926C36 19.3833 30.6274 14.1066 24 14.1066C17.3726 14.1066 12 19.3833 12 25.8926C19.3216 25.8921 25.7445 25.8925 36 25.8926Z" fill="#EFEFEF"/>
|
||||
<path d="M24 14.1055C24 20.6147 18.6274 25.8915 12 25.8915C5.37258 25.8915 0 20.6147 0 14.1055C7.32159 14.106 13.7445 14.1056 24 14.1055Z" fill="white"/>
|
||||
<path d="M36 28.2148C36 34.7241 30.6274 40.0008 24 40.0008C17.3726 40.0008 12 34.7241 12 28.2148C19.3216 28.2154 25.7445 28.2149 36 28.2148Z" fill="#EFEFEF"/>
|
||||
<path d="M24 40.002C24 33.4927 18.6274 28.2159 12 28.2159C5.37258 28.2159 0 33.4927 0 40.002C7.32159 40.0014 13.7445 40.0019 24 40.002Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M71.2429 7.34463H18.3616C12.2771 7.34463 7.34463 12.2771 7.34463 18.3616V71.2429C7.34463 77.3274 12.2771 82.2598 18.3616 82.2598H71.2429C77.3274 82.2598 82.2598 77.3274 82.2598 71.2429V18.3616C82.2598 12.2771 77.3274 7.34463 71.2429 7.34463ZM18.3616 0C8.22076 0 0 8.22075 0 18.3616V71.2429C0 81.3837 8.22075 89.6045 18.3616 89.6045H71.2429C81.3837 89.6045 89.6045 81.3837 89.6045 71.2429V18.3616C89.6045 8.22076 81.3837 0 71.2429 0H18.3616Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M54.1449 28.1896C53.9728 28.0356 53.7911 27.8882 53.5998 27.7474C51.9414 26.5264 49.6907 25.9159 46.8478 25.9159C44.916 25.9159 43.285 26.1892 41.9546 26.7359C40.6243 27.2644 39.6037 28.0025 38.893 28.9502C38.1294 29.995 36.829 30.8418 35.7046 30.2012C34.8223 29.6985 34.0076 29.0784 33.2839 28.3548C31.9339 27.0047 30.944 25.3377 30.405 23.5061C30.1674 22.6988 30.3776 21.8165 31.0133 21.265C32.434 20.0323 34.0947 18.9948 35.9954 18.1524C39.2028 16.7309 42.8476 16.0202 46.9298 16.0202C51.0849 16.0202 54.7115 16.7309 57.8095 18.1524C60.9259 19.5739 63.3496 21.5512 65.0809 24.0843C65.7142 25.011 66.2354 25.9913 66.6443 27.0252C67.8571 30.0913 65.0579 32.8866 61.7607 32.8866C59.1869 32.8866 57.1265 30.9615 55.18 29.1429L55.1799 29.1428C54.8321 28.8178 54.4878 28.4962 54.1449 28.1896ZM37.1987 34.2544C37.6871 34.0635 38.21 34.3524 38.4829 34.8001C38.9568 35.5473 39.6037 36.1942 40.4238 36.7409C41.2439 37.2694 42.1915 37.7342 43.2667 38.1351C44.342 38.5178 45.4901 38.8458 46.7111 39.1192L51.7409 40.322C54.183 40.8687 56.4245 41.5977 58.4656 42.5089C60.5067 43.4201 62.2744 44.5408 63.7688 45.8712C65.2632 47.2015 66.4204 48.7688 67.2405 50.573C68.0788 52.3772 68.5071 54.4456 68.5253 56.7783C68.5071 60.2044 67.6323 63.1749 65.901 65.6898C64.188 68.1865 61.7095 70.1274 58.4656 71.5124C55.2399 72.8792 51.3491 73.5626 46.7931 73.5626C42.2735 73.5626 38.3371 72.8701 34.9839 71.4851C31.6489 70.1001 29.0429 68.0499 27.1658 65.3345C26.2995 64.0605 25.6252 62.646 25.1428 61.091C24.1699 57.9547 26.943 55.1928 30.2268 55.1928H30.6526C33.4909 55.1928 35.5992 57.6279 37.3075 59.8946C38.2734 61.1338 39.5582 62.0724 41.1619 62.7102C42.7838 63.3298 44.6153 63.6396 46.6564 63.6396C48.6611 63.6396 50.4015 63.3481 51.8776 62.7649C53.372 62.1817 54.5292 61.3707 55.3493 60.332C56.1694 59.2932 56.5794 58.0995 56.5794 56.7509C56.5794 55.4935 56.2058 54.4365 55.4586 53.58C54.7297 52.7234 53.6545 51.9945 52.233 51.3931C50.8297 50.7917 49.1076 50.245 47.0665 49.7529L40.9705 48.2221C36.9718 47.2494 33.6859 45.8124 31.1129 43.9111C30.4174 43.3972 30.1608 42.4925 30.405 41.6629C30.9439 39.8315 31.9336 38.1645 33.2834 36.8145C34.4003 35.6975 35.7342 34.827 37.1987 34.2544ZM29.9545 26.532L29.4188 24.7118C29.3957 24.6328 29.3476 24.5633 29.2818 24.5139C29.2159 24.4645 29.1358 24.4378 29.0535 24.4378C28.9712 24.4378 28.8911 24.4645 28.8252 24.5139C28.7593 24.5633 28.7113 24.6328 28.6882 24.7118L28.1532 26.532C27.7938 27.7529 27.1338 28.8641 26.2338 29.764C25.3338 30.6639 24.2224 31.3236 23.0014 31.6829L21.1811 32.2186C20.8166 32.3267 20.8166 32.8426 21.1811 32.9491L23.0014 33.4849C24.2222 33.8442 25.3335 34.5041 26.2334 35.4039C27.1333 36.3038 27.7931 37.415 28.1525 38.6358L28.6882 40.4568C28.7955 40.8205 29.3115 40.8205 29.4188 40.4568L29.9545 38.6365C30.3138 37.4156 30.9736 36.3043 31.8735 35.4042C32.7734 34.5042 33.8847 33.8443 35.1056 33.4849L36.9266 32.9491C37.2904 32.8419 37.2904 32.3259 36.9266 32.2194L35.1064 31.6837C33.8853 31.3243 32.7738 30.6645 31.8738 29.7644C30.9738 28.8644 30.3138 27.753 29.9545 26.532ZM23.461 37.2817L23.6218 37.8277C23.7296 38.194 23.9275 38.5275 24.1975 38.7975C24.4676 39.0675 24.801 39.2654 25.1673 39.3732L25.7134 39.5339C25.8225 39.5659 25.8225 39.7207 25.7134 39.7529L25.1671 39.9136C24.8008 40.0214 24.4674 40.2194 24.1975 40.4894C23.9275 40.7594 23.7295 41.0928 23.6218 41.4591L23.461 42.0051C23.4288 42.1143 23.2741 42.1143 23.2419 42.0051L23.0812 41.4589C22.9733 41.0926 22.7754 40.7593 22.5054 40.4893C22.2354 40.2193 21.9021 40.0214 21.5358 39.9136L20.9897 39.7529C20.8804 39.7209 20.8804 39.5661 20.9897 39.5337L21.5358 39.373C21.9021 39.2652 22.2355 39.0673 22.5055 38.7973C22.7756 38.5274 22.9735 38.194 23.0814 37.8277L23.2419 37.2817C23.2488 37.2579 23.2632 37.2371 23.283 37.2223C23.3027 37.2075 23.3268 37.1995 23.3515 37.1995C23.3762 37.1995 23.4002 37.2075 23.4199 37.2223C23.4397 37.2371 23.4541 37.2579 23.461 37.2817ZM22.4142 22.428L22.1642 21.5786C22.1535 21.5417 22.131 21.5093 22.1003 21.4863C22.0696 21.4632 22.0322 21.4508 21.9938 21.4508C21.9554 21.4508 21.918 21.4632 21.8872 21.4863C21.8565 21.5093 21.8341 21.5417 21.8233 21.5786L21.5737 22.428C21.4059 22.9978 21.0979 23.5164 20.6779 23.9363C20.2579 24.3562 19.7392 24.6641 19.1695 24.8318L18.32 25.0818C18.1499 25.1322 18.1499 25.373 18.32 25.4227L19.1695 25.6727C19.7392 25.8404 20.2578 26.1483 20.6777 26.5683C21.0977 26.9882 21.4056 27.5068 21.5733 28.0765L21.8233 28.9263C21.8734 29.096 22.1142 29.096 22.1642 28.9263L22.4142 28.0768C22.5819 27.507 22.8898 26.9884 23.3098 26.5684C23.7297 26.1484 24.2483 25.8404 24.8181 25.6727L25.6679 25.4227C25.8377 25.3726 25.8377 25.1319 25.6679 25.0821L24.8184 24.8321C24.2486 24.6645 23.7299 24.3565 23.3099 23.9365C22.8899 23.5165 22.5819 22.9978 22.4142 22.428Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.3 KiB |
@@ -0,0 +1,17 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Group">
|
||||
<g id="Group_2" opacity="0.5">
|
||||
<path id="Vector" d="M27.3274 2.20188L24.5469 3.06447L27.0539 5.74301L31.2475 6.96879L30.108 3.56386C29.7433 2.47428 28.5582 1.79329 27.3274 2.20188Z" fill="white"/>
|
||||
<path id="Vector_2" d="M2.11962 12.7349L3.07686 15.5042L5.76624 13.0073L6.99698 8.78516L3.57827 9.92013C2.39312 10.3287 1.70937 11.5999 2.11962 12.7349Z" fill="white"/>
|
||||
<path id="Vector_3" d="M8.77539 33.1172L9.91496 36.5221C10.234 37.7479 11.5559 38.3381 12.7411 38.0203L15.6584 37.0669L13.2425 34.4338L8.77539 33.1172Z" fill="white"/>
|
||||
<path id="Vector_4" d="M37.9028 27.3079L36.9455 24.4023L34.3929 26.8085L33.0254 31.2576L36.4441 30.1226C37.6293 29.8048 38.4042 28.5337 37.9028 27.3079Z" fill="white"/>
|
||||
</g>
|
||||
<g id="Group_3" opacity="0.8">
|
||||
<path id="Vector_5" d="M22.3157 0.750787C21.4496 -0.202593 20.0821 -0.247993 19.1249 0.61459L16.709 2.83915L21.3128 4.20112L27.0107 5.83548L24.5036 3.15694L22.3157 0.750787Z" fill="white"/>
|
||||
<path id="Vector_6" d="M0.753825 17.6385C-0.203413 18.5011 -0.248996 19.8631 0.617077 20.8165L2.71388 23.0864L3.9902 18.6373L5.67676 13.0078L2.98738 15.5048L0.753825 17.6385Z" fill="white"/>
|
||||
<path id="Vector_7" d="M39.4073 19.1347L37.3105 16.9102L35.9431 21.4047L34.3477 26.7618L36.9003 24.3556L39.1794 22.2218C40.1823 21.4955 40.2734 20.0881 39.4073 19.1347Z" fill="white"/>
|
||||
<path id="Vector_8" d="M13.1523 34.3906L15.5682 37.0238L17.665 39.2483C18.5311 40.2017 19.9442 40.2471 20.8558 39.3845L23.135 37.2962L18.759 36.025L13.1523 34.3906Z" fill="white"/>
|
||||
</g>
|
||||
<path id="Vector_9" d="M37.2204 8.78792L31.2035 7.06276L27.0098 5.83698L21.4032 4.15722L16.7993 2.79525L11.694 1.34248C10.4177 1.02468 9.05023 1.66027 8.73115 2.97684L6.95342 8.92412L5.76827 13.1462L4.0817 18.7757L2.80539 23.2248L1.20999 28.5365C0.89091 29.8077 1.52907 31.1697 2.85097 31.4875L8.8679 33.2126L13.2438 34.4838L18.7594 36.1182L23.1353 37.3893L28.3773 38.9329C29.6536 39.2507 31.0211 38.6151 31.3402 37.2985L33.0724 31.3967L34.4398 26.9476L36.0808 21.5905L37.4483 17.096L38.9981 11.9205C39.1804 10.4677 38.4967 9.10572 37.2204 8.78792ZM27.1922 10.5131V15.2346H20.9017H12.4689C12.5145 14.9168 12.6513 14.5082 12.788 14.145C13.0615 13.464 13.4718 12.783 14.0643 12.2837C14.6113 11.8297 15.2951 11.2849 15.9332 11.0125C16.617 10.6947 17.4375 10.5585 18.2124 10.5585H27.1922V10.5131ZM13.2438 29.7623V25.0408H21.9502C22.0869 25.0408 22.2692 25.0408 22.406 24.9954C22.5427 24.95 22.6795 24.8592 22.8162 24.723C22.953 24.5868 22.9986 24.4506 23.0897 24.3144C23.1353 24.1782 23.1353 24.042 23.1353 23.8604C23.1353 23.7242 23.1353 23.5426 23.0897 23.4064C23.0441 23.2702 22.953 23.134 22.8162 22.9978C22.6795 22.8616 22.5427 22.8162 22.406 22.7254C22.2692 22.68 22.1325 22.68 21.9502 22.68H18.3035C17.5742 22.68 16.6626 22.5438 16.0244 22.2261C15.3407 21.9537 14.6569 21.5451 14.1555 20.9549C13.6997 20.5009 13.1527 19.7291 12.8792 19.0935C12.6968 18.6849 12.6057 18.3671 12.5601 17.9585H18.3491H20.9929H21.9957C22.7251 17.9585 23.6367 18.1401 24.2749 18.4125C24.9586 18.6849 25.6424 19.0935 26.1438 19.6837C26.5996 20.1377 27.1466 20.9095 27.4201 21.5451C27.7392 22.2261 27.8759 23.0432 27.8759 23.9058C27.8759 24.6322 27.6936 25.5402 27.4201 26.1758C27.1466 26.8568 26.7363 27.5377 26.1438 28.0371C25.6879 28.4911 24.913 29.0359 24.2749 29.3083C23.5456 29.6261 22.7251 29.7623 21.9046 29.7623H13.2438Z" fill="white"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="85" height="85" viewBox="0 0 85 85" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 42.4999C0 65.9707 19.0292 85 42.4998 85C65.9707 85 85 65.9707 85 42.4999C85 19.0292 65.9707 0 42.4998 0C19.0292 0 0 19.0292 0 42.4999ZM31.8733 24.7912H24.7911V60.2088H31.8733V24.7912ZM38.9557 24.7912H60.2025V31.8735H38.9557V24.7912ZM60.2025 38.9557H38.9557V46.038H60.2025V38.9557ZM38.9557 53.1265H60.2025V60.2088H38.9557V53.1265Z" fill="#92003B"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 503 B |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="19" height="15" viewBox="0 0 19 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.675555 0.680572C1.10811 0.244809 1.69477 0 2.30649 0H10.5276C11.1394 0 11.726 0.244809 12.1586 0.680572C12.5911 1.11634 12.8341 1.70736 12.8341 2.32362V3.3589C12.8341 3.68925 12.5683 3.95706 12.2404 3.95706C11.9125 3.95706 11.6466 3.68925 11.6466 3.3589V2.32362C11.6466 2.02464 11.5287 1.73791 11.3189 1.5265C11.109 1.31509 10.8244 1.19632 10.5276 1.19632H2.30649C2.00972 1.19632 1.7251 1.31509 1.51524 1.5265C1.30539 1.73791 1.1875 2.02464 1.1875 2.32362V12.6764C1.1875 12.9754 1.30539 13.2621 1.51524 13.4735C1.7251 13.6849 2.00972 13.8037 2.30649 13.8037H10.5276C10.8244 13.8037 11.109 13.6849 11.3189 13.4735C11.5287 13.2621 11.6466 12.9754 11.6466 12.6764V11.6411C11.6466 11.3108 11.9125 11.0429 12.2404 11.0429C12.5683 11.0429 12.8341 11.3108 12.8341 11.6411V12.6764C12.8341 13.2926 12.5911 13.8837 12.1586 14.3194C11.726 14.7552 11.1394 15 10.5276 15H2.30649C1.69477 15 1.10811 14.7552 0.675555 14.3194C0.243005 13.8837 0 13.2926 0 12.6764V2.32362C0 1.70736 0.243004 1.11634 0.675555 0.680572ZM14.5609 3.62612C14.7928 3.39252 15.1687 3.39252 15.4006 3.62612L18.8261 7.07704C19.058 7.31063 19.058 7.68937 18.8261 7.92296L15.4006 11.3739C15.1687 11.6075 14.7928 11.6075 14.5609 11.3739C14.3291 11.1403 14.3291 10.7616 14.5609 10.528L16.9728 8.09816H6.7168C6.38888 8.09816 6.12305 7.83035 6.12305 7.5C6.12305 7.16965 6.38888 6.90184 6.7168 6.90184H16.9728L14.5609 4.47204C14.3291 4.23845 14.3291 3.85971 14.5609 3.62612Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,14 @@
|
||||
<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M76.3279 7.86885H19.6721C13.1534 7.86885 7.86885 13.1534 7.86885 19.6721V76.3279C7.86885 82.8466 13.1534 88.1311 19.6721 88.1311H76.3279C82.8466 88.1311 88.1311 82.8466 88.1311 76.3279V19.6721C88.1311 13.1534 82.8466 7.86885 76.3279 7.86885ZM19.6721 0C8.80752 0 0 8.80751 0 19.6721V76.3279C0 87.1925 8.80751 96 19.6721 96H76.3279C87.1925 96 96 87.1925 96 76.3279V19.6721C96 8.80752 87.1925 0 76.3279 0H19.6721Z" fill="url(#paint0_linear_368_700)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M58.0093 30.2022C57.8249 30.0372 57.6302 29.8793 57.4253 29.7284C55.6485 28.4203 53.2372 27.7662 50.1913 27.7662C48.1217 27.7662 46.3742 28.0591 44.9489 28.6448C43.5236 29.211 42.4302 30.0018 41.6688 31.0171C40.8508 32.1364 39.4578 33.0435 38.2532 32.3573C37.3077 31.8186 36.4346 31.1541 35.6591 30.3787C34.2127 28.9323 33.1522 27.1462 32.5747 25.1839C32.3202 24.3194 32.5454 23.3745 33.2261 22.7839C34.7483 21.463 36.5277 20.3512 38.5643 19.4486C42.0007 17.9257 45.9056 17.1642 50.2792 17.1642C54.7309 17.1642 58.6163 17.9257 61.9355 19.4486C65.2742 20.9716 67.871 23.09 69.7259 25.804C70.4044 26.7967 70.9627 27.847 71.4009 28.9547C72.7002 32.2396 69.7012 35.2344 66.1687 35.2344C63.4112 35.2344 61.2037 33.172 59.1183 31.2236C58.7456 30.8753 58.3767 30.5307 58.0093 30.2022ZM39.8529 36.6996C40.3764 36.4949 40.9369 36.8047 41.2295 37.2845C41.7371 38.085 42.4302 38.7782 43.3088 39.3639C44.1875 39.9301 45.2028 40.428 46.3547 40.8576C47.5067 41.2676 48.7367 41.619 50.0449 41.9119L55.4337 43.2005C58.0501 43.7863 60.4516 44.5673 62.6384 45.5435C64.8252 46.5198 66.7191 47.7205 68.3201 49.1458C69.9211 50.5711 71.161 52.2503 72.0396 54.1832C72.9377 56.1162 73.3966 58.3323 73.4161 60.8314C73.3966 64.5021 72.4594 67.6846 70.6045 70.3791C68.7692 73.0539 66.1138 75.1333 62.6384 76.6172C59.1825 78.0816 55.014 78.8138 50.1328 78.8138C45.2906 78.8138 41.0733 78.0718 37.4807 76.5879C33.9077 75.104 31.1156 72.9075 29.1046 69.9983C28.1764 68.6334 27.454 67.118 26.9372 65.452C25.8948 62.0918 28.8658 59.1328 32.384 59.1328H32.8402C35.8811 59.1328 38.1399 61.7417 39.9701 64.1702C41.0049 65.4979 42.3814 66.5034 44.0996 67.1867C45.8373 67.8506 47.7996 68.1825 49.9863 68.1825C52.1341 68.1825 53.9987 67.8701 55.5802 67.2453C57.1812 66.6205 58.421 65.7517 59.2997 64.6388C60.1783 63.5259 60.6176 62.247 60.6176 60.8021C60.6176 59.4549 60.2173 58.3225 59.4168 57.4048C58.6358 56.4872 57.4839 55.7062 55.9609 55.0619C54.4575 54.4175 52.6124 53.8318 50.4256 53.3046L43.8946 51.6645C39.6104 50.6224 36.0899 49.0828 33.3332 47.0457C32.588 46.495 32.313 45.5256 32.5747 44.6367C33.152 42.6746 34.2124 40.8886 35.6586 39.4422C36.855 38.2456 38.284 37.3131 39.8529 36.6996ZM32.0923 28.4259L31.5183 26.4758C31.4936 26.3911 31.4421 26.3167 31.3716 26.2638C31.301 26.2109 31.2152 26.1823 31.127 26.1823C31.0388 26.1823 30.953 26.2109 30.8824 26.2638C30.8118 26.3167 30.7603 26.3911 30.7356 26.4758L30.1625 28.4259C29.7774 29.7339 29.0703 30.9245 28.106 31.8886C27.1418 32.8527 25.9511 33.5595 24.6429 33.9445L22.6927 34.5184C22.3022 34.6342 22.3022 35.1869 22.6927 35.3011L24.6429 35.875C25.9509 36.26 27.1414 36.967 28.1056 37.9311C29.0697 38.8951 29.7766 40.0856 30.1617 41.3936L30.7356 43.3445C30.8506 43.7342 31.4034 43.7342 31.5183 43.3445L32.0923 41.3944C32.4772 40.0863 33.1841 38.8956 34.1483 37.9314C35.1124 36.9672 36.303 36.2601 37.6111 35.875L39.5621 35.3011C39.9518 35.1861 39.9518 34.6334 39.5621 34.5192L37.6119 33.9453C36.3036 33.5603 35.1129 32.8533 34.1486 31.889C33.1843 30.9248 32.4773 29.7341 32.0923 28.4259ZM25.1354 39.9443L25.3076 40.5293C25.4231 40.9218 25.6352 41.279 25.9245 41.5683C26.2137 41.8575 26.571 42.0696 26.9634 42.1851L27.5485 42.3573C27.6654 42.3916 27.6654 42.5574 27.5485 42.5919L26.9632 42.7641C26.5708 42.8796 26.2136 43.0917 25.9243 43.381C25.6351 43.6703 25.423 44.0275 25.3076 44.4199L25.1354 45.0049C25.1009 45.1218 24.9351 45.1218 24.9006 45.0049L24.7284 44.4196C24.6129 44.0273 24.4008 43.6701 24.1115 43.3809C23.8223 43.0916 23.4651 42.8796 23.0727 42.7641L22.4877 42.5919C22.3705 42.5576 22.3705 42.3918 22.4877 42.3571L23.0727 42.1849C23.4652 42.0694 23.8224 41.8574 24.1117 41.5681C24.401 41.2789 24.6131 40.9217 24.7286 40.5293L24.9006 39.9443C24.908 39.9189 24.9234 39.8966 24.9446 39.8807C24.9658 39.8648 24.9915 39.8562 25.018 39.8562C25.0444 39.8562 25.0702 39.8648 25.0913 39.8807C25.1125 39.8966 25.128 39.9189 25.1354 39.9443ZM24.0139 24.0284L23.7461 23.1184C23.7345 23.0789 23.7105 23.0442 23.6776 23.0195C23.6446 22.9948 23.6046 22.9814 23.5634 22.9814C23.5223 22.9814 23.4822 22.9948 23.4493 23.0195C23.4164 23.0442 23.3923 23.0789 23.3808 23.1184L23.1133 24.0284C22.9336 24.6389 22.6037 25.1944 22.1537 25.6444C21.7037 26.0943 21.148 26.4241 20.5375 26.6038L19.6274 26.8716C19.4452 26.9256 19.4452 27.1836 19.6274 27.2369L20.5375 27.5047C21.1479 27.6844 21.7035 28.0143 22.1534 28.4642C22.6034 28.9141 22.9333 29.4697 23.113 30.08L23.3808 30.9905C23.4345 31.1723 23.6924 31.1723 23.7461 30.9905L24.0139 30.0804C24.1935 29.47 24.5234 28.9143 24.9734 28.4643C25.4233 28.0144 25.9789 27.6844 26.5893 27.5047L27.4998 27.2369C27.6817 27.1832 27.6817 26.9253 27.4998 26.872L26.5897 26.6041C25.9792 26.4245 25.4235 26.0946 24.9735 25.6446C24.5235 25.1946 24.1936 24.6389 24.0139 24.0284Z" fill="url(#paint1_linear_368_700)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_368_700" x1="6.25189" y1="94.8732" x2="37.5122" y2="-13.8871" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C639FF"/>
|
||||
<stop offset="1" stop-color="#3662FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_368_700" x1="23.0026" y1="78.0902" x2="45.4276" y2="9.84492" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C639FF"/>
|
||||
<stop offset="1" stop-color="#3662FF"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
@@ -0,0 +1,10 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3509_390)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9695 23.9389C18.58 23.9389 23.9389 18.58 23.9389 11.9695C23.9389 5.35891 18.58 0 11.9695 0C5.35891 0 0 5.35891 0 11.9695C0 18.58 5.35891 23.9389 11.9695 23.9389ZM12.021 5.98472C11.0599 5.98472 9.72986 6.53435 9.05026 7.21236L7.20449 9.05382H16.4046L19.4809 5.98472H12.021ZM14.8731 16.7265C14.1935 17.4045 12.8635 17.9542 11.9024 17.9542H4.44254L7.51882 14.8851H16.7189L14.8731 16.7265ZM17.8633 10.5884H5.66968L5.09372 11.1638C3.72988 12.3915 4.13437 13.3505 6.04436 13.3505H18.2709L18.8471 12.7751C20.1976 11.5547 19.7732 10.5884 17.8633 10.5884Z" fill="#01824C"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3509_390">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 865 B |
File diff suppressed because one or more lines are too long
@@ -0,0 +1,11 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3509_400)">
|
||||
<path d="M2.20251 4.80005H21.74C22.9681 4.80005 23.9713 5.80305 23.9713 7.04039V14.4926C23.9713 15.7299 22.9681 16.7329 21.7306 16.7329H14.7275L15.6931 19.0858L11.465 16.7329H2.21188C0.974382 16.7329 -0.0287434 15.7299 -0.0287434 14.4926V7.04039C-0.0381184 5.81242 0.965007 4.80005 2.20251 4.80005Z" fill="#7F54B3"/>
|
||||
<path d="M1.34004 6.84359C1.48066 6.65611 1.67754 6.56237 1.95879 6.54362C2.45566 6.50613 2.73691 6.74048 2.81191 7.24666C3.11191 9.29016 3.44941 11.0149 3.79629 12.4304L5.93378 8.36215C6.13066 7.98719 6.37441 7.79972 6.66504 7.78097C7.09629 7.75285 7.35879 8.02469 7.46191 8.59649C7.69629 9.88071 8.01504 10.9868 8.38066 11.9242C8.63378 9.44951 9.06504 7.65911 9.66504 6.56237C9.81503 6.29053 10.0307 6.14992 10.3119 6.13118C10.5369 6.11243 10.7432 6.17805 10.9307 6.32803C11.1182 6.47801 11.2119 6.65611 11.2307 6.88108C11.24 7.05919 11.2119 7.19979 11.1369 7.34977C10.7525 8.05281 10.4432 9.23391 10.19 10.8743C9.94629 12.4679 9.86191 13.7052 9.91816 14.5864C9.93691 14.8301 9.89941 15.0457 9.80566 15.2332C9.69316 15.4488 9.51504 15.5612 9.29004 15.58C9.03691 15.5987 8.77441 15.4863 8.52129 15.2144C7.61191 14.2864 6.89003 12.8991 6.36503 11.0618C5.72753 12.3085 5.25879 13.2459 4.95879 13.874C4.38691 14.9801 3.89941 15.5425 3.48691 15.5706C3.22441 15.5894 2.99941 15.3644 2.80254 14.8957C2.30566 13.6209 1.77129 11.1462 1.19004 7.49038C1.14316 7.23729 1.19941 7.01232 1.34004 6.84359ZM22.3025 8.37152C21.9557 7.75285 21.4307 7.38727 20.7463 7.23729C20.5588 7.19979 20.3807 7.18105 20.2213 7.18105C19.2838 7.18105 18.5244 7.66848 17.9244 8.64336C17.4182 9.46826 17.165 10.3869 17.165 11.3899C17.165 12.1398 17.3244 12.7866 17.6338 13.3209C17.9807 13.9396 18.5057 14.3052 19.19 14.4551C19.3775 14.4926 19.5557 14.5114 19.715 14.5114C20.6619 14.5114 21.4213 14.0239 22.0119 13.0491C22.5182 12.2148 22.7713 11.2962 22.7713 10.2838C22.7807 9.53388 22.6119 8.89646 22.3025 8.37152ZM21.0744 11.0712C20.9338 11.718 20.69 12.196 20.3338 12.5148C20.0525 12.7678 19.79 12.8803 19.5463 12.8241C19.3119 12.7772 19.115 12.571 18.9744 12.1867C18.8619 11.8867 18.7963 11.5774 18.7963 11.2962C18.7963 11.0524 18.815 10.8087 18.8619 10.5837C18.9463 10.1807 19.115 9.79634 19.3775 9.42139C19.6963 8.94332 20.0432 8.74647 20.39 8.81209C20.6244 8.85896 20.8213 9.06518 20.9619 9.44951C21.0744 9.74947 21.14 10.0588 21.14 10.34C21.14 10.6025 21.1213 10.8462 21.0744 11.0712ZM16.1994 8.37152C15.8525 7.75285 15.3182 7.38727 14.6432 7.23729C14.4557 7.19979 14.2775 7.18105 14.1182 7.18105C13.1807 7.18105 12.4213 7.66848 11.8213 8.64336C11.315 9.46826 11.0619 10.3869 11.0619 11.3899C11.0619 12.1398 11.2213 12.7866 11.5307 13.3209C11.8775 13.9396 12.4025 14.3052 13.0963 14.4551C13.2838 14.4926 13.4619 14.5114 13.6213 14.5114C14.5682 14.5114 15.3275 14.0239 15.9182 13.0491C16.4244 12.2148 16.6775 11.2962 16.6775 10.2838C16.6682 9.53388 16.5088 8.89646 16.1994 8.37152ZM14.9619 11.0712C14.8213 11.718 14.5775 12.196 14.2213 12.5148C13.94 12.7678 13.6775 12.8803 13.4338 12.8241C13.1994 12.7772 13.0025 12.571 12.8619 12.1867C12.7494 11.8867 12.6838 11.5774 12.6838 11.2962C12.6838 11.0524 12.7025 10.8087 12.7494 10.5837C12.8338 10.1807 13.0025 9.79634 13.265 9.42139C13.5838 8.94332 13.9307 8.74647 14.2775 8.81209C14.5119 8.85896 14.7088 9.06518 14.8494 9.44951C14.9619 9.74947 15.0275 10.0588 15.0275 10.34C15.0369 10.6025 15.0088 10.8462 14.9619 11.0712Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3509_400">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
@@ -0,0 +1,7 @@
|
||||
import cookieAuthApi from './wordpress-rest-api-cookie-auth';
|
||||
const config = {
|
||||
rest_url: window.wpApiSettings.root,
|
||||
credentials: { nonce: window.wpApiSettings.nonce },
|
||||
};
|
||||
|
||||
export default new cookieAuthApi( config );
|
||||
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import Steps from './steps/index';
|
||||
import './style.scss';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<Router>
|
||||
<div
|
||||
className={ `starter-templates-ai-steps ${
|
||||
!! astraSitesVars?.isRTLEnabled ? 'st-rtl' : ''
|
||||
}` }
|
||||
>
|
||||
<Steps />
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,67 @@
|
||||
import React from 'react';
|
||||
import { Button as Wrap } from '../../ui/style';
|
||||
|
||||
const Button = ( {
|
||||
className,
|
||||
children,
|
||||
onClick,
|
||||
after,
|
||||
before,
|
||||
gray,
|
||||
large,
|
||||
mb1,
|
||||
ml1,
|
||||
disabled,
|
||||
type,
|
||||
} ) => {
|
||||
return (
|
||||
<Wrap
|
||||
className={ className }
|
||||
gray={ gray }
|
||||
large={ large }
|
||||
mb1={ mb1 }
|
||||
ml1={ ml1 }
|
||||
after={ after }
|
||||
before={ before }
|
||||
onClick={ onClick }
|
||||
disabled={ disabled }
|
||||
type={ type }
|
||||
>
|
||||
{ before ? (
|
||||
<svg
|
||||
width="14"
|
||||
height="9"
|
||||
viewBox="0 0 14 9"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M14.0009 4.4999C14.0009 4.36729 13.9482 4.24011 13.8544 4.14635C13.7607 4.05258 13.6335 3.9999 13.5009 3.9999H1.70789L4.85489 0.853899C4.90138 0.807411 4.93826 0.752222 4.96342 0.691483C4.98858 0.630743 5.00153 0.565643 5.00153 0.499899C5.00153 0.434155 4.98858 0.369055 4.96342 0.308316C4.93826 0.247576 4.90138 0.192387 4.85489 0.145899C4.80841 0.0994111 4.75322 0.062535 4.69248 0.0373759C4.63174 0.0122168 4.56664 -0.000732422 4.50089 -0.000732422C4.43515 -0.000732422 4.37005 0.0122168 4.30931 0.0373759C4.24857 0.062535 4.19338 0.0994111 4.14689 0.145899L0.146894 4.1459C0.100331 4.19234 0.0633877 4.24752 0.0381812 4.30827C0.0129748 4.36901 0 4.43413 0 4.4999C0 4.56567 0.0129748 4.63079 0.0381812 4.69153C0.0633877 4.75228 0.100331 4.80745 0.146894 4.8539L4.14689 8.8539C4.19338 8.90039 4.24857 8.93726 4.30931 8.96242C4.37005 8.98758 4.43515 9.00053 4.50089 9.00053C4.56664 9.00053 4.63174 8.98758 4.69248 8.96242C4.75322 8.93726 4.80841 8.90039 4.85489 8.8539C4.90138 8.80741 4.93826 8.75222 4.96342 8.69148C4.98858 8.63074 5.00153 8.56564 5.00153 8.4999C5.00153 8.43416 4.98858 8.36905 4.96342 8.30832C4.93826 8.24758 4.90138 8.19239 4.85489 8.1459L1.70789 4.9999H13.5009C13.6335 4.9999 13.7607 4.94722 13.8544 4.85345C13.9482 4.75968 14.0009 4.63251 14.0009 4.4999Z"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
''
|
||||
) }
|
||||
{ children }
|
||||
{ after ? (
|
||||
<svg
|
||||
width="14"
|
||||
height="9"
|
||||
viewBox="0 0 14 9"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M0 4.50002C0 4.36741 0.0526784 4.24024 0.146447 4.14647C0.240215 4.0527 0.367392 4.00002 0.5 4.00002H12.293L9.146 0.854021C9.05211 0.760135 8.99937 0.632797 8.99937 0.500021C8.99937 0.367245 9.05211 0.239908 9.146 0.146021C9.23989 0.0521345 9.36722 -0.000610348 9.5 -0.000610352C9.63278 -0.000610355 9.76011 0.0521345 9.854 0.146021L13.854 4.14602C13.9006 4.19247 13.9375 4.24764 13.9627 4.30839C13.9879 4.36913 14.0009 4.43425 14.0009 4.50002C14.0009 4.56579 13.9879 4.63091 13.9627 4.69165C13.9375 4.7524 13.9006 4.80758 13.854 4.85402L9.854 8.85402C9.76011 8.94791 9.63278 9.00065 9.5 9.00065C9.36722 9.00065 9.23989 8.94791 9.146 8.85402C9.05211 8.76013 8.99937 8.6328 8.99937 8.50002C8.99937 8.36725 9.05211 8.23991 9.146 8.14602L12.293 5.00002H0.5C0.367392 5.00002 0.240215 4.94734 0.146447 4.85357C0.0526784 4.75981 0 4.63263 0 4.50002Z"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
''
|
||||
) }
|
||||
</Wrap>
|
||||
);
|
||||
};
|
||||
|
||||
export default Button;
|
||||
@@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { decodeEntities } from '@wordpress/html-entities';
|
||||
import { useStateValue } from '../../store/store';
|
||||
import './style.scss';
|
||||
import ICONS from '../../../icons';
|
||||
import { sendPostMessage } from '../../utils/functions';
|
||||
import { XMarkIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
const ChangeTemplate = () => {
|
||||
const [
|
||||
{
|
||||
selectedTemplateName,
|
||||
currentIndex,
|
||||
licenseStatus,
|
||||
selectedTemplateType,
|
||||
},
|
||||
dispatch,
|
||||
] = useStateValue();
|
||||
|
||||
const goToShowcase = () => {
|
||||
sendPostMessage( {
|
||||
param: 'clearPreviewAssets',
|
||||
data: {},
|
||||
} );
|
||||
|
||||
setTimeout( () => {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentIndex: currentIndex - 1,
|
||||
currentCustomizeIndex: 0,
|
||||
} );
|
||||
}, 300 );
|
||||
};
|
||||
return (
|
||||
<div className="change-template-wrap w-full">
|
||||
<div className="template-name">
|
||||
<p className="label">
|
||||
{ __( 'Selected Template:', 'astra-sites' ) }
|
||||
</p>
|
||||
<div className="flex gap-2 items-center">
|
||||
<h5>{ decodeEntities( selectedTemplateName ) }</h5>
|
||||
{ ! licenseStatus && 'free' !== selectedTemplateType && (
|
||||
<span>{ ICONS.premiumIcon }</span>
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
<div className="change-btn-wrap" onClick={ goToShowcase }>
|
||||
<XMarkIcon className="w-6 h-6 text-zip-body-text" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default ChangeTemplate;
|
||||
@@ -0,0 +1,44 @@
|
||||
.change-template-wrap {
|
||||
padding: 4% 8%;
|
||||
background: var( --st-background-secondary );
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var( --st-border-color );
|
||||
|
||||
.template-name h5 {
|
||||
color: var( --st-color-body );
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.stc-grid-item-badge {
|
||||
position: unset;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var( --st-color-placeholder );
|
||||
}
|
||||
.change-btn-wrap {
|
||||
cursor: pointer;
|
||||
}
|
||||
.change-btn {
|
||||
background: transparent;
|
||||
border: 1px solid #626262;
|
||||
border-radius: var( --st-border-radius-3 );
|
||||
padding: 6px;
|
||||
font-weight: var( --st-font-weight-normal );
|
||||
font-size: var( --st-font-size-xs );
|
||||
line-height: var( --st-font-line-height-l );
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
border-color: var( --st-color-heading );
|
||||
svg path {
|
||||
fill: var( --st-color-heading );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
import { Radio, RadioGroup } from '@headlessui/react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
import {
|
||||
checkFileSystemPermissions,
|
||||
checkRequiredPlugins,
|
||||
getDemo,
|
||||
} from '../../steps/import-site/import-utils';
|
||||
import { useStateValue } from '../../store/store';
|
||||
import { classNames } from '../../utils/functions';
|
||||
|
||||
import './style.scss';
|
||||
|
||||
const { imageDir } = starterTemplates;
|
||||
|
||||
const ChooseEcommerce = () => {
|
||||
const storedState = useStateValue();
|
||||
const [
|
||||
{ selectedTemplateID, allSitesData, currentCustomizeIndex },
|
||||
dispatch,
|
||||
] = useStateValue();
|
||||
const [ checkedTemplateID, setCheckedTemplateID ] =
|
||||
useState( selectedTemplateID );
|
||||
|
||||
const selectedTemplate = allSitesData[ `id-${ selectedTemplateID }` ];
|
||||
const relatedTemplateID =
|
||||
selectedTemplate?.related_ecommerce_template || '';
|
||||
|
||||
const changeEcommerceTemplate = async ( event ) => {
|
||||
const templateValue = parseInt( event?.value );
|
||||
|
||||
// Update selected template ID in the state and UI
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
templateId: event?.id,
|
||||
} );
|
||||
setCheckedTemplateID( templateValue );
|
||||
// Update stored state for selected plugin and trigger further checks
|
||||
storedState[ 0 ].selectedEcommercePlugin = event?.id;
|
||||
await getDemo( templateValue, storedState );
|
||||
await checkRequiredPlugins( storedState );
|
||||
checkFileSystemPermissions( storedState );
|
||||
};
|
||||
|
||||
useEffect( () => {
|
||||
setCheckedTemplateID( selectedTemplateID );
|
||||
}, [ selectedTemplateID, relatedTemplateID ] );
|
||||
|
||||
useEffect( () => {
|
||||
if ( ! relatedTemplateID ) {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentCustomizeIndex: currentCustomizeIndex + 1, // Skip 1 step.
|
||||
} );
|
||||
}
|
||||
}, [ relatedTemplateID, currentCustomizeIndex, dispatch ] );
|
||||
|
||||
const platforms = [
|
||||
{
|
||||
name: __( 'SureCart', 'astra-sites' ),
|
||||
value: selectedTemplateID,
|
||||
id: 'surecart',
|
||||
icon: `${ imageDir }surecart-icon.svg`,
|
||||
description: __(
|
||||
'Seamless all-in-one ecommerce platform for selling physical, digital, or subscription, products.',
|
||||
'astra-sites'
|
||||
),
|
||||
recommended: true,
|
||||
},
|
||||
{
|
||||
name: __( 'WooCommerce', 'astra-sites' ),
|
||||
value: relatedTemplateID,
|
||||
id: 'woocommerce',
|
||||
icon: `${ imageDir }woocommerce-icon.svg`,
|
||||
description: __(
|
||||
'Open source e-commerce plugin for WordPress.',
|
||||
'astra-sites'
|
||||
),
|
||||
recommended: false,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full mt-2.5">
|
||||
<RadioGroup
|
||||
by="value"
|
||||
value={ platforms.find(
|
||||
( p ) => p.value === checkedTemplateID
|
||||
) }
|
||||
onChange={ changeEcommerceTemplate }
|
||||
aria-label={ __(
|
||||
'Choose E-commerce template',
|
||||
'astra-sites'
|
||||
) }
|
||||
className="space-y-2 flex flex-col gap-4"
|
||||
>
|
||||
{ platforms?.map( ( platform ) => (
|
||||
<Radio key={ platform.name } value={ platform }>
|
||||
{ ( { checked } ) => (
|
||||
<div
|
||||
className={ classNames(
|
||||
'w-full p-3 border border-button-disabled !border-solid rounded-lg bg-white cursor-pointer',
|
||||
checked &&
|
||||
'shadow-lg border-accent-st-secondary'
|
||||
) }
|
||||
>
|
||||
<div className="flex items-center justify-between p-1">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
className="size-6"
|
||||
alt={ platform?.name }
|
||||
src={ platform?.icon }
|
||||
/>
|
||||
<span className="ml-2 text-base font-semibold">
|
||||
{ platform?.name }
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-2 items-center">
|
||||
{ platform?.recommended && (
|
||||
<span className="border-solid border-[0.5px] border-[#BBF7D0] bg-alert-success-bg text-[#15803D] text-xs font-medium rounded-full px-2 py-0.5">
|
||||
{ __(
|
||||
'Recommended',
|
||||
'astra-sites'
|
||||
) }
|
||||
</span>
|
||||
) }
|
||||
<span
|
||||
className={ classNames(
|
||||
'flex size-4 border-2 border-button-disabled items-center justify-center border-solid rounded-full',
|
||||
checked &&
|
||||
'border-accent-st-secondary border-[5px]'
|
||||
) }
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-1 p-1 pr-5 text-sm font-normal">
|
||||
<p>{ platform?.description }</p>
|
||||
</div>
|
||||
</div>
|
||||
) }
|
||||
</Radio>
|
||||
) ) }
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChooseEcommerce;
|
||||
@@ -0,0 +1,59 @@
|
||||
.customizer-ecommerce-selection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
margin-top: 10px;
|
||||
label.ist-customizer-heading {
|
||||
position: relative;
|
||||
border-color: var( --st-color-accent );
|
||||
background: var( --st-background-primary );
|
||||
border: 1px solid var( --st-border-color );
|
||||
box-sizing: border-box;
|
||||
border-radius: var( --st-border-radius-4 );
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
justify-content: space-between;
|
||||
.ist-image-section {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
span {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.stc-tooltip {
|
||||
position: unset;
|
||||
path {
|
||||
fill: #6b7280 !important;
|
||||
}
|
||||
.stc-tooltip-content {
|
||||
top: 85%;
|
||||
line-height: inherit;
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( max-width: 992px ) {
|
||||
font-size: 12px;
|
||||
img {
|
||||
width: 16px;
|
||||
}
|
||||
svg {
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
@media ( max-width: 768px ) {
|
||||
font-size: 10px;
|
||||
input[type="radio"] {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
&:checked:before {
|
||||
margin: 0.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
import React from 'react';
|
||||
import './style.scss';
|
||||
|
||||
const ColorPalettes = ( { selected, options, onChange, tabIndex, type } ) => {
|
||||
const handleKeyPress = ( e, palette ) => {
|
||||
e = e || window.event;
|
||||
|
||||
if ( e.keyCode === 38 ) {
|
||||
//Up Arrow
|
||||
if ( e.target.previousSibling ) {
|
||||
e.target.previousSibling.focus();
|
||||
}
|
||||
} else if ( e.keyCode === 40 ) {
|
||||
//Down Arrow
|
||||
if ( e.target.nextSibling ) {
|
||||
e.target.nextSibling.focus();
|
||||
}
|
||||
} else if ( e.key === 'Enter' ) {
|
||||
//Enter
|
||||
onChange( e, palette );
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={ `ist-color-palettes st-${ type }-style-pallete` }>
|
||||
{ Object.values( options ).map( ( palette, paletteIndex ) => {
|
||||
const title = palette.title || '';
|
||||
const firstColor = palette.colors[ 0 ] || '';
|
||||
const secondColor = palette.colors[ 1 ] || '';
|
||||
const thirdColor = palette.colors[ 2 ] || '';
|
||||
const fourthColor = palette.colors[ 3 ] || '';
|
||||
const fifthColor = palette.colors[ 4 ] || '';
|
||||
|
||||
return (
|
||||
<div
|
||||
key={ paletteIndex }
|
||||
className={ `ist-color-palette ${
|
||||
palette.slug === selected
|
||||
? 'ist-color-palette-active'
|
||||
: ''
|
||||
}` }
|
||||
onClick={ ( event ) => {
|
||||
onChange( event, palette );
|
||||
} }
|
||||
onKeyDown={ ( event ) => {
|
||||
handleKeyPress( event, palette );
|
||||
} }
|
||||
tabIndex={ tabIndex }
|
||||
>
|
||||
{ type === 'default' && (
|
||||
<div className="ist-colors-title">{ title }</div>
|
||||
) }
|
||||
<div className="ist-colors-list">
|
||||
<div
|
||||
className="ist-palette-color"
|
||||
style={ { backgroundColor: firstColor } }
|
||||
/>
|
||||
<div
|
||||
className="ist-palette-color"
|
||||
style={ { backgroundColor: secondColor } }
|
||||
/>
|
||||
<div
|
||||
className="ist-palette-color"
|
||||
style={ {
|
||||
backgroundColor: thirdColor,
|
||||
} }
|
||||
/>
|
||||
<div
|
||||
className="ist-palette-color"
|
||||
style={ {
|
||||
backgroundColor: fourthColor,
|
||||
} }
|
||||
/>
|
||||
<div
|
||||
className="ist-palette-color"
|
||||
style={ {
|
||||
backgroundColor: fifthColor,
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} ) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ColorPalettes;
|
||||
@@ -0,0 +1,89 @@
|
||||
.ist-color-palette {
|
||||
background: var( --st-background-primary );
|
||||
border: 1px solid var( --st-border-color );
|
||||
box-sizing: border-box;
|
||||
border-radius: var( --st-border-radius-4 );
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
justify-content: space-evenly;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.ist-color-palette-active {
|
||||
border-color: var( --st-color-accent );
|
||||
}
|
||||
}
|
||||
|
||||
.ist-color-palette:hover,
|
||||
.ist-color-palette:focus {
|
||||
.ist-color-icon {
|
||||
border-color: var( --st-color-accent );
|
||||
}
|
||||
}
|
||||
|
||||
.ist-color-palette-active .ist-color-icon {
|
||||
background: var( --st-color-accent );
|
||||
border-color: var( --st-color-accent );
|
||||
}
|
||||
|
||||
.ist-palette-color {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #eeeeee;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ist-colors-list {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.ist-colors-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var( --st-font-size-xs );
|
||||
font-weight: var( --st-font-weight-bold );
|
||||
color: var( --st-color-heading );
|
||||
line-height: var( --st-font-line-height-s );
|
||||
}
|
||||
|
||||
.ist-color-icon {
|
||||
background: var( --st-background-primary );
|
||||
border: 1px solid var( --st-border-color );
|
||||
box-sizing: border-box;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s ease-in-out;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.ist-color-palette-active {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.st-default-style-pallete {
|
||||
margin-top: 25px;
|
||||
margin-bottom: 15px;
|
||||
.ist-color-palette {
|
||||
display: grid;
|
||||
grid-template-columns: 53% 47%;
|
||||
}
|
||||
|
||||
.ist-colors-list {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
.st-others-style-pallete {
|
||||
display: grid;
|
||||
grid-template-columns: repeat( 2, 1fr );
|
||||
grid-gap: 15px;
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import React from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import PreviousStepLink from '../util/previous-step-link/index';
|
||||
import NextStepLink from '../util/next-step-link/index';
|
||||
import { Row, Col, Progress } from '../../ui/style';
|
||||
|
||||
import { useStateValue } from '../../store/store';
|
||||
|
||||
const Customizer = ( { preview, controls } ) => {
|
||||
const [ { currentIndex, stepsLength } ] = useStateValue();
|
||||
|
||||
return (
|
||||
<Row className="row">
|
||||
<Col className="col left">
|
||||
<Progress
|
||||
value={ currentIndex + 1 }
|
||||
min="0"
|
||||
max={ stepsLength }
|
||||
/>
|
||||
{ controls }
|
||||
|
||||
<div className="ist-action-links">
|
||||
<div className="ist-action-links-left">
|
||||
<PreviousStepLink before="dashicons-arrow-left-alt">
|
||||
{ __( 'Back', 'astra-sites' ) }
|
||||
</PreviousStepLink>
|
||||
</div>
|
||||
<div className="ist-action-links-right">
|
||||
<NextStepLink>
|
||||
{ __( 'Skip', 'astra-sites' ) }
|
||||
</NextStepLink>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col className="col right">{ preview }</Col>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
export default Customizer;
|
||||
@@ -0,0 +1,119 @@
|
||||
import React, { useEffect, useLayoutEffect } from 'react';
|
||||
import ICONS from '../../../icons';
|
||||
import { useStateValue } from '../../store/store';
|
||||
import { getStepIndex } from '../../utils/functions';
|
||||
import SyncInProgressModal from '../sync-in-progress-modal';
|
||||
|
||||
const DefaultStep = ( { preview, content, controls, actions, stepName } ) => {
|
||||
const [
|
||||
{ bgSyncInProgress, showSidebar, currentIndex, sitesSyncing },
|
||||
dispatch,
|
||||
] = useStateValue();
|
||||
|
||||
const toggleSidebar = () => {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
showSidebar: ! showSidebar,
|
||||
} );
|
||||
};
|
||||
|
||||
useEffect( () => {
|
||||
const contentArea = document.querySelector( '.step-content' );
|
||||
contentArea.addEventListener( 'scroll', ( event ) => {
|
||||
setTimeout( () => {
|
||||
if ( event.target.classList.length === 1 ) {
|
||||
localStorage.setItem(
|
||||
'st-scroll-position',
|
||||
event.target.scrollTop
|
||||
);
|
||||
}
|
||||
}, 200 );
|
||||
} );
|
||||
}, [] );
|
||||
|
||||
useLayoutEffect( () => {
|
||||
const contentArea = document.querySelector( '.step-content' );
|
||||
const scrollPosition = localStorage.getItem( 'st-scroll-position' );
|
||||
|
||||
if (
|
||||
!! scrollPosition &&
|
||||
scrollPosition > 100 &&
|
||||
currentIndex === getStepIndex( 'site-list' ) &&
|
||||
contentArea.classList.length === 1
|
||||
) {
|
||||
contentArea.scrollTo( 0, scrollPosition );
|
||||
}
|
||||
} );
|
||||
|
||||
return (
|
||||
<div
|
||||
className={ `step-row
|
||||
${ preview ? '' : 'step-full-width' }
|
||||
${ showSidebar ? 'show-sidebar' : 'hide-sidebar' }
|
||||
` }
|
||||
>
|
||||
<div className={ `step-col ${ preview ? 'step-col-left' : '' } ` }>
|
||||
<div className="toggle-sidebar-wrap" onClick={ toggleSidebar }>
|
||||
{ showSidebar && ICONS.angleLeft }
|
||||
{ ! showSidebar && ICONS.angleRight }
|
||||
</div>
|
||||
<div
|
||||
className={ `step-content ${ stepName || '' }` }
|
||||
style={ {
|
||||
padding:
|
||||
currentIndex === getStepIndex( 'site-list' )
|
||||
? '5% 6% 6% 6%'
|
||||
: '',
|
||||
} }
|
||||
>
|
||||
<div
|
||||
className={ `content-wrapper pb-14 sm:pb-0
|
||||
${
|
||||
currentIndex === getStepIndex( 'customizer' )
|
||||
? 'flex flex-col items-start h-full'
|
||||
: ''
|
||||
}
|
||||
` }
|
||||
>
|
||||
{ content && content }
|
||||
{ controls && (
|
||||
<div
|
||||
className={ `step-controls
|
||||
${
|
||||
currentIndex === getStepIndex( 'customizer' )
|
||||
? 'flex flex-col items-start h-full w-full'
|
||||
: ''
|
||||
}
|
||||
` }
|
||||
/* eslint-disable-next-line jsx-a11y/tabindex-no-positive -- This is a used for keyboard navigation support. */
|
||||
tabIndex="1"
|
||||
>
|
||||
{ controls }
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
<SyncInProgressModal
|
||||
open={
|
||||
( bgSyncInProgress || sitesSyncing ) &&
|
||||
currentIndex === 2
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{ actions &&
|
||||
currentIndex !== getStepIndex( 'page-builder' ) && (
|
||||
/* eslint-disable-next-line jsx-a11y/tabindex-no-positive -- This is a used for keyboard navigation support. */
|
||||
<div className="step-actions" tabIndex="1">
|
||||
{ actions }
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
|
||||
{ preview && (
|
||||
<div className="step-col step-col-right">{ preview }</div>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DefaultStep;
|
||||
@@ -0,0 +1,122 @@
|
||||
import { Children, Fragment, cloneElement, isValidElement, memo } from 'react';
|
||||
import { Listbox, Transition } from '@headlessui/react';
|
||||
import { classNames } from '../../utils/functions';
|
||||
|
||||
// eslint-disable-next-line func-style
|
||||
function DropdownList( { value, onChange, by = 'id', children } ) {
|
||||
return (
|
||||
<Listbox value={ value } onChange={ onChange } by={ by }>
|
||||
{ ( { open } ) => {
|
||||
if ( typeof children === 'function' ) {
|
||||
return children( { open } );
|
||||
}
|
||||
|
||||
if (
|
||||
typeof children !== 'string' &&
|
||||
isValidElement( children )
|
||||
) {
|
||||
return Children.map( children, ( child ) => {
|
||||
if ( isValidElement( child ) ) {
|
||||
const childProps = { ...child.props };
|
||||
return cloneElement( child, {
|
||||
...childProps,
|
||||
open,
|
||||
} );
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
return children;
|
||||
} }
|
||||
</Listbox>
|
||||
);
|
||||
}
|
||||
|
||||
DropdownList = memo( DropdownList );
|
||||
|
||||
DropdownList.Label = ( { className, children } ) => (
|
||||
<Listbox.Label
|
||||
className={ classNames(
|
||||
'block text-sm font-medium leading-6 text-gray-900',
|
||||
className
|
||||
) }
|
||||
>
|
||||
{ children }
|
||||
</Listbox.Label>
|
||||
);
|
||||
DropdownList.Label = memo( DropdownList.Label );
|
||||
|
||||
DropdownList.Button = ( { className, children } ) => (
|
||||
<Listbox.Button
|
||||
className={ classNames(
|
||||
'relative w-full cursor-default rounded-md bg-white py-2.5 pl-3 pr-10 text-left text-gray-900 shadow-sm border-0 focus:outline-none sm:text-sm sm:leading-6',
|
||||
className
|
||||
) }
|
||||
>
|
||||
{ children }
|
||||
</Listbox.Button>
|
||||
);
|
||||
DropdownList.Button = memo( DropdownList.Button );
|
||||
|
||||
DropdownList.Options = ( { open, className, children } ) => (
|
||||
<Transition
|
||||
show={ open }
|
||||
as={ Fragment }
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options
|
||||
className={ classNames(
|
||||
'absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white p-2 shadow-lg focus:outline-none text-sm',
|
||||
className
|
||||
) }
|
||||
>
|
||||
{ children }
|
||||
</Listbox.Options>
|
||||
</Transition>
|
||||
);
|
||||
DropdownList.Options = memo( DropdownList.Options );
|
||||
|
||||
DropdownList.Option = ( { value, className, children } ) => {
|
||||
return (
|
||||
<Listbox.Option
|
||||
className={ ( { active, selected } ) =>
|
||||
classNames(
|
||||
'relative cursor-default select-none rounded py-2 pl-2 pr-9 m-0',
|
||||
typeof className === 'function'
|
||||
? className( { active, selected } )
|
||||
: className
|
||||
)
|
||||
}
|
||||
value={ value }
|
||||
>
|
||||
{ ( { selected, active } ) => {
|
||||
if ( typeof children === 'function' ) {
|
||||
return children( { selected, active } );
|
||||
}
|
||||
|
||||
if (
|
||||
typeof children !== 'string' &&
|
||||
isValidElement( children )
|
||||
) {
|
||||
return Children.map( children, ( child ) => {
|
||||
if ( isValidElement( child ) ) {
|
||||
const childProps = { ...child.props };
|
||||
return cloneElement( child, {
|
||||
...childProps,
|
||||
selected,
|
||||
active,
|
||||
} );
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
return children;
|
||||
} }
|
||||
</Listbox.Option>
|
||||
);
|
||||
};
|
||||
DropdownList.Option = memo( DropdownList.Option );
|
||||
|
||||
export default DropdownList;
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from './dropdown-list';
|
||||
@@ -0,0 +1,158 @@
|
||||
import React from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { decodeEntities } from '@wordpress/html-entities';
|
||||
import { useStateValue } from '../../store/store';
|
||||
import Button from '../../components/button/button';
|
||||
import './style.scss';
|
||||
import { getSupportLink } from '../../utils/functions';
|
||||
|
||||
const ErrorScreen = () => {
|
||||
const [
|
||||
{ importErrorMessages, currentIndex, tryAgainCount, templateId },
|
||||
dispatch,
|
||||
] = useStateValue();
|
||||
|
||||
const supportLink = getSupportLink(
|
||||
templateId,
|
||||
importErrorMessages.errorText
|
||||
);
|
||||
|
||||
const tryAgain = () => {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
// Reset errors.
|
||||
importErrorMessages: {},
|
||||
importErrorResponse: [],
|
||||
importError: false,
|
||||
|
||||
// Try again count.
|
||||
tryAgainCount: tryAgainCount + 1,
|
||||
|
||||
// Reset import flags.
|
||||
xmlImportDone: false,
|
||||
resetData: [],
|
||||
importStart: false,
|
||||
importEnd: false,
|
||||
importPercent: 0,
|
||||
requiredPluginsDone: false,
|
||||
notInstalledList: [],
|
||||
notActivatedList: [],
|
||||
|
||||
// Go to previous step.
|
||||
currentIndex: currentIndex - 1,
|
||||
} );
|
||||
};
|
||||
|
||||
const solutionHeading = (
|
||||
<h5 className="ist-import-error-solution-heading">
|
||||
{ __( 'Still no luck? Other potential solution:', 'astra-sites' ) }
|
||||
</h5>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="ist-import-error">
|
||||
<div className="ist-import-progress-info">
|
||||
<div className="ist-import-progress-info-text label-text">
|
||||
{ __( 'Sorry, something went wrong.', 'astra-sites' ) }
|
||||
</div>
|
||||
</div>
|
||||
<div className="ist-import-error-box">
|
||||
<h5 className="ist-import-error-box-heading">
|
||||
{ __( 'What went wrong?', 'astra-sites' ) }
|
||||
</h5>
|
||||
<div className="ist-import-error-wrap ist-import-error-primary-wrap">
|
||||
{ importErrorMessages.primaryText && (
|
||||
<p className="website-import-subtitle">
|
||||
{ importErrorMessages.primaryText }
|
||||
</p>
|
||||
) }
|
||||
</div>
|
||||
{ importErrorMessages.secondaryText && (
|
||||
<div className="ist-import-error-wrap ist-import-error-secondary-wrap">
|
||||
{ importErrorMessages.secondaryText && (
|
||||
<p
|
||||
dangerouslySetInnerHTML={ {
|
||||
__html: importErrorMessages.secondaryText,
|
||||
} }
|
||||
/>
|
||||
) }
|
||||
</div>
|
||||
) }
|
||||
<div className="ist-import-error-wrap ist-import-error-text-wrap">
|
||||
<h5 className="ist-import-error-text-heading">
|
||||
{ __(
|
||||
'More technical information from console:',
|
||||
'astra-sites'
|
||||
) }
|
||||
</h5>
|
||||
{ importErrorMessages.errorText &&
|
||||
'object' !== typeof importErrorMessages.errorText && (
|
||||
<p className="ist-import-error-text">
|
||||
{ importErrorMessages.errorText }
|
||||
</p>
|
||||
) }
|
||||
{ importErrorMessages.errorText &&
|
||||
'object' === typeof importErrorMessages.errorText && (
|
||||
<div className="ist-import-error-text">
|
||||
<pre>
|
||||
{ JSON.stringify(
|
||||
importErrorMessages.errorText,
|
||||
undefined,
|
||||
2
|
||||
) }
|
||||
</pre>
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
{ importErrorMessages.tryAgain && tryAgainCount < 3 && (
|
||||
<Button className="ist-button" after onClick={ tryAgain }>
|
||||
{ __( 'Click here and we’ll try again', 'astra-sites' ) }
|
||||
</Button>
|
||||
) }
|
||||
<div className="ist-import-error-solution-wrapper">
|
||||
{ importErrorMessages.solutionText && (
|
||||
<>
|
||||
{ solutionHeading }
|
||||
<p
|
||||
className="ist-import-error-solution"
|
||||
dangerouslySetInnerHTML={ {
|
||||
__html: importErrorMessages.solutionText,
|
||||
} }
|
||||
/>
|
||||
</>
|
||||
) }
|
||||
{ ( ! importErrorMessages.solutionText &&
|
||||
! importErrorMessages.tryAgain ) ||
|
||||
( importErrorMessages.tryAgain && tryAgainCount > 1 && (
|
||||
<>
|
||||
{ solutionHeading }
|
||||
<p className="ist-import-error-solution">
|
||||
{ decodeEntities(
|
||||
__(
|
||||
'Please report this error ',
|
||||
'astra-sites'
|
||||
)
|
||||
) }
|
||||
<a
|
||||
href={ supportLink }
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{ 'here' }
|
||||
</a>
|
||||
{ decodeEntities(
|
||||
__(
|
||||
' so we can fix it.',
|
||||
'astra-sites'
|
||||
)
|
||||
) }
|
||||
</p>
|
||||
</>
|
||||
) ) }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ErrorScreen;
|
||||
@@ -0,0 +1,66 @@
|
||||
.ist-error-message-wrap {
|
||||
h2.ist-error-message-title {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
.ist-import-error {
|
||||
p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
justify-content: flex-start;
|
||||
margin: 0;
|
||||
}
|
||||
.ist-import-error-box {
|
||||
width: 100%;
|
||||
border: 1px solid var( --st-border-color );
|
||||
box-sizing: border-box;
|
||||
border-radius: var( --st-border-radius-4 );
|
||||
justify-content: center;
|
||||
margin: 17px auto 25px;
|
||||
padding: 20px;
|
||||
background: var( --st-background-light );
|
||||
}
|
||||
.ist-import-error-solution {
|
||||
margin-top: 5px;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
gap: 8px;
|
||||
display: block;
|
||||
}
|
||||
.ist-import-error-secondary-wrap {
|
||||
overflow: auto;
|
||||
max-height: 200px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.ist-import-error-text-heading {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ist-import-error-text {
|
||||
padding: 10px;
|
||||
border-radius: var( --st-border-radius-4 );
|
||||
background-color: var( --st-background-error-text, #efefef );
|
||||
}
|
||||
pre {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
max-height: 100px;
|
||||
overflow: auto;
|
||||
}
|
||||
.ist-import-error-box-heading {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ist-import-error-solution-heading {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
.ist-import-error-box-heading,
|
||||
.ist-import-error-text-heading,
|
||||
.ist-import-error-solution-heading {
|
||||
text-align: left;
|
||||
font-size: var( --st-font-size-xs, 14px );
|
||||
font-weight: var( --st-font-weight-bold, 500 );
|
||||
line-height: var( --st-font-line-height-xs, 20px );
|
||||
color: var( --st-color-heading );
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
// External dependencies.
|
||||
import React from 'react';
|
||||
import Tooltip from '../tooltip';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
// Internal dependencies.
|
||||
import ICONS from '../../../icons';
|
||||
import './style.scss';
|
||||
const { adminUrl } = starterTemplates;
|
||||
|
||||
const ExitToDashboard = () => {
|
||||
return (
|
||||
<a className="st-exit-to-dashboard" href={ adminUrl }>
|
||||
<Tooltip content={ __( 'Exit to Dashboard', 'astra-sites' ) }>
|
||||
{ ICONS.remove }
|
||||
</Tooltip>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExitToDashboard;
|
||||
@@ -0,0 +1,248 @@
|
||||
import React from 'react';
|
||||
import { Tooltip } from '@brainstormforce/starter-templates-components';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import Button from '../../components/button/button';
|
||||
import { useStateValue } from '../../store/store';
|
||||
import './style.scss';
|
||||
import PreviousStepLink from '../../components/util/previous-step-link/index';
|
||||
import ICONS from '../../../icons';
|
||||
|
||||
const List = ( { className, options, onSelect, selected, type } ) => {
|
||||
const handleKeyPress = ( e, id ) => {
|
||||
e = e || window.event;
|
||||
|
||||
if ( e.keyCode === 37 ) {
|
||||
//Left Arrow
|
||||
if ( e.target.previousSibling ) {
|
||||
e.target.previousSibling.focus();
|
||||
}
|
||||
} else if ( e.keyCode === 39 ) {
|
||||
//Right Arrow
|
||||
if ( e.target.nextSibling ) {
|
||||
e.target.nextSibling.focus();
|
||||
}
|
||||
} else if ( e.key === 'Enter' ) {
|
||||
//Enter
|
||||
onSelect( e, id );
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ul className={ `ist-font-selector ${ className }` }>
|
||||
{ Object.keys( options ).map( ( index ) => {
|
||||
const bodyFont =
|
||||
getFontName( options[ index ][ 'body-font-family' ] ) || '';
|
||||
const headingFont =
|
||||
getFontName(
|
||||
options[ index ][ 'headings-font-family' ],
|
||||
bodyFont
|
||||
) || '';
|
||||
const bodyFontWeight = options[ index ][ 'body-font-weight' ];
|
||||
const headingFontWeight =
|
||||
options[ index ][ 'headings-font-weight' ];
|
||||
const id = options[ index ].id;
|
||||
return (
|
||||
<Tooltip
|
||||
content={
|
||||
type === 'other'
|
||||
? `${ headingFont } / ${ bodyFont }`
|
||||
: null
|
||||
}
|
||||
key={ id }
|
||||
>
|
||||
<li
|
||||
className={ `ist-font ${
|
||||
id === selected ? 'active' : ''
|
||||
}` }
|
||||
key={ id }
|
||||
onClick={ ( event ) => {
|
||||
onSelect( event, id );
|
||||
} }
|
||||
tabIndex="0"
|
||||
role="presentation"
|
||||
onKeyDown={ ( event ) => {
|
||||
handleKeyPress( event, id );
|
||||
} }
|
||||
>
|
||||
{
|
||||
<>
|
||||
{ type === 'default' && (
|
||||
<>
|
||||
<span
|
||||
style={ {
|
||||
fontFamily: headingFont,
|
||||
fontWeight:
|
||||
headingFontWeight,
|
||||
} }
|
||||
className="heading-font-preview"
|
||||
>
|
||||
{ headingFont }
|
||||
</span>
|
||||
<span className="font-separator">
|
||||
/
|
||||
</span>
|
||||
<span
|
||||
style={ {
|
||||
fontFamily: bodyFont,
|
||||
fontWeight: bodyFontWeight,
|
||||
} }
|
||||
className="body-font-preview"
|
||||
>
|
||||
{ bodyFont }
|
||||
</span>
|
||||
</>
|
||||
) }
|
||||
{ type === 'other' && (
|
||||
<>
|
||||
<span
|
||||
style={ {
|
||||
fontFamily: headingFont,
|
||||
fontWeight:
|
||||
headingFontWeight,
|
||||
} }
|
||||
className="heading-font-preview"
|
||||
>
|
||||
A
|
||||
</span>
|
||||
<span
|
||||
style={ {
|
||||
fontFamily: bodyFont,
|
||||
fontWeight: bodyFontWeight,
|
||||
} }
|
||||
className="body-font-preview"
|
||||
>
|
||||
a
|
||||
</span>
|
||||
</>
|
||||
) }
|
||||
</>
|
||||
}
|
||||
</li>
|
||||
</Tooltip>
|
||||
);
|
||||
} ) }
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
export const getFontName = ( fontName, inheritFont ) => {
|
||||
if ( ! fontName ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if ( fontName ) {
|
||||
const matches = fontName.match( /'([^']+)'/ );
|
||||
|
||||
if ( matches ) {
|
||||
return matches[ 1 ];
|
||||
} else if ( 'inherit' === fontName ) {
|
||||
return inheritFont;
|
||||
}
|
||||
|
||||
return fontName;
|
||||
}
|
||||
|
||||
if ( inheritFont ) {
|
||||
return inheritFont;
|
||||
}
|
||||
};
|
||||
|
||||
const FontSelector = ( { options, onSelect, selected } ) => {
|
||||
const [
|
||||
{
|
||||
currentIndex,
|
||||
currentCustomizeIndex,
|
||||
templateResponse,
|
||||
licenseStatus,
|
||||
importError,
|
||||
typographyIndex,
|
||||
},
|
||||
dispatch,
|
||||
] = useStateValue();
|
||||
|
||||
const fonts = options.map( ( font, index ) => {
|
||||
font.id = index;
|
||||
return font;
|
||||
} );
|
||||
const defaultFonts = fonts.filter( ( font ) => font.default );
|
||||
const otherFonts = fonts.filter( ( font ) => ! font.default );
|
||||
let premiumTemplate = false;
|
||||
|
||||
const nextStep = () => {
|
||||
if ( ! importError ) {
|
||||
premiumTemplate = 'free' !== templateResponse[ 'astra-site-type' ];
|
||||
|
||||
if ( premiumTemplate && ! licenseStatus ) {
|
||||
if ( astraSitesVars?.isPro ) {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
validateLicenseStatus: true,
|
||||
currentCustomizeIndex: currentCustomizeIndex + 1,
|
||||
} );
|
||||
} else {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentCustomizeIndex: currentCustomizeIndex + 1,
|
||||
} );
|
||||
}
|
||||
} else {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentIndex: currentIndex + 1,
|
||||
} );
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const lastStep = () => {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentCustomizeIndex: currentCustomizeIndex - 1,
|
||||
} );
|
||||
};
|
||||
|
||||
const resetTypography = ( event ) => {
|
||||
onSelect( event, defaultFonts[ 0 ].id );
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="d-flex-space-between">
|
||||
<h4 className="ist-default-fonts-heading">
|
||||
{ __( 'Change Fonts', 'astra-sites' ) }
|
||||
</h4>
|
||||
<div
|
||||
className={ `customize-reset-btn ${
|
||||
typographyIndex === 0 ? 'disabled' : 'active'
|
||||
}` }
|
||||
onClick={ resetTypography }
|
||||
>
|
||||
{ ICONS.reset }
|
||||
</div>
|
||||
</div>
|
||||
<List
|
||||
className="ist-default-fonts"
|
||||
options={ defaultFonts }
|
||||
onSelect={ onSelect }
|
||||
selected={ selected }
|
||||
type="default"
|
||||
/>
|
||||
<List
|
||||
className="ist-other-fonts"
|
||||
options={ otherFonts }
|
||||
onSelect={ onSelect }
|
||||
selected={ selected }
|
||||
type="other"
|
||||
/>
|
||||
|
||||
<Button className="ist-button" onClick={ nextStep } after>
|
||||
{ __( 'Continue', 'astra-sites' ) }
|
||||
</Button>
|
||||
<PreviousStepLink customizeStep={ true } onClick={ lastStep }>
|
||||
{ __( 'Back', 'astra-sites' ) }
|
||||
</PreviousStepLink>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FontSelector;
|
||||
@@ -0,0 +1,111 @@
|
||||
.ist-font {
|
||||
border-radius: var( --st-border-radius-4 );
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
background: var( --st-background-primary );
|
||||
border: 1px solid var( --st-border-color );
|
||||
transition: all 200ms ease-in-out;
|
||||
}
|
||||
|
||||
.ist-font:hover,
|
||||
.ist-font:focus {
|
||||
border: 1px solid var( --st-color-accent );
|
||||
outline: none;
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: var( --st-color-heading );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ist-font.active {
|
||||
border: 1px solid var( --st-color-accent );
|
||||
}
|
||||
|
||||
.ist-sep {
|
||||
border: 1px solid var( --st-border-color );
|
||||
}
|
||||
|
||||
.ist-font-selector {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ist-default-fonts,
|
||||
.ist-other-fonts {
|
||||
.ist-font {
|
||||
padding: 12px;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
}
|
||||
.font-separator {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.ist-other-fonts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat( 4, 1fr );
|
||||
grid-gap: 10px;
|
||||
font-size: var( --st-font-size-m );
|
||||
|
||||
.ist-font {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: baseline;
|
||||
color: var( --st-color-heading );
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
fill: var( --st-color-heading );
|
||||
margin: 13px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.active svg {
|
||||
path {
|
||||
border: 1px solid var( --st-color-accent );
|
||||
}
|
||||
}
|
||||
.stc-tooltip:nth-child( odd ) .stc-tooltip-content {
|
||||
left: 0;
|
||||
}
|
||||
.stc-tooltip:nth-child( even ) .stc-tooltip-content {
|
||||
right: 0;
|
||||
}
|
||||
.stc-tooltip-content {
|
||||
top: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.customize-site-typography {
|
||||
.ist-default-fonts-heading {
|
||||
margin: 0px 0px 17px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ist-default-fonts {
|
||||
margin-top: 25px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.heading-font-preview {
|
||||
font-size: var( --st-font-size-m );
|
||||
color: var( --st-color-heading );
|
||||
}
|
||||
.body-font-preview {
|
||||
color: var( --st-color-body );
|
||||
font-size: var( --st-font-size-m );
|
||||
}
|
||||
}
|
||||
.ist-other-fonts {
|
||||
.heading-font-preview {
|
||||
font-size: var( --st-font-size-xl );
|
||||
}
|
||||
.body-font-preview {
|
||||
font-size: var( --st-font-size-xl );
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { decodeEntities } from '@wordpress/html-entities';
|
||||
import { useStateValue } from '../../store/store';
|
||||
import { getTotalTime } from '../../utils/functions';
|
||||
|
||||
const ImportLoaderAi = ( { onClickNext } ) => {
|
||||
const [ { importPercent, builder, importStatus, importError }, dispatch ] =
|
||||
useStateValue();
|
||||
|
||||
useEffect( () => {
|
||||
if ( importPercent !== 100 || importError ) {
|
||||
return;
|
||||
}
|
||||
|
||||
const start = localStorage.getItem( 'st-import-start' );
|
||||
const end = localStorage.getItem( 'st-import-end' );
|
||||
const diff = end - start;
|
||||
const unixTimeInSeconds = Math.floor( diff / 1000 );
|
||||
|
||||
const totalTime = start && end ? getTotalTime( unixTimeInSeconds ) : 0;
|
||||
const typeOfTime = totalTime > 1 ? 'minutes' : 'seconds';
|
||||
|
||||
const timeTaken = totalTime;
|
||||
|
||||
const themeName = builder !== 'fse' ? '@AstraWP' : '@WPSpectra';
|
||||
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
confettiDone: true,
|
||||
importTimeTaken: {
|
||||
time: timeTaken,
|
||||
type: typeOfTime,
|
||||
themeName,
|
||||
},
|
||||
} );
|
||||
onClickNext();
|
||||
}, [ importPercent, importStatus, importError ] );
|
||||
|
||||
return (
|
||||
<div className="ist-import-progress ist-ai" style={ { marginTop: 0 } }>
|
||||
<div
|
||||
className="ist-import-progress-info"
|
||||
style={ {
|
||||
marginTop: 0,
|
||||
marginBottom: 0,
|
||||
} }
|
||||
></div>
|
||||
<div
|
||||
className="ist-import-progress-info"
|
||||
style={ {
|
||||
marginTop: 0,
|
||||
marginBottom: 0,
|
||||
} }
|
||||
>
|
||||
<div className={ `ist-import-progress-info-text` }>
|
||||
<span className="import-status-string">
|
||||
<p>{ importStatus + decodeEntities( ' ' ) }</p>
|
||||
</span>
|
||||
<div className="import-done-section"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImportLoaderAi;
|
||||
@@ -0,0 +1,218 @@
|
||||
import React from 'react';
|
||||
import confetti from 'canvas-confetti';
|
||||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { decodeEntities } from '@wordpress/html-entities';
|
||||
import { useStateValue } from '../../store/store';
|
||||
import { Button } from '../../components';
|
||||
import ICONS from '../../../icons';
|
||||
import { getTotalTime } from '../../utils/functions';
|
||||
const { siteUrl } = starterTemplates;
|
||||
|
||||
const ImportLoader = () => {
|
||||
const [ { importPercent, importStatus, builder, confettiDone }, dispatch ] =
|
||||
useStateValue();
|
||||
const doneClass = 100 === importPercent ? 'import-done' : '';
|
||||
let percentClass = '';
|
||||
let stepText = '';
|
||||
|
||||
if ( importPercent <= 25 ) {
|
||||
percentClass = 'import-1';
|
||||
stepText = __(
|
||||
'1. Installing required theme, plugins, forms, etc',
|
||||
'astra-sites'
|
||||
);
|
||||
}
|
||||
if ( importPercent > 25 && importPercent <= 50 ) {
|
||||
percentClass = 'import-2';
|
||||
stepText = __( '2. Importing pages, menus, posts, etc', 'astra-sites' );
|
||||
}
|
||||
if ( importPercent > 50 && importPercent <= 75 ) {
|
||||
percentClass = 'import-3';
|
||||
stepText = __(
|
||||
'3. Setting up customizer settings and the site settings',
|
||||
'astra-sites'
|
||||
);
|
||||
}
|
||||
if ( importPercent > 75 && importPercent <= 100 ) {
|
||||
percentClass = 'import-4';
|
||||
stepText = __( '4. Finalizing last few settings', 'astra-sites' );
|
||||
}
|
||||
|
||||
const start = localStorage.getItem( 'st-import-start' );
|
||||
const end = localStorage.getItem( 'st-import-end' );
|
||||
const diff = end - start;
|
||||
const unixTimeInSeconds = Math.floor( diff / 1000 );
|
||||
|
||||
const totalTime = start && end ? getTotalTime( unixTimeInSeconds ) : 0;
|
||||
const typeOfTime = totalTime > 1 ? 'minutes' : 'seconds';
|
||||
|
||||
let timeTaken = totalTime;
|
||||
|
||||
let descMessage;
|
||||
let tweetMessage;
|
||||
const themeName = builder !== 'fse' ? '@AstraWP' : '@WPSpectra';
|
||||
const threshold = 5; // Max 5 mins threshold.
|
||||
|
||||
if ( timeTaken > 0 && timeTaken <= threshold ) {
|
||||
timeTaken = timeTaken < 1 ? timeTaken.split( '.' )[ 1 ] : timeTaken;
|
||||
|
||||
descMessage = sprintf(
|
||||
//translators: %1$s Time taken %2$s Time Type %3$s Website Url.
|
||||
__(
|
||||
`Your Website is ready and it took just %1$s %2$s to build.`,
|
||||
'astra-sites'
|
||||
),
|
||||
timeTaken,
|
||||
typeOfTime
|
||||
);
|
||||
tweetMessage = sprintf(
|
||||
//translators: %1$s Time taken %2$s Time Type %3$s theme name.
|
||||
__(
|
||||
`I just built my website in %1$s %2$s with Starter Templates by %3$s. Can’t believe how easy it was!!! 😍`,
|
||||
'astra-sites'
|
||||
),
|
||||
timeTaken,
|
||||
typeOfTime,
|
||||
themeName
|
||||
);
|
||||
} else {
|
||||
descMessage = __(
|
||||
'Your Website is ready. It took just 25 seconds to build it.',
|
||||
'astra-sites'
|
||||
);
|
||||
tweetMessage = sprintf(
|
||||
//translators: %1$s theme name.
|
||||
__(
|
||||
`I just built my website with Starter Templates by %1$s in minutes. Can't believe how easy it is! 😍`,
|
||||
'astra-sites'
|
||||
),
|
||||
themeName
|
||||
);
|
||||
}
|
||||
|
||||
const istConfetti = confetti.create(
|
||||
document.getElementById( 'ist-bashcanvas' ),
|
||||
{ resize: true }
|
||||
);
|
||||
|
||||
if ( ! confettiDone && importPercent === 100 ) {
|
||||
document.body.classList.add( 'step-import-site-done' );
|
||||
setTimeout( function () {
|
||||
istConfetti( {
|
||||
particleCount: 250,
|
||||
origin: { x: 1, y: 1.4 },
|
||||
gravity: 0.4,
|
||||
spread: 80,
|
||||
ticks: 300,
|
||||
angle: 120,
|
||||
startVelocity: 100,
|
||||
colors: [
|
||||
'#0e6ef1',
|
||||
'#f5b800',
|
||||
'#ff344c',
|
||||
'#98e027',
|
||||
'#9900f1',
|
||||
],
|
||||
} );
|
||||
}, 100 );
|
||||
|
||||
setTimeout( function () {
|
||||
istConfetti( {
|
||||
particleCount: 250,
|
||||
origin: { x: 0, y: 1.4 },
|
||||
gravity: 0.4,
|
||||
spread: 80,
|
||||
ticks: 300,
|
||||
angle: 60,
|
||||
startVelocity: 100,
|
||||
colors: [
|
||||
'#0e6ef1',
|
||||
'#f5b800',
|
||||
'#ff344c',
|
||||
'#98e027',
|
||||
'#9900f1',
|
||||
],
|
||||
} );
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
confettiDone: true,
|
||||
} );
|
||||
}, 500 );
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="ist-import-progress">
|
||||
<div className="ist-import-progress-info">
|
||||
<div
|
||||
className={ `ist-import-progress-info-text ${ doneClass }` }
|
||||
>
|
||||
<span className="ist-import-text-inner">{ stepText }</span>
|
||||
<span className="ist-import-done-inner">
|
||||
{ descMessage }
|
||||
</span>
|
||||
</div>
|
||||
<div className="ist-import-progress-info-precent">
|
||||
{ importPercent > 100 ? 90 : importPercent }%
|
||||
</div>
|
||||
</div>
|
||||
<div className="ist-import-progress-bar-wrap">
|
||||
<div className="ist-import-progress-bar-bg">
|
||||
<div
|
||||
className={ `ist-import-progress-bar ${ doneClass } ${ percentClass }` }
|
||||
/>
|
||||
</div>
|
||||
<div className="import-progress-gap">
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
</div>
|
||||
</div>
|
||||
<div className="ist-import-progress-info">
|
||||
<div
|
||||
className={ `ist-import-progress-info-text ${ doneClass }` }
|
||||
>
|
||||
<span className="import-status-string">
|
||||
{ ! importStatus.includes( 'Failed' ) && (
|
||||
<p>{ importStatus + decodeEntities( ' ' ) }</p>
|
||||
) }
|
||||
</span>
|
||||
<div className="import-done-section">
|
||||
<div className="tweet-import-success">
|
||||
<p className="tweet-text">{ tweetMessage }</p>
|
||||
<a
|
||||
href={ `https://twitter.com/intent/tweet?text=${ tweetMessage }` }
|
||||
target="_blank"
|
||||
className="twitter-btn-wrap"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<p className="tweet-btn">
|
||||
{ __( 'Tweet this', 'astra-sites' ) }
|
||||
</p>
|
||||
{ ICONS.twitter }
|
||||
</a>
|
||||
</div>
|
||||
<div className="import-done-text">
|
||||
<Button
|
||||
className="view-website-btn import-done-button"
|
||||
after
|
||||
onClick={ () => {
|
||||
window.open( siteUrl, '_blank' );
|
||||
} }
|
||||
>
|
||||
{ __( 'View Your Website', 'astra-sites' ) }
|
||||
</Button>
|
||||
<a
|
||||
className="view-dashboard-link"
|
||||
href={ astraSitesVars?.dashboard_url }
|
||||
>
|
||||
{ __( 'Visit Dashboard', 'astra-sites' ) }
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImportLoader;
|
||||
@@ -0,0 +1,23 @@
|
||||
import Button from './button/button';
|
||||
import ColorPalettes from './color-palettes/color-palettes';
|
||||
import Customizer from './customizer-step/index';
|
||||
import DefaultStep from './default-step/index';
|
||||
import FontSelector from './font-selector/font-selector';
|
||||
import SitePreview from './site-preview/index';
|
||||
import NextStepButton from './util/next-step-button/next-step-button';
|
||||
import PreviousStepButton from './util/previous-step-button/previous-step-button';
|
||||
import NextStepLink from './util/next-step-link/index';
|
||||
import PreviousStepLink from './util/previous-step-link/index';
|
||||
|
||||
export {
|
||||
Button,
|
||||
ColorPalettes,
|
||||
Customizer,
|
||||
DefaultStep,
|
||||
FontSelector,
|
||||
SitePreview,
|
||||
NextStepButton,
|
||||
PreviousStepButton,
|
||||
NextStepLink,
|
||||
PreviousStepLink,
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from './input';
|
||||
@@ -0,0 +1,123 @@
|
||||
import { classNames, debounce } from '../../utils/functions';
|
||||
import { forwardRef, useMemo } from '@wordpress/element';
|
||||
|
||||
const Input = (
|
||||
{
|
||||
disabled = false,
|
||||
className,
|
||||
inputClassName,
|
||||
error,
|
||||
name,
|
||||
validations,
|
||||
label,
|
||||
noBorder,
|
||||
height = '[42px]',
|
||||
labelColorClassName = 'text-heading-text',
|
||||
enableDebounce,
|
||||
onChange,
|
||||
prefixIcon,
|
||||
suffixIcon,
|
||||
enableAutoGrow = false,
|
||||
register,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const { ref: formHookRef, ...registerValidations } = useMemo( () => {
|
||||
return typeof register === 'function'
|
||||
? register( name, validations )
|
||||
: {};
|
||||
}, [ name, register, validations ] );
|
||||
|
||||
return (
|
||||
<div className={ className }>
|
||||
{ label && (
|
||||
<label
|
||||
htmlFor={ name }
|
||||
className={ classNames(
|
||||
'sp-text-base font-medium text-heading-text',
|
||||
labelColorClassName
|
||||
) }
|
||||
>
|
||||
{ label }
|
||||
{ validations?.required && (
|
||||
<span className="text-alert-error"> *</span>
|
||||
) }
|
||||
</label>
|
||||
) }
|
||||
<div className="flex relative items-center">
|
||||
{ prefixIcon && prefixIcon }
|
||||
<div
|
||||
className={ classNames(
|
||||
enableAutoGrow
|
||||
? 'relative overflow-hidden flex justify-start items-center'
|
||||
: 'w-full'
|
||||
) }
|
||||
>
|
||||
<input
|
||||
ref={ ( node ) => {
|
||||
if ( node && typeof formHookRef === 'function' ) {
|
||||
formHookRef( node );
|
||||
}
|
||||
if ( ! ref ) {
|
||||
return;
|
||||
}
|
||||
switch ( typeof ref ) {
|
||||
case 'function':
|
||||
ref( node );
|
||||
break;
|
||||
case 'object':
|
||||
ref.current = node;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
} }
|
||||
name={ name }
|
||||
disabled={ disabled }
|
||||
className={ classNames(
|
||||
'w-full px-[1rem] placeholder:text-secondary-text rounded-md outline-none text-[0.9rem] placeholder:!text-base',
|
||||
`h-${ height }`,
|
||||
label ? 'mt-2' : '',
|
||||
noBorder
|
||||
? 'bg-transparent'
|
||||
: 'px-3 border border-solid focus:ring-1 focus:ring-accent-st',
|
||||
enableAutoGrow && 'absolute left-0 min-w-[50px]',
|
||||
disabled ? 'cursor-not-allowed' : '',
|
||||
inputClassName,
|
||||
! noBorder && 'input-focus-border'
|
||||
) }
|
||||
style={ {
|
||||
borderColor:
|
||||
error && ! noBorder ? '#EF4444' : '#E5E7EB',
|
||||
boxShadow:
|
||||
error && ! noBorder
|
||||
? '0px 1px 1px 0px #EF4444, 0px 0px 0px 1px #EF4444'
|
||||
: '0px 1px 2px 0px rgba(0, 0, 0, 0.05)',
|
||||
} }
|
||||
onChange={
|
||||
enableDebounce
|
||||
? debounce( onChange, 500 )
|
||||
: onChange
|
||||
}
|
||||
{ ...props }
|
||||
{ ...registerValidations }
|
||||
/>
|
||||
{ enableAutoGrow && (
|
||||
<span className="invisible inline whitespace-pre text-[0.9rem]">
|
||||
{ props.value || props.placeholder }
|
||||
</span>
|
||||
) }
|
||||
</div>
|
||||
{ suffixIcon && suffixIcon }
|
||||
</div>
|
||||
{ error && (
|
||||
<div className="mt-1 text-sm text-alert-error ">
|
||||
{ error.message }
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default forwardRef( Input );
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from './limit-exceeded-modal';
|
||||
@@ -0,0 +1,156 @@
|
||||
import { renderToString } from 'react-dom/server';
|
||||
import { ExclamationTriangleColorfulIcon } from '../../steps/ui/icons';
|
||||
import Modal from '../../components/modal';
|
||||
import Button from '../button/button';
|
||||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { useStateValue } from '../../store/store';
|
||||
|
||||
const LimitExceedModal = ( { onOpenChange, openTarget = '_blank' } ) => {
|
||||
const [ { limitExceedModal }, dispatch ] = useStateValue();
|
||||
|
||||
const planName = (
|
||||
<span className="zw-base-semibold text-app-heading capitalize">
|
||||
{ astraSitesVars?.zip_plans?.active_plan?.slug }
|
||||
</span>
|
||||
);
|
||||
|
||||
const teamName = (
|
||||
<span className="zw-base-semibold text-app-heading">
|
||||
{ astraSitesVars?.zip_plans?.team?.name }
|
||||
</span>
|
||||
);
|
||||
|
||||
const teamPlanInfo = (
|
||||
<span
|
||||
dangerouslySetInnerHTML={ {
|
||||
__html: sprintf(
|
||||
/* translators: %1$s: team name, %2$s: plan name */
|
||||
__(
|
||||
'Your current active organization is %1$s, which is on the %2$s plan.',
|
||||
'astra-sites'
|
||||
),
|
||||
renderToString( teamName ),
|
||||
renderToString( planName )
|
||||
),
|
||||
} }
|
||||
/>
|
||||
);
|
||||
|
||||
const dailyLimit = (
|
||||
<span className="zw-base-semibold text-app-heading ">
|
||||
{ sprintf(
|
||||
/* translators: %s: daily limit */
|
||||
__( '%s AI sites', 'astra-sites' ),
|
||||
astraSitesVars?.zip_plans?.plan_data?.limit
|
||||
?.ai_sites_count_daily
|
||||
) }
|
||||
</span>
|
||||
);
|
||||
|
||||
const aiSitesCount =
|
||||
astraSitesVars?.zip_plans?.plan_data?.remaining?.ai_sites_count_daily;
|
||||
|
||||
const displayMessage = (
|
||||
<span
|
||||
dangerouslySetInnerHTML={ {
|
||||
__html:
|
||||
typeof aiSitesCount === 'number' && aiSitesCount <= 0
|
||||
? `
|
||||
<br />
|
||||
${ sprintf(
|
||||
/* translators: %s: daily limit */
|
||||
__(
|
||||
'This plan allows you to generate %s per day, and you have reached this limit.',
|
||||
'astra-sites'
|
||||
),
|
||||
renderToString( dailyLimit )
|
||||
) }
|
||||
<br />
|
||||
<br />
|
||||
${ __(
|
||||
'To create more AI websites, you will need to either upgrade your plan or wait until the limit resets.',
|
||||
'astra-sites'
|
||||
) }
|
||||
`
|
||||
: `
|
||||
${ sprintf(
|
||||
/* translators: %s: plan name */
|
||||
__(
|
||||
'You have reached the maximum number of sites allowed to be created on %s plan.',
|
||||
'astra-sites'
|
||||
),
|
||||
renderToString( planName )
|
||||
) }
|
||||
<br />
|
||||
<br />
|
||||
${ sprintf(
|
||||
/* translators: %s: team name */
|
||||
__(
|
||||
'Please upgrade the plan for %s in order to create more sites.',
|
||||
'astra-sites'
|
||||
),
|
||||
renderToString( teamName )
|
||||
) }
|
||||
`,
|
||||
} }
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={ limitExceedModal.open }
|
||||
setOpen={ ( toggle ) => {
|
||||
if ( typeof onOpenChange === 'function' ) {
|
||||
onOpenChange( toggle );
|
||||
}
|
||||
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
limitExceedModal: {
|
||||
...limitExceedModal,
|
||||
open: toggle,
|
||||
},
|
||||
} );
|
||||
} }
|
||||
width={ 464 }
|
||||
height="200"
|
||||
overflowHidden={ false }
|
||||
>
|
||||
<Modal.Title>
|
||||
<ExclamationTriangleColorfulIcon className="w-6 h-6" />
|
||||
<span>{ __( 'Limit reached', 'astra-sites' ) }</span>
|
||||
</Modal.Title>
|
||||
<div className="space-y-8">
|
||||
<div className="text-app-text text-base leading-6">
|
||||
<div>
|
||||
{ teamPlanInfo }
|
||||
{ displayMessage }
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className="!bg-accent-st hover:!bg-accent-st w-full !text-base"
|
||||
onClick={ () => {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
limitExceedModal: {
|
||||
...limitExceedModal,
|
||||
open: false,
|
||||
},
|
||||
} );
|
||||
if ( typeof window === 'undefined' ) {
|
||||
return;
|
||||
}
|
||||
window.open(
|
||||
'https://app.zipwp.com/founders-deal',
|
||||
openTarget
|
||||
);
|
||||
} }
|
||||
>
|
||||
{ __( 'Unlock Full Power', 'astra-sites' ) }
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default LimitExceedModal;
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from './loading-spinner';
|
||||
@@ -0,0 +1,39 @@
|
||||
import { classNames } from '../../utils/functions';
|
||||
|
||||
const LoadingSpinner = ( {
|
||||
widthClassName = 'w-5',
|
||||
heightClassName = 'h-5',
|
||||
colorClassName = 'text-white',
|
||||
className,
|
||||
} ) => {
|
||||
return (
|
||||
<svg
|
||||
className={ classNames(
|
||||
'animate-spin',
|
||||
widthClassName,
|
||||
heightClassName,
|
||||
colorClassName,
|
||||
className
|
||||
) }
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
/>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoadingSpinner;
|
||||
@@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import { Logo as SiteLogo } from '@brainstormforce/starter-templates-components';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import './style.scss';
|
||||
import { whiteLabelEnabled, getWhileLabelName } from '../../utils/functions';
|
||||
const { imageDir } = starterTemplates;
|
||||
|
||||
const Logo = () => {
|
||||
return (
|
||||
<div className="branding-wrap">
|
||||
{ whiteLabelEnabled() ? (
|
||||
<h3>{ getWhileLabelName() }</h3>
|
||||
) : (
|
||||
<SiteLogo
|
||||
className="ist-logo"
|
||||
src={ `${ imageDir }logo.svg` }
|
||||
alt={ __( 'Starter Templates', 'astra-sites' ) }
|
||||
onClick={ () =>
|
||||
window.open( astraSitesVars?.st_page_url, '_self' )
|
||||
}
|
||||
/>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Logo;
|
||||
@@ -0,0 +1,4 @@
|
||||
.ist-logo {
|
||||
--stc-logo-height: 40px;
|
||||
--stc-logo-width: 40px;
|
||||
}
|
||||
@@ -0,0 +1,225 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { addFilter } from '@wordpress/hooks';
|
||||
import { RangeControl } from '@wordpress/components';
|
||||
import { MediaUpload } from '@wordpress/media-utils';
|
||||
import Button from '../button/button';
|
||||
import { useStateValue } from '../../store/store';
|
||||
import { sendPostMessage, getDataUri } from '../../utils/functions';
|
||||
import { initialState } from '../../store/reducer';
|
||||
|
||||
import './style.scss';
|
||||
import ICONS from '../../../icons';
|
||||
|
||||
const MediaUploader = () => {
|
||||
const replaceMediaUpload = () => MediaUpload;
|
||||
const [ { siteLogo }, dispatch ] = useStateValue();
|
||||
|
||||
addFilter(
|
||||
'editor.MediaUpload',
|
||||
'core/edit-post/components/media-upload/replace-media-upload',
|
||||
replaceMediaUpload
|
||||
);
|
||||
|
||||
const onSelectImage = ( media ) => {
|
||||
const mediaData = {
|
||||
id: media.id,
|
||||
url: media.url,
|
||||
width: siteLogo.width,
|
||||
};
|
||||
|
||||
if ( window.location.protocol === 'http:' ) {
|
||||
getDataUri( media.url, function ( data ) {
|
||||
mediaData.dataUri = data;
|
||||
updateValues( mediaData );
|
||||
} );
|
||||
} else {
|
||||
updateValues( mediaData );
|
||||
}
|
||||
};
|
||||
|
||||
const updateValues = ( data ) => {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
siteLogo: data,
|
||||
} );
|
||||
|
||||
sendPostMessage( {
|
||||
param: 'siteLogo',
|
||||
data,
|
||||
} );
|
||||
};
|
||||
|
||||
const removeImage = () => {
|
||||
updateValues( initialState.siteLogo );
|
||||
};
|
||||
|
||||
const onWidthChange = ( width ) => {
|
||||
const newLogoOptions = {
|
||||
...siteLogo,
|
||||
width,
|
||||
};
|
||||
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
siteLogo: newLogoOptions,
|
||||
} );
|
||||
|
||||
sendPostMessage( {
|
||||
param: 'siteLogo',
|
||||
data: newLogoOptions,
|
||||
} );
|
||||
};
|
||||
|
||||
const resetLogoWidth = ( event ) => {
|
||||
if ( ! siteLogo.url ) {
|
||||
return;
|
||||
}
|
||||
event.stopPropagation();
|
||||
onWidthChange( initialState.siteLogo.width );
|
||||
};
|
||||
|
||||
useEffect( () => {
|
||||
if ( !! astraSitesVars?.isRTLEnabled ) {
|
||||
const rangeControl = document.querySelector(
|
||||
'.components-range-control__wrapper'
|
||||
);
|
||||
if ( rangeControl === null ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Range control slider styling for RTL.
|
||||
const currentValue = rangeControl.children[ 3 ].style.left;
|
||||
rangeControl.children[ 3 ].style.marginRight = '-10px';
|
||||
rangeControl.children[ 3 ].style.removeProperty( 'margin-left' );
|
||||
rangeControl.children[ 3 ].style.right = currentValue;
|
||||
rangeControl.children[ 4 ].style.removeProperty( 'transform' );
|
||||
rangeControl.children[ 4 ].style.removeProperty( 'left' );
|
||||
rangeControl.children[ 4 ].style.right = currentValue;
|
||||
rangeControl.children[ 4 ].style.transform = 'translateX(50%)';
|
||||
}
|
||||
} );
|
||||
|
||||
return (
|
||||
<MediaUpload
|
||||
onSelect={ ( media ) => onSelectImage( media ) }
|
||||
allowedTypes={ [ 'image' ] }
|
||||
value={ siteLogo.id }
|
||||
render={ ( { open } ) => (
|
||||
<>
|
||||
{ '' !== siteLogo.url && undefined !== siteLogo.url ? (
|
||||
<div className="ist-logo-wrapper">
|
||||
<div
|
||||
className="ist-remove-logo"
|
||||
onClick={ removeImage }
|
||||
title={ __( 'Remove Logo', 'astra-sites' ) }
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="8"
|
||||
height="8"
|
||||
viewBox="0 0 8 8"
|
||||
fill="#333333"
|
||||
>
|
||||
<path
|
||||
d="M8 0.7L7.3 0L4 3.3L0.7 0L0 0.7L3.3 4L0 7.3L0.7 8L4 4.7L7.3 8L8 7.3L4.7 4L8 0.7Z"
|
||||
fill="#333333"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
className="ist-selected-image"
|
||||
onClick={ open }
|
||||
>
|
||||
<div
|
||||
onClick={ open }
|
||||
className="ist-logo-preview-wrap"
|
||||
>
|
||||
<img
|
||||
alt={ __( 'Site Logo', 'astra-sites' ) }
|
||||
src={ siteLogo.url }
|
||||
/>
|
||||
<div
|
||||
className="ist-change-logo"
|
||||
onClick={ open }
|
||||
>
|
||||
{ __( 'Change Logo', 'astra-sites' ) }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
) }
|
||||
|
||||
{ '' === siteLogo.url ? (
|
||||
<div>
|
||||
<Button
|
||||
className="ist-button ist-button-outline ist-logo-button"
|
||||
onClick={ open }
|
||||
>
|
||||
<h5>
|
||||
{ __( 'Upload File Here', 'astra-sites' ) }
|
||||
</h5>
|
||||
<p>
|
||||
{ __(
|
||||
'Suggested Dimensions: 180x60 pixels',
|
||||
'astra-sites'
|
||||
) }
|
||||
</p>
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
) }
|
||||
{ '' === siteLogo.url && (
|
||||
<div className="logo-skip-info">
|
||||
<h5>
|
||||
{ __(
|
||||
'Don’t have a logo? No problem!',
|
||||
'astra-sites'
|
||||
) }
|
||||
</h5>
|
||||
<p>
|
||||
{ __(
|
||||
'You can upload it later',
|
||||
'astra-sites'
|
||||
) }
|
||||
</p>
|
||||
</div>
|
||||
) }
|
||||
<div className="astra-sites-ai-logo-wrap">
|
||||
<div className="label">
|
||||
{ __( 'Logo Width', 'astra-sites' ) }
|
||||
</div>
|
||||
<div
|
||||
className={ `control-reset ${
|
||||
siteLogo.width === initialState.siteLogo.width
|
||||
? 'disabled'
|
||||
: ''
|
||||
}` }
|
||||
onClick={ resetLogoWidth }
|
||||
>
|
||||
{ ICONS.reset }
|
||||
</div>
|
||||
</div>
|
||||
<div className="astra-sites-ai-rangecontrol-wrap">
|
||||
<RangeControl
|
||||
value={ siteLogo.width }
|
||||
min={ 0 }
|
||||
max={ 500 }
|
||||
step={ 1 }
|
||||
onChange={ ( width ) => {
|
||||
onWidthChange( width );
|
||||
} }
|
||||
trackColor="#4361ee"
|
||||
disabled={ '' !== siteLogo.url ? false : true }
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default MediaUploader;
|
||||
@@ -0,0 +1,105 @@
|
||||
.ist-selected-image {
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
margin-bottom: 2em;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
min-height: 100px;
|
||||
border: 1px dashed var( --st-color-accent );
|
||||
border-radius: 2px;
|
||||
padding: 20px;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&:hover .ist-change-logo {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.ist-remove-logo {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
background: #ffffff;
|
||||
box-shadow: 2px 0px 4px rgb( 0 0 0 / 15% );
|
||||
border-radius: 50%;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ist-change-logo {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
padding: 10px 0;
|
||||
color: #646464;
|
||||
border: 1px dashed var( --st-color-accent );
|
||||
transition: 0.3s all ease-in-out;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
cursor: pointer;
|
||||
border-width: 1px 0 0 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ist-logo-preview-wrap {
|
||||
align-self: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ist-logo-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.astra-sites-ai-logo-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.control-reset {
|
||||
cursor: pointer;
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
svg path {
|
||||
fill: var( --st-border-color );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*.step-customizer {
|
||||
.step-content {
|
||||
button {
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 15px;
|
||||
&.disabled-btn {
|
||||
background-color: var( --st-color-placeholder );
|
||||
}
|
||||
}
|
||||
}
|
||||
.step-actions {
|
||||
.ist-link:nth-child( 2 ) {
|
||||
color: var( --st-color-accent );
|
||||
svg {
|
||||
fill: var( --st-color-accent );
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from './modal';
|
||||
@@ -0,0 +1,128 @@
|
||||
import { Dialog, Transition } from '@headlessui/react';
|
||||
import { XMarkIcon } from '@heroicons/react/24/outline';
|
||||
import { Fragment } from '@wordpress/element';
|
||||
import { classNames } from '../../utils/functions';
|
||||
|
||||
function Modal( {
|
||||
open = false,
|
||||
setOpen,
|
||||
width = 520,
|
||||
overflowHidden = true,
|
||||
children,
|
||||
hideCloseIcon = false,
|
||||
className,
|
||||
isErrorModal = false,
|
||||
autoClose = true,
|
||||
} ) {
|
||||
let modalWidth = 'max-w-[35rem]';
|
||||
|
||||
switch ( width?.toString() ) {
|
||||
case '640':
|
||||
modalWidth = 'sm:max-w-[40rem]';
|
||||
break;
|
||||
case '520':
|
||||
modalWidth = 'sm:max-w-[32.5rem]';
|
||||
break;
|
||||
case '464':
|
||||
modalWidth = 'sm:max-w-[29rem]';
|
||||
break;
|
||||
case '480':
|
||||
modalWidth = 'sm:max-w-[30rem]';
|
||||
break;
|
||||
case '300':
|
||||
modalWidth = 'sm:max-w-[24rem]';
|
||||
break;
|
||||
default:
|
||||
modalWidth = 'sm:max-w-[35rem]';
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<Transition.Root show={ open || false } as={ Fragment }>
|
||||
<Dialog
|
||||
as="div"
|
||||
className="spectra-ai relative z-[99999999]"
|
||||
onClose={ ! autoClose ? () => {} : setOpen }
|
||||
>
|
||||
<Transition.Child
|
||||
as={ Fragment }
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-zip-app-heading bg-opacity-75 transition-opacity backdrop-blur opacity-100" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0">
|
||||
<Transition.Child
|
||||
as={ Fragment }
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel
|
||||
className={ classNames(
|
||||
'relative w-full transform rounded-lg bg-white px-8 pt-8 pb-6 text-left shadow-xl transition-all sm:my-8 sm:w-full',
|
||||
modalWidth,
|
||||
overflowHidden && 'overflow-hidden',
|
||||
className
|
||||
) }
|
||||
>
|
||||
<div className="absolute right-0 top-0 pr-3 pt-3 block">
|
||||
{ ! hideCloseIcon && (
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md bg-white text-zip-app-inactive-icon hover:text-nav-active outline-none border-0 focus:outline-none transition duration-150 ease-in-out cursor-pointer"
|
||||
onClick={ () =>
|
||||
setOpen( false, 'close-icon' )
|
||||
}
|
||||
>
|
||||
<span className="sr-only">
|
||||
Close
|
||||
</span>
|
||||
<XMarkIcon
|
||||
className="h-5 w-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
) }
|
||||
</div>
|
||||
<div
|
||||
className={ classNames(
|
||||
'font-sans',
|
||||
! isErrorModal && 'space-y-6'
|
||||
) }
|
||||
>
|
||||
{ /* Modal Body */ }
|
||||
{ children }
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
}
|
||||
|
||||
Modal.Title = ( { children, className } ) => {
|
||||
return (
|
||||
<div
|
||||
className={ classNames(
|
||||
'flex items-center text-2xl font-semibold leading-8 text-heading-text space-x-3',
|
||||
className
|
||||
) }
|
||||
>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Modal;
|
||||
@@ -0,0 +1,147 @@
|
||||
import React, { memo, useEffect, useRef, useState } from 'react';
|
||||
import { sendPostMessage, classNames } from '../../utils/functions';
|
||||
import { useStateValue } from '../../store/store';
|
||||
import { prependHTTPS } from '../../utils/prepend-https';
|
||||
import { stripSlashes } from '../../utils/strip-slashes';
|
||||
import { addTrailingSlash } from '../../utils/add-trailing-slash';
|
||||
import SiteSkeleton from './site-skeleton';
|
||||
|
||||
const SitePreview = () => {
|
||||
const [ { templateResponse, showSidebar, siteLogo }, dispatch ] =
|
||||
useStateValue();
|
||||
const [ previewUrl, setPreviewUrl ] = useState( '' );
|
||||
const [ loading, setLoading ] = useState( true );
|
||||
|
||||
const previewContainer = useRef( null );
|
||||
|
||||
useEffect( () => {
|
||||
const url = templateResponse
|
||||
? templateResponse[ 'astra-site-url' ]
|
||||
: '';
|
||||
|
||||
if ( url !== '' ) {
|
||||
setPreviewUrl(
|
||||
addTrailingSlash( prependHTTPS( stripSlashes( url ) ) )
|
||||
);
|
||||
}
|
||||
}, [ templateResponse ] );
|
||||
|
||||
useEffect( () => {
|
||||
if ( loading !== false ) {
|
||||
return;
|
||||
}
|
||||
|
||||
sendPostMessage( {
|
||||
param: 'cleanStorage',
|
||||
data: siteLogo,
|
||||
} );
|
||||
}, [ loading ] );
|
||||
|
||||
const updateScaling = () => {
|
||||
const container = previewContainer.current;
|
||||
if ( ! container ) {
|
||||
return;
|
||||
}
|
||||
|
||||
const iframe =
|
||||
container.querySelector( 'iframe' ) ?? container.children[ 1 ];
|
||||
const containerWidth = document.body.clientWidth;
|
||||
const containerHeight = document.body.clientHeight - 44;
|
||||
const iframeWidth = iframe.clientWidth;
|
||||
const iframeHeight = iframe.clientHeight;
|
||||
const scaleX = containerWidth / iframeWidth;
|
||||
const scaleY = containerHeight / iframeHeight;
|
||||
const scaleValue = Math.min( scaleX, scaleY );
|
||||
|
||||
// Set the scale for both width and height
|
||||
iframe.style.transform = `scale(${ scaleValue })`;
|
||||
iframe.style.transformOrigin = 'top left';
|
||||
iframe.style.height = `${ containerHeight / scaleValue }px`;
|
||||
};
|
||||
|
||||
const handleIframeLoading = () => {
|
||||
updateScaling();
|
||||
setLoading( false );
|
||||
};
|
||||
|
||||
useEffect( () => {
|
||||
const intervalId = setInterval( updateScaling, 125 );
|
||||
setTimeout( () => {
|
||||
clearInterval( intervalId );
|
||||
}, 500 );
|
||||
return () => {
|
||||
clearInterval( intervalId );
|
||||
};
|
||||
}, [ showSidebar ] );
|
||||
|
||||
const handleResize = () => {
|
||||
// Collapse the sidebar when it's a mobile view.
|
||||
if ( showSidebar ) {
|
||||
if ( window.innerWidth < 1024 ) {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
showSidebar: false,
|
||||
} );
|
||||
} else {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
showSidebar: true,
|
||||
} );
|
||||
}
|
||||
}
|
||||
updateScaling();
|
||||
};
|
||||
|
||||
// Update scaling on window resize.
|
||||
useEffect( () => {
|
||||
handleResize();
|
||||
window.addEventListener( 'resize', handleResize );
|
||||
return () => {
|
||||
window.removeEventListener( 'resize', handleResize );
|
||||
};
|
||||
}, [] );
|
||||
|
||||
const renderBrowserFrame = () => (
|
||||
<div
|
||||
className={ classNames(
|
||||
'flex items-center justify-start py-3 px-4 bg-browser-bar shadow-sm rounded-t-lg mx-auto h-[44px] z-[1] relative',
|
||||
'w-full mx-0'
|
||||
) }
|
||||
>
|
||||
<div className="flex gap-2 py-[3px] w-20">
|
||||
<div className="w-[14px] h-[14px] border border-solid border-border-primary rounded-full" />
|
||||
<div className="w-[14px] h-[14px] border border-solid border-border-primary rounded-full" />
|
||||
<div className="w-[14px] h-[14px] border border-solid border-border-primary rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{ loading ? <SiteSkeleton /> : null }
|
||||
{ previewUrl !== '' && (
|
||||
<div className="w-full h-full p-4">
|
||||
<div
|
||||
ref={ previewContainer }
|
||||
className="h-full relative overflow-hidden shadow-template-preview w-full mx-auto"
|
||||
>
|
||||
{ renderBrowserFrame() }
|
||||
<div className="w-full h-full">
|
||||
<iframe
|
||||
id="astra-starter-templates-preview"
|
||||
className="w-full h-full"
|
||||
title="Website Preview"
|
||||
height="100%"
|
||||
width="100%"
|
||||
src={ previewUrl }
|
||||
onLoad={ handleIframeLoading }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) }
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo( SitePreview );
|
||||
@@ -0,0 +1,144 @@
|
||||
import { Skeleton } from '@mui/material';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Box from '@mui/material/Box';
|
||||
import { classNames } from '../../utils/functions';
|
||||
|
||||
const SiteSkeleton = ( { className } ) => {
|
||||
return (
|
||||
<div className={ classNames( 'site-loading-skeleton', className ) }>
|
||||
<Grid container>
|
||||
<Grid item xs={ 4 }>
|
||||
<Box p={ '3em 8em' } display="flex">
|
||||
<Skeleton
|
||||
variant="rect"
|
||||
width={ 234 }
|
||||
height={ 45 }
|
||||
animation="wave"
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={ 8 }>
|
||||
<Box
|
||||
p="3em 8em"
|
||||
display="flex"
|
||||
justifyContent="flex-end"
|
||||
gap="25px"
|
||||
>
|
||||
<Skeleton
|
||||
variant="rect"
|
||||
width={ 100 }
|
||||
height={ 45 }
|
||||
animation="wave"
|
||||
/>
|
||||
<Skeleton
|
||||
variant="rect"
|
||||
width={ 100 }
|
||||
height={ 45 }
|
||||
animation="wave"
|
||||
/>
|
||||
<Skeleton
|
||||
variant="rect"
|
||||
width={ 100 }
|
||||
height={ 45 }
|
||||
animation="wave"
|
||||
/>
|
||||
<Skeleton
|
||||
variant="rect"
|
||||
width={ 100 }
|
||||
height={ 45 }
|
||||
animation="wave"
|
||||
/>
|
||||
<Skeleton
|
||||
variant="rect"
|
||||
width={ 200 }
|
||||
height={ 45 }
|
||||
animation="wave"
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={ 6 }>
|
||||
<Box
|
||||
p="1rem 2rem 1rem 8rem"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
height="100%"
|
||||
>
|
||||
<Box>
|
||||
<Skeleton
|
||||
variant="rect"
|
||||
height={ 120 }
|
||||
animation="wave"
|
||||
/>
|
||||
</Box>
|
||||
<Box m="1em 0">
|
||||
<Skeleton
|
||||
variant="rect"
|
||||
height={ 20 }
|
||||
animation="wave"
|
||||
/>
|
||||
</Box>
|
||||
<Box m="1em 0">
|
||||
<Skeleton
|
||||
variant="rect"
|
||||
height={ 20 }
|
||||
animation="wave"
|
||||
/>
|
||||
</Box>
|
||||
<Box m="3em 0">
|
||||
<Skeleton
|
||||
variant="rect"
|
||||
width={ 250 }
|
||||
height={ 50 }
|
||||
animation="wave"
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={ 6 }>
|
||||
<Box
|
||||
p="1rem 8rem 1rem 2rem"
|
||||
display="flex"
|
||||
justifyContent="flex-end"
|
||||
gap="25px"
|
||||
>
|
||||
<Skeleton
|
||||
variant="rect"
|
||||
width={ 516 }
|
||||
height={ 320 }
|
||||
animation="wave"
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={ 12 }>
|
||||
<Box
|
||||
p="3em 8em"
|
||||
display="flex"
|
||||
justifyContent="space-evenly"
|
||||
gap="25px"
|
||||
>
|
||||
<Skeleton
|
||||
variant="rect"
|
||||
width="100%"
|
||||
height={ 320 }
|
||||
animation="wave"
|
||||
/>
|
||||
<Skeleton
|
||||
variant="rect"
|
||||
width="100%"
|
||||
height={ 320 }
|
||||
animation="wave"
|
||||
/>
|
||||
<Skeleton
|
||||
variant="rect"
|
||||
width="100%"
|
||||
height={ 320 }
|
||||
animation="wave"
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SiteSkeleton;
|
||||
@@ -0,0 +1,11 @@
|
||||
export default function sendPostMessage( data ) {
|
||||
const frame = document.getElementById( 'astra-starter-templates-preview' );
|
||||
|
||||
frame.contentWindow.postMessage(
|
||||
{
|
||||
call: 'starterTemplatePreviewDispatch',
|
||||
value: data,
|
||||
},
|
||||
'*'
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useStateValue } from '../../store/store';
|
||||
import ICONS from '../../../icons';
|
||||
import { classNames } from '../../utils/functions';
|
||||
import { Line } from 'rc-progress';
|
||||
|
||||
const SyncInProgressModal = ( { open = false } ) => {
|
||||
const [ { syncPageCount, syncPageInProgress } ] = useStateValue();
|
||||
|
||||
const getProgressPercent = () => {
|
||||
if ( syncPageCount > 0 ) {
|
||||
return ( syncPageInProgress / syncPageCount ) * 100;
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
const [ progress, setProgress ] = useState( getProgressPercent() );
|
||||
|
||||
useEffect( () => {
|
||||
if ( syncPageInProgress > 0 ) {
|
||||
setProgress( getProgressPercent() );
|
||||
}
|
||||
}, [ syncPageInProgress ] );
|
||||
|
||||
return (
|
||||
<div
|
||||
className={ classNames(
|
||||
'w-full absolute hidden h-screen top-0 left-0 bg-st-background-secondary/80',
|
||||
open && 'flex justify-center items-center'
|
||||
) }
|
||||
>
|
||||
<div className="bg-white w-[296px] rounded-lg shadow-2xl flex flex-col items-center justify-center -mt-36 p-5">
|
||||
<div className="flex justify-between">
|
||||
<p className="!text-base !font-semibold text-nav-active">
|
||||
{ __( 'Syncing Templates Library…', 'astra-sites' ) }
|
||||
</p>
|
||||
<div className="flex items-center justify-center text-blue-500 animate-spin w-[15px] ml-3">
|
||||
{ ICONS.reloadIcon }
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-[#4B5563] text-center !mt-1">
|
||||
{ __(
|
||||
'Updating the library to include all the latest templates.',
|
||||
'astra-sites'
|
||||
) }
|
||||
</p>
|
||||
{ syncPageCount > 0 ? (
|
||||
<div className="progress-bar w-full flex justify-between mt-4">
|
||||
<Line
|
||||
percent={ progress }
|
||||
strokeWidth={ 2 }
|
||||
trailWidth={ 2 }
|
||||
trailColor="#E5E7EB"
|
||||
strokeColor="#3B82F6"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SyncInProgressModal;
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from './toggle-switch';
|
||||
@@ -0,0 +1,66 @@
|
||||
import { Switch } from '@headlessui/react';
|
||||
import { memo } from '@wordpress/element';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { classNames } from '../../utils/functions';
|
||||
|
||||
const ToggleSwitch = ( { onChange, value, variant = 'light' } ) => {
|
||||
const switchClassNames = {
|
||||
dark: {
|
||||
wrapper: [
|
||||
'w-10',
|
||||
value ? 'bg-accent-st-secondary' : 'bg-zip-dark-theme-border',
|
||||
],
|
||||
background: [
|
||||
value ? 'bg-accent-st-secondary' : 'bg-zip-dark-theme-border',
|
||||
],
|
||||
switch: [ 'size-5', value ? 'translate-x-5' : 'translate-x-0' ],
|
||||
},
|
||||
light: {
|
||||
wrapper: [
|
||||
'w-9',
|
||||
value ? 'bg-accent-st-secondary' : 'bg-border-tertiary',
|
||||
],
|
||||
background: [
|
||||
value ? 'bg-accent-st-secondary' : 'bg-border-tertiary',
|
||||
],
|
||||
switch: [
|
||||
'size-4',
|
||||
value ? 'translate-x-[1.15rem]' : 'translate-x-[0.15rem]',
|
||||
],
|
||||
},
|
||||
};
|
||||
return (
|
||||
<Switch
|
||||
checked={ value }
|
||||
onChange={ onChange }
|
||||
className={ classNames(
|
||||
'group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none border-0 bg-transparent',
|
||||
switchClassNames[ variant ].wrapper
|
||||
) }
|
||||
>
|
||||
<span className="sr-only">
|
||||
{ __( 'Use setting', 'astra-sites' ) }
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute h-full w-full rounded-md bg-transparent"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={ classNames(
|
||||
'pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-150 ease-out',
|
||||
switchClassNames[ variant ].background
|
||||
) }
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={ classNames(
|
||||
'pointer-events-none absolute size-5 left-0 inline-block transform rounded-full bg-white shadow transition-transform duration-150 ease-out',
|
||||
switchClassNames[ variant ].switch
|
||||
) }
|
||||
/>
|
||||
</Switch>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo( ToggleSwitch );
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from './tooltip';
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import Tippy from '@tippyjs/react';
|
||||
import '../../variables.scss';
|
||||
|
||||
const Tooltip = ( {
|
||||
children,
|
||||
content,
|
||||
offset,
|
||||
placement = 'top',
|
||||
interactive = false,
|
||||
delay = [ 300, 0 ],
|
||||
} ) => {
|
||||
return content ? (
|
||||
<Tippy
|
||||
arrow
|
||||
content={ content }
|
||||
className="zw-tooltip zw-xs-normal flex items-center justify-left"
|
||||
offset={ offset } // [x,y]
|
||||
placement={ placement }
|
||||
interactive={ interactive }
|
||||
delay={ delay }
|
||||
>
|
||||
{ children }
|
||||
</Tippy>
|
||||
) : (
|
||||
<div>{ children }</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tooltip;
|
||||
@@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import Button from '../../button/button';
|
||||
import { useStateValue } from '../../../store/store';
|
||||
|
||||
const NextStepButton = ( props ) => {
|
||||
const {
|
||||
children,
|
||||
after,
|
||||
before,
|
||||
gray,
|
||||
large,
|
||||
mb1,
|
||||
ml1,
|
||||
onClick,
|
||||
customizeStep,
|
||||
disabled,
|
||||
} = props;
|
||||
const storedState = useStateValue();
|
||||
const [ { currentIndex }, dispatch ] = storedState;
|
||||
return (
|
||||
<Button
|
||||
gray={ gray }
|
||||
large={ large }
|
||||
mb1={ mb1 }
|
||||
ml1={ ml1 }
|
||||
before={ before }
|
||||
after={ after }
|
||||
onClick={ ( event ) => {
|
||||
if ( true !== customizeStep ) {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentIndex: currentIndex + 1,
|
||||
} );
|
||||
}
|
||||
|
||||
if ( typeof onClick === 'function' ) {
|
||||
onClick( event );
|
||||
}
|
||||
} }
|
||||
disabled={ disabled }
|
||||
>
|
||||
{ children }
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
export default NextStepButton;
|
||||
@@ -0,0 +1,81 @@
|
||||
import React from 'react';
|
||||
import { useStateValue } from '../../../store/store';
|
||||
import { Link } from '../../../ui/style';
|
||||
|
||||
const NextStepLink = ( props ) => {
|
||||
const {
|
||||
children,
|
||||
after,
|
||||
before,
|
||||
onClick,
|
||||
customizeStep,
|
||||
disabled,
|
||||
skipSteps,
|
||||
hidden,
|
||||
} = props;
|
||||
const [ { currentIndex }, dispatch ] = useStateValue();
|
||||
const handleClick = ( event ) => {
|
||||
if ( true !== customizeStep ) {
|
||||
let steps = skipSteps;
|
||||
if ( typeof skipSteps === 'undefined' ) {
|
||||
steps = 1;
|
||||
}
|
||||
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentIndex: currentIndex + steps,
|
||||
} );
|
||||
}
|
||||
|
||||
if ( 'function' === typeof onClick ) {
|
||||
onClick( event );
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Link
|
||||
$before={ before }
|
||||
$after={ after }
|
||||
className={ `ist-link
|
||||
${ disabled ? 'disabled' : '' }
|
||||
${ hidden ? 'hidden-btn' : '' }
|
||||
` }
|
||||
onClick={ handleClick }
|
||||
>
|
||||
{ before ? (
|
||||
<svg
|
||||
width="14"
|
||||
height="9"
|
||||
viewBox="0 0 14 9"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M14.0009 4.4999C14.0009 4.36729 13.9482 4.24011 13.8544 4.14635C13.7607 4.05258 13.6335 3.9999 13.5009 3.9999H1.70789L4.85489 0.853899C4.90138 0.807411 4.93826 0.752222 4.96342 0.691483C4.98858 0.630743 5.00153 0.565643 5.00153 0.499899C5.00153 0.434155 4.98858 0.369055 4.96342 0.308316C4.93826 0.247576 4.90138 0.192387 4.85489 0.145899C4.80841 0.0994111 4.75322 0.062535 4.69248 0.0373759C4.63174 0.0122168 4.56664 -0.000732422 4.50089 -0.000732422C4.43515 -0.000732422 4.37005 0.0122168 4.30931 0.0373759C4.24857 0.062535 4.19338 0.0994111 4.14689 0.145899L0.146894 4.1459C0.100331 4.19234 0.0633877 4.24752 0.0381812 4.30827C0.0129748 4.36901 0 4.43413 0 4.4999C0 4.56567 0.0129748 4.63079 0.0381812 4.69153C0.0633877 4.75228 0.100331 4.80745 0.146894 4.8539L4.14689 8.8539C4.19338 8.90039 4.24857 8.93726 4.30931 8.96242C4.37005 8.98758 4.43515 9.00053 4.50089 9.00053C4.56664 9.00053 4.63174 8.98758 4.69248 8.96242C4.75322 8.93726 4.80841 8.90039 4.85489 8.8539C4.90138 8.80741 4.93826 8.75222 4.96342 8.69148C4.98858 8.63074 5.00153 8.56564 5.00153 8.4999C5.00153 8.43416 4.98858 8.36905 4.96342 8.30832C4.93826 8.24758 4.90138 8.19239 4.85489 8.1459L1.70789 4.9999H13.5009C13.6335 4.9999 13.7607 4.94722 13.8544 4.85345C13.9482 4.75968 14.0009 4.63251 14.0009 4.4999Z"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
''
|
||||
) }
|
||||
{ children }
|
||||
{ after ? (
|
||||
<svg
|
||||
width="14"
|
||||
height="9"
|
||||
viewBox="0 0 14 9"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M0 4.50002C0 4.36741 0.0526784 4.24024 0.146447 4.14647C0.240215 4.0527 0.367392 4.00002 0.5 4.00002H12.293L9.146 0.854021C9.05211 0.760135 8.99937 0.632797 8.99937 0.500021C8.99937 0.367245 9.05211 0.239908 9.146 0.146021C9.23989 0.0521345 9.36722 -0.000610348 9.5 -0.000610352C9.63278 -0.000610355 9.76011 0.0521345 9.854 0.146021L13.854 4.14602C13.9006 4.19247 13.9375 4.24764 13.9627 4.30839C13.9879 4.36913 14.0009 4.43425 14.0009 4.50002C14.0009 4.56579 13.9879 4.63091 13.9627 4.69165C13.9375 4.7524 13.9006 4.80758 13.854 4.85402L9.854 8.85402C9.76011 8.94791 9.63278 9.00065 9.5 9.00065C9.36722 9.00065 9.23989 8.94791 9.146 8.85402C9.05211 8.76013 8.99937 8.6328 8.99937 8.50002C8.99937 8.36725 9.05211 8.23991 9.146 8.14602L12.293 5.00002H0.5C0.367392 5.00002 0.240215 4.94734 0.146447 4.85357C0.0526784 4.75981 0 4.63263 0 4.50002Z"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
''
|
||||
) }
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default NextStepLink;
|
||||
@@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import Button from '../../button/button';
|
||||
import { useStateValue } from '../../../store/store';
|
||||
|
||||
const PreviousStepButton = ( { children, customizeStep } ) => {
|
||||
const [ { currentIndex }, dispatch ] = useStateValue();
|
||||
return (
|
||||
<Button
|
||||
type="hero"
|
||||
onClick={ () => {
|
||||
if ( true !== customizeStep ) {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentIndex: currentIndex - 1,
|
||||
} );
|
||||
}
|
||||
} }
|
||||
>
|
||||
{ children }
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
export default PreviousStepButton;
|
||||
@@ -0,0 +1,76 @@
|
||||
import React from 'react';
|
||||
import { useStateValue } from '../../../store/store';
|
||||
import { Link } from '../../../ui/style';
|
||||
|
||||
const PreviousStepLink = ( {
|
||||
children,
|
||||
after,
|
||||
before,
|
||||
onClick,
|
||||
customizeStep,
|
||||
disabled,
|
||||
hidden,
|
||||
} ) => {
|
||||
const [ { currentIndex }, dispatch ] = useStateValue();
|
||||
const handleClick = ( event ) => {
|
||||
if ( true !== customizeStep ) {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentIndex: currentIndex - 1,
|
||||
} );
|
||||
}
|
||||
|
||||
if ( 'function' === typeof onClick ) {
|
||||
onClick( event );
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Link
|
||||
$before={ before }
|
||||
$after={ after }
|
||||
className={ `ist-link
|
||||
${ disabled ? 'disabled' : '' }
|
||||
${ hidden ? 'hidden-btn' : '' }
|
||||
` }
|
||||
onClick={ handleClick }
|
||||
tabIndex={ hidden ? -1 : 0 }
|
||||
onKeyPress={ handleClick }
|
||||
>
|
||||
{ before ? (
|
||||
<svg
|
||||
width="14"
|
||||
height="9"
|
||||
viewBox="0 0 14 9"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M14.0009 4.4999C14.0009 4.36729 13.9482 4.24011 13.8544 4.14635C13.7607 4.05258 13.6335 3.9999 13.5009 3.9999H1.70789L4.85489 0.853899C4.90138 0.807411 4.93826 0.752222 4.96342 0.691483C4.98858 0.630743 5.00153 0.565643 5.00153 0.499899C5.00153 0.434155 4.98858 0.369055 4.96342 0.308316C4.93826 0.247576 4.90138 0.192387 4.85489 0.145899C4.80841 0.0994111 4.75322 0.062535 4.69248 0.0373759C4.63174 0.0122168 4.56664 -0.000732422 4.50089 -0.000732422C4.43515 -0.000732422 4.37005 0.0122168 4.30931 0.0373759C4.24857 0.062535 4.19338 0.0994111 4.14689 0.145899L0.146894 4.1459C0.100331 4.19234 0.0633877 4.24752 0.0381812 4.30827C0.0129748 4.36901 0 4.43413 0 4.4999C0 4.56567 0.0129748 4.63079 0.0381812 4.69153C0.0633877 4.75228 0.100331 4.80745 0.146894 4.8539L4.14689 8.8539C4.19338 8.90039 4.24857 8.93726 4.30931 8.96242C4.37005 8.98758 4.43515 9.00053 4.50089 9.00053C4.56664 9.00053 4.63174 8.98758 4.69248 8.96242C4.75322 8.93726 4.80841 8.90039 4.85489 8.8539C4.90138 8.80741 4.93826 8.75222 4.96342 8.69148C4.98858 8.63074 5.00153 8.56564 5.00153 8.4999C5.00153 8.43416 4.98858 8.36905 4.96342 8.30832C4.93826 8.24758 4.90138 8.19239 4.85489 8.1459L1.70789 4.9999H13.5009C13.6335 4.9999 13.7607 4.94722 13.8544 4.85345C13.9482 4.75968 14.0009 4.63251 14.0009 4.4999Z"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
''
|
||||
) }
|
||||
{ children }
|
||||
{ after ? (
|
||||
<svg
|
||||
width="14"
|
||||
height="9"
|
||||
viewBox="0 0 14 9"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M0 4.50002C0 4.36741 0.0526784 4.24024 0.146447 4.14647C0.240215 4.0527 0.367392 4.00002 0.5 4.00002H12.293L9.146 0.854021C9.05211 0.760135 8.99937 0.632797 8.99937 0.500021C8.99937 0.367245 9.05211 0.239908 9.146 0.146021C9.23989 0.0521345 9.36722 -0.000610348 9.5 -0.000610352C9.63278 -0.000610355 9.76011 0.0521345 9.854 0.146021L13.854 4.14602C13.9006 4.19247 13.9375 4.24764 13.9627 4.30839C13.9879 4.36913 14.0009 4.43425 14.0009 4.50002C14.0009 4.56579 13.9879 4.63091 13.9627 4.69165C13.9375 4.7524 13.9006 4.80758 13.854 4.85402L9.854 8.85402C9.76011 8.94791 9.63278 9.00065 9.5 9.00065C9.36722 9.00065 9.23989 8.94791 9.146 8.85402C9.05211 8.76013 8.99937 8.6328 8.99937 8.50002C8.99937 8.36725 9.05211 8.23991 9.146 8.14602L12.293 5.00002H0.5C0.367392 5.00002 0.240215 4.94734 0.146447 4.85357C0.0526784 4.75981 0 4.63263 0 4.50002Z"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
''
|
||||
) }
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default PreviousStepLink;
|
||||
@@ -0,0 +1,21 @@
|
||||
import Button from '../button/button';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
const ZipWPAuthorize = () => {
|
||||
return (
|
||||
<Button
|
||||
className="ist-button"
|
||||
onClick={ () => {
|
||||
const url =
|
||||
wpApiSettings?.zipwp_auth?.screen_url +
|
||||
'?type=token&redirect_url=' +
|
||||
wpApiSettings?.zipwp_auth?.redirect_url;
|
||||
window.location.href = url;
|
||||
} }
|
||||
>
|
||||
{ __( 'Authorize', 'astra-sites' ) }
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
export default ZipWPAuthorize;
|
||||
@@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom';
|
||||
import reducer, { initialState } from './store/reducer';
|
||||
import { StateProvider } from './store/store';
|
||||
import App from './app';
|
||||
import { Toaster } from 'react-hot-toast';
|
||||
|
||||
const root = createRoot(
|
||||
document.getElementById( 'starter-templates-ai-root' )
|
||||
);
|
||||
root.render(
|
||||
<StateProvider reducer={ reducer } initialState={ initialState }>
|
||||
<App />
|
||||
<Toaster position="top-right" reverseOrder={ false } gutter={ 8 } />
|
||||
</StateProvider>
|
||||
);
|
||||
@@ -0,0 +1,129 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
// import { useState } from '@wordpress/element';
|
||||
import { DefaultStep, PreviousStepLink } from '../../components/index';
|
||||
import { useStateValue } from '../../store/store';
|
||||
import ZipWPAuthorize from '../../components/zipwp-auth/index';
|
||||
|
||||
const { imageDir, isBeaverBuilderDisabled } = starterTemplates;
|
||||
|
||||
const PageBuilder = () => {
|
||||
const [ { currentIndex }, dispatch ] = useStateValue();
|
||||
// const [ builder, setBuilder ] = useState( 'ai' );
|
||||
|
||||
useEffect( () => {
|
||||
const startTime = localStorage.getItem( 'st-import-start' );
|
||||
const endTime = localStorage.getItem( 'st-import-end' );
|
||||
|
||||
if ( startTime || endTime ) {
|
||||
localStorage.removeItem( 'st-import-start' );
|
||||
localStorage.removeItem( 'st-import-end' );
|
||||
}
|
||||
} );
|
||||
|
||||
const update = ( builder ) => {
|
||||
if ( builder !== 'ai' ) {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
builder,
|
||||
currentIndex: currentIndex + 1,
|
||||
} );
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyPress = ( e, value ) => {
|
||||
e = e || window.event;
|
||||
|
||||
if ( e.keyCode === 37 ) {
|
||||
//Left Arrow
|
||||
if ( e.target.previousSibling ) {
|
||||
e.target.previousSibling.focus();
|
||||
}
|
||||
} else if ( e.keyCode === 39 ) {
|
||||
//Right Arrow
|
||||
if ( e.target.nextSibling ) {
|
||||
e.target.nextSibling.focus();
|
||||
}
|
||||
} else if ( e.key === 'Enter' ) {
|
||||
//Enter
|
||||
update( value );
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<DefaultStep
|
||||
content={
|
||||
<div className="page-builder-screen-wrap middle-content">
|
||||
<h1>{ __( 'Select Page Builder', 'astra-sites' ) }</h1>
|
||||
<p className="screen-description">
|
||||
{ __(
|
||||
'Please choose your preferred page builder from the list below.',
|
||||
'astra-sites'
|
||||
) }
|
||||
</p>
|
||||
<div className="page-builder-wrap ist-fadeinUp">
|
||||
<div
|
||||
className="page-builder-item d-flex-center-align"
|
||||
onClick={ () => {
|
||||
update( 'ai' );
|
||||
} }
|
||||
tabIndex="0"
|
||||
onKeyDown={ ( event ) =>
|
||||
handleKeyPress( event, 'ai' )
|
||||
}
|
||||
>
|
||||
<div className="elementor-image-wrap image-wrap">
|
||||
<img
|
||||
src={ `${ imageDir }block-editor.svg` }
|
||||
alt={ __( 'Block Editor', 'astra-sites' ) }
|
||||
/>
|
||||
</div>
|
||||
<h6>{ __( 'AI Site', 'astra-sites' ) }</h6>
|
||||
</div>
|
||||
{ ! isBeaverBuilderDisabled && (
|
||||
<div
|
||||
className="page-builder-item d-flex-center-align"
|
||||
onClick={ () => {
|
||||
update( 'legacy' );
|
||||
} }
|
||||
tabIndex="0"
|
||||
onKeyDown={ ( event ) =>
|
||||
handleKeyPress( event, 'legacy' )
|
||||
}
|
||||
>
|
||||
<div className="beaver-builder-image-wrap image-wrap">
|
||||
<img
|
||||
src={ `${ imageDir }beaver-builder.svg` }
|
||||
alt={ __(
|
||||
'Beaver Builder',
|
||||
'astra-sites'
|
||||
) }
|
||||
/>
|
||||
</div>
|
||||
<h6>{ __( 'Legacy', 'astra-sites' ) }</h6>
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
<div className="zipwp-authorize-wrap">
|
||||
{ <ZipWPAuthorize /> }
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
actions={
|
||||
<>
|
||||
<PreviousStepLink
|
||||
before
|
||||
customizeStep={ true }
|
||||
onClick={ () => {
|
||||
window.location.href = starterTemplates.adminUrl;
|
||||
} }
|
||||
>
|
||||
{ __( 'Back', 'astra-sites' ) }
|
||||
</PreviousStepLink>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default PageBuilder;
|
||||
@@ -0,0 +1,157 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useStateValue } from '../../store/store';
|
||||
import ChangeTemplate from '../../components/change-template';
|
||||
import LicenseValidation from './license-validation';
|
||||
import SiteLogo from './site-logo';
|
||||
import ColorPalettes from './color-palettes';
|
||||
import FontSelector from './font-selector';
|
||||
import Button from '../../components/button/button';
|
||||
import PreviousStepLink from '../../components/util/previous-step-link/index';
|
||||
import { ChevronRightIcon } from '@heroicons/react/24/outline';
|
||||
import { Toaster } from '@brainstormforce/starter-templates-components';
|
||||
|
||||
const ClassicPreview = () => {
|
||||
const [
|
||||
{
|
||||
currentCustomizeIndex,
|
||||
templateResponse,
|
||||
licenseStatus,
|
||||
selectedTemplateType,
|
||||
templateId,
|
||||
currentIndex,
|
||||
builder,
|
||||
},
|
||||
dispatch,
|
||||
] = useStateValue();
|
||||
|
||||
const [ error, setError ] = useState( '' );
|
||||
const setErrorCallback = ( message ) => {
|
||||
setError( message );
|
||||
};
|
||||
useEffect( () => {
|
||||
const premiumTemplate =
|
||||
'free' !== templateResponse?.[ 'astra-site-type' ];
|
||||
|
||||
if ( premiumTemplate && ! licenseStatus ) {
|
||||
if ( astraSitesVars?.isPro ) {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
validateLicenseStatus: true,
|
||||
} );
|
||||
}
|
||||
}
|
||||
}, [ templateResponse ] );
|
||||
|
||||
const lastStep = () => {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentCustomizeIndex: currentCustomizeIndex - 1,
|
||||
currentIndex: currentIndex - 1,
|
||||
} );
|
||||
};
|
||||
|
||||
const setNextStep = () => {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentIndex: currentIndex + 1,
|
||||
} );
|
||||
};
|
||||
|
||||
const preventRefresh = ( event ) => {
|
||||
event.returnValue = __(
|
||||
'Are you sure you want to cancel the site import process?',
|
||||
'astra-sites'
|
||||
);
|
||||
return event;
|
||||
};
|
||||
|
||||
useEffect( () => {
|
||||
window.addEventListener( 'beforeunload', preventRefresh ); // eslint-disable-line
|
||||
return () =>
|
||||
window.removeEventListener( 'beforeunload', preventRefresh ); // eslint-disable-line
|
||||
} );
|
||||
return (
|
||||
<>
|
||||
<ChangeTemplate />
|
||||
<div className="flex flex-col gap-2 text-sm px-6 font-normal leading-5 mt-3">
|
||||
<h5>{ __( 'Customize', 'astra-sites' ) }</h5>
|
||||
<p className="!text-zip-app-inactive-icon">
|
||||
{ __(
|
||||
'Add your own logo, change color and font.',
|
||||
'astra-sites'
|
||||
) }
|
||||
</p>
|
||||
</div>
|
||||
<div className="st-preview-section px-6 mb-5 w-full space-y-5">
|
||||
<SiteLogo />
|
||||
{ templateResponse ? (
|
||||
<>
|
||||
<FontSelector />
|
||||
{ builder !== 'beaver-builder' && <ColorPalettes /> }
|
||||
</>
|
||||
) : (
|
||||
<div className="space-y-5">
|
||||
<div
|
||||
data-placeholder
|
||||
className="relative animate-pulse overflow-hidden bg-gray-300 h-[50px] w-full rounded-md"
|
||||
/>
|
||||
{ builder !== 'beaver-builder' && (
|
||||
<div
|
||||
data-placeholder
|
||||
className="relative animate-pulse overflow-hidden bg-gray-300 h-[50px] w-full rounded-md"
|
||||
/>
|
||||
) }
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
<div className="w-full flex flex-col gap-4 mt-auto px-6 sm:pb-0 pb-14">
|
||||
{ ! licenseStatus && 'free' !== selectedTemplateType && (
|
||||
<LicenseValidation setErrorCB={ setErrorCallback } />
|
||||
) }
|
||||
<div className="flex flex-col gap-2 mt-2">
|
||||
{ ( ( licenseStatus && selectedTemplateType !== 'free' ) ||
|
||||
selectedTemplateType === 'free' ) && (
|
||||
<Button
|
||||
className={ `w-full flex gap-2 items-center ${
|
||||
( ! licenseStatus &&
|
||||
selectedTemplateType !== 'free' ) ||
|
||||
( templateId === 0 &&
|
||||
selectedTemplateType === 'free' )
|
||||
? '!bg-border-tertiary !text-zip-app-inactive-icon'
|
||||
: ''
|
||||
}` }
|
||||
onClick={ setNextStep }
|
||||
disabled={
|
||||
( ! licenseStatus &&
|
||||
selectedTemplateType !== 'free' ) ||
|
||||
( templateId === 0 &&
|
||||
selectedTemplateType === 'free' )
|
||||
}
|
||||
>
|
||||
<span>{ __( 'Continue', 'astra-sites' ) }</span>
|
||||
<ChevronRightIcon className="w-4 h-4 !fill-none" />
|
||||
</Button>
|
||||
) }
|
||||
<PreviousStepLink
|
||||
className="w-full"
|
||||
onClick={ lastStep }
|
||||
customizeStep={ true }
|
||||
>
|
||||
{ __( 'Back', 'astra-sites' ) }
|
||||
</PreviousStepLink>
|
||||
</div>
|
||||
</div>
|
||||
{ error !== '' && (
|
||||
<Toaster
|
||||
type="error"
|
||||
message={ error }
|
||||
autoHideDuration={ 5 }
|
||||
className="flex relative"
|
||||
/>
|
||||
) }
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ClassicPreview;
|
||||
@@ -0,0 +1,158 @@
|
||||
import { memo, useEffect, useState } from 'react';
|
||||
import { ArrowPathIcon } from '@heroicons/react/24/outline';
|
||||
import {
|
||||
LIGHT_PALETTES,
|
||||
DARK_PALETTES,
|
||||
} from '../customize-site/customize-steps/site-colors-typography/colors';
|
||||
import { useStateValue } from '../../store/store';
|
||||
import {
|
||||
sendPostMessage as dispatchPostMessage,
|
||||
getDefaultColorPalette,
|
||||
getColorScheme,
|
||||
classNames,
|
||||
} from '../../utils/functions';
|
||||
import { TilesIcon } from '../ui/icons';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
const ColorPalettes = () => {
|
||||
const [ { activePalette: selectedPalette, templateResponse }, dispatch ] =
|
||||
useStateValue();
|
||||
const [ colorScheme, setColorScheme ] = useState( LIGHT_PALETTES );
|
||||
|
||||
const sendPostMessage = ( data ) => {
|
||||
dispatchPostMessage( data, 'astra-starter-templates-preview' );
|
||||
};
|
||||
|
||||
const handleChange = ( palette ) => () => {
|
||||
sendPostMessage( {
|
||||
param: 'colorPalette',
|
||||
data: palette,
|
||||
} );
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
activePalette: palette,
|
||||
} );
|
||||
};
|
||||
|
||||
useEffect( () => {
|
||||
const defaultPaletteValues = getDefaultColorPalette( templateResponse );
|
||||
let scheme =
|
||||
'light' === getColorScheme( templateResponse )
|
||||
? LIGHT_PALETTES
|
||||
: DARK_PALETTES;
|
||||
|
||||
const customColors =
|
||||
templateResponse?.[ 'astra-custom-palettes' ] || [];
|
||||
if ( customColors.length && customColors.length % 2 === 0 ) {
|
||||
let colors = customColors;
|
||||
|
||||
const customColorsSet = [];
|
||||
colors.map( ( value ) => {
|
||||
const obj = {
|
||||
slug: value.slug,
|
||||
title: value.slug,
|
||||
};
|
||||
const sampleColors = [ ...scheme[ 0 ].colors ];
|
||||
sampleColors[ 0 ] = value.colors[ 0 ];
|
||||
sampleColors[ 1 ] = value.colors[ 1 ];
|
||||
obj.colors = sampleColors;
|
||||
customColorsSet.push( obj );
|
||||
return customColorsSet;
|
||||
} );
|
||||
colors = [ ...customColorsSet, ...scheme ];
|
||||
colors.map( ( value, i ) => {
|
||||
colors[ i ].title = 'Style' + ( i + 1 );
|
||||
colors[ i ].slug = 'style-' + ( i + 1 );
|
||||
return colors;
|
||||
} );
|
||||
|
||||
scheme = colors;
|
||||
}
|
||||
setColorScheme( [ ...defaultPaletteValues, ...scheme ] );
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
activePalette: defaultPaletteValues[ 0 ],
|
||||
} );
|
||||
}, [ templateResponse ] );
|
||||
|
||||
const handleReset = () => {
|
||||
const defaultPalette = colorScheme[ 0 ];
|
||||
sendPostMessage( {
|
||||
param: 'colorPalette',
|
||||
data: defaultPalette,
|
||||
} );
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
activePalette: defaultPalette,
|
||||
} );
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-zip-app-heading text-sm">
|
||||
<span className="font-semibold">
|
||||
{ __( 'Color Palette', 'astra-sites' ) }:{ ' ' }
|
||||
</span>
|
||||
<span>{ selectedPalette?.title }</span>
|
||||
</p>
|
||||
<button
|
||||
key="reset-to-default-colors"
|
||||
className={ classNames(
|
||||
'inline-flex p-px items-center justify-center text-button-disabled border-0 bg-transparent focus:outline-none transition-colors duration-200 ease-in-out',
|
||||
selectedPalette?.slug !== 'default' &&
|
||||
'text-zip-app-inactive-icon cursor-pointer'
|
||||
) }
|
||||
{ ...( selectedPalette?.slug !== 'default' && {
|
||||
onClick: handleReset,
|
||||
} ) }
|
||||
>
|
||||
<ArrowPathIcon
|
||||
className="w-[0.875rem] h-[0.875rem]"
|
||||
strokeWidth={ 2 }
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-5 gap-3 auto-rows-[36px]">
|
||||
{ colorScheme.map( ( colorPalette ) => (
|
||||
<div
|
||||
key={ colorPalette.slug }
|
||||
className={ classNames(
|
||||
'flex justify-center items-center gap-3 text-body-text rounded-md border border-solid border-button-disabled h-9 w-full cursor-pointer',
|
||||
selectedPalette?.slug === colorPalette.slug &&
|
||||
'outline-1 outline outline-offset-2 outline-accent-st-secondary'
|
||||
) }
|
||||
onClick={ handleChange( colorPalette ) }
|
||||
>
|
||||
{ !! colorPalette?.colors?.length && (
|
||||
<div
|
||||
className="w-full h-full flex items-center justify-center gap-1 rounded-md"
|
||||
style={ {
|
||||
background: colorPalette?.colors?.[ 5 ],
|
||||
} }
|
||||
>
|
||||
<span
|
||||
className="inline-block w-[14px] h-[14px] rounded-full shrink-0"
|
||||
style={ {
|
||||
background: colorPalette?.colors?.[ 0 ],
|
||||
} }
|
||||
/>
|
||||
<span
|
||||
className="inline-block w-[14px] h-[14px] rounded-full shrink-0"
|
||||
style={ {
|
||||
background: colorPalette?.colors?.[ 1 ],
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
) }
|
||||
{ ! colorPalette?.colors?.length && (
|
||||
<TilesIcon className="!shrink-0 w-full h-full rounded-md" />
|
||||
) }
|
||||
</div>
|
||||
) ) }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo( ColorPalettes );
|
||||
@@ -0,0 +1,56 @@
|
||||
import React from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import Button from '../../../../components/button/button';
|
||||
import MediaUploader from '../../../../components/media-uploader';
|
||||
import { useStateValue } from '../../../../store/store';
|
||||
import PreviousStepLink from '../../../../components/util/previous-step-link/index';
|
||||
import { sendPostMessage } from '../../../../utils/functions';
|
||||
|
||||
const BusinessLogoControls = () => {
|
||||
const [
|
||||
{ siteLogo, currentCustomizeIndex, currentIndex, templateId },
|
||||
dispatch,
|
||||
] = useStateValue();
|
||||
const nextStep = () => {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentCustomizeIndex: currentCustomizeIndex + 1,
|
||||
} );
|
||||
};
|
||||
|
||||
const lastStep = () => {
|
||||
sendPostMessage( {
|
||||
param: 'clearPreviewAssets',
|
||||
data: {},
|
||||
} );
|
||||
setTimeout( () => {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentIndex: currentIndex - 1,
|
||||
currentCustomizeIndex: 0,
|
||||
} );
|
||||
}, 300 );
|
||||
};
|
||||
const disabledClass = templateId === 0 ? 'disabled-btn' : '';
|
||||
return (
|
||||
<>
|
||||
<MediaUploader />
|
||||
<Button
|
||||
className={ `ist-button ist-next-step ${ disabledClass }` }
|
||||
onClick={ nextStep }
|
||||
disabled={ templateId !== 0 ? false : true }
|
||||
after
|
||||
>
|
||||
{ '' !== siteLogo.url
|
||||
? __( 'Continue', 'astra-sites' )
|
||||
: __( 'Skip & Continue', 'astra-sites' ) }
|
||||
</Button>
|
||||
|
||||
<PreviousStepLink onClick={ lastStep }>
|
||||
{ __( 'Back', 'astra-sites' ) }
|
||||
</PreviousStepLink>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BusinessLogoControls;
|
||||
@@ -0,0 +1,35 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useStateValue } from '../../../../store/store';
|
||||
import ChangeTemplate from '../../../../components/change-template';
|
||||
|
||||
const BusinessLogo = () => {
|
||||
const [ {}, dispatch ] = useStateValue();
|
||||
useEffect( () => {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
designStep: 1,
|
||||
} );
|
||||
}, [] );
|
||||
|
||||
return (
|
||||
<>
|
||||
<ChangeTemplate />
|
||||
<div className="customizer-header">
|
||||
<div className="header-name">
|
||||
<h3 className="ist-customizer-heading">
|
||||
{ __( 'Logo', 'astra-sites' ) }
|
||||
</h3>
|
||||
<p className="screen-description">
|
||||
{ __(
|
||||
`Choose a logo for your site. You can update it anytime later.`,
|
||||
'astra-sites'
|
||||
) }
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BusinessLogo;
|
||||
@@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import Button from '../../../../components/button/button';
|
||||
import { useStateValue } from '../../../../store/store';
|
||||
import PreviousStepLink from '../../../../components/util/previous-step-link/index';
|
||||
import ChooseEcommerce from '../../../../components/choose-ecommerce';
|
||||
import { ChevronRightIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
const EcommerceSelectionsControls = () => {
|
||||
const [ { currentCustomizeIndex, currentIndex, templateId }, dispatch ] =
|
||||
useStateValue();
|
||||
const nextStep = () => {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentCustomizeIndex: currentCustomizeIndex + 1,
|
||||
} );
|
||||
};
|
||||
|
||||
const lastStep = () => {
|
||||
setTimeout( () => {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentIndex: currentIndex - 1,
|
||||
currentCustomizeIndex: 0,
|
||||
} );
|
||||
}, 300 );
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ChooseEcommerce />
|
||||
<div className="w-full flex flex-col gap-4 mt-auto">
|
||||
<Button
|
||||
className={ `w-full flex gap-2 items-center ${
|
||||
templateId === 0
|
||||
? '!bg-border-tertiary !text-zip-app-inactive-icon'
|
||||
: ''
|
||||
}` }
|
||||
onClick={ nextStep }
|
||||
disabled={ templateId !== 0 ? false : true }
|
||||
>
|
||||
<span>{ __( 'Continue', 'astra-sites' ) }</span>
|
||||
<ChevronRightIcon className="w-4 h-4 !fill-none" />
|
||||
</Button>
|
||||
|
||||
<PreviousStepLink onClick={ lastStep }>
|
||||
{ __( 'Back', 'astra-sites' ) }
|
||||
</PreviousStepLink>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EcommerceSelectionsControls;
|
||||
@@ -0,0 +1,35 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useStateValue } from '../../../../store/store';
|
||||
import ChangeTemplate from '../../../../components/change-template';
|
||||
|
||||
const EcommerceSelections = () => {
|
||||
const [ {}, dispatch ] = useStateValue();
|
||||
useEffect( () => {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
designStep: 1,
|
||||
} );
|
||||
}, [] );
|
||||
|
||||
return (
|
||||
<>
|
||||
<ChangeTemplate />
|
||||
<div className="customizer-header">
|
||||
<div className="header-name">
|
||||
<h3 className="ist-customizer-heading">
|
||||
{ __( 'Choose eCommerce Platform', 'astra-sites' ) }
|
||||
</h3>
|
||||
<p className="screen-description">
|
||||
{ __(
|
||||
`Choose your preferred e-Commerce platform. Based on your selection, you will receive the account setup and cart options.`,
|
||||
'astra-sites'
|
||||
) }
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EcommerceSelections;
|
||||
@@ -0,0 +1,15 @@
|
||||
import EcommerceSelections from './ecommerce-selections';
|
||||
import EcommerceSelectionsControls from './ecommerce-selections/controls';
|
||||
import ClassicPreview from '../classic-preview';
|
||||
|
||||
export const CustomizeSteps = [
|
||||
{
|
||||
content: EcommerceSelections,
|
||||
controls: EcommerceSelectionsControls,
|
||||
class: 'customize-ecommerce-selections',
|
||||
},
|
||||
{
|
||||
content: ClassicPreview,
|
||||
class: 'customize-business-logo',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,194 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Toaster } from '@brainstormforce/starter-templates-components';
|
||||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import apiFetch from '@wordpress/api-fetch';
|
||||
import Button from '../../../../components/button/button';
|
||||
import { useStateValue } from '../../../../store/store';
|
||||
import PreviousStepLink from '../../../../components/util/previous-step-link/index';
|
||||
import ICONS from '../../../../../icons';
|
||||
import { whiteLabelEnabled } from '../../../../utils/functions';
|
||||
import {
|
||||
checkRequiredPlugins,
|
||||
getDemo,
|
||||
} from '../../../import-site/import-utils';
|
||||
const { restNonce } = starterTemplates;
|
||||
|
||||
const LicenseValidationControls = () => {
|
||||
const storedState = useStateValue();
|
||||
const [
|
||||
{
|
||||
templateId,
|
||||
templateResponse,
|
||||
currentCustomizeIndex,
|
||||
importError,
|
||||
currentIndex,
|
||||
validateLicenseStatus,
|
||||
},
|
||||
dispatch,
|
||||
] = storedState;
|
||||
const [ error, setError ] = useState( '' );
|
||||
const [ processing, setProcessing ] = useState( false );
|
||||
const [ licenseKey, setLicenseKey ] = useState( '' );
|
||||
const premiumTemplate = false;
|
||||
|
||||
// Start the pre import process.
|
||||
useEffect( () => {
|
||||
if ( importError ) {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentIndex: currentIndex + 2, // Skip 2 steps.
|
||||
} );
|
||||
}
|
||||
}, [ importError ] );
|
||||
|
||||
const validateKey = () => {
|
||||
if ( licenseKey === '' ) {
|
||||
setError( __( 'Please Enter License Key', 'astra-sites' ) );
|
||||
return;
|
||||
}
|
||||
|
||||
setProcessing( true );
|
||||
|
||||
apiFetch.use( apiFetch.createNonceMiddleware( restNonce ) );
|
||||
apiFetch( {
|
||||
path: '/bsf-core/v1/license/activate',
|
||||
method: 'POST',
|
||||
data: {
|
||||
'license-key': licenseKey,
|
||||
'product-id': 'astra-pro-sites',
|
||||
},
|
||||
} ).then( async ( response ) => {
|
||||
if ( response.success ) {
|
||||
await getDemo( templateId, storedState );
|
||||
await checkRequiredPlugins( storedState );
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
licenseStatus: true,
|
||||
currentIndex: currentIndex + 1,
|
||||
} );
|
||||
} else {
|
||||
setError( response.message );
|
||||
}
|
||||
setProcessing( false );
|
||||
} );
|
||||
};
|
||||
|
||||
if (
|
||||
premiumTemplate &&
|
||||
'' !== astraSitesVars?.license_page_builder &&
|
||||
templateResponse[ 'astra-site-page-builder' ] !==
|
||||
astraSitesVars?.license_page_builder &&
|
||||
'brizy' !== templateResponse[ 'astra-site-page-builder' ] &&
|
||||
'gutenberg' !== templateResponse[ 'astra-site-page-builder' ]
|
||||
) {
|
||||
return <p>{ __( 'Not Valid License', 'astra-sites' ) }</p>;
|
||||
}
|
||||
|
||||
const processingClass = processing ? 'processing' : '';
|
||||
|
||||
const supportLink = sprintf(
|
||||
//translators: %1$s Support page URL.
|
||||
__(
|
||||
`<b> Questions? </b> Get in touch with our %1$ssupport team%2$s.`,
|
||||
'astra-sites'
|
||||
),
|
||||
`<a href="https://wpastra.com/support/free-support/" target="_blank">`,
|
||||
'</a>'
|
||||
);
|
||||
|
||||
const lastStep = () => {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentCustomizeIndex: currentCustomizeIndex - 1,
|
||||
} );
|
||||
};
|
||||
|
||||
const downloadLink = sprintf(
|
||||
//translators: %1$s Store page URL.
|
||||
__(
|
||||
`If you have purchased our Essential or Business Toolkits, please install the premium version of the plugin that you can %1$sdownload%2$s from our store.`,
|
||||
'astra-sites'
|
||||
),
|
||||
'<a href="https://store.brainstormforce.com/login/" target="_blank">',
|
||||
'</a>'
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{ ! whiteLabelEnabled() && (
|
||||
<>
|
||||
<h4>{ __( 'Already a customer?', 'astra-sites' ) }</h4>
|
||||
|
||||
{ validateLicenseStatus && (
|
||||
<p className="customer-notices">
|
||||
{ __(
|
||||
'If you have purchased our Essential or Business Toolkits, just enter your license key below to import this template.',
|
||||
'astra-sites'
|
||||
) }
|
||||
</p>
|
||||
) }
|
||||
|
||||
{ ! validateLicenseStatus && (
|
||||
<>
|
||||
<p
|
||||
className="customer-notices"
|
||||
dangerouslySetInnerHTML={ {
|
||||
__html: downloadLink,
|
||||
} }
|
||||
/>
|
||||
<p className="customer-notices">
|
||||
{ __(
|
||||
'Currently the free version is installed.',
|
||||
'astra-sites'
|
||||
) }
|
||||
</p>
|
||||
</>
|
||||
) }
|
||||
<p
|
||||
className="support-link"
|
||||
dangerouslySetInnerHTML={ { __html: supportLink } }
|
||||
/>
|
||||
{ validateLicenseStatus && (
|
||||
<div className="license-wrap">
|
||||
<input
|
||||
type="text"
|
||||
className="license-key-input"
|
||||
name="license-key"
|
||||
placeholder={ __(
|
||||
'License key',
|
||||
'astra-sites'
|
||||
) }
|
||||
required
|
||||
onChange={ ( e ) => {
|
||||
setLicenseKey( e.target.value );
|
||||
setError( '' );
|
||||
} }
|
||||
/>
|
||||
<Button
|
||||
className={ `validate-btn ${ processingClass }` }
|
||||
onClick={ validateKey }
|
||||
>
|
||||
{ ! processing
|
||||
? ICONS.arrowRightBold
|
||||
: ICONS.spinner }
|
||||
</Button>
|
||||
</div>
|
||||
) }
|
||||
</>
|
||||
) }
|
||||
<PreviousStepLink onClick={ lastStep } customizeStep={ true }>
|
||||
{ __( 'Back', 'astra-sites' ) }
|
||||
</PreviousStepLink>
|
||||
|
||||
{ error && ! processing && (
|
||||
<Toaster
|
||||
type="error"
|
||||
message={ error }
|
||||
autoHideDuration={ 5 }
|
||||
/>
|
||||
) }
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LicenseValidationControls;
|
||||
@@ -0,0 +1,75 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useStateValue } from '../../../../store/store';
|
||||
import ChangeTemplate from '../../../../components/change-template';
|
||||
import Button from '../../../../components/button/button';
|
||||
import { whiteLabelEnabled } from '../../../../utils/functions';
|
||||
const { imageDir } = starterTemplates;
|
||||
|
||||
const LicenseValidation = () => {
|
||||
const [ { builder }, dispatch ] = useStateValue();
|
||||
useEffect( () => {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
designStep: 2,
|
||||
} );
|
||||
}, [] );
|
||||
|
||||
const accessLinkOutput = __(
|
||||
`This is a premium template and comes with our Essentials and Business Toolkits. <br/><br/> Get access to this premium template and 100+ more.`,
|
||||
'astra-sites'
|
||||
);
|
||||
|
||||
const getAccessLink = () => {
|
||||
window.open( astraSitesVars?.cta_links[ builder ] );
|
||||
};
|
||||
|
||||
const getwhiteLabelLink = () => {
|
||||
if ( astraSitesVars?.whiteLabelUrl !== '#' ) {
|
||||
window.open( astraSitesVars?.whiteLabelUrl );
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ChangeTemplate />
|
||||
<div className="customizer-header">
|
||||
<div className="header-name">
|
||||
{ ! whiteLabelEnabled() && (
|
||||
<>
|
||||
<h3 className="ist-customizer-heading">
|
||||
{ __(
|
||||
'Liked this Starter Template?',
|
||||
'astra-sites'
|
||||
) }
|
||||
</h3>
|
||||
<p
|
||||
className="screen-description"
|
||||
dangerouslySetInnerHTML={ {
|
||||
__html: accessLinkOutput,
|
||||
} }
|
||||
/>
|
||||
</>
|
||||
) }
|
||||
<Button
|
||||
className="st-access-btn"
|
||||
onClick={
|
||||
whiteLabelEnabled()
|
||||
? getwhiteLabelLink
|
||||
: getAccessLink
|
||||
}
|
||||
>
|
||||
{ __( 'Unlock Access', 'astra-sites' ) }
|
||||
<img
|
||||
className="st-get-access"
|
||||
alt="Get Access"
|
||||
src={ `${ imageDir }get-access.svg` }
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LicenseValidation;
|
||||
@@ -0,0 +1,307 @@
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
export const DARK_PALETTES = [
|
||||
{
|
||||
slug: 'style-1',
|
||||
title: __( 'Style 1', 'astra-sites' ),
|
||||
colors: [
|
||||
'#0085FF',
|
||||
'#0177E3',
|
||||
'#FFFFFF',
|
||||
'#E7F6FF',
|
||||
'#212A37',
|
||||
'#0F172A',
|
||||
'#4F5B62',
|
||||
'#070614',
|
||||
'#222222',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'style-2',
|
||||
title: __( 'Style 2', 'astra-sites' ),
|
||||
colors: [
|
||||
'#8B5DFF',
|
||||
'#7B47FF',
|
||||
'#FFFFFF',
|
||||
'#F2F0FE',
|
||||
'#1B203A',
|
||||
'#0F102A',
|
||||
'#4B4D56',
|
||||
'#0D0614',
|
||||
'#222222',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'style-3',
|
||||
title: __( 'Style 3', 'astra-sites' ),
|
||||
colors: [
|
||||
'#21B4A6',
|
||||
'#0FAF9F',
|
||||
'#FFFFFF',
|
||||
'#EDF6F3',
|
||||
'#1C2A3C',
|
||||
'#111A28',
|
||||
'#4E4E4E',
|
||||
'#061314',
|
||||
'#222222',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'style-4',
|
||||
title: __( 'Style 4', 'astra-sites' ),
|
||||
colors: [
|
||||
'#FF6210',
|
||||
'#FF5700',
|
||||
'#FFFFFF',
|
||||
'#FEF1E4',
|
||||
'#21201F',
|
||||
'#171615',
|
||||
'#373532',
|
||||
'#140B06',
|
||||
'#222222',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'style-5',
|
||||
title: __( 'Style 5', 'astra-sites' ),
|
||||
colors: [
|
||||
'#239D60',
|
||||
'#039A4F',
|
||||
'#FFFFFF',
|
||||
'#EDF6F1',
|
||||
'#202B29',
|
||||
'#131D19',
|
||||
'#353A36',
|
||||
'#0C1406',
|
||||
'#222222',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'style-6',
|
||||
title: __( 'Style 6', 'astra-sites' ),
|
||||
colors: [
|
||||
'#FB5FAB',
|
||||
'#EA559D',
|
||||
'#FFFFFF',
|
||||
'#FCEEF5',
|
||||
'#29223C',
|
||||
'#180F2A',
|
||||
'#4B3F4A',
|
||||
'#140610',
|
||||
'#222222',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'style-7',
|
||||
title: __( 'Style 7', 'astra-sites' ),
|
||||
colors: [
|
||||
'#DD183B',
|
||||
'#CC1939',
|
||||
'#FFFFFF',
|
||||
'#FFEDE6',
|
||||
'#231417',
|
||||
'#150B0F',
|
||||
'#3D2E32',
|
||||
'#140609',
|
||||
'#222222',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'style-8',
|
||||
title: __( 'Style 8', 'astra-sites' ),
|
||||
colors: [
|
||||
'#FD9800',
|
||||
'#E98C00',
|
||||
'#FFFFFF',
|
||||
'#FEF9E1',
|
||||
'#161923',
|
||||
'#090C17',
|
||||
'#2E2D2A',
|
||||
'#141006',
|
||||
'#222222',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'style-9',
|
||||
title: __( 'Style 9', 'astra-sites' ),
|
||||
colors: [
|
||||
'#DCA54A',
|
||||
'#D09A40',
|
||||
'#FFFFFF',
|
||||
'#FAF5E5',
|
||||
'#1B1B1B',
|
||||
'#0E0D06',
|
||||
'#2E2D2A',
|
||||
'#141006',
|
||||
'#222222',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'style-10',
|
||||
title: __( 'Style 10', 'astra-sites' ),
|
||||
colors: [
|
||||
'#3AA6B9',
|
||||
'#2997AA',
|
||||
'#FFFFFF',
|
||||
'#E9F8F9',
|
||||
'#1C2125',
|
||||
'#091118',
|
||||
'#2E2D2A',
|
||||
'#061114',
|
||||
'#222222',
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const LIGHT_PALETTES = [
|
||||
{
|
||||
slug: 'style-1',
|
||||
title: __( 'Style 1', 'astra-sites' ),
|
||||
colors: [
|
||||
'#0067FF',
|
||||
'#005EE9',
|
||||
'#0F172A',
|
||||
'#364151',
|
||||
'#E7F6FF',
|
||||
'#FFFFFF',
|
||||
'#D1DAE5',
|
||||
'#070614',
|
||||
'#222222',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'style-2',
|
||||
title: __( 'Style 2', 'astra-sites' ),
|
||||
colors: [
|
||||
'#54B435',
|
||||
'#379237',
|
||||
'#0F172A',
|
||||
'#2F3B40',
|
||||
'#EDFBE2',
|
||||
'#FFFFFF',
|
||||
'#D5EAD8',
|
||||
'#0C1406',
|
||||
'#222222',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'style-3',
|
||||
title: __( 'Style 3', 'astra-sites' ),
|
||||
colors: [
|
||||
'#DD183B',
|
||||
'#CC1939',
|
||||
'#0F172A',
|
||||
'#3A3A3A',
|
||||
'#FFEDE6',
|
||||
'#FFFFFF',
|
||||
'#FFD1BF',
|
||||
'#140609',
|
||||
'#222222',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'style-4',
|
||||
title: __( 'Style 4', 'astra-sites' ),
|
||||
colors: [
|
||||
'#FB5FAB',
|
||||
'#EA559D',
|
||||
'#0F172A',
|
||||
'#454F5E',
|
||||
'#FCEEF5',
|
||||
'#FFFFFF',
|
||||
'#FAD8E9',
|
||||
'#140610',
|
||||
'#222222',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'style-5',
|
||||
title: __( 'Style 5', 'astra-sites' ),
|
||||
colors: [
|
||||
'#FF6210',
|
||||
'#F15808',
|
||||
'#1C0D0A',
|
||||
'#353535',
|
||||
'#FEF1E4',
|
||||
'#FFFFFF',
|
||||
'#E5D7D1',
|
||||
'#140B06',
|
||||
'#222222',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'style-6',
|
||||
title: __( 'Style 6', 'astra-sites' ),
|
||||
colors: [
|
||||
'#6528F7',
|
||||
'#5511F8',
|
||||
'#0F172A',
|
||||
'#454F5E',
|
||||
'#F2F0FE',
|
||||
'#FFFFFF',
|
||||
'#D8D8F5',
|
||||
'#0D0614',
|
||||
'#222222',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'style-7',
|
||||
title: __( 'Style 7', 'astra-sites' ),
|
||||
colors: [
|
||||
'#FD9800',
|
||||
'#E98C00',
|
||||
'#0F172A',
|
||||
'#454F5E',
|
||||
'#FEF9E1',
|
||||
'#FFFFFF',
|
||||
'#F9F0C8',
|
||||
'#141006',
|
||||
'#222222',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'style-8',
|
||||
title: __( 'Style 8', 'astra-sites' ),
|
||||
colors: [
|
||||
'#1B9C85',
|
||||
'#178E79',
|
||||
'#0F172A',
|
||||
'#454F5E',
|
||||
'#EDF6EE',
|
||||
'#FFFFFF',
|
||||
'#D4F3D7',
|
||||
'#06140C',
|
||||
'#222222',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'style-9',
|
||||
title: __( 'Style 9', 'astra-sites' ),
|
||||
colors: [
|
||||
'#DCA54A',
|
||||
'#D09A40',
|
||||
'#0F172A',
|
||||
'#4A4A4A',
|
||||
'#FAF5E5',
|
||||
'#FFFFFF',
|
||||
'#F0E6C5',
|
||||
'#141004',
|
||||
'#222222',
|
||||
],
|
||||
},
|
||||
{
|
||||
slug: 'style-10',
|
||||
title: __( 'Style 10', 'astra-sites' ),
|
||||
colors: [
|
||||
'#3AA6B9',
|
||||
'#2997AA',
|
||||
'#0F172A',
|
||||
'#454F5E',
|
||||
'#E9F8F9',
|
||||
'#FFFFFF',
|
||||
'#CAE6E8',
|
||||
'#181823',
|
||||
'#222222',
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,136 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useStateValue } from '../../../../store/store';
|
||||
import ColorPalettes from '../../../../components/color-palettes/color-palettes';
|
||||
import {
|
||||
sendPostMessage,
|
||||
getDefaultColorPalette,
|
||||
getColorScheme,
|
||||
} from '../../../../utils/functions';
|
||||
import ICONS from '../../../../../icons';
|
||||
import TypographyWrapper from './typography';
|
||||
import { DARK_PALETTES, LIGHT_PALETTES } from './colors';
|
||||
|
||||
const SiteColorsControls = () => {
|
||||
const [ { activePaletteSlug, templateResponse, builder }, dispatch ] =
|
||||
useStateValue();
|
||||
const [ defaultPalette, setDefaultPalette ] = useState( [] );
|
||||
const [ colorScheme, setColorScheme ] = useState( LIGHT_PALETTES );
|
||||
|
||||
const onPaletteChange = ( event, palette ) => {
|
||||
if ( ! palette ) {
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
activePaletteSlug: palette.slug,
|
||||
activePalette: palette,
|
||||
} );
|
||||
|
||||
sendPostMessage( {
|
||||
param: 'colorPalette',
|
||||
data: palette,
|
||||
} );
|
||||
};
|
||||
|
||||
useEffect( () => {
|
||||
const defaultPaletteValues = getDefaultColorPalette( templateResponse );
|
||||
setDefaultPalette( defaultPaletteValues );
|
||||
let scheme =
|
||||
'light' === getColorScheme( templateResponse )
|
||||
? LIGHT_PALETTES
|
||||
: DARK_PALETTES;
|
||||
|
||||
const customColors =
|
||||
templateResponse?.[ 'astra-custom-palettes' ] || [];
|
||||
if ( customColors.length && customColors.length % 2 === 0 ) {
|
||||
let colors = customColors;
|
||||
|
||||
const customColorsSet = [];
|
||||
colors.map( ( value ) => {
|
||||
const obj = {
|
||||
slug: value.slug,
|
||||
title: value.slug,
|
||||
};
|
||||
const sampleColors = [ ...scheme[ 0 ].colors ];
|
||||
sampleColors[ 0 ] = value.colors[ 0 ];
|
||||
sampleColors[ 1 ] = value.colors[ 1 ];
|
||||
obj.colors = sampleColors;
|
||||
customColorsSet.push( obj );
|
||||
return customColorsSet;
|
||||
} );
|
||||
colors = [ ...customColorsSet, ...scheme ];
|
||||
colors.map( ( value, i ) => {
|
||||
colors[ i ].title = 'Style' + ( i + 1 );
|
||||
colors[ i ].slug = 'style-' + ( i + 1 );
|
||||
return colors;
|
||||
} );
|
||||
|
||||
scheme = colors;
|
||||
}
|
||||
|
||||
setColorScheme( scheme );
|
||||
}, [ templateResponse ] );
|
||||
|
||||
const resetColorPlallete = ( e ) => {
|
||||
onPaletteChange( e, Object.values( defaultPalette )[ 0 ] );
|
||||
};
|
||||
|
||||
const ColorWrapper = () => {
|
||||
if ( builder === 'beaver-builder' || builder === 'brizy' ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="colors-section">
|
||||
<div className="d-flex-space-between">
|
||||
<h4>{ __( 'Change Colors', 'astra-sites' ) }</h4>
|
||||
<div
|
||||
className={ `customize-reset-btn ${
|
||||
activePaletteSlug === 'default'
|
||||
? 'disabled'
|
||||
: 'active'
|
||||
}` }
|
||||
onClick={ resetColorPlallete }
|
||||
>
|
||||
{ ICONS.reset }
|
||||
</div>
|
||||
</div>
|
||||
{ defaultPalette ? (
|
||||
<>
|
||||
<ColorPalettes
|
||||
selected={ activePaletteSlug }
|
||||
options={ defaultPalette }
|
||||
onChange={ ( event, palette ) => {
|
||||
onPaletteChange( event, palette );
|
||||
} }
|
||||
tabIndex="0"
|
||||
type="default"
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
''
|
||||
) }
|
||||
|
||||
<ColorPalettes
|
||||
selected={ activePaletteSlug }
|
||||
options={ colorScheme }
|
||||
onChange={ ( event, palette ) => {
|
||||
onPaletteChange( event, palette );
|
||||
} }
|
||||
tabIndex="0"
|
||||
type="others"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<ColorWrapper />
|
||||
<TypographyWrapper />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SiteColorsControls;
|
||||
@@ -0,0 +1,258 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Tooltip } from '@brainstormforce/starter-templates-components';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Button, PreviousStepLink } from '../../../../../src/components';
|
||||
import ICONS from '../../../../../icons';
|
||||
import { useStateValue } from '../../../../../src/store/store';
|
||||
import {
|
||||
saveTypography,
|
||||
setColorPalettes,
|
||||
setSiteLogo,
|
||||
} from '../../../../../src/steps/import-site/import-utils';
|
||||
import LoadingSpinner from '../../../../components/loading-spinner';
|
||||
import { removeLocalStorageItem } from '../../../../utils/functions';
|
||||
|
||||
const List = ( { className, options, onSelect, selected, type } ) => {
|
||||
const handleKeyPress = ( e, id ) => {
|
||||
e = e || window.event;
|
||||
|
||||
if ( e.keyCode === 37 ) {
|
||||
//Left Arrow
|
||||
if ( e.target.previousSibling ) {
|
||||
e.target.previousSibling.focus();
|
||||
}
|
||||
} else if ( e.keyCode === 39 ) {
|
||||
//Right Arrow
|
||||
if ( e.target.nextSibling ) {
|
||||
e.target.nextSibling.focus();
|
||||
}
|
||||
} else if ( e.key === 'Enter' ) {
|
||||
//Enter
|
||||
onSelect( e, id );
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ul className={ `ist-font-selector ${ className }` }>
|
||||
{ Object.keys( options ).map( ( index ) => {
|
||||
const bodyFont =
|
||||
getFontName( options[ index ][ 'body-font-family' ] ) || '';
|
||||
const headingFont =
|
||||
getFontName(
|
||||
options[ index ][ 'headings-font-family' ],
|
||||
bodyFont
|
||||
) || '';
|
||||
const bodyFontWeight = options[ index ][ 'body-font-weight' ];
|
||||
const headingFontWeight =
|
||||
options[ index ][ 'headings-font-weight' ];
|
||||
const id = options[ index ].id;
|
||||
return (
|
||||
<Tooltip
|
||||
content={
|
||||
type === 'other'
|
||||
? `${ headingFont } / ${ bodyFont }`
|
||||
: null
|
||||
}
|
||||
key={ id }
|
||||
>
|
||||
<li
|
||||
className={ `
|
||||
ist-font
|
||||
${ id === selected ? 'active' : '' }
|
||||
` }
|
||||
key={ id }
|
||||
onClick={ ( event ) => {
|
||||
onSelect( event, id );
|
||||
} }
|
||||
tabIndex="0"
|
||||
role="presentation"
|
||||
onKeyDown={ ( event ) => {
|
||||
handleKeyPress( event, id );
|
||||
} }
|
||||
>
|
||||
{
|
||||
<>
|
||||
{ type === 'default' && (
|
||||
<>
|
||||
<span
|
||||
style={ {
|
||||
fontFamily: headingFont,
|
||||
fontWeight:
|
||||
headingFontWeight,
|
||||
} }
|
||||
className="heading-font-preview"
|
||||
>
|
||||
{ headingFont }
|
||||
</span>
|
||||
<span className="font-separator">
|
||||
/
|
||||
</span>
|
||||
<span
|
||||
style={ {
|
||||
fontFamily: bodyFont,
|
||||
fontWeight: bodyFontWeight,
|
||||
} }
|
||||
className="body-font-preview"
|
||||
>
|
||||
{ bodyFont }
|
||||
</span>
|
||||
</>
|
||||
) }
|
||||
{ type === 'other' && (
|
||||
<>
|
||||
<span
|
||||
style={ {
|
||||
fontFamily: headingFont,
|
||||
fontWeight:
|
||||
headingFontWeight,
|
||||
} }
|
||||
className="heading-font-preview"
|
||||
>
|
||||
A
|
||||
</span>
|
||||
<span
|
||||
style={ {
|
||||
fontFamily: bodyFont,
|
||||
fontWeight: bodyFontWeight,
|
||||
} }
|
||||
className="body-font-preview"
|
||||
>
|
||||
a
|
||||
</span>
|
||||
</>
|
||||
) }
|
||||
</>
|
||||
}
|
||||
</li>
|
||||
</Tooltip>
|
||||
);
|
||||
} ) }
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
export const getFontName = ( fontName, inheritFont ) => {
|
||||
if ( ! fontName ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if ( fontName ) {
|
||||
const matches = fontName.match( /'([^']+)'/ );
|
||||
|
||||
if ( matches ) {
|
||||
return matches[ 1 ];
|
||||
} else if ( 'inherit' === fontName ) {
|
||||
return inheritFont;
|
||||
}
|
||||
|
||||
return fontName;
|
||||
}
|
||||
|
||||
if ( inheritFont ) {
|
||||
return inheritFont;
|
||||
}
|
||||
};
|
||||
|
||||
const FontSelector = ( { options, onSelect, selected } ) => {
|
||||
const [
|
||||
{
|
||||
currentCustomizeIndex,
|
||||
typographyIndex,
|
||||
siteLogo,
|
||||
activePalette,
|
||||
typography,
|
||||
},
|
||||
dispatch,
|
||||
] = useStateValue();
|
||||
|
||||
const [ isSaving, setIsSaving ] = useState( false );
|
||||
|
||||
const fonts = options.map( ( font, index ) => {
|
||||
font.id = index;
|
||||
return font;
|
||||
} );
|
||||
const defaultFonts = fonts.filter( ( font ) => font.default );
|
||||
const otherFonts = fonts.filter( ( font ) => ! font.default );
|
||||
|
||||
/**
|
||||
* 8. Update the website as per the customizations selected by the user.
|
||||
* The following steps are covered here.
|
||||
* a. Update Logo
|
||||
* b. Update Color Palette
|
||||
* c. Update Typography
|
||||
*/
|
||||
const customizeWebsite = async () => {
|
||||
setIsSaving( true );
|
||||
await setSiteLogo( siteLogo );
|
||||
await setColorPalettes( JSON.stringify( activePalette ) );
|
||||
await saveTypography( typography );
|
||||
|
||||
removeLocalStorageItem( 'ai-onboarding-details' );
|
||||
|
||||
localStorage.removeItem( 'starter-templates-iframe-preview-data' );
|
||||
|
||||
window.location.href = astraSitesVars?.siteURL;
|
||||
};
|
||||
|
||||
const nextStep = () => {
|
||||
customizeWebsite();
|
||||
};
|
||||
|
||||
const lastStep = () => {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentCustomizeIndex: currentCustomizeIndex - 1,
|
||||
} );
|
||||
};
|
||||
|
||||
const resetTypography = ( event ) => {
|
||||
onSelect( event, defaultFonts[ 0 ].id );
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="d-flex-space-between">
|
||||
<h4 className="ist-default-fonts-heading">
|
||||
{ __( 'Change Fonts', 'astra-sites' ) }
|
||||
</h4>
|
||||
<div
|
||||
className={ `customize-reset-btn ${
|
||||
typographyIndex === 0 ? 'disabled' : 'active'
|
||||
}` }
|
||||
onClick={ resetTypography }
|
||||
>
|
||||
{ ICONS.reset }
|
||||
</div>
|
||||
</div>
|
||||
<List
|
||||
className="ist-default-fonts"
|
||||
options={ defaultFonts }
|
||||
onSelect={ onSelect }
|
||||
selected={ selected }
|
||||
type="default"
|
||||
/>
|
||||
<List
|
||||
className="ist-other-fonts"
|
||||
options={ otherFonts }
|
||||
onSelect={ onSelect }
|
||||
selected={ selected }
|
||||
type="other"
|
||||
/>
|
||||
|
||||
<Button className="ist-button" onClick={ nextStep } after>
|
||||
{ isSaving ? (
|
||||
<LoadingSpinner />
|
||||
) : (
|
||||
__( 'Save Customizations', 'astra-sites' )
|
||||
) }
|
||||
</Button>
|
||||
<div className="mb-[60px]">
|
||||
<PreviousStepLink customizeStep={ true } onClick={ lastStep }>
|
||||
{ __( 'Back', 'astra-sites' ) }
|
||||
</PreviousStepLink>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FontSelector;
|
||||
@@ -0,0 +1,37 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useStateValue } from '../../../../store/store';
|
||||
import ChangeTemplate from '../../../../components/change-template';
|
||||
|
||||
const SiteColors = () => {
|
||||
const [ { builder }, dispatch ] = useStateValue();
|
||||
useEffect( () => {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
designStep: 2,
|
||||
} );
|
||||
}, [] );
|
||||
|
||||
return (
|
||||
<>
|
||||
<ChangeTemplate />
|
||||
<div className="customizer-header">
|
||||
<div className="header-name">
|
||||
<h3 className="ist-customizer-heading">
|
||||
{ builder === 'beaver-builder' || builder === 'brizy'
|
||||
? __( 'Fonts', 'astra-sites' )
|
||||
: __( 'Colors & Fonts', 'astra-sites' ) }
|
||||
</h3>
|
||||
<p className="screen-description">
|
||||
{ __(
|
||||
'Choose colors and fonts for your site. You can update them anytime later.',
|
||||
'astra-sites'
|
||||
) }
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SiteColors;
|
||||
@@ -0,0 +1,202 @@
|
||||
export const FONTS = [
|
||||
{
|
||||
'body-font-family': "'Manrope', sans-serif",
|
||||
'body-font-family-slug': 'manrope',
|
||||
'body-font-variant': '',
|
||||
'body-font-weight': 400,
|
||||
'font-size-body': {
|
||||
desktop: 16,
|
||||
tablet: '',
|
||||
mobile: '',
|
||||
'desktop-unit': 'px',
|
||||
'tablet-unit': 'px',
|
||||
'mobile-unit': 'px',
|
||||
},
|
||||
'body-line-height': '',
|
||||
'headings-font-family': "'Plus Jakarta Sans', sans-serif",
|
||||
'headings-font-family-slug': 'plus-jakarta-sans',
|
||||
'headings-font-weight': 600,
|
||||
'headings-line-height': '',
|
||||
'headings-font-variant': '',
|
||||
},
|
||||
{
|
||||
'body-font-family': "'DM Sans', sans-serif",
|
||||
'body-font-family-slug': 'dm-sans',
|
||||
'body-font-variant': '',
|
||||
'body-font-weight': 400,
|
||||
'font-size-body': {
|
||||
desktop: 16,
|
||||
tablet: '',
|
||||
mobile: '',
|
||||
'desktop-unit': 'px',
|
||||
'tablet-unit': 'px',
|
||||
'mobile-unit': 'px',
|
||||
},
|
||||
'body-line-height': '',
|
||||
'headings-font-family': "'Lexend', sans-serif",
|
||||
'headings-font-family-slug': 'lexend',
|
||||
'headings-font-weight': 600,
|
||||
'headings-line-height': '',
|
||||
'headings-font-variant': '',
|
||||
},
|
||||
{
|
||||
'body-font-family': "'Inter', sans-serif",
|
||||
'body-font-family-slug': 'inter',
|
||||
'body-font-variant': '',
|
||||
'body-font-weight': 400,
|
||||
'font-size-body': {
|
||||
desktop: 16,
|
||||
tablet: '',
|
||||
mobile: '',
|
||||
'desktop-unit': 'px',
|
||||
'tablet-unit': 'px',
|
||||
'mobile-unit': 'px',
|
||||
},
|
||||
'body-line-height': '',
|
||||
'headings-font-family': "'Work Sans', sans-serif",
|
||||
'headings-font-family-slug': 'work-sans',
|
||||
'headings-font-weight': 600,
|
||||
'headings-line-height': '',
|
||||
'headings-font-variant': '',
|
||||
},
|
||||
{
|
||||
'body-font-family': "'Poppins', sans-serif",
|
||||
'body-font-family-slug': 'poppins',
|
||||
'body-font-variant': '',
|
||||
'body-font-weight': 400,
|
||||
'font-size-body': {
|
||||
desktop: 16,
|
||||
tablet: '',
|
||||
mobile: '',
|
||||
'desktop-unit': 'px',
|
||||
'tablet-unit': 'px',
|
||||
'mobile-unit': 'px',
|
||||
},
|
||||
'body-line-height': '',
|
||||
'headings-font-family': "'Inter', sans-serif",
|
||||
'headings-font-family-slug': 'inter',
|
||||
'headings-font-weight': 600,
|
||||
'headings-line-height': '',
|
||||
'headings-font-variant': '',
|
||||
},
|
||||
{
|
||||
'body-font-family': "'Lora', serif",
|
||||
'body-font-family-slug': 'lora',
|
||||
'body-font-variant': '',
|
||||
'body-font-weight': 400,
|
||||
'font-size-body': {
|
||||
desktop: 16,
|
||||
tablet: '',
|
||||
mobile: '',
|
||||
'desktop-unit': 'px',
|
||||
'tablet-unit': 'px',
|
||||
'mobile-unit': 'px',
|
||||
},
|
||||
'body-line-height': '',
|
||||
'headings-font-family': "'Nunito Sans', sans-serif",
|
||||
'headings-font-family-slug': 'nunito-sans',
|
||||
'headings-font-weight': 600,
|
||||
'headings-line-height': '',
|
||||
'headings-font-variant': '',
|
||||
},
|
||||
{
|
||||
'body-font-family': "'Inter', sans-serif",
|
||||
'body-font-family-slug': 'inter',
|
||||
'body-font-variant': '',
|
||||
'body-font-weight': 400,
|
||||
'font-size-body': {
|
||||
desktop: 16,
|
||||
tablet: '',
|
||||
mobile: '',
|
||||
'desktop-unit': 'px',
|
||||
'tablet-unit': 'px',
|
||||
'mobile-unit': 'px',
|
||||
},
|
||||
'body-line-height': '',
|
||||
'headings-font-family': "'Manrope', sans-serif",
|
||||
'headings-font-family-slug': 'manrope',
|
||||
'headings-font-weight': 600,
|
||||
'headings-line-height': '',
|
||||
'headings-font-variant': '',
|
||||
},
|
||||
{
|
||||
'body-font-family': "'DM Sans', sans-serif",
|
||||
'body-font-family-slug': 'dm-sans',
|
||||
'body-font-variant': '',
|
||||
'body-font-weight': 400,
|
||||
'font-size-body': {
|
||||
desktop: 16,
|
||||
tablet: '',
|
||||
mobile: '',
|
||||
'desktop-unit': 'px',
|
||||
'tablet-unit': 'px',
|
||||
'mobile-unit': 'px',
|
||||
},
|
||||
'body-line-height': '',
|
||||
'headings-font-family': "'Outfit', sans-serif",
|
||||
'headings-font-family-slug': 'outfit',
|
||||
'headings-font-weight': 600,
|
||||
'headings-line-height': '',
|
||||
'headings-font-variant': '',
|
||||
},
|
||||
{
|
||||
'body-font-family': "'Inter', sans-serif",
|
||||
'body-font-family-slug': 'inter',
|
||||
'body-font-variant': '',
|
||||
'body-font-weight': 400,
|
||||
'font-size-body': {
|
||||
desktop: 16,
|
||||
tablet: '',
|
||||
mobile: '',
|
||||
'desktop-unit': 'px',
|
||||
'tablet-unit': 'px',
|
||||
'mobile-unit': 'px',
|
||||
},
|
||||
'body-line-height': '',
|
||||
'headings-font-family': "'IBM Plex Serif', serif",
|
||||
'headings-font-family-slug': 'ibm-plex-serif',
|
||||
'headings-font-weight': 600,
|
||||
'headings-line-height': '',
|
||||
'headings-font-variant': '',
|
||||
},
|
||||
{
|
||||
'body-font-family': "'Plus Jakarta Sans', sans-serif",
|
||||
'body-font-family-slug': 'plus-jakarta-sans',
|
||||
'body-font-variant': '',
|
||||
'body-font-weight': 400,
|
||||
'font-size-body': {
|
||||
desktop: 16,
|
||||
tablet: '',
|
||||
mobile: '',
|
||||
'desktop-unit': 'px',
|
||||
'tablet-unit': 'px',
|
||||
'mobile-unit': 'px',
|
||||
},
|
||||
'body-line-height': '',
|
||||
'headings-font-family': "'Crimson Text', serif",
|
||||
'headings-font-family-slug': 'crimson-text',
|
||||
'headings-font-weight': 600,
|
||||
'headings-line-height': '',
|
||||
'headings-font-variant': '',
|
||||
},
|
||||
{
|
||||
'body-font-family': "'IBM Plex Sans', sans-serif",
|
||||
'body-font-family-slug': 'ibm-plex-sans',
|
||||
'body-font-variant': '',
|
||||
'body-font-weight': 400,
|
||||
'font-size-body': {
|
||||
desktop: 16,
|
||||
tablet: '',
|
||||
mobile: '',
|
||||
'desktop-unit': 'px',
|
||||
'tablet-unit': 'px',
|
||||
'mobile-unit': 'px',
|
||||
},
|
||||
'body-line-height': '',
|
||||
'headings-font-family': "'EB Garamond', serif",
|
||||
'headings-font-family-slug': 'eb-garamond',
|
||||
'headings-font-weight': 600,
|
||||
'headings-line-height': '',
|
||||
'headings-font-variant': '',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,178 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useStateValue } from '../../../../store/store';
|
||||
import { FontSelector } from '../../../../components/index';
|
||||
import {
|
||||
sendPostMessage,
|
||||
getDefaultTypography,
|
||||
getHeadingFonts,
|
||||
} from '../../../../utils/functions';
|
||||
import { FONTS } from './other-fonts';
|
||||
|
||||
const getFontName = ( fontName, inheritFont ) => {
|
||||
if ( ! fontName ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if ( fontName ) {
|
||||
const matches = fontName.match( /'([^']+)'/ );
|
||||
|
||||
if ( matches ) {
|
||||
return matches[ 1 ];
|
||||
} else if ( 'inherit' === fontName ) {
|
||||
return inheritFont;
|
||||
}
|
||||
|
||||
return fontName;
|
||||
}
|
||||
|
||||
if ( inheritFont ) {
|
||||
return inheritFont;
|
||||
}
|
||||
};
|
||||
|
||||
const TypographyWrapper = () => {
|
||||
const [ { typographyIndex, templateResponse }, dispatch ] = useStateValue();
|
||||
let [ fonts, setFonts ] = useState( FONTS );
|
||||
|
||||
const head = getHeadingFonts( templateResponse );
|
||||
const [ headingFonts ] = useState( head );
|
||||
|
||||
/**
|
||||
* Add selected demo typograply as default typography
|
||||
*/
|
||||
useEffect( () => {
|
||||
const googleFontsURL = document.getElementById( 'google-fonts-url' );
|
||||
|
||||
if ( templateResponse !== null ) {
|
||||
const defaultFonts = [];
|
||||
const defaultTypography = getDefaultTypography( templateResponse );
|
||||
defaultFonts.push( defaultTypography );
|
||||
|
||||
if ( ! document.getElementById( 'google-fonts-domain' ) ) {
|
||||
const node = document.createElement( 'link' );
|
||||
node.id = 'google-fonts-domain';
|
||||
node.setAttribute( 'rel', 'preconnect' );
|
||||
node.setAttribute( 'href', 'https://fonts.gstatic.com' );
|
||||
document.head.appendChild( node );
|
||||
}
|
||||
|
||||
// Removes existing Google fonts URL.
|
||||
if ( !! googleFontsURL ) {
|
||||
googleFontsURL.remove();
|
||||
}
|
||||
|
||||
const node = document.createElement( 'link' );
|
||||
node.id = 'google-fonts-url';
|
||||
node.setAttribute( 'rel', 'stylesheet' );
|
||||
|
||||
const fontsName = [];
|
||||
|
||||
let bodyFont = defaultTypography[ 'body-font-family' ] || '';
|
||||
let bodyFontWeight =
|
||||
parseInt( defaultTypography[ 'body-font-weight' ] ) || '';
|
||||
if ( bodyFontWeight ) {
|
||||
bodyFontWeight = `:wght@${ bodyFontWeight }`;
|
||||
}
|
||||
|
||||
if ( bodyFont ) {
|
||||
bodyFont = getFontName( bodyFont );
|
||||
bodyFont =
|
||||
undefined !== bodyFont
|
||||
? bodyFont.replace( ' ', '+' )
|
||||
: bodyFont;
|
||||
fontsName.push( `family=${ bodyFont }${ bodyFontWeight }` );
|
||||
}
|
||||
|
||||
let headingFont = defaultTypography[ 'headings-font-family' ] || '';
|
||||
let headingFontWeight =
|
||||
parseInt( defaultTypography[ 'headings-font-weight' ] ) || '';
|
||||
|
||||
if ( headingFontWeight ) {
|
||||
headingFontWeight = `:wght@${ headingFontWeight }`;
|
||||
}
|
||||
|
||||
if ( headingFont ) {
|
||||
headingFont = getFontName( headingFont, bodyFont );
|
||||
headingFont =
|
||||
undefined !== headingFont
|
||||
? headingFont.replace( ' ', '+' )
|
||||
: headingFont;
|
||||
fontsName.push(
|
||||
`family=${ headingFont }${ headingFontWeight }`
|
||||
);
|
||||
}
|
||||
|
||||
let otherFontsString = '';
|
||||
if ( !! fonts ) {
|
||||
for ( const font of fonts ) {
|
||||
const fontHeading = getFontName(
|
||||
font[ 'headings-font-family' ]
|
||||
).replaceAll( ' ', '+' );
|
||||
const fontHeadingWeight = font[ 'headings-font-weight' ];
|
||||
|
||||
const fontBody = getFontName(
|
||||
font[ 'body-font-family' ]
|
||||
).replaceAll( ' ', '+' );
|
||||
const fontBodyWeight = font[ 'body-font-weight' ];
|
||||
|
||||
otherFontsString += `&family=${ fontHeading }:wght@${ fontHeadingWeight }&family=${ fontBody }:wght@${ fontBodyWeight }`;
|
||||
}
|
||||
otherFontsString = otherFontsString.replace( /[&]{1}$/i, '' );
|
||||
}
|
||||
|
||||
// Add Google fonts URL.
|
||||
if ( fontsName ) {
|
||||
const fontUrl = `https://fonts.googleapis.com/css2?${ fontsName.join(
|
||||
'&'
|
||||
) }${ otherFontsString }&display=swap`;
|
||||
|
||||
node.setAttribute( 'href', fontUrl );
|
||||
document.head.insertAdjacentElement( 'afterbegin', node );
|
||||
}
|
||||
|
||||
if ( 0 === typographyIndex ) {
|
||||
sendPreview( defaultTypography );
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
typography: defaultTypography,
|
||||
} );
|
||||
}
|
||||
|
||||
// Set default font.
|
||||
fonts = defaultFonts.concat( fonts );
|
||||
|
||||
setFonts( fonts );
|
||||
}
|
||||
}, [ templateResponse ] );
|
||||
|
||||
const sendPreview = ( typography ) => {
|
||||
const newTypography = headingFonts
|
||||
? { ...typography, ...headingFonts }
|
||||
: typography;
|
||||
|
||||
sendPostMessage( {
|
||||
param: 'siteTypography',
|
||||
data: JSON.parse( JSON.stringify( newTypography ) ),
|
||||
} );
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="typography-section">
|
||||
<FontSelector
|
||||
selected={ typographyIndex }
|
||||
options={ fonts }
|
||||
onSelect={ ( event, selectedFont ) => {
|
||||
const typography = fonts[ selectedFont ] || fonts[ 0 ];
|
||||
sendPreview( typography );
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
typographyIndex: selectedFont,
|
||||
typography,
|
||||
} );
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TypographyWrapper;
|
||||
@@ -0,0 +1,238 @@
|
||||
import { memo, useEffect, useState } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { ArrowPathIcon } from '@heroicons/react/24/outline';
|
||||
import { FONTS } from './customize-steps/site-colors-typography/other-fonts';
|
||||
import { getFontName } from '../customize-site/customize-steps/site-colors-typography/font-selector';
|
||||
import { useStateValue } from '../../store/store';
|
||||
import {
|
||||
getDefaultTypography,
|
||||
getHeadingFonts,
|
||||
sendPostMessage as dispatchPostMessage,
|
||||
classNames,
|
||||
} from '../../utils/functions';
|
||||
|
||||
const FontSelector = () => {
|
||||
const [ { typography: activeTypography, templateResponse }, dispatch ] =
|
||||
useStateValue();
|
||||
const [ fonts, setFonts ] = useState(
|
||||
FONTS.map( ( font, index ) => ( { ...font, id: index } ) )
|
||||
);
|
||||
const headingFonts = getHeadingFonts( templateResponse );
|
||||
|
||||
/**
|
||||
* Add selected demo typography as default typography
|
||||
*/
|
||||
useEffect( () => {
|
||||
const googleFontsURL = document.getElementById( 'google-fonts-url' );
|
||||
|
||||
if ( templateResponse ) {
|
||||
const defaultFonts = [];
|
||||
const defaultTypography = getDefaultTypography( templateResponse );
|
||||
defaultFonts.push( {
|
||||
id: 'default-font',
|
||||
...defaultTypography,
|
||||
} );
|
||||
|
||||
if ( ! document.getElementById( 'google-fonts-domain' ) ) {
|
||||
const node = document.createElement( 'link' );
|
||||
node.id = 'google-fonts-domain';
|
||||
node.setAttribute( 'rel', 'preconnect' );
|
||||
node.setAttribute( 'href', 'https://fonts.gstatic.com' );
|
||||
document.head.appendChild( node );
|
||||
}
|
||||
|
||||
// Removes existing Google fonts URL.
|
||||
if ( !! googleFontsURL ) {
|
||||
googleFontsURL.remove();
|
||||
}
|
||||
|
||||
const node = document.createElement( 'link' );
|
||||
node.id = 'google-fonts-url';
|
||||
node.setAttribute( 'rel', 'stylesheet' );
|
||||
|
||||
const fontsName = [];
|
||||
|
||||
let bodyFont = defaultTypography[ 'body-font-family' ] || '';
|
||||
let bodyFontWeight =
|
||||
parseInt( defaultTypography[ 'body-font-weight' ] ) || '';
|
||||
if ( bodyFontWeight ) {
|
||||
bodyFontWeight = `:wght@${ bodyFontWeight }`;
|
||||
}
|
||||
|
||||
if ( bodyFont ) {
|
||||
bodyFont = getFontName( bodyFont );
|
||||
bodyFont =
|
||||
undefined !== bodyFont
|
||||
? bodyFont.replace( ' ', '+' )
|
||||
: bodyFont;
|
||||
fontsName.push( `family=${ bodyFont }${ bodyFontWeight }` );
|
||||
}
|
||||
|
||||
let headingFont = defaultTypography[ 'headings-font-family' ] || '';
|
||||
let headingFontWeight =
|
||||
parseInt( defaultTypography[ 'headings-font-weight' ] ) || '';
|
||||
|
||||
if ( headingFontWeight ) {
|
||||
headingFontWeight = `:wght@${ headingFontWeight }`;
|
||||
}
|
||||
|
||||
if ( headingFont ) {
|
||||
headingFont = getFontName( headingFont, bodyFont );
|
||||
headingFont =
|
||||
undefined !== headingFont
|
||||
? headingFont.replace( ' ', '+' )
|
||||
: headingFont;
|
||||
fontsName.push(
|
||||
`family=${ headingFont }${ headingFontWeight }`
|
||||
);
|
||||
}
|
||||
|
||||
let otherFontsString = '';
|
||||
if ( !! fonts ) {
|
||||
for ( const font of fonts ) {
|
||||
const fontHeading = getFontName(
|
||||
font[ 'headings-font-family' ]
|
||||
).replaceAll( ' ', '+' );
|
||||
const fontHeadingWeight = font[ 'headings-font-weight' ];
|
||||
|
||||
const fontBody = getFontName(
|
||||
font[ 'body-font-family' ]
|
||||
).replaceAll( ' ', '+' );
|
||||
const fontBodyWeight = font[ 'body-font-weight' ];
|
||||
|
||||
otherFontsString += `&family=${ fontHeading }:wght@${ fontHeadingWeight }&family=${ fontBody }:wght@${ fontBodyWeight }`;
|
||||
}
|
||||
otherFontsString = otherFontsString.replace( /[&]{1}$/i, '' );
|
||||
}
|
||||
|
||||
// Add Google fonts URL.
|
||||
if ( fontsName ) {
|
||||
const fontUrl = `https://fonts.googleapis.com/css2?${ fontsName.join(
|
||||
'&'
|
||||
) }${ otherFontsString }&display=swap`;
|
||||
|
||||
node.setAttribute( 'href', fontUrl );
|
||||
document.head.insertAdjacentElement( 'afterbegin', node );
|
||||
}
|
||||
// Add default font.
|
||||
const allFonts = defaultFonts.concat( fonts );
|
||||
// if ( Object.keys( typography ).length === 0 ) {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
typography: allFonts[ 0 ],
|
||||
} );
|
||||
// }
|
||||
|
||||
setFonts( allFonts );
|
||||
}
|
||||
}, [ templateResponse ] );
|
||||
|
||||
const sendPostMessage = ( data ) => {
|
||||
dispatchPostMessage( data, 'astra-starter-templates-preview' );
|
||||
};
|
||||
|
||||
const handleChange = ( selectedTypography ) => () => {
|
||||
const newTypography = headingFonts
|
||||
? { ...selectedTypography, ...headingFonts }
|
||||
: selectedTypography;
|
||||
|
||||
sendPostMessage( {
|
||||
param: 'siteTypography',
|
||||
data: JSON.parse( JSON.stringify( newTypography ) ),
|
||||
} );
|
||||
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
typography: selectedTypography,
|
||||
} );
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
const defaultTypography = fonts[ 0 ];
|
||||
sendPostMessage( {
|
||||
param: 'siteTypography',
|
||||
data: JSON.parse( JSON.stringify( defaultTypography ) ),
|
||||
} );
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
typography: defaultTypography,
|
||||
} );
|
||||
};
|
||||
|
||||
const selectedHeadingFont =
|
||||
getFontName( activeTypography?.[ 'headings-font-family' ] ) || '',
|
||||
selectedBodyFont =
|
||||
getFontName( activeTypography?.[ 'body-font-family' ] ) || '';
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-zip-app-heading text-sm w-full truncate">
|
||||
<span className="font-semibold">
|
||||
{ __( 'Font Pair', 'astra-sites' ) }:
|
||||
</span>
|
||||
<span className="font-normal">
|
||||
{ ' ' }
|
||||
{ selectedHeadingFont } & { selectedBodyFont }{ ' ' }
|
||||
</span>
|
||||
</p>
|
||||
<button
|
||||
key="reset-to-default-fonts"
|
||||
className={ classNames(
|
||||
'inline-flex p-px items-center justify-center text-button-disabled border-0 bg-transparent focus:outline-none transition-colors duration-200 ease-in-out cursor-default',
|
||||
! activeTypography?.default &&
|
||||
'text-zip-app-inactive-icon cursor-pointer'
|
||||
) }
|
||||
{ ...( ! activeTypography?.default && {
|
||||
onClick: handleReset,
|
||||
} ) }
|
||||
>
|
||||
<ArrowPathIcon
|
||||
className="w-[0.875rem] h-[0.875rem]"
|
||||
strokeWidth={ 2 }
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-5 gap-3 auto-rows-[36px]">
|
||||
{ fonts.map( ( font ) => {
|
||||
const bodyFont =
|
||||
getFontName( font[ 'body-font-family' ] ) || '';
|
||||
const headingFont =
|
||||
getFontName(
|
||||
font[ 'headings-font-family' ],
|
||||
bodyFont
|
||||
) || '';
|
||||
return (
|
||||
<div
|
||||
key={ font.id }
|
||||
className={ classNames(
|
||||
'flex justify-center items-center text-body-text font-normal px-2 py-1 border border-solid border-button-disabled rounded-md bg-st-background-secondary hover:bg-white transition duration-150 ease-in-out cursor-pointer w-full h-9',
|
||||
activeTypography?.id === font.id &&
|
||||
'outline-1 outline outline-offset-2 outline-accent-st-secondary bg-white'
|
||||
) }
|
||||
onClick={ handleChange( font ) }
|
||||
>
|
||||
<span
|
||||
className="truncate text-xl font-normal"
|
||||
style={ {
|
||||
fontFamily: headingFont,
|
||||
} }
|
||||
>
|
||||
A
|
||||
</span>
|
||||
<span
|
||||
className="truncate text-sm font-normal"
|
||||
style={ {
|
||||
fontFamily: bodyFont,
|
||||
} }
|
||||
>
|
||||
g
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
} ) }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo( FontSelector );
|
||||
@@ -0,0 +1,106 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import DefaultStep from '../../components/default-step';
|
||||
import SitePreview from '../../components/site-preview';
|
||||
import { useStateValue } from '../../store/store';
|
||||
import { CustomizeSteps } from './customize-steps';
|
||||
|
||||
const CustomizeSite = () => {
|
||||
const [ { currentCustomizeIndex, currentIndex, builder }, dispatch ] =
|
||||
useStateValue();
|
||||
|
||||
const currentStepObject = CustomizeSteps[ currentCustomizeIndex ];
|
||||
let CurrentStepContent;
|
||||
let CurrentStepControls;
|
||||
|
||||
if ( typeof currentStepObject !== 'undefined' ) {
|
||||
CurrentStepContent = currentStepObject.content;
|
||||
CurrentStepControls = currentStepObject.controls;
|
||||
}
|
||||
|
||||
useEffect( () => {
|
||||
const previousIndex = parseInt( currentCustomizeIndex ) - 1;
|
||||
const nextIndex = parseInt( currentCustomizeIndex ) + 1;
|
||||
|
||||
if ( nextIndex > 0 && nextIndex < CustomizeSteps.length ) {
|
||||
document.body.classList.remove( CustomizeSteps[ nextIndex ].class );
|
||||
}
|
||||
|
||||
if ( previousIndex >= 0 ) {
|
||||
document.body.classList.remove(
|
||||
CustomizeSteps[ previousIndex ].class
|
||||
);
|
||||
}
|
||||
|
||||
document.body.classList.add(
|
||||
CustomizeSteps[ currentCustomizeIndex ].class
|
||||
);
|
||||
} );
|
||||
|
||||
const setNextStep = () => {
|
||||
if ( CustomizeSteps.length - 1 === currentCustomizeIndex ) {
|
||||
return null;
|
||||
}
|
||||
if ( builder === 'beaver-builder' || builder === 'brizy' ) {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentIndex: currentIndex + 1,
|
||||
} );
|
||||
} else {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentCustomizeIndex: currentCustomizeIndex + 1,
|
||||
} );
|
||||
}
|
||||
};
|
||||
|
||||
const setPreviousStep = () => {
|
||||
if ( 0 === currentCustomizeIndex ) {
|
||||
return null;
|
||||
}
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
currentCustomizeIndex: currentCustomizeIndex - 1,
|
||||
} );
|
||||
};
|
||||
|
||||
const preventRefresh = ( event ) => {
|
||||
event.returnValue = __(
|
||||
'Are you sure you want to cancel the site import process?',
|
||||
'astra-sites'
|
||||
);
|
||||
return event;
|
||||
};
|
||||
|
||||
useEffect( () => {
|
||||
window.addEventListener( 'beforeunload', preventRefresh ); // eslint-disable-line
|
||||
return () =>
|
||||
window.removeEventListener( 'beforeunload', preventRefresh ); // eslint-disable-line
|
||||
} );
|
||||
|
||||
return (
|
||||
<DefaultStep
|
||||
stepName={ CustomizeSteps[ currentCustomizeIndex ].class }
|
||||
content={
|
||||
<CurrentStepContent
|
||||
customizeStep={ true }
|
||||
onNextClick={ setNextStep }
|
||||
onPreviousClick={ setPreviousStep }
|
||||
/>
|
||||
}
|
||||
controls={
|
||||
CurrentStepControls && (
|
||||
<CurrentStepControls
|
||||
customizeStep={ true }
|
||||
onNextClick={ setNextStep }
|
||||
onPreviousClick={ setPreviousStep }
|
||||
/>
|
||||
)
|
||||
}
|
||||
actions={ null }
|
||||
preview={ <SitePreview /> }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomizeSite;
|
||||
@@ -0,0 +1,227 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { useStateValue } from '../../store/store';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import Button from '../../components/button/button';
|
||||
import { whiteLabelEnabled } from '../../utils/functions';
|
||||
import ICONS from '../../../icons';
|
||||
import Input from '../../components/input';
|
||||
import { ArrowRightIcon } from '@heroicons/react/24/outline';
|
||||
import apiFetch from '@wordpress/api-fetch';
|
||||
const { restNonce } = starterTemplates;
|
||||
import {
|
||||
checkRequiredPlugins,
|
||||
getDemo,
|
||||
} from '../../steps/import-site/import-utils';
|
||||
|
||||
const LicenseValidation = ( param ) => {
|
||||
const {} = useForm( { defaultValues: { 'license-key': '' } } );
|
||||
const storedState = useStateValue();
|
||||
const [
|
||||
{ templateId, currentIndex, validateLicenseStatus, builder },
|
||||
dispatch,
|
||||
] = storedState;
|
||||
const [ alreadyPurchasedClicked, setAlreadyPurchasedClicked ] =
|
||||
useState( false );
|
||||
const [ processing, setProcessing ] = useState( false );
|
||||
const [ licenseKey, setLicenseKey ] = useState( '' );
|
||||
useEffect( () => {
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
designStep: 2,
|
||||
} );
|
||||
}, [] );
|
||||
|
||||
const accessLinkOutput = __(
|
||||
`Access this template and all others with Essentials & Business Toolkit package starting at just $79.`,
|
||||
'astra-sites'
|
||||
);
|
||||
|
||||
const alreadyPurchasedOutput = __(
|
||||
`Please enter your licence key.`,
|
||||
'astra-sites'
|
||||
);
|
||||
|
||||
const getAccessLink = () => {
|
||||
window.open( astraSitesVars?.cta_links[ builder ] );
|
||||
};
|
||||
|
||||
const getwhiteLabelLink = () => {
|
||||
if ( astraSitesVars?.whiteLabelUrl !== '#' ) {
|
||||
window.open( astraSitesVars?.whiteLabelUrl );
|
||||
}
|
||||
};
|
||||
|
||||
const handleClick = ( event ) => {
|
||||
event.preventDefault();
|
||||
setAlreadyPurchasedClicked( true );
|
||||
};
|
||||
|
||||
const validateKey = () => {
|
||||
if ( licenseKey === '' ) {
|
||||
param.setErrorCB( __( 'Please Enter License Key', 'astra-sites' ) );
|
||||
return;
|
||||
}
|
||||
|
||||
setProcessing( true );
|
||||
|
||||
apiFetch.use( apiFetch.createNonceMiddleware( restNonce ) );
|
||||
apiFetch( {
|
||||
path: '/bsf-core/v1/license/activate',
|
||||
method: 'POST',
|
||||
data: {
|
||||
'license-key': licenseKey,
|
||||
'product-id': 'astra-pro-sites',
|
||||
},
|
||||
} ).then( async ( response ) => {
|
||||
if ( response.success ) {
|
||||
await getDemo( templateId, storedState );
|
||||
await checkRequiredPlugins( storedState );
|
||||
dispatch( {
|
||||
type: 'set',
|
||||
licenseStatus: true,
|
||||
currentIndex: currentIndex + 1,
|
||||
} );
|
||||
} else {
|
||||
param.setErrorCB( response.message );
|
||||
}
|
||||
setProcessing( false );
|
||||
} );
|
||||
};
|
||||
const processingClass = processing ? 'processing' : '';
|
||||
const StoreLink = sprintf(
|
||||
//translators: %1$s Opening anchor tag %2$s Closing anchor tag.
|
||||
__(
|
||||
`If you have already purchased the Essential or Business Toolkit, please install the premium version of the Starter Templates plugin from our %1$sstore%2$s.`,
|
||||
'astra-sites'
|
||||
),
|
||||
`<a href="https://wpastra.com/support/free-support/" target="_blank">`,
|
||||
`</a>`
|
||||
);
|
||||
|
||||
const SupportTeam = sprintf(
|
||||
//translators: %1$s Opening anchor tag %2$s Closing anchor tag.
|
||||
__(
|
||||
'Need help? feel free to get in touch with our %1$ssupport team%2$s.',
|
||||
'astra-sites'
|
||||
),
|
||||
'<a href="https://wpastra.com/support/free-support/" target="_blank">',
|
||||
'</a>'
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col p-4 rounded-md border border-solid border-blue-500 gap-3 via-blue-500 bg-background-primary">
|
||||
<div className="flex gap-2 flex-col">
|
||||
<div className="flex gap-2 items-center">
|
||||
<span className="w-5 h-5">{ ICONS.premiumIcon }</span>
|
||||
<h4 className="text-base font-semibold text-16 leading-24 tracking-normal text-left">
|
||||
{ __( 'Premium Template', 'astra-sites' ) }
|
||||
</h4>
|
||||
</div>
|
||||
<p>
|
||||
{ ! alreadyPurchasedClicked ? accessLinkOutput : ' ' }
|
||||
</p>
|
||||
</div>
|
||||
{ alreadyPurchasedClicked && ! validateLicenseStatus && (
|
||||
<p>
|
||||
{ __(
|
||||
'You are currently using the Free version.',
|
||||
'astra-sites'
|
||||
) }
|
||||
<br />
|
||||
<span
|
||||
dangerouslySetInnerHTML={ { __html: StoreLink } }
|
||||
/>
|
||||
<br />
|
||||
<span
|
||||
dangerouslySetInnerHTML={ { __html: SupportTeam } }
|
||||
/>
|
||||
</p>
|
||||
) }
|
||||
|
||||
{ alreadyPurchasedClicked && validateLicenseStatus && (
|
||||
<>
|
||||
<p>{ alreadyPurchasedOutput }</p>
|
||||
<form className="" onSubmit={ validateKey }>
|
||||
<div style={ { position: 'relative' } }>
|
||||
<Input
|
||||
className="w-full"
|
||||
inputClassName="pr-10"
|
||||
height="12"
|
||||
name="license-key"
|
||||
placeholder={ __(
|
||||
'License key',
|
||||
'astra-sites'
|
||||
) }
|
||||
onChange={ ( e ) => {
|
||||
setLicenseKey( e.target.value );
|
||||
param.setErrorCB( '' );
|
||||
} }
|
||||
value={ licenseKey }
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className={ `absolute right-0 top-0 h-full p-1 pl-2 flex items-center justify-center cursor-pointer bg-transparent border-0 focus:outline-none ${ processingClass }` }
|
||||
onClick={ validateKey }
|
||||
>
|
||||
{ ! processing ? (
|
||||
<ArrowRightIcon className="w-5 h-5" />
|
||||
) : (
|
||||
ICONS.spinner
|
||||
) }
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="text-xs flex gap-6 flex-row">
|
||||
<p>
|
||||
<a
|
||||
href="https://store.brainstormforce.com/login/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{ __( 'Get your key here', 'astra-sites' ) }
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
href="https://wpastra.com/support/free-support/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{ __( 'Need help?', 'astra-sites' ) }
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
) }
|
||||
{ ! alreadyPurchasedClicked && (
|
||||
<>
|
||||
<Button
|
||||
className="px-3 py-2 rounded-md gap-2 flex !mt-1"
|
||||
onClick={
|
||||
whiteLabelEnabled()
|
||||
? getwhiteLabelLink
|
||||
: getAccessLink
|
||||
}
|
||||
>
|
||||
{ __( 'Get Access', 'astra-sites' ) }
|
||||
<ArrowRightIcon className="w-4 h-4 text-zip-dark-theme-heading" />
|
||||
</Button>
|
||||
<div className="text-center">
|
||||
<a
|
||||
href="#"
|
||||
className="w-fill h-hug"
|
||||
onClick={ handleClick }
|
||||
>
|
||||
{ __( 'Already purchased?', 'astra-sites' ) }
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
) }
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LicenseValidation;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user