WIP(subs): extant Stripe state
This commit is contained in:
Kalista Payne
Binary file not shown.
|
Before Width: | Height: | Size: 277 KiB |
@@ -131,10 +131,18 @@ h4 {
|
||||
color: $maroon-50 !important;
|
||||
}
|
||||
|
||||
.purple-200 {
|
||||
color: $purple-200 !important;
|
||||
}
|
||||
|
||||
.purple-300 {
|
||||
color: $purple-300 !important;
|
||||
}
|
||||
|
||||
.purple-600 {
|
||||
color: $purple-600 !important;
|
||||
}
|
||||
|
||||
.teal-1 {
|
||||
color: $teal-1 !important;
|
||||
}
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
<svg width="1440" height="274" viewBox="0 0 1440 274" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1440 0H0L2.60432e-06 202.882C2.60432e-06 202.882 0.000148328 206.692 0.000729304 209.294C17.985 210.781 36.2503 212.362 54.9068 213.977C190.11 225.682 345.853 239.164 564 231.329C790.061 223.209 906.625 234.624 1043.17 247.995C1145.82 258.047 1259.76 269.204 1440 274L1440 0Z" fill="url(#paint0_linear_1324_709)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_1324_709" x1="0" y1="0" x2="315.968" y2="748.496" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#6133B4"/>
|
||||
<stop offset="1" stop-color="#4F2A93"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 652 B |
@@ -0,0 +1,48 @@
|
||||
<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.4728 37.2881L31.0401 40.6634C30.8722 41.0588 30.533 41.3618 30.1106 41.4581C25.4964 42.5161 15.7591 38.3829 13.3131 34.3281C13.0907 33.958 13.073 33.5035 13.2408 33.108L14.6735 29.7328C15.9802 26.6545 18.829 24.3765 21.9907 23.6412C22.9143 23.4268 23.3484 22.4041 22.8611 21.5907C21.1937 18.8056 20.8534 15.174 22.16 12.0957L23.5927 8.72043C23.7606 8.32501 24.0998 8.02203 24.5199 7.92663C29.1358 6.86935 38.8731 11.0026 41.3173 15.0567C41.5422 15.4259 41.5599 15.8804 41.392 16.2758L39.9593 19.651C38.6527 22.7293 35.8039 25.0073 32.6422 25.7426C31.7185 25.957 31.2844 26.9797 31.7718 27.7931C33.4392 30.5782 33.7795 34.2099 32.4728 37.2881Z" fill="#A9DCF6" fill-opacity="0.8"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.664 12.0938C29.7729 10.8666 27.3007 10.4316 25.8346 10.5102L24.7036 13.1747C23.7617 15.3938 23.9622 18.0859 25.2286 20.2007C25.9064 21.3331 26.0063 22.7223 25.4978 23.9203C24.9893 25.1182 23.9206 26.0114 22.6375 26.3096C20.2342 26.8686 18.1583 28.5945 17.2171 30.8118L16.0854 33.478C17.0473 34.5873 19.0775 36.0634 21.9686 37.2906C24.8596 38.5178 27.3318 38.9528 28.7979 38.8742L29.9297 36.208C30.8709 33.9906 30.6703 31.2985 29.4039 29.1837C28.7261 28.0513 28.6263 26.662 29.1348 25.4641C29.6433 24.2662 30.7119 23.3729 31.9957 23.0732C34.3983 22.5158 36.4742 20.7899 37.4162 18.5709L38.5472 15.9064C37.5853 14.7971 35.555 13.321 32.664 12.0938Z" fill="white" fill-opacity="0.9"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.5684 13.8635C33.7371 14.784 35.9512 15.9582 35.7471 16.4997C35.5853 16.9371 35.2218 17.7653 33.0852 17.902C31.0091 18.0368 30.0196 19.4736 29.0902 19.0791C28.0092 18.6202 28.3314 17.6878 27.3948 16.2289C26.429 14.7261 26.743 13.3826 26.9685 12.8935C27.2828 12.2137 29.3996 12.9429 31.5684 13.8635Z" fill="#9A62FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.3942 16.2291C26.4285 14.7263 26.7424 13.3828 26.9679 12.8937C27.2164 12.3553 28.5959 12.7006 30.2369 13.3243C29.6862 13.3623 28.8925 13.5984 28.6315 14.6159C28.3585 15.6755 29.4738 17.4486 28.8447 18.2192C28.7229 18.3703 28.5806 18.4714 28.4271 18.5381C28.0907 18.0153 28.0509 17.2522 27.3942 16.2291Z" fill="#4F2A93"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3429 26.9852C27.003 27.2653 26.6667 28.5305 27.3103 29.6779C28.1003 31.0844 28.7422 32.6761 28.3659 34.4146C28.0561 35.8466 27.757 35.9145 27.4109 35.8779C27.0665 35.842 24.5481 35.2396 22.4522 33.773C20.3546 32.3057 19.4609 30.8532 20.0783 30.0166C20.6666 29.2207 21.6339 28.7393 23.1921 28.369C24.6835 28.0155 25.6829 26.705 26.3429 26.9852Z" fill="#9A62FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.4114 35.8785C27.0653 35.8419 24.5469 35.2396 22.451 33.773C20.7841 32.6066 19.878 31.4501 19.8876 30.6036C19.8956 30.5893 19.9037 30.575 19.9144 30.5637C20.2509 30.1316 22.3027 30.658 24.5368 32.0612C26.6666 33.3964 28.1998 34.9294 27.8338 35.7684C27.6986 35.8902 27.5598 35.8942 27.4114 35.8785Z" fill="#4F2A93"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.80368 18.2264L8.2016e-05 20.1109L3.80368 21.9953L5.70549 25.7643L7.60729 21.9953L11.4109 20.1109L7.60729 18.2264L5.70549 14.4574L3.80368 18.2264Z" fill="#925CF3"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M9.27148 20.1109L6.89423 21.2887L5.70561 20.1109H9.27148Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M5.70542 16.5775L6.89404 18.933L5.70542 20.1108V16.5775Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M2.13969 20.1108L4.51694 18.933L5.70557 20.1108H2.13969Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M5.70557 23.6443L4.51694 21.2887L5.70557 20.1109V23.6443Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M2.13969 20.1109L4.51694 21.2887L5.70557 20.1109H2.13969Z" fill="#6133B4"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M5.70557 16.5775L4.51694 18.933L5.70557 20.1108V16.5775Z" fill="#6133B4"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M9.27148 20.1108L6.89423 18.933L5.70561 20.1108H9.27148Z" fill="white"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M5.70542 23.6443L6.89404 21.2887L5.70542 20.1109V23.6443Z" fill="white"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M6.27609 19.5455L7.36963 20.1109L6.27609 20.6762L5.70555 21.7598L5.13501 20.6762L4.04148 20.1109L5.13501 19.5455L5.70555 18.4619L6.27609 19.5455Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8625 1.53112L11.3172 2.29668L12.8625 3.06225L13.6351 4.59338L14.4077 3.06225L15.9529 2.29668L14.4077 1.53112L13.6351 -1.81198e-05L12.8625 1.53112Z" fill="#BDA8FF"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M15.0837 2.29667L14.118 2.77515L13.6351 2.29667H15.0837Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M13.635 0.861193L14.1179 1.81815L13.635 2.29663V0.861193Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M12.1864 2.29663L13.1521 1.81815L13.635 2.29663H12.1864Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M13.635 3.73218L13.1521 2.77522L13.635 2.29674V3.73218Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M12.1864 2.29667L13.1521 2.77515L13.635 2.29667H12.1864Z" fill="#925CF3"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M13.635 0.861193L13.1521 1.81815L13.635 2.29663V0.861193Z" fill="#925CF3"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M15.0837 2.29663L14.118 1.81815L13.6351 2.29663H15.0837Z" fill="white"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M13.635 3.73218L14.1179 2.77522L13.635 2.29674V3.73218Z" fill="white"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M13.8668 2.06701L14.311 2.29668L13.8668 2.52635L13.635 2.96655L13.4032 2.52635L12.959 2.29668L13.4032 2.06701L13.635 1.62681L13.8668 2.06701Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.2455 29.7042L45.8682 30.882L48.2455 32.0598L49.4341 34.4154L50.6227 32.0598L53 30.882L50.6227 29.7042L49.4341 27.3486L48.2455 29.7042Z" fill="#925CF3"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M51.6628 30.882L50.1771 31.6182L49.4342 30.882H51.6628Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M49.4341 28.6737L50.177 30.146L49.4341 30.8821V28.6737Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M47.2054 30.8821L48.6912 30.146L49.4341 30.8821H47.2054Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M49.4341 33.0903L48.6912 31.6181L49.4341 30.882V33.0903Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M47.2054 30.882L48.6912 31.6182L49.4341 30.882H47.2054Z" fill="#6133B4"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M49.4341 28.6737L48.6912 30.146L49.4341 30.8821V28.6737Z" fill="#6133B4"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M51.6628 30.8821L50.1771 30.146L49.4342 30.8821H51.6628Z" fill="white"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M49.4341 33.0903L50.177 31.6181L49.4341 30.882V33.0903Z" fill="white"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M49.7907 30.5287L50.4741 30.882L49.7907 31.2354L49.4341 31.9126L49.0775 31.2354L48.394 30.882L49.0775 30.5287L49.4341 29.8515L49.7907 30.5287Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.9456 43.5776L35.1911 45.9332L39.9456 48.2888L42.3228 53L44.7001 48.2888L49.4546 45.9332L44.7001 43.5776L42.3228 38.8665L39.9456 43.5776Z" fill="#6133B4"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M46.7803 45.9333L43.8087 47.4055L42.3229 45.9333H46.7803Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M42.3228 41.5165L43.8086 44.461L42.3228 45.9332V41.5165Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M37.8654 45.9332L40.837 44.461L42.3228 45.9332H37.8654Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M42.3228 50.35L40.837 47.4055L42.3228 45.9332V50.35Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M37.8654 45.9333L40.837 47.4055L42.3228 45.9333H37.8654Z" fill="#4F2A93"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M42.3228 41.5165L40.837 44.461L42.3228 45.9332V41.5165Z" fill="#4F2A93"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M46.7803 45.9332L43.8087 44.461L42.3229 45.9332H46.7803Z" fill="white"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M42.3228 50.35L43.8086 47.4055L42.3228 45.9332V50.35Z" fill="white"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M43.0359 45.2266L44.4028 45.9332L43.0359 46.6399L42.3227 47.9944L41.6096 46.6399L40.2426 45.9332L41.6096 45.2266L42.3227 43.8721L43.0359 45.2266Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.0 KiB |
@@ -0,0 +1,48 @@
|
||||
<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.5272 37.2881L22.9599 40.6634C23.1278 41.0588 23.467 41.3618 23.8894 41.4581C28.5036 42.5161 38.2409 38.3829 40.6869 34.3281C40.9093 33.958 40.927 33.5035 40.7592 33.108L39.3265 29.7328C38.0198 26.6545 35.171 24.3765 32.0093 23.6412C31.0857 23.4268 30.6516 22.4041 31.1389 21.5907C32.8063 18.8056 33.1466 15.174 31.84 12.0957L30.4073 8.72043C30.2394 8.32501 29.9002 8.02203 29.4801 7.92663C24.8642 6.86935 15.1269 11.0026 12.6827 15.0567C12.4578 15.4259 12.4401 15.8804 12.608 16.2758L14.0407 19.651C15.3473 22.7293 18.1961 25.0073 21.3578 25.7426C22.2815 25.957 22.7156 26.9797 22.2282 27.7931C20.5608 30.5782 20.2205 34.2099 21.5272 37.2881Z" fill="#A9DCF6" fill-opacity="0.8"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.336 12.0938C24.2271 10.8666 26.6993 10.4316 28.1654 10.5102L29.2964 13.1747C30.2383 15.3938 30.0378 18.0859 28.7714 20.2007C28.0936 21.3331 27.9937 22.7223 28.5022 23.9203C29.0107 25.1182 30.0794 26.0114 31.3625 26.3096C33.7658 26.8686 35.8417 28.5945 36.7829 30.8118L37.9146 33.478C36.9527 34.5873 34.9225 36.0634 32.0314 37.2906C29.1404 38.5178 26.6682 38.9528 25.2021 38.8742L24.0703 36.208C23.1291 33.9906 23.3297 31.2985 24.5961 29.1837C25.2739 28.0513 25.3737 26.662 24.8652 25.4641C24.3567 24.2662 23.2881 23.3729 22.0043 23.0732C19.6017 22.5158 17.5258 20.7899 16.5838 18.5709L15.4528 15.9064C16.4147 14.7971 18.445 13.321 21.336 12.0938Z" fill="white" fill-opacity="0.9"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.4316 13.8635C20.2629 14.784 18.0488 15.9582 18.2529 16.4997C18.4147 16.9371 18.7782 17.7653 20.9148 17.902C22.9909 18.0368 23.9804 19.4736 24.9098 19.0791C25.9908 18.6202 25.6686 17.6878 26.6052 16.2289C27.571 14.7261 27.257 13.3826 27.0315 12.8935C26.7172 12.2137 24.6004 12.9429 22.4316 13.8635Z" fill="#9A62FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.6058 16.2291C27.5715 14.7263 27.2576 13.3828 27.0321 12.8937C26.7836 12.3553 25.4041 12.7006 23.7631 13.3243C24.3138 13.3623 25.1075 13.5984 25.3685 14.6159C25.6415 15.6755 24.5262 17.4486 25.1553 18.2192C25.2771 18.3703 25.4194 18.4714 25.5729 18.5381C25.9093 18.0153 25.9491 17.2522 26.6058 16.2291Z" fill="#4F2A93"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.6571 26.9852C26.997 27.2653 27.3333 28.5305 26.6897 29.6779C25.8997 31.0844 25.2578 32.6761 25.6341 34.4146C25.9439 35.8466 26.243 35.9145 26.5891 35.8779C26.9335 35.842 29.4519 35.2396 31.5478 33.773C33.6454 32.3057 34.5391 30.8532 33.9217 30.0166C33.3334 29.2207 32.3661 28.7393 30.8079 28.369C29.3165 28.0155 28.3171 26.705 27.6571 26.9852Z" fill="#9A62FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.5886 35.8785C26.9347 35.8419 29.4531 35.2396 31.549 33.773C33.2159 32.6066 34.122 31.4501 34.1124 30.6036C34.1044 30.5893 34.0963 30.575 34.0856 30.5637C33.7491 30.1316 31.6973 30.658 29.4632 32.0612C27.3334 33.3964 25.8002 34.9294 26.1662 35.7684C26.3014 35.8902 26.4402 35.8942 26.5886 35.8785Z" fill="#4F2A93"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 30L15 32.5L10 35L7.5 40L5 35L0 32.5L5 30L7.5 25L10 30Z" fill="#925CF3"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M3 32L6.33333 34L8 32H3Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M8 27L6 30.3333L8 32L8 27Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M12 32L8.66667 30L7 32H12Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M7 37L9 33.6667L7 32L7 37Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M12 32L8.66667 34L7 32H12Z" fill="#6133B4"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M7 27L9 30.3333L7 32L7 27Z" fill="#6133B4"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M3 32L6.33333 30L8 32H3Z" fill="white"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M8 37L6 33.6667L8 32L8 37Z" fill="white"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M6.31429 31.3143L5 32L6.31429 32.6857L7 34L7.68571 32.6857L9 32L7.68571 31.3143L7 30L6.31429 31.3143Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.3333 47.6667L21 49L18.3333 50.3333L17 53L15.6667 50.3333L13 49L15.6667 47.6667L17 45L18.3333 47.6667Z" fill="#BDA8FF"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M14 49L16 50L17 49H14Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17 46L16 48L17 49V46Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M20 49L18 48L17 49H20Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17 52L18 50L17 49V52Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M20 49L18 50L17 49H20Z" fill="#925CF3"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M17 46L18 48L17 49V46Z" fill="#925CF3"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M14 49L16 48L17 49H14Z" fill="white"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M17 52L16 50L17 49V52Z" fill="white"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M16.9857 48.9857L16 49.5L16.9857 50.0143L17.5 51L18.0143 50.0143L19 49.5L18.0143 48.9857L17.5 48L16.9857 48.9857Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M40 2L42 3L40 4L39 6L38 4L36 3L38 2L39 0L40 2Z" fill="#925CF3"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M37 3L38.3333 4L39 3H37Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M39 1L38 2.33333L39 3V1Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M41 3L39.6667 2L39 3L41 3Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M39 5L40 3.66667L39 3V5Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M41 3L39.6667 4L39 3H41Z" fill="#6133B4"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M39 1L40 2.33333L39 3V1Z" fill="#6133B4"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M37 3L38.3333 2L39 3L37 3Z" fill="white"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M39 5L38 3.66667L39 3V5Z" fill="white"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M38.6571 2.65714L38 3L38.6571 3.34286L39 4L39.3429 3.34286L40 3L39.3429 2.65714L39 2L38.6571 2.65714Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M49 21L53 23L49 25L47 29L45 25L41 23L45 21L47 17L49 21Z" fill="#6133B4"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M43 23L45.6667 24L47 23H43Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M46 19L45 21.6667L46 23V19Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M50 23L47.3333 22L46 23H50Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M47 27L48 24.3333L47 23V27Z" fill="white"/>
|
||||
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M50 23L47.3333 24L46 23H50Z" fill="#4F2A93"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M47 19L48 21.6667L47 23V19Z" fill="#4F2A93"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M43 23L45.6667 22L47 23H43Z" fill="white"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M46 27L45 24.3333L46 23V27Z" fill="white"/>
|
||||
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M46.3143 21.9857L45 22.5L46.3143 23.0143L47 24L47.6857 23.0143L49 22.5L47.6857 21.9857L47 21L46.3143 21.9857Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.6 KiB |
@@ -3,17 +3,18 @@
|
||||
<div class="pt-0 px-0">
|
||||
<div v-if="!hasSubscription && !hasCanceledSubscription">
|
||||
<div class="d-flex flex-column justify-content-center align-items-center
|
||||
gradient-swoop mb-3"
|
||||
purple-gradient full-banner mb-3"
|
||||
>
|
||||
<p class="white block-header mb-2">
|
||||
<p class="white header-top mt-4 mb-2">
|
||||
{{ $t('subscribeTo').toUpperCase() }}
|
||||
</p>
|
||||
<div
|
||||
class="d-flex justify-content-center align-items-center mb-4"
|
||||
class="header-mid d-flex justify-content-center align-items-center
|
||||
mb-4 position-relative"
|
||||
>
|
||||
<div
|
||||
v-once
|
||||
class="svg-icon flip"
|
||||
class="svg-icon flip position-absolute left-0"
|
||||
v-html="icons.purpleStars"
|
||||
>
|
||||
</div>
|
||||
@@ -25,12 +26,12 @@
|
||||
</div>
|
||||
<div
|
||||
v-once
|
||||
class="svg-icon"
|
||||
class="svg-icon position-absolute right-0"
|
||||
v-html="icons.purpleStars"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="white final-header">
|
||||
<h2 class="white">
|
||||
{{ $t('subscribersReceiveBenefits') }}
|
||||
</h2>
|
||||
</div>
|
||||
@@ -115,13 +116,13 @@
|
||||
v-if="hasSubscription"
|
||||
class="d-flex flex-column align-items-center"
|
||||
>
|
||||
<h1 class="mt-4 mx-auto">
|
||||
<h1 class="mt-4 mx-auto mb-3">
|
||||
{{ $t('subscription') }}
|
||||
</h1>
|
||||
<div class="mx-auto">
|
||||
<div class="sub-card bg-white p-4 mb-4">
|
||||
<div
|
||||
v-if="hasSubscription && !hasCanceledSubscription"
|
||||
class="d-flex flex-column align-items-center pt-4"
|
||||
class="d-flex flex-column align-items-center"
|
||||
>
|
||||
<div class="round-container bg-green-10
|
||||
d-flex align-items-center justify-content-center"
|
||||
@@ -132,7 +133,7 @@
|
||||
v-html="icons.checkmarkIcon"
|
||||
></div>
|
||||
</div>
|
||||
<h2 class="green-10 mx-auto mb-75">
|
||||
<h2 class="green-10 mx-auto mb-3">
|
||||
{{ $t('youAreSubscribed') }}
|
||||
</h2>
|
||||
<div
|
||||
@@ -141,43 +142,33 @@
|
||||
>
|
||||
{{ $t('youHaveGroupPlan') }}
|
||||
</div>
|
||||
<div
|
||||
<p
|
||||
v-else
|
||||
class="w-55 text-center"
|
||||
class="text-center mb-4"
|
||||
v-html="$t('paymentSubBillingWithMethod', {
|
||||
amount: purchasedPlanIdInfo.price,
|
||||
months: purchasedPlanIdInfo.months,
|
||||
paymentMethod: purchasedPlanIdInfo.plan
|
||||
paymentMethod: purchasedPlanIdInfo.plan,
|
||||
})"
|
||||
>
|
||||
</p>
|
||||
<div
|
||||
class="svg svg-icon mb-4"
|
||||
:class="paymentMethodLogo.class"
|
||||
v-html="paymentMethodLogo.icon"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-if="canEditCardDetails"
|
||||
class="mt-4 text-center"
|
||||
class="text-center"
|
||||
>
|
||||
<div class="font-weight-bold gray-10 mb-2">
|
||||
{{ $t('needToUpdateCard') }}
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-primary btn-update-card
|
||||
d-flex justify-content-center align-items-center mb-4"
|
||||
class="btn btn-secondary btn-update-card mb-4"
|
||||
@click="redirectToStripeEdit()"
|
||||
>
|
||||
<div
|
||||
v-once
|
||||
class="svg-icon svg-credit-card mr-2"
|
||||
v-html="icons.creditCardIcon"
|
||||
></div>
|
||||
<div>{{ $t('subUpdateCard') }}</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="svg-icon mb-4"
|
||||
:class="paymentMethodLogo.class"
|
||||
v-html="paymentMethodLogo.icon"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-if="purchasedPlanExtraMonthsDetails.months > 0"
|
||||
class="extra-months green-10 py-2 px-3 mb-4"
|
||||
@@ -199,7 +190,7 @@
|
||||
v-html="icons.checkmarkIcon"
|
||||
></div>
|
||||
</div>
|
||||
<h2 class="green-10 mx-auto mb-75">
|
||||
<h2 class="green-10 mx-auto mb-3">
|
||||
{{ $t('youAreSubscribed') }}
|
||||
</h2>
|
||||
<div
|
||||
@@ -254,17 +245,15 @@
|
||||
</div>
|
||||
<div
|
||||
v-if="hasSubscription"
|
||||
class="bg-gray-700 py-3 mb-3 text-center"
|
||||
>
|
||||
<div class="header-mini mb-3">
|
||||
{{ $t('subscriptionStats') }}
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="stat-column">
|
||||
<div class="d-flex justify-content-around mb-3">
|
||||
<div class="bg-gray-700 d-flex flex-column
|
||||
justify-content-center align-items-center stats-card"
|
||||
>
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<div
|
||||
v-once
|
||||
class="svg-icon svg-calendar mr-1"
|
||||
class="svg-icon svg-calendar mr-2"
|
||||
v-html="icons.calendarIcon"
|
||||
>
|
||||
</div>
|
||||
@@ -272,16 +261,17 @@
|
||||
{{ user.purchased.plan.consecutive.count }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats-label">
|
||||
<div class="stats-label gray-50">
|
||||
{{ $t('subMonths') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats-spacer"></div>
|
||||
<div class="stat-column">
|
||||
<div class="bg-gray-700 d-flex flex-column
|
||||
justify-content-center align-items-center stats-card"
|
||||
>
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<div
|
||||
v-once
|
||||
class="svg-icon svg-gem mr-1"
|
||||
class="svg-icon svg-gem mr-2"
|
||||
v-html="icons.gemIcon"
|
||||
>
|
||||
</div>
|
||||
@@ -289,77 +279,64 @@
|
||||
{{ gemCap }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats-label">
|
||||
{{ $t('gemCap') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats-spacer"></div>
|
||||
<div class="stat-column">
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<div
|
||||
v-once
|
||||
class="svg-icon svg-hourglass mt-1 mr-1"
|
||||
v-html="icons.hourglassIcon"
|
||||
>
|
||||
</div>
|
||||
<div class="number-heavy">
|
||||
{{ nextHourGlass }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats-label">
|
||||
{{ $t('nextHourglass') }}*
|
||||
<div class="stats-label gray-50">
|
||||
{{ $t('monthlyGemsLabel') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-once
|
||||
class="mt-4 nextHourglassDescription"
|
||||
class="hourglass-preview purple-gradient d-flex flex-column
|
||||
justify-content-center align-items-center position-relative mb-4"
|
||||
>
|
||||
*{{ $t('nextHourglassDescription') }}
|
||||
<div
|
||||
v-once
|
||||
class="svg svg-icon position-absolute left-24"
|
||||
v-html="icons.hourglassLeft"
|
||||
>
|
||||
</div>
|
||||
<div class="white mb-1">
|
||||
{{ nextHourGlass }}
|
||||
</div>
|
||||
<div
|
||||
v-once
|
||||
class="purple-600"
|
||||
>
|
||||
{{ $t('nextHourglass') }}
|
||||
</div>
|
||||
<div
|
||||
v-once
|
||||
class="svg svg-icon position-absolute right-24"
|
||||
v-html="icons.hourglassRight"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center align-items-center mb-3">
|
||||
<div
|
||||
v-once
|
||||
class="svg-icon svg-heart mb-2"
|
||||
v-html="icons.heartIcon"
|
||||
class="text-center next-hourglass-description gray-50"
|
||||
>
|
||||
</div>
|
||||
<div class="thanks-for-support">
|
||||
{{ $t('giftSubscriptionText4') }}
|
||||
{{ $t('nextHourglassDescription') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="hasSubscription && !hasCanceledSubscription"
|
||||
class="d-flex flex-column align-items-center mt-3"
|
||||
class="d-flex flex-column align-items-center mb-4"
|
||||
>
|
||||
<div class="cancel-card p-4 text-center">
|
||||
<h2 class="maroon-50">
|
||||
{{ $t('cancelYourSubscription') }}
|
||||
</h2>
|
||||
<div v-if="hasGroupPlan">
|
||||
{{ $t('cancelSubInfoGroupPlan') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="!hasGroupPlan && !canCancelSubscription"
|
||||
v-html="$t(`cancelSubInfo${user.purchased.plan.paymentMethod}`)"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-if="canCancelSubscription"
|
||||
v-html="$t('cancelSubAlternatives')"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="btn btn-danger mt-4"
|
||||
:class="{disabled: !canCancelSubscription}"
|
||||
:disabled="!canCancelSubscription"
|
||||
@click="cancelSubscriptionConfirm({canCancel: canCancelSubscription})"
|
||||
>
|
||||
{{ $t('cancelSub') }}
|
||||
</div>
|
||||
<a
|
||||
v-if="canCancelSubscription"
|
||||
class="maroon-50"
|
||||
@click="cancelSubscriptionConfirm({canCancel: canCancelSubscription})"
|
||||
>
|
||||
{{ $t('cancelYourSubscription') }}
|
||||
</a>
|
||||
<div v-if="hasGroupPlan">
|
||||
{{ $t('cancelSubInfoGroupPlan') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="!hasGroupPlan && !canCancelSubscription"
|
||||
v-html="$t(`cancelSubInfo${user.purchased.plan.paymentMethod}`)"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -383,7 +360,7 @@
|
||||
<p class="purple-300 mb-3">
|
||||
{{ $t('giftSubscription') }}
|
||||
</p>
|
||||
<button class="btn btn-secondary mb-5" @click="showSelectUser()">
|
||||
<button class="btn btn-secondary btn-gift mb-5" @click="showSelectUser()">
|
||||
{{ $t('giftASubscription') }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -408,7 +385,7 @@
|
||||
|
||||
p {
|
||||
margin-bottom: 0px;
|
||||
line-height: 24px;
|
||||
line-height: 1.71;
|
||||
}
|
||||
|
||||
small {
|
||||
@@ -421,21 +398,15 @@
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.block-header {
|
||||
letter-spacing: 1ch;
|
||||
font-weight: 700;
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
.btn-gift {
|
||||
width: 448px;
|
||||
}
|
||||
|
||||
.btn-update-card {
|
||||
width: 12.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
padding: 4px 12px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.cancel-card {
|
||||
@@ -458,19 +429,45 @@
|
||||
border: 1px solid $green-50;
|
||||
}
|
||||
|
||||
.final-header {
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
.flip {
|
||||
filter: flipH;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.gradient-swoop {
|
||||
background-image: url('@/assets/svg/gradient-swoop.svg');
|
||||
height: 274px;
|
||||
width: 1440px;
|
||||
.full-banner {
|
||||
height: 180px;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 922px) {
|
||||
.full-banner {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.header-mid {
|
||||
width: 347px;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
letter-spacing: 1ch;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hourglass-preview {
|
||||
height: 92px;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
|
||||
.white {
|
||||
font-family: 'Roboto Condensed';
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.purple-600 {
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
}
|
||||
}
|
||||
|
||||
.header-mini {
|
||||
@@ -478,6 +475,18 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.justify-content-around {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.left-0 {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.left-24 {
|
||||
left: 24px;
|
||||
}
|
||||
|
||||
.lh-71 {
|
||||
line-height: 1.71;
|
||||
}
|
||||
@@ -487,6 +496,12 @@
|
||||
color: $gray-200;
|
||||
}
|
||||
|
||||
.next-hourglass-description {
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
.number-heavy {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
@@ -494,14 +509,23 @@
|
||||
color: $gray-50;
|
||||
}
|
||||
|
||||
.position-absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.purple-bar {
|
||||
background-color: $purple-400;
|
||||
height: 1px;
|
||||
width: 432px;
|
||||
width: 50%;
|
||||
max-width: 432px;
|
||||
}
|
||||
|
||||
.purple-gradient {
|
||||
background-image: linear-gradient($purple-300, $purple-200);
|
||||
}
|
||||
|
||||
.right-0 {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.right-24 {
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
.round-container {
|
||||
@@ -512,18 +536,17 @@
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stats-label {
|
||||
font-size: 12px;
|
||||
color: $gray-100;
|
||||
margin-top: 6px;
|
||||
font-weight: bold;
|
||||
line-height: 1.33;
|
||||
.stats-card {
|
||||
border-radius: 8px;
|
||||
width: 192px;
|
||||
height: 88px;
|
||||
}
|
||||
|
||||
.stats-spacer {
|
||||
width: 1px;
|
||||
height: 3rem;
|
||||
background-color: $gray-500;
|
||||
.stats-label {
|
||||
font-size: 12px;
|
||||
margin-top: 6px;
|
||||
font-weight: 700;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
.sub-benefit {
|
||||
@@ -532,6 +555,12 @@
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.sub-card {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 1px 3px 0px rgba($black, 0.12), 0px 1px 2px 0px rgba($black, 0.24);
|
||||
width: 448px;
|
||||
}
|
||||
|
||||
.svg-amazon-pay {
|
||||
width: 208px;
|
||||
}
|
||||
@@ -549,7 +578,7 @@
|
||||
}
|
||||
|
||||
.svg-check {
|
||||
width: 36px;
|
||||
width: 48px;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
@@ -627,37 +656,13 @@
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.svg-stripe {
|
||||
width: 96px;
|
||||
}
|
||||
|
||||
.w-330p {
|
||||
width: 330px;
|
||||
}
|
||||
|
||||
.w-55 {
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
.nextHourglassDescription {
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
line-height: 1.33;
|
||||
color: $gray-100;
|
||||
margin-left: 100px;
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
.justify-content-evenly {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.thanks-for-support {
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
text-align: center;
|
||||
color: $gray-100;
|
||||
}
|
||||
|
||||
.stat-column {
|
||||
width: 33%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@@ -686,10 +691,13 @@ import giftBox from '@/assets/svg/gift-purple.svg';
|
||||
import googlePayLogo from '@/assets/svg/google-pay-logo.svg';
|
||||
import heartIcon from '@/assets/svg/health.svg';
|
||||
import hourglassIcon from '@/assets/svg/hourglass.svg';
|
||||
import hourglassLeft from '@/assets/svg/hourglass-sparkle-left.svg';
|
||||
import hourglassRight from '@/assets/svg/hourglass-sparkle-right.svg';
|
||||
import jackalope from '@/assets/svg/jackalope.svg';
|
||||
import logo from '@/assets/svg/habitica-logo-purple.svg';
|
||||
import paypalLogo from '@/assets/svg/paypal-logo.svg';
|
||||
import purpleStars from '@/assets/svg/stars-purple.svg';
|
||||
import stripeLogo from '@/assets/svg/stripe.svg';
|
||||
import subscriberFood from '@/assets/svg/subscriber-food.svg';
|
||||
import subscriberGems from '@/assets/svg/subscriber-gems.svg';
|
||||
import subscriberHourglasses from '@/assets/svg/subscriber-hourglasses.svg';
|
||||
@@ -734,10 +742,13 @@ export default {
|
||||
googlePayLogo,
|
||||
heartIcon,
|
||||
hourglassIcon,
|
||||
hourglassLeft,
|
||||
hourglassRight,
|
||||
jackalope,
|
||||
logo,
|
||||
paypalLogo,
|
||||
purpleStars,
|
||||
stripeLogo,
|
||||
subscriberFood,
|
||||
subscriberGems,
|
||||
subscriberHourglasses,
|
||||
@@ -852,6 +863,11 @@ export default {
|
||||
icon: this.icons.paypalLogo,
|
||||
class: 'svg-paypal mt-4',
|
||||
};
|
||||
case this.paymentMethods.STRIPE:
|
||||
return {
|
||||
icon: this.icons.stripeLogo,
|
||||
class: 'svg-stripe',
|
||||
};
|
||||
default:
|
||||
return {
|
||||
icon: null,
|
||||
@@ -868,7 +884,7 @@ export default {
|
||||
return currentPlanContext.nextHourglassDate;
|
||||
},
|
||||
nextHourGlass () {
|
||||
const nextHourglassMonth = this.nextHourGlassDate.format('MMM YYYY');
|
||||
const nextHourglassMonth = this.nextHourGlassDate.format('MMMM');
|
||||
|
||||
return nextHourglassMonth;
|
||||
},
|
||||
|
||||
@@ -35,36 +35,60 @@
|
||||
>
|
||||
</div>
|
||||
<div v-else class="w-100">
|
||||
<div class="ml-5" v-if="block.months < 12">
|
||||
<h2 class="mt-3 mb-1"> ${{ block.price }}.00 USD </h2>
|
||||
<div
|
||||
class="ml-5"
|
||||
v-if="block.months < 12"
|
||||
>
|
||||
<h2
|
||||
class="mt-3 mb-1"
|
||||
:class="{ 'purple-200': subscription.key === block.key }"
|
||||
> ${{ block.price }}.00 USD </h2>
|
||||
<small
|
||||
v-if="block.months < 2"
|
||||
class="bold mb-2"
|
||||
:class="{ 'purple-200': subscription.key === block.key }"
|
||||
>
|
||||
{{ $t('recurringMonthly') }}
|
||||
</small>
|
||||
<small
|
||||
v-else
|
||||
class="bold mb-2"
|
||||
:class="{ 'purple-200': subscription.key === block.key }"
|
||||
>
|
||||
{{ $t('recurringNMonthly', { length: block.months }) }}
|
||||
</small>
|
||||
<div class="d-flex flex-column">
|
||||
<div class="d-flex align-items-center mb-1">
|
||||
<div
|
||||
class="svg svg-icon svg-plus gray-300 color mr-1"
|
||||
class="svg svg-icon svg-plus color mr-1"
|
||||
:class="{
|
||||
'yellow-10': subscription.key === block.key,
|
||||
'gray-300': subscription.key !== block.key,
|
||||
}"
|
||||
v-html="icons.plus"
|
||||
>
|
||||
</div>
|
||||
<div class="small" v-html="$t('unlockNGems', { count: 24 })"></div>
|
||||
<div
|
||||
class="small"
|
||||
:class="{ 'purple-200': subscription.key === block.key }"
|
||||
v-html="$t('unlockNGems', { count: 24 })">
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="svg svg-icon svg-plus gray-300 color mr-1"
|
||||
class="svg svg-icon svg-plus color mr-1"
|
||||
:class="{
|
||||
'yellow-10': subscription.key === block.key,
|
||||
'gray-300': subscription.key !== block.key,
|
||||
}"
|
||||
v-html="icons.plus"
|
||||
>
|
||||
</div>
|
||||
<div class="small" v-html="$t('earn2Gems')"></div>
|
||||
<div
|
||||
class="small"
|
||||
:class="{ 'purple-200': subscription.key === block.key }"
|
||||
v-html="$t('earn2Gems')">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -185,7 +209,7 @@
|
||||
color: $gray-200;
|
||||
}
|
||||
|
||||
.teal-1 strong {
|
||||
.teal-1 strong, .purple-200 strong {
|
||||
color: $yellow-5 !important;
|
||||
}
|
||||
}
|
||||
@@ -245,12 +269,16 @@
|
||||
width: 448px;
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 1px 3px 0px rgba(26, 24, 29, 0.12), 0px 1px 2px 0px rgba(26, 24, 29, 0.24);
|
||||
box-shadow: 0px 1px 3px 0px rgba($black, 0.12), 0px 1px 2px 0px rgba($black, 0.24);
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 3px 6px 0px rgba($black, 0.16), 0px 3px 6px 0px rgba($black, 0.24);
|
||||
}
|
||||
|
||||
&.final {
|
||||
height: 184px;
|
||||
background: linear-gradient(90deg, rgba(119, 244, 199, 1), rgba(114, 207, 255, 1));
|
||||
background: linear-gradient(90deg, rgba($green-500, 1), rgba(114, 207, 255, 1));
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
||||
@@ -98,7 +98,7 @@
|
||||
"paymentYouSentSubscription": "You sent <strong><%- name %></strong><br> a <%= months %> month(s) Habitica subscription.",
|
||||
"paymentSubBilling": "Your subscription will be billed <strong>$<%= amount %></strong> every <strong><%= months %> months</strong>.",
|
||||
"groupsPaymentSubBilling": "Your next billing date is <strong><%= renewalDate %></strong>.",
|
||||
"paymentSubBillingWithMethod": "Your subscription will be billed <strong>$<%= amount %></strong> every <strong><%= months %> months</strong> via <strong><%= paymentMethod %></strong>.",
|
||||
"paymentSubBillingWithMethod": "Your subscription will be billed<br><strong>$<%= amount %>.00 USD</strong> every <strong><%= months %> months</strong> via <strong><%= paymentMethod %></strong>",
|
||||
"paymentAutoRenew": "This subscription will auto-renew until it is canceled. If you need to cancel this subscription, you can do so from your settings.",
|
||||
"groupsPaymentAutoRenew": "This subscription will auto-renew until it is canceled. If you need to cancel, you can do so from the Group Billing tab.",
|
||||
"paymentCanceledDisputes": "We’ve sent a cancelation confirmation to your email. If you don’t see the email, please contact us to prevent future billing disputes.",
|
||||
|
||||
@@ -186,8 +186,8 @@
|
||||
"gemCapExtra": "Gem Cap Bonus",
|
||||
"mysticHourglasses": "Mystic Hourglasses:",
|
||||
"mysticHourglassesTooltip": "Mystic Hourglasses",
|
||||
"nextHourglass": "Next Hourglass",
|
||||
"nextHourglassDescription": "Subscribers receive Mystic Hourglasses within\nthe first three days of the month.",
|
||||
"nextHourglass": "Next Mystic Hourglass Delivery",
|
||||
"nextHourglassDescription": "Subscribers receive a Mystic Hourglass, a Mystery Gear Set, and Gems restocked in the Market within the first two days of the month",
|
||||
"paypal": "PayPal",
|
||||
"amazonPayments": "Amazon Payments",
|
||||
"amazonPaymentsRecurring": "Ticking the checkbox below is necessary for your subscription to be created. It allows your Amazon account to be used for ongoing payments for <strong>this</strong> subscription. It will not cause your Amazon account to be automatically used for any future purchases.",
|
||||
|
||||
@@ -172,7 +172,7 @@
|
||||
"mysterySet301703": "Peacock Steampunk Set",
|
||||
"mysterySet301704": "Pheasant Steampunk Set",
|
||||
"mysterySetwondercon": "Wondercon",
|
||||
"subUpdateCard": "Update Credit Card",
|
||||
"subUpdateCard": "Edit Credit Card",
|
||||
"subUpdateTitle": "Update",
|
||||
"notEnoughHourglasses": "You don't have enough Mystic Hourglasses.",
|
||||
"backgroundAlreadyOwned": "Background already owned.",
|
||||
@@ -227,10 +227,10 @@
|
||||
"subscriptionCanceled": "Your subscription is canceled",
|
||||
"subscriptionInactiveDate": "Your subscription benefits will become inactive on <br><strong><%= date %></strong>",
|
||||
"subscriptionStats": "Subscription Stats",
|
||||
"subMonths": "Sub Months",
|
||||
"subMonths": "Months Subscribed",
|
||||
"needToUpdateCard": "Need to update your card?",
|
||||
"readyToResubscribe": "Are you ready to resubscribe?",
|
||||
"cancelYourSubscription": "Cancel your subscription?",
|
||||
"cancelYourSubscription": "Need to cancel your subscription?",
|
||||
"cancelSubAlternatives": "If you're having technical problems or Habitica doesn't seem to be working out for you, please consider <a href='mailto:admin@habitica.com'>contacting us</a>. We want to help you get the most from Habitica.",
|
||||
"sendAGift": "Send Gift",
|
||||
"haveNonRecurringSub": "You have a non-recurring gift subscription.",
|
||||
@@ -240,6 +240,7 @@
|
||||
"unlockNGems": "Unlock <strong><%= count %> Gems</strong> per month instantly",
|
||||
"earn2Gems": "Earn <strong>+2 Gems</strong> every month you're subscribed",
|
||||
"maxGemCap": "Max <strong>Gem Cap</strong>",
|
||||
"monthlyGemsLabel": "Monthly Gems",
|
||||
"continueGiftSubBenefits": "Want to continue your benefits? You can start a new subscription before your gifted one runs out to keep your benefits active.",
|
||||
"subscriptionCreditConversion": "Starting a new subscription will convert any remaining months to credit that will be used after the recurring subscription is canceled.",
|
||||
"monthlyGems": "Monthly Gems:",
|
||||
|
||||
Reference in New Issue
Block a user