gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: badges (#54670)

Browse Source 
Co-authored-by: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com>
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
Sem Bauke
2024-05-13 19:00:24 +02:00
committed by GitHub
parent e1215596dd
commit d420db7102
8 changed files with 924 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/i18n/locales/english/translations.json
+4
View File
@@ -299,10 +299,14 @@
"username-change-privacy": "{{username}} needs to change their privacy setting in order for you to view their portfolio.",
"supporter": "Supporter",
"contributor": "Top Contributor",
"contributor-prolific": "Among most prolific volunteers in {{year}}",
"no-certs": "No certifications have been earned under the current curriculum",
"fcc-certs": "freeCodeCamp Certifications",
"longest-streak": "Longest Streak:",
"current-streak": "Current Streak:",
"portfolio": "Portfolio",
"badges": "Badges",
"donated": "Donated to the community",
"projects": "Projects",
"stats": "Stats",
"timeline": "Timeline",
client/src/assets/icons/supporter-badge-emblem.tsx
+394
View File
@@ -0,0 +1,394 @@
import React from 'react';
function SupporterBadgeEmblem(
props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
): JSX.Element {
return (
<svg
width='560'
height='560'
viewBox='0 0 560 560'
fill='none'
{...props}
xmlns='http://www.w3.org/2000/svg'
>
<path
fillRule='evenodd'
clipRule='evenodd'
d='M170 165V354.158L276.334 416.367L389.177 354.158V165H170ZM219.279 210.167C219.276 209.209 218.612 208.257 217.948 207.596C216.991 206.935 215.997 206.608 215.042 206.61C212.102 206.616 207.792 209.658 202.624 215.514C188.262 231.9 180.924 247.772 181.221 271.177C181.543 294.571 187.276 311.737 199.957 327.281C206.47 335.481 211.458 339.695 215.022 339.687C215.977 339.687 217.302 339.02 217.923 338.356C218.584 337.399 219.242 336.405 219.242 335.45C219.236 333.501 217.906 331.224 214.667 328.329C199.263 313.657 191.337 294.726 191.281 271.154C191.23 249.848 198.766 232.182 213.746 217.757C217.338 214.068 219.282 211.822 219.279 210.167ZM296.632 275.371C295.171 274.998 295.646 272.882 296.432 269.38C298.673 259.398 303.442 238.157 273.049 213.965C273.049 213.965 278.435 231.08 251.276 269.273C225.537 305.437 259.401 327.752 263.046 330.007C263.245 330.135 263.358 330.196 263.358 330.196C263.358 330.196 263.249 330.132 263.046 330.007C260.711 328.499 246.617 317.633 266.352 285.419C267.51 283.503 268.776 281.641 270.151 279.62L270.151 279.62C273.327 274.951 277.083 269.429 281.429 260.409C281.429 260.409 286.942 268.191 284.064 285.063C280.255 307.622 297.8 304.508 302.139 303.738C302.704 303.638 303.045 303.577 303.086 303.618C310.962 312.893 296.971 329.066 295.61 330.151C295.539 330.198 295.516 330.213 295.548 330.196C295.564 330.186 295.585 330.171 295.61 330.151L295.617 330.147C297.654 328.79 336.343 303.03 307.045 264.957C306.461 265.541 305.828 266.732 305.094 268.11C303.215 271.642 300.679 276.407 296.632 275.371ZM340.446 210.149C340.449 209.192 341.113 208.24 341.776 207.579C342.734 206.918 343.728 206.59 344.683 206.593C347.623 206.599 351.933 209.641 357.101 215.496C371.463 231.882 378.801 247.754 378.504 271.16C378.182 294.554 372.449 311.719 359.768 327.264C353.255 335.464 348.267 339.678 344.703 339.67C343.748 339.667 342.423 339.003 341.802 338.339C341.141 337.382 340.483 336.387 340.483 335.433C340.489 333.483 341.819 331.207 345.058 328.312C360.462 313.64 368.387 294.709 368.444 271.137C368.495 249.831 360.959 232.162 345.979 217.739C342.387 214.05 340.443 211.805 340.446 210.149Z'
fill='var(--primary-color)'
/>
<circle
cx='280'
cy='280'
r='277'
stroke='var(--primary-color)'
strokeWidth='6'
/>
<path
d='M179.307 84.7228C179.307 84.7228 43.708 159.054 72.0892 320.332C94.921 450.074 259.933 494.565 259.933 494.565'
stroke='var(--primary-color)'
strokeWidth='3'
/>
<path
d='M231.895 460.536C227.21 450.093 214.465 437.01 214.465 437.01C214.465 437.01 213.898 455.752 218.947 466.042C223.755 475.842 237.871 486.564 237.871 486.564C237.871 486.564 236.162 470.045 231.895 460.536Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M208.683 488.623C197.679 491.773 182.914 502.524 182.914 502.524C182.914 502.524 201.384 505.755 212.288 502.224C222.674 498.86 235.297 486.416 235.297 486.416C235.297 486.416 218.703 485.755 208.683 488.623Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M174.595 469.69C163.221 470.972 146.877 479.126 146.877 479.126C146.877 479.126 164.556 485.375 175.895 483.7C186.694 482.106 201.207 471.927 201.207 471.927C201.207 471.927 184.952 468.523 174.595 469.69Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M142.106 447.479C130.661 447.544 113.542 453.915 113.542 453.915C113.542 453.915 130.457 462.008 141.909 461.548C152.817 461.11 168.329 452.532 168.329 452.532C168.329 452.532 152.529 447.42 142.106 447.479Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M115.752 421.624C104.457 419.779 86.5155 423.205 86.5155 423.205C86.5155 423.205 101.843 434.006 113.212 435.463C124.04 436.851 140.766 430.98 140.766 430.98C140.766 430.98 126.039 423.304 115.752 421.624Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M92.1644 395.339C81.3556 391.576 63.0924 391.859 63.0924 391.859C63.0924 391.859 76.3294 405.139 87.2772 408.534C97.7041 411.767 115.191 408.865 115.191 408.865C115.191 408.865 102.008 398.766 92.1644 395.339Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M76.8814 363.743C66.7717 358.378 48.6785 355.877 48.6785 355.877C48.6785 355.877 59.7387 371.018 70.0418 376.04C79.8548 380.823 97.58 380.619 97.58 380.619C97.58 380.619 86.0881 368.63 76.8814 363.743Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M64.0831 329.644C56.4159 323.343 41.4704 318.1 41.4704 318.1C41.4704 318.1 48.2616 332.873 56.1525 338.916C63.668 344.671 78.7667 347.551 78.7667 347.551C78.7667 347.551 71.0657 335.383 64.0831 329.644Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M58.439 293.141C51.8304 285.737 37.8673 278.261 37.8673 278.261C37.8673 278.261 42.3092 293.901 49.1785 301.084C55.7209 307.926 70.1982 313.09 70.1982 313.09C70.1982 313.09 64.4573 299.884 58.439 293.141Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M58.7179 264.872C53.0715 256.71 40.1355 247.572 40.1355 247.572C40.1355 247.572 42.6172 263.64 48.5495 271.615C54.1996 279.21 67.9306 286.118 67.9306 286.118C67.9306 286.118 63.8599 272.305 58.7179 264.872Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M62.0416 231.48C57.3076 222.758 45.4316 212.279 45.4316 212.279C45.4316 212.279 46.1675 228.521 51.2059 237.088C56.0046 245.248 68.9113 253.595 68.9113 253.595C68.9113 253.595 66.3528 239.424 62.0416 231.48Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M73.1342 203.987C70.8266 194.334 62.0777 181.132 62.0777 181.132C62.0777 181.132 58.5723 197.008 61.2143 206.59C63.7305 215.715 74.028 227.127 74.028 227.127C74.028 227.127 75.2357 212.777 73.1342 203.987Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M82.9994 176.932C81.2427 168.791 74.3696 157.705 74.3696 157.705C74.3696 157.705 71.4232 171.163 73.4478 179.242C75.3761 186.936 83.5034 196.493 83.5034 196.493C83.5034 196.493 84.5992 184.347 82.9994 176.932Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M98.7276 148.748C97.6485 140.489 91.7131 128.875 91.7131 128.875C91.7131 128.875 87.6667 142.044 89.018 150.262C90.3051 158.089 97.6164 168.284 97.6164 168.284C97.6164 168.284 99.7104 156.269 98.7276 148.748Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M113.956 126.926C113.882 118.597 109.391 106.352 109.391 106.352C109.391 106.352 103.785 118.936 104.135 127.257C104.468 135.183 110.496 146.185 110.496 146.185C110.496 146.185 114.025 134.511 113.956 126.926Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M134.574 107.572C135.477 99.2916 132.455 86.6033 132.455 86.6033C132.455 86.6033 125.411 98.4429 124.782 106.748C124.182 114.657 128.877 126.291 128.877 126.291C128.877 126.291 133.751 115.112 134.574 107.572Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M154.396 92.9433C157.357 85.1583 157.63 72.118 157.63 72.118C157.63 72.118 147.83 81.8 145.127 89.6779C142.554 97.1811 144.165 109.622 144.165 109.622C144.165 109.622 151.699 100.033 154.396 92.9433Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M171.812 80.8387C174.193 74.5498 174.391 64.0074 174.391 64.0074C174.391 64.0074 166.482 71.8179 164.311 78.1824C162.243 84.2441 163.568 94.3056 163.568 94.3056C163.568 94.3056 169.644 86.5659 171.812 80.8387Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M198.692 443.65C196.117 432.498 186.145 417.195 186.145 417.195C186.145 417.195 181.962 435.473 184.923 446.545C187.744 457.091 199.517 470.343 199.517 470.343C199.517 470.343 201.038 453.806 198.692 443.65Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M170.613 427.16C169.377 416.473 161.497 400.976 161.497 400.976C161.497 400.976 155.45 417.407 157.066 428.07C158.605 438.227 168.444 452.051 168.444 452.051C168.444 452.051 171.739 436.892 170.613 427.16Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M146.046 406.015C147.234 395.323 143.023 378.455 143.023 378.455C143.023 378.455 133.451 393.115 132.639 403.869C131.865 414.112 138.359 429.789 138.359 429.789C138.359 429.789 144.964 415.753 146.046 406.015Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M126.252 386.156C129.149 376.737 128.489 361.363 128.489 361.363C128.489 361.363 117.693 373.605 115.108 383.112C112.646 392.166 115.476 406.672 115.476 406.672C115.476 406.672 123.615 394.734 126.252 386.156Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M108.288 363.605C111.185 354.186 110.525 338.812 110.525 338.812C110.525 338.812 99.7288 351.054 97.144 360.561C94.6822 369.615 97.5123 384.121 97.5123 384.121C97.5123 384.121 105.651 372.183 108.288 363.605Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M95.1357 330.802C100.218 322.359 103.285 307.28 103.285 307.28C103.285 307.28 89.8552 316.557 85.0543 325.16C80.4818 333.354 79.7303 348.114 79.7303 348.114C79.7303 348.114 90.5072 338.491 95.1357 330.802Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M91.6716 299.947C99.1812 293.566 106.898 280.252 106.898 280.252C106.898 280.252 91.21 284.762 83.9161 291.384C76.9692 297.692 71.5493 311.442 71.5493 311.442C71.5493 311.442 84.8326 305.758 91.6716 299.947Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M88.9686 274.719C96.4782 268.338 104.195 255.025 104.195 255.025C104.195 255.025 88.507 259.534 81.2131 266.157C74.2662 272.464 68.8463 286.214 68.8463 286.214C68.8463 286.214 82.1296 280.53 88.9686 274.719Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M89.2022 245.76C96.6527 241.602 105.493 231.427 105.493 231.427C105.493 231.427 91.476 232.409 84.1651 236.819C77.202 241.019 70.2209 252.009 70.2209 252.009C70.2209 252.009 82.417 249.548 89.2022 245.76Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M96.577 219.431C104.963 217.854 116.577 211.013 116.577 211.013C116.577 211.013 102.973 207.493 94.6403 209.353C86.7038 211.124 76.5941 219.328 76.5941 219.328C76.5941 219.328 88.9404 220.867 96.577 219.431Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M106.488 194.203C114.873 192.626 126.488 185.786 126.488 185.786C126.488 185.786 112.884 182.266 104.551 184.125C96.6147 185.896 86.505 194.1 86.505 194.1C86.505 194.1 98.8513 195.64 106.488 194.203Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M117.121 170.92C125.64 170.433 138.037 165.141 138.037 165.141C138.037 165.141 124.998 159.902 116.495 160.676C108.397 161.413 97.3169 168.25 97.3169 168.25C97.3169 168.25 109.363 171.363 117.121 170.92Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M131.222 150.143C139.754 150.294 152.511 145.943 152.511 145.943C152.511 145.943 139.9 139.745 131.363 139.882C123.232 140.012 111.673 146.002 111.673 146.002C111.673 146.002 123.453 150.006 131.222 150.143Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M147.281 132.213C155.793 132.813 168.762 129.14 168.762 129.14C168.762 129.14 156.495 122.286 147.962 121.973C139.836 121.674 127.977 127.047 127.977 127.047C127.977 127.047 139.53 131.666 147.281 132.213Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M162.636 117.122C170.038 118.972 182.553 117.495 182.553 117.495C182.553 117.495 173.496 109.222 165.998 107.637C158.857 106.128 146.871 109.363 146.871 109.363C146.871 109.363 155.894 115.437 162.636 117.122Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M181.862 100.821C189.052 101.86 200.293 99.5476 200.293 99.5476C200.293 99.5476 190.303 92.9652 183.077 92.1685C176.196 91.4096 165.792 95.2342 165.792 95.2342C165.792 95.2342 175.314 99.8748 181.862 100.821Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M194.481 83.8153C202.449 80.7628 212.651 71.954 212.651 71.954C212.651 71.954 198.637 70.9255 190.772 74.2466C183.28 77.4096 174.802 87.29 174.802 87.29C174.802 87.29 187.225 86.5951 194.481 83.8153Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M379.992 84.7228C379.992 84.7228 516.199 159.054 487.691 320.332C464.757 450.074 299.005 494.565 299.005 494.565'
stroke='var(--primary-color)'
strokeWidth='3'
/>
<path
d='M327.168 460.536C331.875 450.093 344.677 437.01 344.677 437.01C344.677 437.01 345.246 455.752 340.175 466.042C335.345 475.842 321.165 486.564 321.165 486.564C321.165 486.564 322.883 470.045 327.168 460.536Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M350.485 488.623C361.538 491.773 376.369 502.524 376.369 502.524C376.369 502.524 357.817 505.755 346.863 502.224C336.431 498.86 323.751 486.416 323.751 486.416C323.751 486.416 340.419 485.755 350.485 488.623Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M384.726 469.69C396.15 470.972 412.568 479.126 412.568 479.126C412.568 479.126 394.81 485.375 383.42 483.7C372.572 482.106 357.995 471.927 357.995 471.927C357.995 471.927 374.322 468.523 384.726 469.69Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M417.36 447.479C428.857 447.544 446.052 453.915 446.052 453.915C446.052 453.915 429.062 462.008 417.558 461.548C406.601 461.11 391.019 452.532 391.019 452.532C391.019 452.532 406.891 447.42 417.36 447.479Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M443.832 421.624C455.178 419.779 473.2 423.205 473.2 423.205C473.2 423.205 457.804 434.006 446.384 435.463C435.507 436.851 418.706 430.98 418.706 430.98C418.706 430.98 433.499 423.304 443.832 421.624Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M467.526 395.339C478.383 391.576 496.728 391.859 496.728 391.859C496.728 391.859 483.432 405.139 472.435 408.534C461.961 411.767 444.395 408.865 444.395 408.865C444.395 408.865 457.638 398.766 467.526 395.339Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M482.877 363.743C493.032 358.378 511.206 355.877 511.206 355.877C511.206 355.877 500.097 371.018 489.747 376.04C479.89 380.823 462.086 380.619 462.086 380.619C462.086 380.619 473.629 368.63 482.877 363.743Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M495.733 329.644C503.434 323.343 518.447 318.1 518.447 318.1C518.447 318.1 511.625 332.873 503.699 338.916C496.15 344.671 480.983 347.551 480.983 347.551C480.983 347.551 488.719 335.383 495.733 329.644Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M501.402 293.141C508.04 285.737 522.066 278.261 522.066 278.261C522.066 278.261 517.604 293.901 510.704 301.084C504.132 307.926 489.59 313.09 489.59 313.09C489.59 313.09 495.357 299.884 501.402 293.141Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M501.122 264.872C506.794 256.71 519.788 247.572 519.788 247.572C519.788 247.572 517.295 263.64 511.336 271.615C505.661 279.21 491.868 286.118 491.868 286.118C491.868 286.118 495.957 272.305 501.122 264.872Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M497.783 231.48C502.538 222.758 514.468 212.279 514.468 212.279C514.468 212.279 513.729 228.521 508.668 237.088C503.847 245.248 490.883 253.595 490.883 253.595C490.883 253.595 493.453 239.424 497.783 231.48Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M486.641 203.987C488.959 194.334 497.747 181.132 497.747 181.132C497.747 181.132 501.268 197.008 498.614 206.59C496.087 215.715 485.743 227.127 485.743 227.127C485.743 227.127 484.53 212.777 486.641 203.987Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M476.732 176.932C478.496 168.791 485.4 157.705 485.4 157.705C485.4 157.705 488.36 171.163 486.326 179.242C484.389 186.936 476.226 196.493 476.226 196.493C476.226 196.493 475.125 184.347 476.732 176.932Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M460.933 148.748C462.017 140.489 467.979 128.875 467.979 128.875C467.979 128.875 472.043 142.044 470.686 150.262C469.393 158.089 462.049 168.284 462.049 168.284C462.049 168.284 459.946 156.269 460.933 148.748Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M445.636 126.926C445.711 118.597 450.222 106.352 450.222 106.352C450.222 106.352 455.853 118.936 455.501 127.257C455.166 135.183 449.111 146.185 449.111 146.185C449.111 146.185 445.567 134.511 445.636 126.926Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M424.926 107.572C424.018 99.2916 427.054 86.6033 427.054 86.6033C427.054 86.6033 434.13 98.4429 434.762 106.748C435.364 114.657 430.649 126.291 430.649 126.291C430.649 126.291 425.752 115.112 424.926 107.572Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M405.015 92.9433C402.041 85.1583 401.766 72.118 401.766 72.118C401.766 72.118 411.611 81.8 414.325 89.6779C416.91 97.181 415.292 109.622 415.292 109.622C415.292 109.622 407.724 100.033 405.015 92.9433Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M387.521 80.8387C385.13 74.5498 384.931 64.0074 384.931 64.0074C384.931 64.0074 392.875 71.8179 395.055 78.1824C397.133 84.2441 395.802 94.3056 395.802 94.3056C395.802 94.3056 389.699 86.5659 387.521 80.8387Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M360.52 443.65C363.107 432.498 373.123 417.195 373.123 417.195C373.123 417.195 377.326 435.473 374.351 446.545C371.518 457.091 359.691 470.343 359.691 470.343C359.691 470.343 358.164 453.806 360.52 443.65Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M388.725 427.16C389.967 416.473 397.882 400.976 397.882 400.976C397.882 400.976 403.956 417.407 402.333 428.07C400.787 438.227 390.904 452.051 390.904 452.051C390.904 452.051 387.594 436.892 388.725 427.16Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M413.403 406.015C412.209 395.323 416.439 378.455 416.439 378.455C416.439 378.455 426.054 393.115 426.87 403.869C427.647 414.112 421.124 429.789 421.124 429.789C421.124 429.789 414.489 415.753 413.403 406.015Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M433.285 386.156C430.376 376.737 431.038 361.363 431.038 361.363C431.038 361.363 441.883 373.605 444.479 383.112C446.952 392.166 444.109 406.672 444.109 406.672C444.109 406.672 435.935 394.734 433.285 386.156Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M451.329 363.605C448.42 354.186 449.082 338.812 449.082 338.812C449.082 338.812 459.927 351.054 462.524 360.561C464.996 369.615 462.154 384.121 462.154 384.121C462.154 384.121 453.979 372.183 451.329 363.605Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M464.541 330.802C459.436 322.359 456.355 307.28 456.355 307.28C456.355 307.28 469.845 316.557 474.667 325.16C479.26 333.354 480.015 348.114 480.015 348.114C480.015 348.114 469.19 338.491 464.541 330.802Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M468.021 299.947C460.477 293.566 452.726 280.252 452.726 280.252C452.726 280.252 468.484 284.762 475.811 291.384C482.789 297.692 488.233 311.442 488.233 311.442C488.233 311.442 474.89 305.758 468.021 299.947Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M470.736 274.719C463.192 268.338 455.441 255.025 455.441 255.025C455.441 255.025 471.199 259.534 478.526 266.157C485.504 272.464 490.948 286.214 490.948 286.214C490.948 286.214 477.605 280.53 470.736 274.719Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M470.501 245.76C463.017 241.602 454.137 231.427 454.137 231.427C454.137 231.427 468.217 232.409 475.561 236.819C482.555 241.019 489.567 252.009 489.567 252.009C489.567 252.009 477.317 249.548 470.501 245.76Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M463.093 219.431C454.67 217.854 443.004 211.013 443.004 211.013C443.004 211.013 456.668 207.493 465.039 209.353C473.011 211.124 483.166 219.328 483.166 219.328C483.166 219.328 470.764 220.867 463.093 219.431Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M453.138 194.203C444.715 192.626 433.048 185.786 433.048 185.786C433.048 185.786 446.713 182.266 455.083 184.125C463.055 185.896 473.21 194.1 473.21 194.1C473.21 194.1 460.809 195.64 453.138 194.203Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M442.457 170.92C433.9 170.433 421.448 165.141 421.448 165.141C421.448 165.141 434.545 159.902 443.086 160.676C451.22 161.413 462.35 168.25 462.35 168.25C462.35 168.25 450.25 171.363 442.457 170.92Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M428.292 150.143C419.723 150.294 406.908 145.943 406.908 145.943C406.908 145.943 419.576 139.745 428.151 139.882C436.318 140.012 447.929 146.002 447.929 146.002C447.929 146.002 436.097 150.006 428.292 150.143Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M412.162 132.213C403.612 132.813 390.585 129.14 390.585 129.14C390.585 129.14 402.907 122.286 411.477 121.973C419.64 121.674 431.552 127.047 431.552 127.047C431.552 127.047 419.948 131.666 412.162 132.213Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M396.738 117.122C389.303 118.972 376.732 117.495 376.732 117.495C376.732 117.495 385.829 109.222 393.361 107.637C400.534 106.128 412.573 109.363 412.573 109.363C412.573 109.363 403.51 115.437 396.738 117.122Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M377.426 100.821C370.204 101.86 358.913 99.5476 358.913 99.5476C358.913 99.5476 368.947 92.9652 376.205 92.1685C383.117 91.4096 393.568 95.2342 393.568 95.2342C393.568 95.2342 384.003 99.8748 377.426 100.821Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M364.75 83.8153C356.747 80.7628 346.499 71.954 346.499 71.954C346.499 71.954 360.576 70.9255 368.476 74.2466C376.001 77.4096 384.517 87.29 384.517 87.29C384.517 87.29 372.039 86.5951 364.75 83.8153Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
</svg>
);
}
SupporterBadgeEmblem.displayName = 'SupporterBadgeEmblem';
export default SupporterBadgeEmblem;
client/src/assets/icons/top-contributor-badge-emblem.tsx
+424
View File
@@ -0,0 +1,424 @@
import React from 'react';
function TopContibutorBadgeEmblem(
props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
): JSX.Element {
return (
<svg
width='560'
height='578'
viewBox='0 0 560 578'
fill='none'
{...props}
xmlns='http://www.w3.org/2000/svg'
>
<path
d='M358.5 144H280V205.5H358.5L319 173.5L358.5 144Z'
stroke='var(--primary-color)'
strokeWidth='10'
/>
<circle
cx='280'
cy='280'
r='277'
stroke='var(--primary-color)'
strokeWidth='6'
/>
<path
fillRule='evenodd'
clipRule='evenodd'
d='M407 358C332.5 298.5 278 250.5 278 250.5C278 250.5 220.5 302.5 153.5 361C195.5 444 344.5 461 407 358ZM278 270L204 335.5L234 326L253.5 346.5L267.5 335.5L289.5 342.5L304.5 318L339 326L278 270Z'
fill='var(--primary-color)'
/>
<path
d='M278.004 139L278.004 255.483'
stroke='var(--primary-color)'
strokeWidth='4'
/>
<path
d='M379.992 84.7227C379.992 84.7227 516.199 159.054 487.691 320.332C469.562 422.887 362.199 472.176 318 488.329C274 496.5 259 512.5 248.5 526.5'
stroke='var(--primary-color)'
strokeWidth='3'
/>
<path
d='M327.168 460.536C331.875 450.093 334.098 432.622 344.677 437.01C355.275 441.406 345.246 455.752 340.175 466.042C335.345 475.842 321.165 486.564 321.165 486.564C321.165 486.564 322.883 470.045 327.168 460.536Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M299.569 467.732C304.029 457.183 305.843 439.664 316.521 443.803C327.219 447.949 317.53 462.526 312.701 472.932C308.102 482.843 294.178 493.894 294.178 493.894C294.178 493.894 295.507 477.34 299.569 467.732Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M350.485 488.623C361.538 491.773 379.107 491.394 376.369 502.524C373.619 513.707 357.817 505.755 346.863 502.224C336.431 498.86 323.751 486.416 323.751 486.416C323.751 486.416 340.419 485.755 350.485 488.623Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M322.229 500.307C332.786 504.849 350.259 506.728 346.116 517.415C341.953 528.153 327.302 518.238 316.892 513.33C306.978 508.656 296 494.687 296 494.687C296 494.687 312.615 496.17 322.229 500.307Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M384.726 469.69C396.15 470.972 413.422 467.702 412.567 479.126C411.709 490.601 394.81 485.375 383.42 483.701C372.572 482.106 357.994 471.927 357.994 471.927C357.994 471.927 374.322 468.523 384.726 469.69Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M417.36 447.479C428.857 447.544 445.692 442.469 446.052 453.915C446.413 465.41 429.062 462.008 417.558 461.548C406.601 461.111 391.019 452.532 391.019 452.532C391.019 452.532 406.891 447.42 417.36 447.479Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M443.832 421.624C455.178 419.779 470.948 411.983 473.2 423.205C475.461 434.472 457.804 434.006 446.384 435.463C435.507 436.851 418.707 430.98 418.707 430.98C418.707 430.98 433.499 423.304 443.832 421.624Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M467.526 395.339C478.383 391.576 492.592 381.19 496.728 391.859C500.878 402.564 483.432 405.139 472.435 408.534C461.961 411.767 444.395 408.865 444.395 408.865C444.395 408.865 457.638 398.766 467.526 395.339Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M482.877 363.743C493.032 358.378 505.508 345.956 511.206 355.877C516.921 365.826 500.097 371.017 489.747 376.04C479.89 380.823 462.086 380.618 462.086 380.618C462.086 380.618 473.629 368.63 482.877 363.743Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M495.733 329.644C503.434 323.343 511.909 310.638 518.447 318.1C525 325.58 511.625 332.873 503.699 338.916C496.15 344.671 480.983 347.551 480.983 347.551C480.983 347.551 488.719 335.383 495.733 329.644Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M501.402 293.141C508.04 285.737 514.467 271.881 522.066 278.261C529.681 284.655 517.604 293.901 510.704 301.084C504.132 307.926 489.59 313.09 489.59 313.09C489.59 313.09 495.357 299.883 501.402 293.141Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M501.122 264.872C506.794 256.71 511.463 242.168 519.788 247.572C528.129 252.987 517.295 263.64 511.336 271.615C505.661 279.21 491.868 286.118 491.868 286.118C491.868 286.118 495.957 272.305 501.122 264.872Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M497.783 231.48C502.538 222.758 505.609 207.796 514.468 212.279C523.343 216.769 513.729 228.521 508.668 237.088C503.847 245.248 490.883 253.595 490.883 253.595C490.883 253.595 493.453 239.424 497.783 231.48Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M486.641 203.987C488.959 194.334 488.021 179.095 497.747 181.132C507.492 183.172 501.268 197.008 498.614 206.589C496.087 215.715 485.743 227.127 485.743 227.127C485.743 227.127 484.53 212.777 486.641 203.987Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M476.732 176.932C478.496 168.791 477.242 156.501 485.4 157.705C493.734 158.936 488.36 171.163 486.326 179.242C484.389 186.936 476.225 196.493 476.225 196.493C476.225 196.493 475.125 184.347 476.732 176.932Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M460.933 148.748C462.017 140.489 459.747 128.347 467.979 128.875C476.389 129.414 472.043 142.044 470.686 150.262C469.393 158.089 462.049 168.284 462.049 168.284C462.049 168.284 459.946 156.269 460.933 148.748Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M445.636 126.926C445.711 118.597 441.983 106.824 450.222 106.352C458.64 105.869 455.853 118.936 455.501 127.257C455.166 135.183 449.111 146.185 449.111 146.185C449.111 146.185 445.567 134.511 445.636 126.926Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M424.926 107.571C424.019 99.2915 418.926 88.0446 427.054 86.6032C435.362 85.13 434.13 98.4429 434.762 106.747C435.364 114.657 430.649 126.291 430.649 126.291C430.649 126.291 425.752 115.112 424.926 107.571Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M405.015 92.9433C402.041 85.1583 394.265 75.5773 401.766 72.118C409.437 68.5799 411.611 81.8 414.325 89.6779C416.91 97.181 415.292 109.622 415.292 109.622C415.292 109.622 407.724 100.033 405.015 92.9433Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M387.521 80.8387C385.13 74.5498 378.859 66.7764 384.931 64.0073C391.133 61.1789 392.875 71.8179 395.056 78.1824C397.133 84.2441 395.802 94.3056 395.802 94.3056C395.802 94.3056 389.699 86.5658 387.521 80.8387Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M360.52 443.65C363.107 432.498 361.889 414.933 373.123 417.195C384.379 419.461 377.326 435.473 374.351 446.545C371.518 457.091 359.691 470.343 359.691 470.343C359.691 470.343 358.164 453.806 360.52 443.65Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M388.725 427.16C389.967 416.473 387.09 399.781 397.882 400.976C408.555 402.158 403.956 417.407 402.333 428.07C400.787 438.227 390.904 452.051 390.904 452.051C390.904 452.051 387.594 436.892 388.725 427.16Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M413.403 406.015C412.209 395.323 405.648 379.719 416.439 378.455C427.117 377.204 426.054 393.115 426.87 403.869C427.647 414.112 421.124 429.789 421.124 429.789C421.124 429.789 414.489 415.753 413.403 406.015Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M433.285 386.156C430.375 376.736 421.951 364.911 431.038 361.363C440.356 357.723 441.883 373.605 444.479 383.111C446.952 392.166 444.109 406.672 444.109 406.672C444.109 406.672 435.934 394.734 433.285 386.156Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M451.329 363.605C448.42 354.186 439.996 342.36 449.082 338.812C458.401 335.172 459.927 351.054 462.524 360.561C464.996 369.615 462.154 384.121 462.154 384.121C462.154 384.121 453.979 372.183 451.329 363.605Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M464.541 330.802C459.436 322.359 448.401 312.934 456.355 307.28C464.516 301.477 469.845 316.557 474.667 325.16C479.26 333.353 480.015 348.114 480.015 348.114C480.015 348.114 469.19 338.491 464.541 330.802Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M468.021 299.947C460.477 293.566 447.016 288.164 452.726 280.252C458.591 272.128 468.484 284.762 475.811 291.384C482.789 297.692 488.233 311.442 488.233 311.442C488.233 311.442 474.89 305.758 468.021 299.947Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M470.736 274.719C463.192 268.338 449.731 262.936 455.441 255.025C461.306 246.9 471.199 259.534 478.526 266.157C485.504 272.464 490.948 286.214 490.948 286.214C490.948 286.214 477.605 280.53 470.736 274.719Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M470.501 245.76C463.017 241.602 450.422 239.074 454.137 231.427C457.908 223.663 468.217 232.409 475.561 236.819C482.555 241.019 489.567 252.009 489.567 252.009C489.567 252.009 477.317 249.547 470.501 245.76Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M463.093 219.431C454.67 217.854 441.917 219.437 443.004 211.013C444.106 202.462 456.668 207.493 465.039 209.353C473.011 211.124 483.166 219.327 483.166 219.327C483.166 219.327 470.764 220.867 463.093 219.431Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M453.138 194.203C444.715 192.626 431.962 194.209 433.048 185.786C434.151 177.235 446.713 182.265 455.083 184.125C463.055 185.896 473.21 194.1 473.21 194.1C473.21 194.1 460.809 195.639 453.138 194.203Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M442.457 170.919C433.9 170.433 421.45 173.631 421.448 165.141C421.445 156.524 434.545 159.902 443.086 160.676C451.22 161.413 462.35 168.25 462.35 168.25C462.35 168.25 450.25 171.363 442.457 170.919Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M428.292 150.143C419.723 150.294 407.542 154.407 406.908 145.943C406.264 137.354 419.576 139.745 428.151 139.882C436.318 140.012 447.929 146.002 447.929 146.002C447.929 146.002 436.096 150.006 428.292 150.143Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M412.162 132.212C403.612 132.813 391.662 137.558 390.585 129.14C389.492 120.599 402.907 122.286 411.477 121.973C419.64 121.674 431.552 127.047 431.552 127.047C431.552 127.047 419.948 131.666 412.162 132.212Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M396.738 117.122C389.302 118.972 378.408 125.096 376.732 117.495C375.11 110.142 385.829 109.222 393.36 107.637C400.534 106.128 412.573 109.363 412.573 109.363C412.573 109.363 403.51 115.437 396.738 117.122Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M377.426 100.821C370.204 101.86 360.347 106.628 358.913 99.5476C357.457 92.3652 368.947 92.9652 376.205 92.1685C383.117 91.4097 393.568 95.2342 393.568 95.2342C393.568 95.2342 384.003 99.8748 377.426 100.821Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M364.75 83.8153C356.747 80.7628 343.919 80.0512 346.499 71.954C349.117 63.7331 360.576 70.9255 368.476 74.2466C376.001 77.4096 384.517 87.29 384.517 87.29C384.517 87.29 372.039 86.5951 364.75 83.8153Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M173.385 87.0542C173.385 87.0542 46.9598 165.891 79.6539 326.115C100.444 428.002 203.899 473.672 246.344 488.338C288.318 495.034 303.093 510.523 313.535 524.163'
stroke='var(--primary-color)'
strokeWidth='3'
/>
<path
d='M236.678 460.868C231.851 450.59 229.128 433.204 219.26 437.942C209.375 442.69 219.382 456.691 224.549 466.806C229.471 476.439 243.283 486.68 243.283 486.68C243.283 486.68 241.073 470.229 236.678 460.868Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M263.076 466.446C258.159 456.21 255.285 438.848 245.459 443.673C235.615 448.506 245.744 462.42 251 472.489C256.005 482.079 269.906 492.199 269.906 492.199C269.906 492.199 267.553 475.768 263.076 466.446Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M244.749 501.986C234.966 507.751 217.91 512.086 223.549 521.468C229.199 530.867 242.205 519.596 251.793 513.507C260.924 507.708 269.832 493 269.832 493C269.832 493 253.659 496.735 244.749 501.986Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M215.577 489.717C205.217 493.235 188.558 493.443 191.544 504.475C194.543 515.559 209.235 507.084 219.488 503.189C229.253 499.479 240.828 486.618 240.828 486.618C240.828 486.618 225.012 486.514 215.577 489.717Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M182.469 471.941C171.691 473.603 155.212 470.913 156.424 482.301C157.642 493.74 173.468 487.952 184.2 485.899C194.422 483.942 207.874 473.283 207.874 473.283C207.874 473.283 192.285 470.427 182.469 471.941Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M150.768 450.834C139.878 451.283 123.749 446.773 123.812 458.224C123.875 469.725 140.194 465.744 151.077 464.901C161.442 464.097 175.902 455.003 175.902 455.003C175.902 455.003 160.685 450.424 150.768 450.834Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M124.777 425.879C113.962 424.415 98.7471 417.15 97.0089 428.441C95.2639 439.776 111.976 438.72 122.847 439.795C133.201 440.819 148.911 434.39 148.911 434.39C148.911 434.39 134.626 427.213 124.777 425.879Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M101.402 400.403C90.9835 397.004 77.1559 387.1 73.613 397.9C70.0582 408.737 86.6783 410.728 97.2166 413.753C107.254 416.634 123.793 413.147 123.793 413.147C123.793 413.147 110.891 403.497 101.402 400.403Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M85.7446 369.339C75.9345 364.316 63.6765 352.319 58.6276 362.424C53.5639 372.559 69.6869 377.184 79.6691 381.858C89.1764 386.308 106.038 385.509 106.038 385.509C106.038 385.509 94.6786 373.914 85.7446 369.339Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M72.363 335.691C64.8442 329.651 56.3673 317.238 50.4363 324.913C44.4911 332.607 57.42 339.449 65.1425 345.223C72.4977 350.722 86.9681 353.093 86.9681 353.093C86.9681 353.093 79.2103 341.191 72.363 335.691Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M65.705 299.4C59.1548 292.222 52.5782 278.589 45.6031 285.22C38.6136 291.864 50.3816 300.701 57.1721 307.649C63.6395 314.267 77.5991 318.942 77.5991 318.942C77.5991 318.942 71.6701 305.936 65.705 299.4Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M64.974 271.139C59.3129 263.172 54.3769 248.794 46.68 254.474C38.9685 260.164 49.6082 270.449 55.5348 278.219C61.1795 285.62 74.4903 292.062 74.4903 292.062C74.4903 292.062 70.1295 278.395 64.974 271.139Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M66.9603 237.657C62.1476 229.098 58.7115 214.249 50.4763 219.024C42.226 223.809 51.749 235.232 56.8459 243.624C61.7003 251.618 74.2774 259.527 74.2774 259.527C74.2774 259.527 71.3431 245.45 66.9603 237.657Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M76.5474 209.808C74.0112 200.239 74.3627 184.978 65.2198 187.338C56.0595 189.703 62.4434 203.322 65.2954 212.809C68.0117 221.844 78.2137 232.903 78.2137 232.903C78.2137 232.903 78.8572 218.522 76.5474 209.808Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M84.9823 182.439C83.0235 174.362 83.7789 162.037 76.0919 163.514C68.2393 165.022 73.7622 177.062 75.9737 185.068C78.08 192.693 86.1513 201.971 86.1513 201.971C86.1513 201.971 86.7661 189.795 84.9823 182.439Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M98.9568 153.744C97.6387 145.527 99.3617 133.317 91.5809 134.119C83.6317 134.938 88.1942 147.416 89.7699 155.583C91.2706 163.362 98.5879 173.305 98.5879 173.305C98.5879 173.305 100.157 161.228 98.9568 153.744Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M112.68 131.425C112.316 123.104 115.433 111.213 107.61 111.016C99.6173 110.815 102.719 123.781 103.346 132.086C103.942 139.995 110.066 150.788 110.066 150.788C110.066 150.788 113.013 139.003 112.68 131.425Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M131.619 111.39C132.187 103.085 136.615 91.675 128.864 90.5061C120.941 89.3114 122.577 102.575 122.271 110.895C121.979 118.82 126.857 130.289 126.857 130.289C126.857 130.289 131.102 118.954 131.619 111.39Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M149.968 96.1058C152.511 88.2263 159.54 78.3914 152.312 75.1849C144.919 71.9053 143.326 85.1898 141.032 93.1536C138.847 100.738 140.819 113.118 140.819 113.118C140.819 113.118 147.651 103.282 149.968 96.1058Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M166.115 83.4241C168.159 77.0593 173.826 69.0812 167.976 66.5167C162 63.8973 160.725 74.5879 158.883 81.0213C157.129 87.1486 158.744 97.1594 158.744 97.1594C158.744 97.1594 164.253 89.2205 166.115 83.4241Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M204.485 445.108C201.641 434.049 202.176 416.455 191.612 419.09C181.027 421.731 188.274 437.497 191.483 448.464C194.539 458.908 206.211 471.756 206.211 471.756C206.211 471.756 207.074 455.178 204.485 445.108Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M177.182 429.57C175.628 418.931 177.765 402.154 167.583 403.709C157.513 405.246 162.407 420.332 164.321 430.935C166.144 441.033 175.994 454.519 175.994 454.519C175.994 454.519 178.596 439.259 177.182 429.57Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M153.056 409.263C153.81 398.538 159.476 382.725 149.208 381.822C139.047 380.928 140.615 396.794 140.221 407.569C139.846 417.832 146.578 433.28 146.578 433.28C146.578 433.28 152.37 419.031 153.056 409.263Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M133.519 390.081C135.944 380.57 143.508 368.471 134.774 365.228C125.817 361.902 124.931 377.825 122.806 387.412C120.782 396.544 123.987 410.946 123.987 410.946C123.987 410.946 131.311 398.742 133.519 390.081Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M115.629 368.147C118.053 358.636 125.618 346.537 116.884 343.294C107.927 339.968 107.04 355.891 104.916 365.479C102.892 374.61 106.097 389.012 106.097 389.012C106.097 389.012 113.421 376.808 115.629 368.147Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M101.956 335.806C106.495 327.197 116.617 317.41 108.882 312.025C100.945 306.499 96.4282 321.747 92.1626 330.506C88.0999 338.848 87.905 353.624 87.905 353.624C87.905 353.624 97.8219 343.645 101.956 335.806Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M97.5711 305.086C104.493 298.457 117.056 292.609 111.367 284.893C105.525 276.969 96.5966 289.926 89.8887 296.789C83.4999 303.326 78.8266 317.249 78.8266 317.249C78.8266 317.249 91.2676 311.123 97.5711 305.086Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M94.1096 279.965C101.031 273.336 113.595 267.487 107.906 259.771C102.063 251.848 93.1351 264.805 86.4272 271.668C80.0384 278.204 75.3651 292.128 75.3651 292.128C75.3651 292.128 87.806 286.002 94.1096 279.965Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M93.3112 251.016C100.255 246.61 112.098 243.663 108.31 236.145C104.463 228.512 95.0045 237.597 88.2024 242.249C81.7239 246.681 75.4676 257.898 75.4676 257.898C75.4676 257.898 86.9875 255.029 93.3112 251.016Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M99.4015 224.456C107.326 222.598 119.464 223.754 118.138 215.372C116.792 206.863 105.068 212.311 97.2031 214.449C89.7126 216.485 80.3808 225.023 80.3808 225.023C80.3808 225.023 92.1846 226.147 99.4015 224.456Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M107.944 198.911C115.869 197.053 128.007 198.209 126.681 189.827C125.335 181.318 113.61 186.766 105.746 188.904C98.2553 190.941 88.9234 199.478 88.9234 199.478C88.9234 199.478 100.727 200.603 107.944 198.911Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M117.243 175.285C125.332 174.512 137.24 177.292 136.944 168.808C136.642 160.196 124.35 164.01 116.286 165.069C108.605 166.077 98.3016 173.281 98.3016 173.281C98.3016 173.281 109.875 175.988 117.243 175.285Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M129.93 154.048C138.054 153.912 149.74 157.616 150.042 149.136C150.349 140.53 137.822 143.365 129.702 143.788C121.969 144.191 111.18 150.565 111.18 150.565C111.18 150.565 122.532 154.172 129.93 154.048Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M144.581 135.589C152.702 135.903 164.191 140.246 164.915 131.798C165.649 123.225 152.999 125.36 144.868 125.333C137.124 125.307 126.028 131.075 126.028 131.075C126.028 131.075 137.185 135.303 144.581 135.589Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M158.661 119.993C165.771 121.593 176.308 127.349 177.629 119.698C178.906 112.295 168.719 111.733 161.527 110.401C154.678 109.132 143.385 112.768 143.385 112.768C143.385 112.768 152.187 118.535 158.661 119.993Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M176.384 103.057C183.263 103.854 192.769 108.289 193.879 101.165C195.004 93.9389 184.139 94.9224 177.235 94.3687C170.66 93.8414 160.894 98.0127 160.894 98.0127C160.894 98.0127 170.119 102.331 176.384 103.057Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
<path
d='M187.793 85.638C195.268 82.32 207.396 81.1802 204.667 73.1742C201.897 65.0459 191.294 72.6167 183.926 76.1997C176.908 79.6123 169.188 89.771 169.188 89.771C169.188 89.771 180.986 88.6596 187.793 85.638Z'
fill='var(--primary-color)'
stroke='var(--primary-color)'
/>
</svg>
);
}
TopContibutorBadgeEmblem.displayName = 'TopContibutorBadgeEmblem';
export default TopContibutorBadgeEmblem;
client/src/components/profile/__snapshots__/profile.test.tsx.snap
-1
View File
@@ -290,7 +290,6 @@ exports[`<Profile/> renders correctly 1`] = `
<hr />
</div>
</div>
<br />
</div>
<div
class="spacer"
client/src/components/profile/components/camper.css
+42 -1
View File
@@ -9,6 +9,10 @@
display: flex;
}
.header {
font-size: 26px;
}
.avatar-camper .avatar {
height: 180px;
width: 180px;
@@ -50,6 +54,43 @@
color: var(--quaternary-color);
}
.bio-container h2 {
.badge-card-container {
display: grid;
margin-top: 3rem;
grid-template-columns: repeat(2, minmax(300px, 1fr));
gap: 1rem;
align-items: top;
}
.badge-card {
display: flex;
flex-direction: row;
width: 300px;
max-width: 300px;
font-size: 20px;
}
.badge-card svg {
height: 100px;
width: 100px;
}
.badge-card p {
color: var(--quaternary-color);
}
.badge-card-description {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 1rem;
}
.badge {
margin-right: 1em;
}
@media (max-width: 768px) {
.badge-card-container {
grid-template-columns: 1fr;
}
}
client/src/components/profile/components/camper.tsx
+55 -32
View File
@@ -1,11 +1,10 @@
import { faAward } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react';
import { useTranslation } from 'react-i18next';
import type { User } from '../../../redux/prop-types';
import Link from '../../helpers/link';
import { formatYears } from './utils';
import { FullWidthRow } from '../../helpers';
import './camper.css';
import SupporterBadgeEmblem from '../../../assets/icons/supporter-badge-emblem';
import TopContibutorBadgeEmblem from '../../../assets/icons/top-contributor-badge-emblem';
import Bio from './bio';
export type CamperProps = Pick<
@@ -39,37 +38,61 @@ function Camper({
website
}: CamperProps): JSX.Element {
const { t } = useTranslation();
const isTopContributor = yearsTopContributor.filter(Boolean).length > 0;
return (
<div className='bio-container'>
<Bio
joinDate={joinDate}
location={location}
username={username}
name={name}
about={about}
githubProfile={githubProfile}
linkedin={linkedin}
twitter={twitter}
website={website}
isDonating={isDonating}
yearsTopContributor={yearsTopContributor}
picture={picture}
/>
{yearsTopContributor.filter(Boolean).length > 0 && (
<div>
<br />
<p className='text-center yearsTopContributor'>
<FontAwesomeIcon icon={faAward} />{' '}
<Link to={t('links:top-contributors')}>
{t('profile.contributor')}
</Link>
</p>
<p className='text-center'>{formatYears(yearsTopContributor, t)}</p>
</div>
<>
<div className='bio-container'>
<Bio
joinDate={joinDate}
location={location}
username={username}
name={name}
about={about}
githubProfile={githubProfile}
linkedin={linkedin}
twitter={twitter}
website={website}
isDonating={isDonating}
yearsTopContributor={yearsTopContributor}
picture={picture}
/>
</div>
{(isDonating || isTopContributor) && (
<FullWidthRow>
<h2 className='text-center'>{t('profile.badges')}</h2>
<div className='badge-card-container'>
{isDonating && (
<div className='badge-card'>
<div className='badge'>
<SupporterBadgeEmblem />
</div>
<div className='badge-card-description'>
<h3>{t('profile.supporter')}</h3>
<p>{t('profile.donated')}</p>
</div>
</div>
)}
{isTopContributor && (
<div className='badge-card'>
<div className='badge'>
<TopContibutorBadgeEmblem />
</div>
<div className='badge-card-description'>
<h3>{t('profile.contributor')}</h3>
<p>
{t('profile.contributor-prolific', {
year: yearsTopContributor
})}
</p>
</div>
</div>
)}
</div>
<hr />
</FullWidthRow>
)}
<br />
</div>
</>
);
}
cypress/e2e/default/top-contributor.ts
-33
View File
@@ -1,33 +0,0 @@
describe('Top contributor in user profile', () => {
before(() => {
cy.task('seed', ['--top-contributor']);
cy.login('top-contributor');
});
after(() => {
cy.task('seed');
});
it('Should show `Top Contributor` information', () => {
// It it does 404, but still shows the profile.
cy.visit('/developmentuser', { failOnStatusCode: false });
// The following line is only required if you want to test it in development
// cy.contains('Preview custom 404 page').click();
cy.contains('Top Contributor')
.parent()
.within(() => {
cy.contains('Top Contributor').should('be.visible');
cy.get('svg').should('be.visible');
});
// it should have a link to the news article
cy.contains('Top Contributor').should(
'have.attr',
'href',
'https://www.freecodecamp.org/news/freecodecamp-top-contributors/'
);
// the years obtained should be visible
cy.contains('2017, 2018 and 2019').should('be.visible');
});
});
e2e/profile.spec.ts
+5 -2
View File
@@ -114,9 +114,11 @@ test.describe('Profile component', () => {
await expect(page.getByText('Full Stack User')).toBeVisible();
await expect(page.getByText('Joined November 2020')).toBeVisible();
await expect(
page.getByRole('link', { name: 'Top Contributor' })
page.getByText(translations.profile.contributor)
).toBeVisible();
await expect(page.getByText('2019')).toBeVisible();
expect(
await page.locator('.badge-card-description').textContent()
).toContain('Among most prolific volunteers');
});
test('renders total points correctly', async ({ page }) => {
@@ -176,6 +178,7 @@ test.describe('Profile component', () => {
test('should not show portfolio when empty', async ({ page }) => {
// @certifieduser doesn't have portfolio information
await expect(
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
page.getByText(translations.profile.projects)
).not.toBeVisible();
});