Include latest changes from James
This commit is contained in:
Andy Tudhope
commit
74c5d1c1a5
File diff suppressed because it is too large
Load Diff
|
|
@ -11,7 +11,9 @@
|
|||
"node-sass": "^4.11.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.4",
|
||||
"react-content-loader": "^4.2.1",
|
||||
"react-dom": "^16.8.4",
|
||||
"react-image-fallback": "^8.0.0",
|
||||
"react-redux": "^6.0.1",
|
||||
"react-router": "^4.3.1",
|
||||
"react-router-dom": "^4.3.1",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 446 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 622 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 151 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM10 4C10.5523 4 11 4.44772 11 5V8.5C11 8.77614 11.2239 9 11.5 9H15C15.5523 9 16 9.44772 16 10C16 10.5523 15.5523 11 15 11H11.5C11.2239 11 11 11.2239 11 11.5V15C11 15.5523 10.5523 16 10 16C9.44771 16 9 15.5523 9 15V11.5C9 11.2239 8.77614 11 8.5 11H5C4.44771 11 4 10.5523 4 10C4 9.44772 4.44772 9 5 9H8.5C8.77614 9 9 8.77614 9 8.5V5C9 4.44771 9.44772 4 10 4Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 638 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 10C20 15.5228 15.5228 20 10 20H2.99864C1.34178 20 3.91417e-06 18.6584 2.97048e-06 17.0015L0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM8.71336 2.99988C8.06033 2.999 7.49538 2.99823 7.00917 3.16836C6.14743 3.4699 5.4699 4.14743 5.16836 5.00917C4.99823 5.49537 4.999 6.06033 4.99988 6.71335V6.71336L5.00001 7H7.00001V6.85715C7.00001 5.97549 7.01416 5.78968 7.05613 5.66973C7.15664 5.38248 7.38248 5.15664 7.66973 5.05613C7.78968 5.01416 7.97549 5.00001 8.85715 5.00001H10C10.9672 5.00001 11.3344 5.00311 11.6257 5.04926C13.3373 5.32034 14.6797 6.6627 14.9508 8.37427C14.9969 8.66561 15 9.03279 15 10C15 10.9672 14.9969 11.3344 14.9508 11.6257C14.6797 13.3373 13.3373 14.6797 11.6257 14.9508C11.3344 14.9969 10.9672 15 10 15H8.85715C7.97549 15 7.78968 14.9859 7.66973 14.9439C7.38248 14.8434 7.15664 14.6175 7.05613 14.3303C7.01416 14.2103 7.00001 14.0245 7.00001 13.1429C7.00001 13.064 6.93605 13 6.85714 13H5.28667C5.12833 13 4.99995 13.1283 4.99988 13.2867C4.999 13.9397 4.99823 14.5046 5.16836 14.9908C5.4699 15.8526 6.14743 16.5301 7.00917 16.8317C7.49538 17.0018 8.06033 17.001 8.71336 17.0001L10.0997 17H10.0997C10.9332 17.0001 11.471 17.0002 11.9386 16.9261C14.506 16.5195 16.5195 14.506 16.9261 11.9386C17.0002 11.471 17.0001 10.9332 17 10.0997V10.0997V9.90034V9.9003C17.0001 9.06681 17.0002 8.52901 16.9261 8.0614C16.5195 5.49405 14.506 3.48051 11.9386 3.07388C11.471 2.99982 10.9332 2.99989 10.0997 3L8.71336 2.99988ZM4 9C3.44772 9 3 9.44771 3 10C3 10.5523 3.44772 11 4 11H10C10.5523 11 11 10.5523 11 10C11 9.44771 10.5523 9 10 9H4Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 15L9.50612 15.5644C9.78889 15.8119 10.2111 15.8119 10.4939 15.5644L10 15ZM5.50612 12.0644L9.50612 15.5644L10.4939 14.4356L6.49388 10.9356L5.50612 12.0644ZM10.4939 15.5644L14.4939 12.0644L13.5061 10.9356L9.50612 14.4356L10.4939 15.5644Z" fill="white"/>
|
||||
<path d="M10 1L10.4939 0.435567C10.2111 0.188144 9.78889 0.188144 9.50612 0.435567L10 1ZM14.4939 3.93557L10.4939 0.435567L9.50612 1.56443L13.5061 5.06443L14.4939 3.93557ZM9.50612 0.435567L5.50612 3.93557L6.49388 5.06443L10.4939 1.56443L9.50612 0.435567Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 638 B |
|
|
@ -1,14 +1,5 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="20" cy="20" r="20" fill="#887AF9"/>
|
||||
<g clip-path="url(#clip0)">
|
||||
<path d="M12.8749 18.5H16.6249C16.852 18.5 17.0568 18.3635 17.1442 18.1539L18.7139 14.3866C18.8094 14.1572 18.7432 13.8922 18.5508 13.7349L15.1061 10.9165C14.8989 10.7469 14.6009 10.7469 14.3937 10.9165L10.949 13.7349C10.7567 13.8922 10.6904 14.1572 10.786 14.3866L12.3557 18.1539C12.443 18.3635 12.6478 18.5 12.8749 18.5Z" fill="white"/>
|
||||
<path d="M22.2499 11C21.8357 11 21.4999 11.3358 21.4999 11.75V17.75C21.4999 18.1642 21.8357 18.5 22.2499 18.5H28.2499C28.6641 18.5 28.9999 18.1642 28.9999 17.75V11.75C28.9999 11.3358 28.6641 11 28.2499 11H22.2499Z" fill="white"/>
|
||||
<path d="M14.7499 29C16.821 29 18.4999 27.3211 18.4999 25.25C18.4999 23.1789 16.821 21.5 14.7499 21.5C12.6789 21.5 10.9999 23.1789 10.9999 25.25C10.9999 27.3211 12.6789 29 14.7499 29Z" fill="white"/>
|
||||
<path d="M21.508 29H28.9919C29.3335 29 29.5505 28.6344 29.3869 28.3345L25.645 21.4743C25.4744 21.1616 25.0254 21.1616 24.8549 21.4743L21.1129 28.3345C20.9494 28.6344 21.1664 29 21.508 29Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="19.5" height="19.5" fill="white" transform="translate(10.25 10.25)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<rect width="40" height="40" fill="white"/>
|
||||
<rect width="40" height="40" fill="#EEF2F5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0368 8H21.9632C25.2668 8 26.6037 8.3713 27.9074 9.06853C29.2111 9.76576 30.2342 10.7889 30.9315 12.0926C31.6287 13.3963 32 14.7332 32 18.0368V21.9632C32 25.2668 31.6287 26.6037 30.9315 27.9074C30.2342 29.2111 29.2111 30.2342 27.9074 30.9315C26.6037 31.6287 25.2668 32 21.9632 32H18.0368C14.7332 32 13.3963 31.6287 12.0926 30.9315C10.7889 30.2342 9.76576 29.2111 9.06853 27.9074C8.3713 26.6037 8 25.2668 8 21.9632V18.0368C8 14.7332 8.3713 13.3963 9.06853 12.0926C9.76576 10.7889 10.7889 9.76576 12.0926 9.06853C13.3963 8.3713 14.7332 8 18.0368 8ZM21.6526 14.0428C21.3441 14.0022 20.9606 14 20 14H18C17.5204 14 17.2107 14.0006 16.9738 14.0167C16.7458 14.0323 16.6589 14.0589 16.6173 14.0761C16.3723 14.1776 16.1776 14.3723 16.0761 14.6173C16.0589 14.6589 16.0323 14.7458 16.0167 14.9738C16.0005 15.2107 16 15.5204 16 16V16.5C16 17.0523 15.5523 17.5 15 17.5C14.4477 17.5 14 17.0523 14 16.5V15.968V15.968C14 15.5293 14 15.1509 14.0214 14.8376C14.0439 14.5078 14.0934 14.1779 14.2284 13.852C14.5328 13.1169 15.1169 12.5329 15.852 12.2284C16.1779 12.0934 16.5078 12.0439 16.8376 12.0214C17.1509 12 17.5294 12 17.968 12L20 12L20.0874 12C20.9329 11.9999 21.4579 11.9999 21.9137 12.0599C25.0548 12.4734 27.5266 14.9452 27.9401 18.0863C28.0001 18.5421 28.0001 19.0671 28 19.9126V20.0874C28.0001 20.9329 28.0001 21.4579 27.9401 21.9137C27.5266 25.0548 25.0548 27.5266 21.9137 27.9401C21.4579 28.0001 20.9329 28.0001 20.0874 28L17.968 28C17.5294 28 17.1509 28 16.8376 27.9787C16.5078 27.9562 16.1779 27.9067 15.852 27.7716C15.1169 27.4672 14.5328 26.8831 14.2284 26.1481C14.0934 25.8221 14.0439 25.4922 14.0214 25.1624C14 24.8491 14 24.4707 14 24.032V24.032V23.5C14 22.9477 14.4477 22.5 15 22.5C15.5523 22.5 16 22.9477 16 23.5V24C16 24.4796 16.0005 24.7893 16.0167 25.0262C16.0323 25.2542 16.0589 25.3411 16.0761 25.3827C16.1776 25.6277 16.3723 25.8224 16.6173 25.9239C16.6589 25.9411 16.7458 25.9677 16.9738 25.9833C17.2107 25.9995 17.5204 26 18 26H20C20.9606 26 21.3441 25.9979 21.6526 25.9572C23.8963 25.6618 25.6618 23.8963 25.9572 21.6526C25.9978 21.3441 26 20.9606 26 20C26 19.0394 25.9978 18.6559 25.9572 18.3474C25.6618 16.1037 23.8963 14.3382 21.6526 14.0428ZM12 19C11.4477 19 11 19.4477 11 20C11 20.5523 11.4477 21 12 21H19C19.5523 21 20 20.5523 20 20C20 19.4477 19.5523 19 19 19H12Z" fill="#939BA1"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 2.5 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM10 6C9.44744 6 8.94882 6.22276 8.5858 6.58579C8.19528 6.97631 7.5621 6.97631 7.17158 6.58579C6.78106 6.19526 6.78106 5.5621 7.17158 5.17157C7.89434 4.44881 8.89572 4 10 4C12.2091 4 14 5.79086 14 8C14 10.2091 12.2091 12 10 12C9.44772 12 9.00001 11.5523 9.00001 11C9.00001 10.4477 9.44772 10 10 10C11.1046 10 12 9.10457 12 8C12 6.89543 11.1046 6 10 6ZM10.25 16.25C10.8023 16.25 11.25 15.8023 11.25 15.25V14.75C11.25 14.1977 10.8023 13.75 10.25 13.75H9.75001C9.19772 13.75 8.75001 14.1977 8.75001 14.75V15.25C8.75001 15.8023 9.19772 16.25 9.75001 16.25H10.25Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 839 B |
|
|
@ -5,32 +5,20 @@ const icon = () => (
|
|||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10.8792 1.03953C10.4721 1.43756 10.909 1.95401 11.4763 1.90425C11.8648 1.87016 12.2545 1.87002 12.6419 1.93833L21.8075 3.55449C22.2294 3.62887 22.511 4.03113 22.4367 4.45296L20.5511 15.1462C20.4768 15.568 20.0745 15.8497 19.6527 15.7753L18.2004 15.5192C17.6703 15.4258 17.2084 15.8876 17.3019 16.4177L17.736 18.8795C17.767 19.0554 17.7857 19.2306 17.7925 19.4042C17.8093 19.8273 18.0819 20.2237 18.499 20.2972L18.8446 20.3581C20.1101 20.5813 21.3169 19.7363 21.54 18.4708L23.9643 4.72233C24.1874 3.45682 23.3424 2.25004 22.0769 2.02688L12.9113 0.410738C12.1435 0.275351 11.3973 0.533165 10.8792 1.03953Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M16.7286 13.1664C16.7853 13.4875 17.0367 13.7389 17.3578 13.7956L18.3944 13.9784C18.8162 14.0527 19.232 13.7682 19.2095 13.3405C19.1384 11.9907 18.1764 11.0827 16.817 10.6218C16.5534 10.5324 16.3053 10.7658 16.3537 11.0399L16.7286 13.1664Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M16.6656 9.66225C16.3314 9.68044 16.0668 9.413 16.0087 9.08338L15.3118 5.13108L15.3057 5.09735C15.2274 4.6746 15.4194 4.21776 15.8486 4.19271C16.1816 4.17326 16.5515 4.20279 16.9554 4.27401C18.6427 4.57154 19.5221 5.34946 19.2246 7.0368C18.967 8.49782 18.0124 9.58898 16.6656 9.66225Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path d="M10.8792 1.03953C10.4721 1.43756 10.909 1.95401 11.4763 1.90425C11.8648 1.87016 12.2545 1.87002 12.6419 1.93833L21.8075 3.55449C22.2294 3.62887 22.511 4.03113 22.4367 4.45296L20.5511 15.1462C20.4768 15.568 20.0745 15.8497 19.6527 15.7753L18.2004 15.5192C17.6703 15.4258 17.2084 15.8876 17.3019 16.4177L17.736 18.8795C17.767 19.0554 17.7857 19.2306 17.7925 19.4042C17.8093 19.8273 18.0819 20.2237 18.499 20.2972L18.8446 20.3581C20.1101 20.5813 21.3169 19.7363 21.54 18.4708L23.9643 4.72233C24.1874 3.45682 23.3424 2.25004 22.0769 2.02688L12.9113 0.410738C12.1435 0.275351 11.3973 0.533165 10.8792 1.03953Z" />
|
||||
<path d="M16.7286 13.1664C16.7853 13.4875 17.0367 13.7389 17.3578 13.7956L18.3944 13.9784C18.8162 14.0527 19.232 13.7682 19.2095 13.3405C19.1384 11.9907 18.1764 11.0827 16.817 10.6218C16.5534 10.5324 16.3053 10.7658 16.3537 11.0399L16.7286 13.1664Z" />
|
||||
<path d="M16.6656 9.66225C16.3314 9.68044 16.0668 9.413 16.0087 9.08338L15.3118 5.13108L15.3057 5.09735C15.2274 4.6746 15.4194 4.21776 15.8486 4.19271C16.1816 4.17326 16.5515 4.20279 16.9554 4.27401C18.6427 4.57154 19.5221 5.34946 19.2246 7.0368C18.967 8.49782 18.0124 9.58898 16.6656 9.66225Z" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M4.10553 11.5101C3.7795 10.8223 3.41967 9.91802 3.6263 9.63789C3.859 9.32239 4.96605 9.58752 5.67281 9.79739C5.90787 9.86719 6.15976 9.83304 6.37961 9.72445C6.71102 9.56074 7.07238 9.44037 7.45695 9.37256C7.82006 9.30853 8.17979 9.29561 8.52806 9.32845C8.76555 9.35084 9.00642 9.29638 9.19858 9.15503C9.79276 8.71791 10.7104 8.11992 11.0303 8.33235C11.2969 8.50937 11.294 9.34567 11.2366 10.0682C11.2017 10.5069 11.3346 10.9387 11.532 11.3319C11.6805 11.6276 11.7886 11.9484 11.8486 12.289C11.9122 12.6495 12.2705 12.9675 12.5354 13.2023C12.6957 13.3443 12.7393 13.5939 12.5523 13.6982C12.376 13.7966 12.1626 13.8451 11.936 13.8607C11.7809 13.8713 11.6401 13.9585 11.5603 14.0919C11.0285 14.9804 9.91807 15.5327 8.58461 15.7679C7.2446 16.0041 6.00674 15.8624 5.2034 15.201C5.07852 15.0982 4.9085 15.0643 4.75491 15.1151C4.50707 15.1969 4.25767 15.2372 4.03136 15.2007C3.81991 15.1666 3.7755 14.9172 3.87756 14.7289C4.05595 14.3998 4.18324 14.0394 4.26211 13.663C4.29213 13.5196 4.29036 13.3722 4.2812 13.226C4.27084 13.0607 4.27242 12.8966 4.28529 12.7347C4.31851 12.3169 4.28505 11.8888 4.10553 11.5101ZM8.25675 14.2506C8.67859 14.1762 8.9904 13.9449 8.95321 13.734C8.91602 13.5231 8.54391 13.4124 8.12207 13.4868C7.70023 13.5612 7.38841 13.7924 7.42561 14.0034C7.46279 14.2143 7.83491 14.325 8.25675 14.2506ZM7.12411 13.0198C6.91559 13.5927 6.30602 13.8968 5.7626 13.699C5.2192 13.5012 4.94772 12.8765 5.15624 12.3035C5.36475 11.7306 5.97432 11.4265 6.51774 11.6243C7.06114 11.8221 7.33263 12.4469 7.12411 13.0198ZM10.4152 12.882C10.8585 12.51 10.8995 11.8291 10.5069 11.3612C10.1142 10.8932 9.43656 10.8154 8.99324 11.1874C8.54992 11.5594 8.50886 12.2403 8.9015 12.7083C9.29416 13.1762 9.97184 13.254 10.4152 12.882Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M1.9231 5.12922C0.657595 5.35237 -0.187411 6.55916 0.0357399 7.82467L2.45996 21.5731C2.6831 22.8386 3.88989 23.6836 5.1554 23.4605L14.321 21.8443C15.5865 21.6212 16.4315 20.4144 16.2084 19.1489L13.7842 5.40044C13.561 4.13493 12.3542 3.28993 11.0887 3.51308L1.9231 5.12922ZM2.19247 6.65683C1.77063 6.73121 1.48896 7.13346 1.56335 7.55531L3.44884 18.2485C3.52323 18.6704 3.92549 18.952 4.34733 18.8777L13.513 17.2615C13.9348 17.1871 14.2165 16.7849 14.1421 16.363L12.2566 5.66981C12.1822 5.24797 11.7799 4.96629 11.3581 5.04069L2.19247 6.65683Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,25 +5,12 @@ const icon = () => (
|
|||
width="20"
|
||||
height="19"
|
||||
viewBox="0 0 20 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M2.87492 8.50002H6.62492C6.85201 8.50002 7.05681 8.36348 7.14415 8.15387L8.71387 4.38656C8.80945 4.15716 8.74317 3.89223 8.55083 3.73486L5.10612 0.916456C4.89891 0.746923 4.60093 0.746923 4.39373 0.916456L0.949012 3.73486C0.756674 3.89223 0.690396 4.15716 0.785978 4.38656L2.35569 8.15387C2.44303 8.36348 2.64784 8.50002 2.87492 8.50002Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M12.2499 1.00002C11.8357 1.00002 11.4999 1.3358 11.4999 1.75002V7.75002C11.4999 8.16424 11.8357 8.50002 12.2499 8.50002H18.2499C18.6641 8.50002 18.9999 8.16424 18.9999 7.75002V1.75002C18.9999 1.3358 18.6641 1.00002 18.2499 1.00002H12.2499Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M4.74992 19C6.82099 19 8.49992 17.3211 8.49992 15.25C8.49992 13.1789 6.82099 11.5 4.74992 11.5C2.67885 11.5 0.999923 13.1789 0.999923 15.25C0.999923 17.3211 2.67885 19 4.74992 19Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M11.508 19H18.9919C19.3335 19 19.5505 18.6344 19.3869 18.3345L15.645 11.4743C15.4744 11.1616 15.0254 11.1616 14.8549 11.4743L11.1129 18.3345C10.9494 18.6344 11.1664 19 11.508 19Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path d="M2.87492 8.50002H6.62492C6.85201 8.50002 7.05681 8.36348 7.14415 8.15387L8.71387 4.38656C8.80945 4.15716 8.74317 3.89223 8.55083 3.73486L5.10612 0.916456C4.89891 0.746923 4.60093 0.746923 4.39373 0.916456L0.949012 3.73486C0.756674 3.89223 0.690396 4.15716 0.785978 4.38656L2.35569 8.15387C2.44303 8.36348 2.64784 8.50002 2.87492 8.50002Z" />
|
||||
<path d="M12.2499 1.00002C11.8357 1.00002 11.4999 1.3358 11.4999 1.75002V7.75002C11.4999 8.16424 11.8357 8.50002 12.2499 8.50002H18.2499C18.6641 8.50002 18.9999 8.16424 18.9999 7.75002V1.75002C18.9999 1.3358 18.6641 1.00002 18.2499 1.00002H12.2499Z" />
|
||||
<path d="M4.74992 19C6.82099 19 8.49992 17.3211 8.49992 15.25C8.49992 13.1789 6.82099 11.5 4.74992 11.5C2.67885 11.5 0.999923 13.1789 0.999923 15.25C0.999923 17.3211 2.67885 19 4.74992 19Z" />
|
||||
<path d="M11.508 19H18.9919C19.3335 19 19.5505 18.6344 19.3869 18.3345L15.645 11.4743C15.4744 11.1616 15.0254 11.1616 14.8549 11.4743L11.1129 18.3345C10.9494 18.6344 11.1664 19 11.508 19Z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -5,14 +5,12 @@ const icon = () => (
|
|||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M6 6C2.68629 6 0 8.68629 0 12C0 15.3137 2.68629 18 6 18H6.25685C7.52346 18 8.72843 17.4532 9.5625 16.5L10.1342 15.8466C10.605 15.3086 11.2851 15 12 15C12.7149 15 13.395 15.3086 13.8658 15.8466L14.4375 16.5C15.2716 17.4532 16.4765 18 17.7432 18H18C21.3137 18 24 15.3137 24 12C24 8.68629 21.3137 6 18 6H6ZM6 8.25C6.62132 8.25 7.125 8.75368 7.125 9.375V10.5C7.125 10.7071 7.29289 10.875 7.5 10.875H8.625C9.24632 10.875 9.75 11.3787 9.75 12C9.75 12.6213 9.24632 13.125 8.625 13.125H7.5C7.29289 13.125 7.125 13.2929 7.125 13.5V14.625C7.125 15.2463 6.62132 15.75 6 15.75C5.37868 15.75 4.875 15.2463 4.875 14.625V13.5C4.875 13.2929 4.70711 13.125 4.5 13.125H3.375C2.75368 13.125 2.25 12.6213 2.25 12C2.25 11.3787 2.75368 10.875 3.375 10.875H4.5C4.70711 10.875 4.875 10.7071 4.875 10.5V9.375C4.875 8.75368 5.37868 8.25 6 8.25ZM18.375 13.875C18.375 14.7034 17.7034 15.375 16.875 15.375C16.0466 15.375 15.375 14.7034 15.375 13.875C15.375 13.0466 16.0466 12.375 16.875 12.375C17.7034 12.375 18.375 13.0466 18.375 13.875ZM20.625 11.625C21.4534 11.625 22.125 10.9534 22.125 10.125C22.125 9.29657 21.4534 8.625 20.625 8.625C19.7966 8.625 19.125 9.29657 19.125 10.125C19.125 10.9534 19.7966 11.625 20.625 11.625Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,21 +5,11 @@ const icon = () => (
|
|||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0.85065 1.60347C1.14213 0.651752 2.03642 0 3.0508 0H14.9462C15.9606 0 16.8548 0.651752 17.1463 1.60347C17.2077 1.80383 17.2742 2.01149 17.342 2.22342C17.6933 3.32071 18.0812 4.53227 17.9852 5.43717C17.8728 6.49643 16.8342 7.5 15.8896 7.5C14.6914 7.5 13.8783 6.49654 13.7916 5.43732C13.7832 5.33409 13.6983 5.25 13.5925 5.25C13.4868 5.25 13.402 5.33417 13.3911 5.43717C13.2787 6.49643 12.2401 7.5 11.2955 7.5C10.0974 7.5 9.28425 6.49654 9.19759 5.43732C9.18915 5.33409 9.10421 5.25 8.99849 5.25C8.89277 5.25 8.80799 5.33417 8.79706 5.43717C8.68466 6.49643 7.64609 7.5 6.70147 7.5C5.50334 7.5 4.6902 6.49654 4.60355 5.43732C4.5951 5.33409 4.51016 5.25 4.40444 5.25C4.29872 5.25 4.21394 5.33417 4.20301 5.43717C4.09061 6.49643 3.05204 7.5 2.10742 7.5C0.909292 7.5 0.0961522 6.49654 0.0094975 5.43732C-0.0662881 4.51087 0.325698 3.27031 0.678888 2.15252C0.738023 1.96537 0.79607 1.78167 0.85065 1.60347Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M2.23925 9C2.51294 9 2.74691 9.197 2.79353 9.46669L3.53488 13.7555C3.65919 14.4747 4.28311 15 5.01296 15H12.987C13.7169 15 14.3408 14.4747 14.4651 13.7555L15.2065 9.46669C15.2531 9.197 15.4871 9 15.7607 9H16.8073C17.0391 9 17.2153 9.20808 17.1772 9.43665L16.0633 16.1199C15.8825 17.2048 14.9439 18 13.844 18H4.15604C3.05615 18 2.11747 17.2048 1.93665 16.1199L0.822775 9.43665C0.784677 9.20808 0.960945 9 1.19267 9H2.23925Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M4.99149 12.4659C4.93232 12.2293 5.11133 12 5.35529 12H12.6447C12.8887 12 13.0677 12.2293 13.0085 12.4659L12.892 12.9319C12.8086 13.2658 12.5086 13.5 12.1644 13.5H5.83558C5.49143 13.5 5.19144 13.2658 5.10797 12.9319L4.99149 12.4659Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path d="M0.85065 1.60347C1.14213 0.651752 2.03642 0 3.0508 0H14.9462C15.9606 0 16.8548 0.651752 17.1463 1.60347C17.2077 1.80383 17.2742 2.01149 17.342 2.22342C17.6933 3.32071 18.0812 4.53227 17.9852 5.43717C17.8728 6.49643 16.8342 7.5 15.8896 7.5C14.6914 7.5 13.8783 6.49654 13.7916 5.43732C13.7832 5.33409 13.6983 5.25 13.5925 5.25C13.4868 5.25 13.402 5.33417 13.3911 5.43717C13.2787 6.49643 12.2401 7.5 11.2955 7.5C10.0974 7.5 9.28425 6.49654 9.19759 5.43732C9.18915 5.33409 9.10421 5.25 8.99849 5.25C8.89277 5.25 8.80799 5.33417 8.79706 5.43717C8.68466 6.49643 7.64609 7.5 6.70147 7.5C5.50334 7.5 4.6902 6.49654 4.60355 5.43732C4.5951 5.33409 4.51016 5.25 4.40444 5.25C4.29872 5.25 4.21394 5.33417 4.20301 5.43717C4.09061 6.49643 3.05204 7.5 2.10742 7.5C0.909292 7.5 0.0961522 6.49654 0.0094975 5.43732C-0.0662881 4.51087 0.325698 3.27031 0.678888 2.15252C0.738023 1.96537 0.79607 1.78167 0.85065 1.60347Z" />
|
||||
<path d="M2.23925 9C2.51294 9 2.74691 9.197 2.79353 9.46669L3.53488 13.7555C3.65919 14.4747 4.28311 15 5.01296 15H12.987C13.7169 15 14.3408 14.4747 14.4651 13.7555L15.2065 9.46669C15.2531 9.197 15.4871 9 15.7607 9H16.8073C17.0391 9 17.2153 9.20808 17.1772 9.43665L16.0633 16.1199C15.8825 17.2048 14.9439 18 13.844 18H4.15604C3.05615 18 2.11747 17.2048 1.93665 16.1199L0.822775 9.43665C0.784677 9.20808 0.960945 9 1.19267 9H2.23925Z" />
|
||||
<path d="M4.99149 12.4659C4.93232 12.2293 5.11133 12 5.35529 12H12.6447C12.8887 12 13.0677 12.2293 13.0085 12.4659L12.892 12.9319C12.8086 13.2658 12.5086 13.5 12.1644 13.5H5.83558C5.49143 13.5 5.19144 13.2658 5.10797 12.9319L4.99149 12.4659Z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -5,14 +5,12 @@ const icon = () => (
|
|||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10.5276 3H13.4724C15.9501 3 16.9528 3.27848 17.9305 3.8014C18.9083 4.32432 19.6757 5.09169 20.1986 6.06946C20.7215 7.04724 21 8.04991 21 10.5276V13.4724C21 15.9501 20.7215 16.9528 20.1986 17.9305C19.6757 18.9083 18.9083 19.6757 17.9305 20.1986C16.9528 20.7215 15.9501 21 13.4724 21H10.5276C8.04991 21 7.04724 20.7215 6.06946 20.1986C5.09169 19.6757 4.32432 18.9083 3.8014 17.9305C3.27848 16.9528 3 15.9501 3 13.4724V10.5276C3 8.04991 3.27848 7.04724 3.8014 6.06946C4.32432 5.09169 5.09169 4.32432 6.06946 3.8014C7.04724 3.27848 8.04991 3 10.5276 3ZM13.1905 7.90387C12.9896 7.87742 12.7324 7.875 12 7.875H10.5C10.1352 7.875 9.91786 7.87561 9.75585 7.88666C9.6556 7.8935 9.613 7.90265 9.60197 7.90545C9.51372 7.94337 9.44337 8.01371 9.40546 8.10196C9.40266 8.11299 9.39351 8.1556 9.38667 8.25584C9.37561 8.41785 9.375 8.63515 9.375 9C9.375 9.23297 9.375 9.34945 9.33694 9.44134C9.2862 9.56385 9.18886 9.66119 9.06634 9.71194C8.97446 9.75 8.85797 9.75 8.625 9.75H7.875C7.64203 9.75 7.52555 9.75 7.43366 9.71194C7.31115 9.66119 7.21381 9.56385 7.16306 9.44134C7.125 9.34945 7.125 9.23297 7.125 9L7.125 8.96736V8.96735C7.12498 8.64594 7.12496 8.35067 7.14188 8.10268C7.16007 7.83622 7.20148 7.54321 7.32482 7.24545C7.59124 6.60225 8.10226 6.09123 8.74546 5.82481C9.04321 5.70148 9.33622 5.66006 9.60269 5.64188C9.85068 5.62496 10.146 5.62498 10.4674 5.62499L10.5 5.625H12L12.0868 5.62499C12.6998 5.62488 13.1173 5.62482 13.4842 5.67312C16.0083 6.00543 17.9946 7.99166 18.3269 10.5158C18.3752 10.8827 18.3751 11.3002 18.375 11.9131V11.9131V11.9132L18.375 12L18.375 12.0868V12.0868V12.0869C18.3751 12.6998 18.3752 13.1173 18.3269 13.4842C17.9946 16.0083 16.0083 17.9946 13.4842 18.3269C13.1173 18.3752 12.6998 18.3751 12.0868 18.375H12.0868L12 18.375L10.4674 18.375H10.4673C10.1459 18.375 9.85067 18.375 9.60269 18.3581C9.33622 18.3399 9.04321 18.2985 8.74546 18.1752C8.10226 17.9088 7.59124 17.3977 7.32482 16.7545C7.20148 16.4568 7.16007 16.1638 7.14188 15.8973C7.12496 15.6493 7.12498 15.354 7.125 15.0326C7.125 14.769 7.125 14.6371 7.17347 14.5352C7.22284 14.4314 7.30645 14.3478 7.41024 14.2985C7.51215 14.25 7.64398 14.25 7.90764 14.25H8.625C8.85797 14.25 8.97446 14.25 9.06634 14.2881C9.18886 14.3388 9.2862 14.4361 9.33694 14.5587C9.375 14.6505 9.375 14.767 9.375 15C9.375 15.3648 9.37561 15.5821 9.38667 15.7442C9.39351 15.8444 9.40266 15.887 9.40546 15.898C9.44337 15.9863 9.51372 16.0566 9.60197 16.0945C9.613 16.0973 9.6556 16.1065 9.75585 16.1133C9.91786 16.1244 10.1352 16.125 10.5 16.125H12C12.7324 16.125 12.9896 16.1226 13.1905 16.0961C14.705 15.8967 15.8967 14.705 16.0961 13.1905C16.1226 12.9896 16.125 12.7324 16.125 12C16.125 11.2676 16.1226 11.0104 16.0961 10.8095C15.8967 9.29499 14.705 8.10325 13.1905 7.90387ZM5.62982 11.777C5.625 11.8259 5.625 11.8839 5.625 12C5.625 12.1161 5.625 12.1741 5.62982 12.223C5.67658 12.6978 6.05221 13.0734 6.52698 13.1202C6.57587 13.125 6.63392 13.125 6.75 13.125H10.5C10.6161 13.125 10.6741 13.125 10.723 13.1202C11.1978 13.0734 11.5734 12.6978 11.6202 12.223C11.625 12.1741 11.625 12.1161 11.625 12C11.625 11.8839 11.625 11.8259 11.6202 11.777C11.5734 11.3022 11.1978 10.9266 10.723 10.8798C10.6741 10.875 10.6161 10.875 10.5 10.875H6.75C6.63392 10.875 6.57587 10.875 6.52698 10.8798C6.05221 10.9266 5.67658 11.3022 5.62982 11.777Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,14 +5,12 @@ const SocialNetworksIcon = () => (
|
|||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12V18.0013C3 19.6581 4.34225 21 5.9991 21H12ZM13.5 12C13.5 12.8284 12.8284 13.5 12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12ZM16.5 13.5C17.3284 13.5 18 12.8284 18 12C18 11.1716 17.3284 10.5 16.5 10.5C15.6716 10.5 15 11.1716 15 12C15 12.8284 15.6716 13.5 16.5 13.5ZM9 12C9 12.8284 8.32844 13.5 7.5 13.5C6.67156 13.5 6 12.8284 6 12C6 11.1716 6.67156 10.5 7.5 10.5C8.32844 10.5 9 11.1716 9 12Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,27 +5,16 @@ const icon = () => (
|
|||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0)">
|
||||
<path
|
||||
d="M10.7652 11.7348C10.6187 11.8812 10.3813 11.8812 10.2349 11.7348L3.43936 4.93929C3.00004 4.49995 2.62511 3.37493 3.00004 2.99994C3.37496 2.62495 4.50002 2.99994 4.93936 3.43929L11.7349 10.2348C11.8813 10.3812 11.8813 10.6187 11.7349 10.7651L10.7652 11.7348Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M11.4731 13.2769L13.277 11.473C13.8169 10.9374 14.6888 10.9388 15.2271 11.477C15.5538 11.8037 15.6956 12.2721 15.605 12.7251L15.5939 12.7807C15.4897 13.3013 15.9487 13.7602 16.4692 13.6561C16.957 13.5585 17.4613 13.7112 17.8131 14.063L19.875 16.125C20.9105 17.1605 20.9105 18.8394 19.875 19.875C18.8395 20.9105 17.1606 20.9105 16.125 19.875L14.0631 17.813C13.7113 17.4612 13.5586 16.957 13.6562 16.4692C13.7603 15.9486 13.3013 15.4897 12.7808 15.5938L12.7252 15.6049C12.2721 15.6955 11.8038 15.5537 11.4771 15.227C10.9388 14.6888 10.9375 13.8169 11.4731 13.2769Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M17.444 11.9008C17.2474 11.9427 17.0648 11.8043 17.0061 11.6121C16.8702 11.1673 16.6267 10.7553 16.2878 10.4164C15.5489 9.67751 14.5086 9.42373 13.5627 9.65504C13.4249 9.68874 13.2771 9.65567 13.1768 9.55537L12.4167 8.79526C12.2155 8.5941 12.0693 8.34066 12.0343 8.05833C12.0117 7.87538 12 7.68903 12 7.49995C12 5.01467 14.0148 2.99995 16.5 2.99995C16.8317 2.99995 17.1551 3.03584 17.4663 3.10395C17.7346 3.16264 17.8096 3.49041 17.6154 3.68456L15.6 5.69995C14.8545 6.44554 14.8545 7.65437 15.6 8.39995C16.3456 9.14554 17.5545 9.14554 18.3 8.39996L20.3154 6.38457C20.5096 6.19041 20.8374 6.26544 20.896 6.53367C20.9641 6.84494 21 7.16825 21 7.49995C21 9.66145 19.4761 11.467 17.444 11.9008Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path d="M10.7652 11.7348C10.6187 11.8812 10.3813 11.8812 10.2349 11.7348L3.43936 4.93929C3.00004 4.49995 2.62511 3.37493 3.00004 2.99994C3.37496 2.62495 4.50002 2.99994 4.93936 3.43929L11.7349 10.2348C11.8813 10.3812 11.8813 10.6187 11.7349 10.7651L10.7652 11.7348Z" />
|
||||
<path d="M11.4731 13.2769L13.277 11.473C13.8169 10.9374 14.6888 10.9388 15.2271 11.477C15.5538 11.8037 15.6956 12.2721 15.605 12.7251L15.5939 12.7807C15.4897 13.3013 15.9487 13.7602 16.4692 13.6561C16.957 13.5585 17.4613 13.7112 17.8131 14.063L19.875 16.125C20.9105 17.1605 20.9105 18.8394 19.875 19.875C18.8395 20.9105 17.1606 20.9105 16.125 19.875L14.0631 17.813C13.7113 17.4612 13.5586 16.957 13.6562 16.4692C13.7603 15.9486 13.3013 15.4897 12.7808 15.5938L12.7252 15.6049C12.2721 15.6955 11.8038 15.5537 11.4771 15.227C10.9388 14.6888 10.9375 13.8169 11.4731 13.2769Z" />
|
||||
<path d="M17.444 11.9008C17.2474 11.9427 17.0648 11.8043 17.0061 11.6121C16.8702 11.1673 16.6267 10.7553 16.2878 10.4164C15.5489 9.67751 14.5086 9.42373 13.5627 9.65504C13.4249 9.68874 13.2771 9.65567 13.1768 9.55537L12.4167 8.79526C12.2155 8.5941 12.0693 8.34066 12.0343 8.05833C12.0117 7.87538 12 7.68903 12 7.49995C12 5.01467 14.0148 2.99995 16.5 2.99995C16.8317 2.99995 17.1551 3.03584 17.4663 3.10395C17.7346 3.16264 17.8096 3.49041 17.6154 3.68456L15.6 5.69995C14.8545 6.44554 14.8545 7.65437 15.6 8.39995C16.3456 9.14554 17.5545 9.14554 18.3 8.39996L20.3154 6.38457C20.5096 6.19041 20.8374 6.26544 20.896 6.53367C20.9641 6.84494 21 7.16825 21 7.49995C21 9.66145 19.4761 11.467 17.444 11.9008Z" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10.201 16.0469C10.3214 16.1976 10.3356 16.4138 10.2139 16.5636L7.67217 19.692C6.77792 20.7926 5.12782 20.8777 4.12505 19.875C3.12228 18.8722 3.20739 17.2221 4.30803 16.3278L8.67922 12.7762C8.82837 12.655 9.04498 12.6662 9.18086 12.8021L9.50636 13.1276C9.63675 13.258 9.67892 13.4501 9.63949 13.6303C9.45817 14.4587 9.64618 15.3525 10.201 16.0469ZM7.31254 18.1875C7.31254 19.0159 6.64096 19.6875 5.81254 19.6875C4.98411 19.6875 4.31254 19.0159 4.31254 18.1875C4.31254 17.359 4.98411 16.6875 5.81254 16.6875C6.64096 16.6875 7.31254 17.359 7.31254 18.1875Z"
|
||||
fill="black"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,20 @@
|
|||
import React from 'react'
|
||||
import ReactImageFallback from 'react-image-fallback'
|
||||
import { DappModel } from '../../utils/models'
|
||||
import styles from './DappListItem.module.scss'
|
||||
import icon from '../../assets/images/icon.svg'
|
||||
|
||||
const DappListItem = props => {
|
||||
const { name, description, url } = props
|
||||
const { name, description, url, image } = props
|
||||
return (
|
||||
<div className={styles.listItem}>
|
||||
<div>
|
||||
<img className={styles.image} src={icon} alt="App icon" />
|
||||
<ReactImageFallback
|
||||
className={styles.image}
|
||||
src={image}
|
||||
fallbackImage={icon}
|
||||
alt="App icon"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className={styles.header}>{name}</h2>
|
||||
|
|
|
|||
|
|
@ -4,18 +4,21 @@
|
|||
font-family: $font;
|
||||
background: $background;
|
||||
display: flex;
|
||||
margin: calculateRem(11) calculateRem(16) 0 calculateRem(16);
|
||||
margin: 0 calculateRem(16) calculateRem(11) calculateRem(16);
|
||||
}
|
||||
|
||||
.header {
|
||||
color: $headline-color;
|
||||
font-size: calculateRem(15);
|
||||
line-height: calculateRem(22);
|
||||
margin-bottom: calculateRem(5);
|
||||
margin-bottom: calculateRem(2);
|
||||
margin-top: calculateRem(12);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.image {
|
||||
max-width: calculateRem(40);
|
||||
max-height: calculateRem(40);
|
||||
margin-top: calculateRem(15);
|
||||
margin-right: calculateRem(16);
|
||||
}
|
||||
|
|
@ -30,7 +33,7 @@
|
|||
color: $text-color;
|
||||
font-size: calculateRem(13);
|
||||
line-height: calculateRem(18);
|
||||
margin-bottom: calculateRem(5);
|
||||
margin-bottom: calculateRem(2);
|
||||
margin-top: 0;
|
||||
max-height: calculateRem(40);
|
||||
overflow-y: hidden;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Link } from 'react-router-dom'
|
||||
import styles from './ViewAll.module.scss'
|
||||
|
||||
const ViewAll = props => {
|
||||
const { size } = props
|
||||
|
||||
return (
|
||||
<Link className={[styles.url, styles[size]].join(' ')} to="/all">
|
||||
View all →
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
ViewAll.propTypes = {
|
||||
size: PropTypes.string.isRequired,
|
||||
}
|
||||
|
||||
export default ViewAll
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@import '../../styles/variables';
|
||||
|
||||
.url {
|
||||
font-family: $font;
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: calculateRem(13);
|
||||
}
|
||||
|
||||
.large {
|
||||
font-size: calculateRem(15);
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import ViewAll from './ViewAll'
|
||||
|
||||
export default ViewAll
|
||||
|
|
@ -1,8 +1,7 @@
|
|||
export const EXCHANGES = 'EXCHANGES'
|
||||
export const MARKETPLACES = 'MARKETPLACES'
|
||||
export const COLLECTIBLES = 'COLLECTIBLES'
|
||||
export const GAMES = 'GAMES'
|
||||
export const SOCIAL_NETWORKS = 'SOCIAL_NETWORKS'
|
||||
export const MEDIA = 'MEDIA'
|
||||
export const UTILITIES = 'UTILITIES'
|
||||
export const OTHER = 'OTHER'
|
||||
export const COLLECTIBLES = 'COLLECTIBLES'
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ const Dapps = [
|
|||
{
|
||||
name: 'Airswap',
|
||||
url: 'https://instant.airswap.io/',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/airswap.png',
|
||||
description: 'Meet the future of trading.',
|
||||
category: Categories.EXCHANGES,
|
||||
dateAdded: null,
|
||||
|
|
@ -12,7 +12,7 @@ const Dapps = [
|
|||
{
|
||||
name: 'Bancor',
|
||||
url: 'https://www.bancor.network/',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/bancor.png',
|
||||
description: 'Bancor is a decentralized liquidity network',
|
||||
category: Categories.EXCHANGES,
|
||||
dateAdded: null,
|
||||
|
|
@ -21,7 +21,7 @@ const Dapps = [
|
|||
name: 'ERC dEX',
|
||||
url: 'https://app.ercdex.com/',
|
||||
description: 'Trustless trading has arrived on Ethereum',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/erc-dex.png',
|
||||
category: Categories.EXCHANGES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -30,7 +30,7 @@ const Dapps = [
|
|||
url: 'https://web3.kyber.network',
|
||||
description:
|
||||
'On-chain, instant and liquid platform for exchange and payment service',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/kyber.png',
|
||||
category: Categories.EXCHANGES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -38,7 +38,7 @@ const Dapps = [
|
|||
name: 'Oasis Direct',
|
||||
url: 'https://oasis.direct/',
|
||||
description: 'The first decentralized instant exchange',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/oasis-direct.png',
|
||||
category: Categories.EXCHANGES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -46,7 +46,7 @@ const Dapps = [
|
|||
name: 'DAI by MakerDao',
|
||||
url: 'https://dai.makerdao.com',
|
||||
description: 'Stability for the blockchain',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/dai.png',
|
||||
category: Categories.EXCHANGES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -54,7 +54,7 @@ const Dapps = [
|
|||
name: 'LocalEthereum',
|
||||
url: 'https://localethereum.com/',
|
||||
description: 'The smartest way to buy and sell Ether',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/local-ethereum.png',
|
||||
category: Categories.EXCHANGES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -62,7 +62,7 @@ const Dapps = [
|
|||
name: 'Eth2phone',
|
||||
url: 'https://eth2.io',
|
||||
description: 'Send Ether by phone number',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/eth2phone.png',
|
||||
category: Categories.EXCHANGES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -71,7 +71,7 @@ const Dapps = [
|
|||
url: 'https://ddex.io/',
|
||||
description:
|
||||
'Instant, real-time order matching with secure on-chain settlement',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/ddex.png',
|
||||
category: Categories.EXCHANGES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -79,7 +79,7 @@ const Dapps = [
|
|||
name: 'EasyTrade',
|
||||
url: 'https://easytrade.io',
|
||||
description: 'One exchange for every token',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/easytrade.png',
|
||||
category: Categories.EXCHANGES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -88,7 +88,7 @@ const Dapps = [
|
|||
url: 'https://slow.trade/',
|
||||
description:
|
||||
'Trade fairly priced crypto assets on the first platform built with the DutchX protocol.',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/slowtrade.png',
|
||||
category: Categories.EXCHANGES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -97,7 +97,7 @@ const Dapps = [
|
|||
url: 'https://blockimmo.ch',
|
||||
description:
|
||||
'blockimmo is a blockchain powered, regulated platform enabling shared property investments and ownership.',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/blockimmo.png',
|
||||
category: Categories.MARKETPLACES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -105,7 +105,7 @@ const Dapps = [
|
|||
name: 'CryptoCribs',
|
||||
url: 'https://cryptocribs.com',
|
||||
description: 'Travel the globe. Pay in crypto.',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/cryptocribs.png',
|
||||
category: Categories.MARKETPLACES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -114,7 +114,7 @@ const Dapps = [
|
|||
url: 'https://ethlance.com',
|
||||
description:
|
||||
'The future of work is now. Hire people or work yourself in return for ETH.',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/ethlance.png',
|
||||
category: Categories.MARKETPLACES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -122,7 +122,7 @@ const Dapps = [
|
|||
name: 'OpenSea',
|
||||
url: 'https://opensea.io',
|
||||
description: 'The largest decentralized marketplace for cryptogoods',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/opensea.png',
|
||||
category: Categories.MARKETPLACES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -130,7 +130,7 @@ const Dapps = [
|
|||
name: 'Name Bazaar',
|
||||
url: 'https://namebazaar.io',
|
||||
description: 'ENS name marketplace',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/name-bazaar.png',
|
||||
category: Categories.MARKETPLACES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -138,7 +138,7 @@ const Dapps = [
|
|||
name: 'The Bounties Network',
|
||||
url: 'https://bounties.network/',
|
||||
description: 'Bounties on any task, paid in any token',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/bounties-network.png',
|
||||
category: Categories.MARKETPLACES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -147,7 +147,7 @@ const Dapps = [
|
|||
url: 'https://www.emoon.io/',
|
||||
description:
|
||||
'A decentralized marketplace for buying & selling crypto assets',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/emoon.png',
|
||||
category: Categories.MARKETPLACES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -156,7 +156,7 @@ const Dapps = [
|
|||
url: 'https://superrare.co/market',
|
||||
description:
|
||||
'Buy, sell and collect unique digital creations by artists around the world',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/superrare.png',
|
||||
category: Categories.MARKETPLACES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -164,15 +164,15 @@ const Dapps = [
|
|||
name: 'CryptoKitties',
|
||||
url: 'https://www.cryptokitties.co',
|
||||
description: 'Collect and breed adorable digital cats.',
|
||||
image: null,
|
||||
category: Categories.GAMES,
|
||||
image: '/discover-dapps/images/dapps/cryptokitties.png',
|
||||
category: Categories.COLLECTIBLES,
|
||||
dateAdded: null,
|
||||
},
|
||||
{
|
||||
name: 'CryptoFighters',
|
||||
url: 'https://cryptofighters.io',
|
||||
description: 'Collect train and fight digital fighters.',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/cryptofighters.png',
|
||||
category: Categories.GAMES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -181,23 +181,23 @@ const Dapps = [
|
|||
url: 'https://cryptographics.app/',
|
||||
description:
|
||||
'Cryptographics is a digital art hub where artists, creators and collectors can submit asset packs, create unique cryptographics and trade them.',
|
||||
image: null,
|
||||
category: Categories.GAMES,
|
||||
image: '/discover-dapps/images/dapps/cryptographics.png',
|
||||
category: Categories.COLLECTIBLES,
|
||||
dateAdded: null,
|
||||
},
|
||||
{
|
||||
name: 'CryptoPunks',
|
||||
url: 'https://www.larvalabs.com/cryptopunks',
|
||||
description: '10,000 unique collectible punks',
|
||||
image: null,
|
||||
category: Categories.GAMES,
|
||||
image: '/discover-dapps/images/dapps/cryptopunks.png',
|
||||
category: Categories.COLLECTIBLES,
|
||||
dateAdded: null,
|
||||
},
|
||||
{
|
||||
name: 'Crypto Takeovers',
|
||||
url: 'https://cryptotakeovers.com/',
|
||||
description: 'Predict and conquer the world. Make a crypto fortune.',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/cryptotakeovers.png',
|
||||
category: Categories.GAMES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -206,7 +206,7 @@ const Dapps = [
|
|||
url: 'https://market.decentraland.org/',
|
||||
description:
|
||||
'Decentraland is a virtual reality platform powered by the Ethereum blockchain.',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/decentraland.png',
|
||||
category: Categories.GAMES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -214,7 +214,7 @@ const Dapps = [
|
|||
name: 'Dragonereum',
|
||||
url: 'https://dapp.dragonereum.io',
|
||||
description: 'Own and trade dragons, fight with other players.',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/dragonereum.png',
|
||||
category: Categories.GAMES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -222,7 +222,7 @@ const Dapps = [
|
|||
name: 'Etherbots',
|
||||
url: 'https://etherbots.io/',
|
||||
description: 'Robot wars on the Ethereum Platform',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/etherbots.png',
|
||||
category: Categories.GAMES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -230,7 +230,7 @@ const Dapps = [
|
|||
name: 'Etheremon',
|
||||
url: 'https://www.etheremon.com/',
|
||||
description: 'Decentralized World of Ether Monsters',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/etheremon.png',
|
||||
category: Categories.GAMES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -238,7 +238,7 @@ const Dapps = [
|
|||
name: 'CryptoStrikers',
|
||||
url: 'https://www.cryptostrikers.com/',
|
||||
description: 'The Beautiful (card) Game',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/cryptostrikers.png',
|
||||
category: Categories.GAMES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -246,7 +246,7 @@ const Dapps = [
|
|||
name: 'Cent',
|
||||
url: 'https://beta.cent.co/',
|
||||
description: 'Get wisdom, get money',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/cent.png',
|
||||
category: Categories.SOCIAL_NETWORKS,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -255,7 +255,7 @@ const Dapps = [
|
|||
url: 'https://kickback.events/',
|
||||
description:
|
||||
'Event no shows? No problem. Kickback asks event attendees to put skin in the game with Ethereum.',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/kickback.png',
|
||||
category: Categories.SOCIAL_NETWORKS,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -263,7 +263,7 @@ const Dapps = [
|
|||
name: 'Peepeth',
|
||||
url: 'https://peepeth.com/',
|
||||
description: 'Blockchain-powered microblogging',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/peepeth.png',
|
||||
category: Categories.SOCIAL_NETWORKS,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -271,7 +271,7 @@ const Dapps = [
|
|||
name: 'Purrbook',
|
||||
url: 'https://cryptopurr.co/',
|
||||
description: 'A social network for CryptoKitties',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/purrbook.png',
|
||||
category: Categories.SOCIAL_NETWORKS,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -279,15 +279,15 @@ const Dapps = [
|
|||
name: 'livepeer.tv',
|
||||
url: 'http://livepeer.tv/',
|
||||
description: 'Decentralized video broadcasting',
|
||||
image: null,
|
||||
category: Categories.MEDIA,
|
||||
image: '/discover-dapps/images/dapps/airswap.png',
|
||||
category: Categories.OTHER,
|
||||
dateAdded: null,
|
||||
},
|
||||
{
|
||||
name: '3Box',
|
||||
url: 'https://3box.io/',
|
||||
description: 'Create and manage your Ethereum Profile.',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/3Box.png',
|
||||
category: Categories.UTILITIES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -296,7 +296,7 @@ const Dapps = [
|
|||
name: 'Aragon',
|
||||
url: 'https://mainnet.aragon.org/',
|
||||
description: 'Build unstoppable organizations on Ethereum.',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/aragon.png',
|
||||
category: Categories.UTILITIES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -305,7 +305,7 @@ const Dapps = [
|
|||
name: 'Civitas',
|
||||
url: 'https://communities.colu.com/',
|
||||
description: 'Blockchain-powered local communities',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/civitas.png',
|
||||
category: Categories.UTILITIES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -314,7 +314,7 @@ const Dapps = [
|
|||
name: 'ETHLend',
|
||||
url: 'https://app.ethlend.io',
|
||||
description: 'Decentralized lending on Ethereum',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/ethlend.png',
|
||||
category: Categories.UTILITIES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -323,7 +323,7 @@ const Dapps = [
|
|||
name: 'Hexel',
|
||||
url: 'https://www.onhexel.com/',
|
||||
description: 'Create your own cryptocurrency',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/hexel.png',
|
||||
category: Categories.UTILITIES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -332,7 +332,7 @@ const Dapps = [
|
|||
name: 'Livepeer',
|
||||
url: 'https://explorer.livepeer.org/',
|
||||
description: 'Decentralized video broadcasting',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/livepeer.png',
|
||||
category: Categories.UTILITIES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -341,7 +341,7 @@ const Dapps = [
|
|||
name: 'Smartz',
|
||||
url: 'https://smartz.io',
|
||||
description: 'Easy smart contract management',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/smartz.png',
|
||||
category: Categories.UTILITIES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -351,7 +351,7 @@ const Dapps = [
|
|||
url: 'https://vote.status.im',
|
||||
description:
|
||||
'Let your SNT be heard! Vote on decisions exclusive to SNT holders, or create a poll of your own.',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/snt-voting.png',
|
||||
category: Categories.UTILITIES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
@ -360,7 +360,7 @@ const Dapps = [
|
|||
name: 'Status Test DApp',
|
||||
url: 'simpledapp.eth',
|
||||
description: 'Request test assets and test basic web3 functionality.',
|
||||
image: null,
|
||||
image: '/discover-dapps/images/dapps/status-test-dapp.png',
|
||||
category: Categories.UTILITIES,
|
||||
dateAdded: null,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,6 +6,41 @@ $green: #7cda00;
|
|||
$red: #fa6565;
|
||||
$yellow: #ffca0f;
|
||||
|
||||
$purple-bg: rgba(
|
||||
$color: $purple,
|
||||
$alpha: 0.15,
|
||||
);
|
||||
|
||||
$orange-bg: rgba(
|
||||
$color: $orange,
|
||||
$alpha: 0.15,
|
||||
);
|
||||
|
||||
$yellow-bg: rgba(
|
||||
$color: $yellow,
|
||||
$alpha: 0.15,
|
||||
);
|
||||
|
||||
$pink-bg: rgba(
|
||||
$color: $pink,
|
||||
$alpha: 0.15,
|
||||
);
|
||||
|
||||
$blue-bg: rgba(
|
||||
$color: $blue,
|
||||
$alpha: 0.15,
|
||||
);
|
||||
|
||||
$green-bg: rgba(
|
||||
$color: $green,
|
||||
$alpha: 0.15,
|
||||
);
|
||||
|
||||
$red-bg: rgba(
|
||||
$color: $red,
|
||||
$alpha: 0.15,
|
||||
);
|
||||
|
||||
$link-color: #4360df;
|
||||
$text-color: #939ba1;
|
||||
$headline-color: #000;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,14 @@
|
|||
url('/discover-dapps/fonts/Inter-Italic.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: url('/discover-dapps/fonts/Inter-Medium.woff2') format('woff2'),
|
||||
url('/discover-dapps/fonts/Inter-Medium.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,10 @@ describe('categories', () => {
|
|||
key: 'MARKETPLACES',
|
||||
value: 'Marketplaces',
|
||||
},
|
||||
{
|
||||
key: 'COLLECTIBLES',
|
||||
value: 'Collectibles',
|
||||
},
|
||||
{
|
||||
key: 'GAMES',
|
||||
value: 'Games',
|
||||
|
|
@ -19,10 +23,6 @@ describe('categories', () => {
|
|||
key: 'SOCIAL_NETWORKS',
|
||||
value: 'Social Networks',
|
||||
},
|
||||
{
|
||||
key: 'MEDIA',
|
||||
value: 'Media',
|
||||
},
|
||||
{
|
||||
key: 'UTILITIES',
|
||||
value: 'Utilities',
|
||||
|
|
@ -31,10 +31,6 @@ describe('categories', () => {
|
|||
key: 'OTHER',
|
||||
value: 'Other',
|
||||
},
|
||||
{
|
||||
key: 'COLLECTIBLES',
|
||||
value: 'Collectibles',
|
||||
},
|
||||
])
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
const humanise = (value, joiner = ' ') =>
|
||||
value
|
||||
const humanise = (value, joiner = ' ') => {
|
||||
if (!value) {
|
||||
return ''
|
||||
}
|
||||
|
||||
return value
|
||||
.split('_')
|
||||
.map(word => `${word[0]}${word.slice(1).toLowerCase()}`)
|
||||
.join(joiner)
|
||||
}
|
||||
|
||||
export default humanise
|
||||
|
|
|
|||
|
|
@ -8,4 +8,12 @@ describe('humanise', () => {
|
|||
expect(humanise(first)).toEqual('Test')
|
||||
expect(humanise(second)).toEqual('Another Test')
|
||||
})
|
||||
|
||||
test('it should handle being passed a null', () => {
|
||||
expect(humanise(null)).toEqual('')
|
||||
})
|
||||
|
||||
test('it should handle being passed undefined', () => {
|
||||
expect(humanise()).toEqual('')
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Link } from 'react-router-dom'
|
||||
import categories from '../../common/utils/categories'
|
||||
import styles from './Categories.module.scss'
|
||||
import categoryImage from './Categories.utils'
|
||||
import ViewAll from '../../common/components/ViewAll'
|
||||
|
||||
const Categories = props => {
|
||||
const { select } = props
|
||||
|
|
@ -13,9 +13,7 @@ const Categories = props => {
|
|||
<>
|
||||
<div className={styles.header}>
|
||||
<h2 className={styles.headline}>Discover DApps</h2>
|
||||
<Link className={styles.url} to="/all">
|
||||
View all →
|
||||
</Link>
|
||||
<ViewAll size="large" />
|
||||
</div>
|
||||
<div className={styles.categories}>
|
||||
{categories.map(category => (
|
||||
|
|
|
|||
|
|
@ -13,13 +13,6 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.url {
|
||||
font-family: $font;
|
||||
font-size: calculateRem(15);
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.categories {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
|
|
@ -44,40 +37,45 @@
|
|||
margin: calculateRem(4);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.EXCHANGES {
|
||||
background: rgba($color: $purple, $alpha: 0.15);
|
||||
background: $purple-bg;
|
||||
}
|
||||
|
||||
.MARKETPLACES {
|
||||
background: rgba($color: $orange, $alpha: 0.15);
|
||||
background: $orange-bg;
|
||||
}
|
||||
|
||||
.OTHER {
|
||||
background: rgba($color: $yellow, $alpha: 0.15);
|
||||
background: $yellow-bg;
|
||||
}
|
||||
|
||||
.MEDIA {
|
||||
background: rgba($color: $yellow, $alpha: 0.15);
|
||||
background: $yellow-bg;
|
||||
}
|
||||
|
||||
.GAMES {
|
||||
background: rgba($color: $pink, $alpha: 0.15);
|
||||
background: $pink-bg;
|
||||
}
|
||||
|
||||
.COLLECTIBLES {
|
||||
background: rgba($color: $blue, $alpha: 0.15);
|
||||
background: $blue-bg;
|
||||
}
|
||||
|
||||
.SOCIAL_NETWORKS {
|
||||
background: rgba($color: $green, $alpha: 0.15);
|
||||
background: $green-bg;
|
||||
}
|
||||
|
||||
.UTILITIES {
|
||||
background: rgba($color: $red, $alpha: 0.15);
|
||||
background: $red-bg;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,10 @@
|
|||
|
||||
.icon {
|
||||
margin-right: calculateRem(15);
|
||||
|
||||
svg {
|
||||
fill: $headline-color;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
|
|
|
|||
|
|
@ -1,21 +1,96 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import CategoryIcon from '../../common/components/CategoryIcon'
|
||||
import ViewAll from '../../common/components/ViewAll'
|
||||
import categories from '../../common/utils/categories'
|
||||
import humanise from '../../common/utils/humanise'
|
||||
import dropdownArrows from '../../common/assets/images/dropdown-arrows.svg'
|
||||
import styles from './CategorySelector.module.scss'
|
||||
|
||||
const CategorySelector = props => {
|
||||
const { category, select } = props
|
||||
const handleChange = event => select(event.target.value)
|
||||
class CategorySelector extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = { open: false }
|
||||
this.toggle = this.toggle.bind(this)
|
||||
this.updateCategory = this.updateCategory.bind(this)
|
||||
this.container = React.createRef()
|
||||
}
|
||||
|
||||
return (
|
||||
<select value={category || ''} onChange={handleChange}>
|
||||
<option style={{ display: 'none' }} />
|
||||
{categories.map(c => (
|
||||
<option key={c.key} value={c.key}>
|
||||
{c.value}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)
|
||||
componentDidMount() {
|
||||
this.closeOnBackgroundClick = this.closeOnBackgroundClick.bind(this)
|
||||
document.addEventListener('click', this.closeOnBackgroundClick)
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener('click', this.closeOnBackgroundClick)
|
||||
}
|
||||
|
||||
closeOnBackgroundClick(event) {
|
||||
if (this.container.current.contains(event.target)) {
|
||||
return
|
||||
}
|
||||
|
||||
this.setState({ open: false })
|
||||
}
|
||||
|
||||
updateCategory(event) {
|
||||
const { select } = this.props
|
||||
select(event.target.value)
|
||||
this.setState({ open: false })
|
||||
}
|
||||
|
||||
toggle() {
|
||||
const { open } = this.state
|
||||
this.setState({ open: !open })
|
||||
}
|
||||
|
||||
render() {
|
||||
const { open } = this.state
|
||||
const { category } = this.props
|
||||
|
||||
return (
|
||||
<div ref={this.container}>
|
||||
<div
|
||||
style={open ? { visible: 'block' } : { display: 'none' }}
|
||||
className={styles.open}
|
||||
>
|
||||
<div className={styles.openHeader}>
|
||||
<h2>Categories</h2>
|
||||
<ViewAll size="small" />
|
||||
</div>
|
||||
{categories.map(c => (
|
||||
<button
|
||||
className={
|
||||
c.key === category
|
||||
? [styles.openButton, styles.selected].join(' ')
|
||||
: styles.openButton
|
||||
}
|
||||
key={c.key}
|
||||
type="button"
|
||||
value={c.key}
|
||||
onClick={this.updateCategory}
|
||||
>
|
||||
<CategoryIcon category={c.key} />
|
||||
{c.value}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
style={open ? { visibility: 'hidden' } : { visibility: 'visible' }}
|
||||
className={[styles.closed, styles[category]].join(' ')}
|
||||
type="button"
|
||||
onClick={this.toggle}
|
||||
>
|
||||
<div className={styles.closedText}>
|
||||
{category && <CategoryIcon category={category} />}
|
||||
{category ? humanise(category) : 'None selected'}
|
||||
</div>
|
||||
<img src={dropdownArrows} alt="Toggle category selector" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
CategorySelector.propTypes = {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,119 @@
|
|||
@import '../../common/styles/variables';
|
||||
|
||||
.open {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 4px 12px rgba(0, 34, 51, 0.08),
|
||||
0px 2px 4px rgba(0, 34, 51, 0.16);
|
||||
padding-top: calculateRem(12);
|
||||
margin: calculateRem(12) calculateRem(16);
|
||||
position: absolute;
|
||||
background: $background;
|
||||
width: calc(100% - 32px);
|
||||
top: 0;
|
||||
|
||||
h2 {
|
||||
color: $text-color;
|
||||
font-family: $font;
|
||||
font-size: calculateRem(13);
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.openHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 calculateRem(16);
|
||||
margin-bottom: calculateRem(12);
|
||||
}
|
||||
|
||||
.openButton {
|
||||
display: block;
|
||||
background: $background;
|
||||
border: none;
|
||||
font-family: $font;
|
||||
font-size: calculateRem(15);
|
||||
color: $headline-color;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
align-content: center;
|
||||
line-height: calculateRem(22);
|
||||
padding: calculateRem(10) calculateRem(16);
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-right: calculateRem(19);
|
||||
fill: $headline-color;
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
background: $purple-bg;
|
||||
color: $purple;
|
||||
|
||||
svg {
|
||||
fill: $purple;
|
||||
}
|
||||
}
|
||||
|
||||
.closed {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin: calculateRem(12) calculateRem(16);
|
||||
padding: calculateRem(10) calculateRem(15);
|
||||
width: calc(100% - 32px);
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1),
|
||||
0px 2px 6px rgba(136, 122, 249, 0.2);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: $background;
|
||||
font-family: $font;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.closedText {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
fill: $background;
|
||||
margin-right: calculateRem(19);
|
||||
}
|
||||
}
|
||||
|
||||
.EXCHANGES {
|
||||
background: $purple;
|
||||
}
|
||||
|
||||
.MARKETPLACES {
|
||||
background: $orange;
|
||||
}
|
||||
|
||||
.COLLECTIBLES {
|
||||
background: $blue;
|
||||
}
|
||||
|
||||
.GAMES {
|
||||
background: $pink;
|
||||
}
|
||||
|
||||
.SOCIAL_NETWORKS {
|
||||
background: $green;
|
||||
}
|
||||
|
||||
.UTILITIES {
|
||||
background: $red;
|
||||
}
|
||||
|
||||
.OTHER {
|
||||
background: $yellow;
|
||||
color: $headline-color;
|
||||
}
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
import CategorySelector from './CategorySelecter.container'
|
||||
import CategorySelector from './CategorySelector.container'
|
||||
|
||||
export default CategorySelector
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ class Dapps extends React.Component {
|
|||
|
||||
componentDidMount() {
|
||||
this.scanHeaderPositions()
|
||||
this.boundScroll = debounce(this.handleScroll.bind(this), 200)
|
||||
this.boundScroll = debounce(this.handleScroll.bind(this), 50)
|
||||
window.addEventListener('scroll', this.boundScroll)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,4 +2,5 @@
|
|||
|
||||
.list {
|
||||
margin-top: calculateRem(50);
|
||||
margin-bottom: calculateRem(20);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { DappListModel } from '../../common/utils/models'
|
||||
import CategorySelector from '../CategorySelector'
|
||||
import DappList from '../../common/components/DappList'
|
||||
import styles from './Filtered.module.scss'
|
||||
|
||||
const Filtered = props => {
|
||||
const { dapps } = props
|
||||
|
|
@ -10,8 +10,9 @@ const Filtered = props => {
|
|||
return (
|
||||
<>
|
||||
<CategorySelector />
|
||||
<Link to="/all">View all</Link>
|
||||
<DappList dapps={dapps} />
|
||||
<div className={styles.list}>
|
||||
<DappList dapps={dapps} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
@import '../../common/styles/variables';
|
||||
|
||||
.list {
|
||||
margin-bottom: calculateRem(20);
|
||||
}
|
||||
|
|
@ -1,6 +1,51 @@
|
|||
import React from 'react'
|
||||
import styles from './Footer.module.scss'
|
||||
import communityIcon from '../../common/assets/images/community.svg'
|
||||
import addDappIcon from '../../common/assets/images/add-dapp.svg'
|
||||
import supportIcon from '../../common/assets/images/support.svg'
|
||||
|
||||
const Footer = () => <div className={styles.footer}>Footer</div>
|
||||
const Footer = () => (
|
||||
<div className={styles.footer}>
|
||||
<a
|
||||
href="https://get.status.im/chat/public/dapps"
|
||||
className={styles.footerItem}
|
||||
>
|
||||
<div className={styles.iconWrap}>
|
||||
<img src={communityIcon} alt="Join the DApp community chat" />
|
||||
</div>
|
||||
<div>
|
||||
<h2>Join the DApp community chat</h2>
|
||||
<p>
|
||||
Status is a worldwide community committed to web3. Come discuss your
|
||||
new favourite DApp with us.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<div className={styles.footerItem}>
|
||||
<div className={styles.iconWrap}>
|
||||
<img src={addDappIcon} alt="Submit a DApp" />
|
||||
</div>
|
||||
<div>
|
||||
<h2>Submit a DApp</h2>
|
||||
<p>Submit your favourite DApp now! No permission required.</p>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href="https://get.status.im/chat/public/status-core-dapps"
|
||||
className={styles.footerItem}
|
||||
>
|
||||
<div className={styles.iconWrap}>
|
||||
<img src={supportIcon} alt="Support" />
|
||||
</div>
|
||||
<div>
|
||||
<h2>Support</h2>
|
||||
<p>
|
||||
Can't find what you're looking for? Reach out and we'll
|
||||
see if we can help.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default Footer
|
||||
|
|
|
|||
|
|
@ -3,6 +3,43 @@
|
|||
.footer {
|
||||
background-color: #eef2f5;
|
||||
font-family: $font;
|
||||
padding: calculateRem(40) calculateRem(16);
|
||||
padding: calculateRem(40) calculateRem(16) calculateRem(32) calculateRem(16);
|
||||
margin-top: calculateRem(24);
|
||||
}
|
||||
|
||||
.footerItem {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: calculateRem(24);
|
||||
|
||||
:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $headline-color;
|
||||
font-size: calculateRem(15);
|
||||
line-height: calculateRem(22);
|
||||
margin-bottom: calculateRem(2);
|
||||
margin-top: calculateRem(12);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $text-color;
|
||||
font-size: calculateRem(13);
|
||||
line-height: calculateRem(18);
|
||||
margin-bottom: calculateRem(2);
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.iconWrap {
|
||||
background: $text-color;
|
||||
padding: calculateRem(10);
|
||||
padding-bottom: calculateRem(6);
|
||||
border-radius: 50%;
|
||||
margin-top: calculateRem(15);
|
||||
margin-right: calculateRem(16);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,42 @@ import React from 'react'
|
|||
import RecentlyAdded from '../RecentlyAdded'
|
||||
import Categories from '../Categories'
|
||||
import Footer from '../Footer'
|
||||
import LoadingHome from '../LoadingHome'
|
||||
|
||||
export default () => (
|
||||
<>
|
||||
<Categories />
|
||||
<RecentlyAdded />
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
class Home extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.startLoadingAnimation = this.startLoadingAnimation.bind(this)
|
||||
this.state = { loaded: false }
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// TODO: This is just a demo implementation. The real one would be using a flag in redux
|
||||
// that changes when the data has loaded from the smart contract/s
|
||||
setTimeout(this.startLoadingAnimation, 1000)
|
||||
}
|
||||
|
||||
startLoadingAnimation() {
|
||||
this.setState({ loaded: true })
|
||||
}
|
||||
|
||||
render() {
|
||||
const { loaded } = this.state
|
||||
|
||||
return (
|
||||
<>
|
||||
{loaded && (
|
||||
<>
|
||||
<Categories />
|
||||
<RecentlyAdded />
|
||||
<Footer />
|
||||
</>
|
||||
)}
|
||||
|
||||
{!loaded && <LoadingHome />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Home
|
||||
|
|
|
|||
|
|
@ -0,0 +1,120 @@
|
|||
import React from 'react'
|
||||
import ContentLoader from 'react-content-loader'
|
||||
import styles from './LoadingHome.module.scss'
|
||||
|
||||
const MobileLoader = () => (
|
||||
<ContentLoader width={320} height={635}>
|
||||
<rect x="15" y="15" rx="5" ry="5" width="90" height="110" />
|
||||
<rect x="113" y="15" rx="5" ry="5" width="90" height="110" />
|
||||
<rect x="211" y="15" rx="5" ry="5" width="90" height="110" />
|
||||
|
||||
<rect x="15" y="132" rx="5" ry="5" width="90" height="110" />
|
||||
<rect x="113" y="132" rx="5" ry="5" width="90" height="110" />
|
||||
<rect x="211" y="132" rx="5" ry="5" width="90" height="110" />
|
||||
|
||||
<rect x="15" y="250" rx="5" ry="5" width="90" height="110" />
|
||||
|
||||
<circle cx="35" cy="456" r="20" />
|
||||
<rect x="70" y="436" rx="5" ry="5" width="235" height="88" />
|
||||
|
||||
<circle cx="35" cy="556" r="20" />
|
||||
<rect x="70" y="532" rx="5" ry="5" width="235" height="88" />
|
||||
</ContentLoader>
|
||||
)
|
||||
|
||||
const DesktopLoader = () => (
|
||||
<ContentLoader width={1700} height={2000}>
|
||||
<rect x="15" y="50" rx="5" ry="5" width="200" height="85" />
|
||||
<rect x="223" y="50" rx="5" ry="5" width="200" height="85" />
|
||||
<rect x="431" y="50" rx="5" ry="5" width="200" height="85" />
|
||||
<rect x="639" y="50" rx="5" ry="5" width="200" height="85" />
|
||||
<rect x="847" y="50" rx="5" ry="5" width="200" height="85" />
|
||||
<rect x="1055" y="50" rx="5" ry="5" width="200" height="85" />
|
||||
<rect x="1263" y="50" rx="5" ry="5" width="200" height="85" />
|
||||
|
||||
<circle cx="35" cy="240" r="20" />
|
||||
<rect x="70" y="220" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="455" cy="240" r="20" />
|
||||
<rect x="500" y="220" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="885" cy="240" r="20" />
|
||||
<rect x="920" y="220" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="1305" cy="240" r="20" />
|
||||
<rect x="1340" y="220" rx="5" ry="5" width="325" height="88" />
|
||||
|
||||
<circle cx="35" cy="368" r="20" />
|
||||
<rect x="70" y="348" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="455" cy="368" r="20" />
|
||||
<rect x="500" y="348" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="885" cy="368" r="20" />
|
||||
<rect x="920" y="348" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="1305" cy="368" r="20" />
|
||||
<rect x="1340" y="348" rx="5" ry="5" width="325" height="88" />
|
||||
|
||||
<circle cx="35" cy="496" r="20" />
|
||||
<rect x="70" y="476" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="455" cy="496" r="20" />
|
||||
<rect x="500" y="476" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="885" cy="496" r="20" />
|
||||
<rect x="920" y="476" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="1305" cy="496" r="20" />
|
||||
<rect x="1340" y="476" rx="5" ry="5" width="325" height="88" />
|
||||
|
||||
<circle cx="35" cy="624" r="20" />
|
||||
<rect x="70" y="604" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="455" cy="624" r="20" />
|
||||
<rect x="500" y="604" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="885" cy="624" r="20" />
|
||||
<rect x="920" y="604" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="1305" cy="624" r="20" />
|
||||
<rect x="1340" y="604" rx="5" ry="5" width="325" height="88" />
|
||||
|
||||
<circle cx="35" cy="752" r="20" />
|
||||
<rect x="70" y="732" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="455" cy="752" r="20" />
|
||||
<rect x="500" y="732" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="885" cy="752" r="20" />
|
||||
<rect x="920" y="732" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="1305" cy="752" r="20" />
|
||||
<rect x="1340" y="732" rx="5" ry="5" width="325" height="88" />
|
||||
|
||||
<circle cx="35" cy="880" r="20" />
|
||||
<rect x="70" y="860" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="455" cy="880" r="20" />
|
||||
<rect x="500" y="860" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="885" cy="880" r="20" />
|
||||
<rect x="920" y="860" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="1305" cy="880" r="20" />
|
||||
<rect x="1340" y="860" rx="5" ry="5" width="325" height="88" />
|
||||
|
||||
<circle cx="35" cy="1008" r="20" />
|
||||
<rect x="70" y="988" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="455" cy="1008" r="20" />
|
||||
<rect x="500" y="988" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="885" cy="1008" r="20" />
|
||||
<rect x="920" y="988" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="1305" cy="1008" r="20" />
|
||||
<rect x="1340" y="988" rx="5" ry="5" width="325" height="88" />
|
||||
|
||||
<circle cx="35" cy="1136" r="20" />
|
||||
<rect x="70" y="1116" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="455" cy="1136" r="20" />
|
||||
<rect x="500" y="1116" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="885" cy="1136" r="20" />
|
||||
<rect x="920" y="1116" rx="5" ry="5" width="325" height="88" />
|
||||
<circle cx="1305" cy="1136" r="20" />
|
||||
<rect x="1340" y="1116" rx="5" ry="5" width="325" height="88" />
|
||||
</ContentLoader>
|
||||
)
|
||||
|
||||
const LoadingHome = () => (
|
||||
<>
|
||||
<div className={styles.mobile}>
|
||||
<MobileLoader />
|
||||
</div>
|
||||
<div className={styles.desktop}>
|
||||
<DesktopLoader />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
export default LoadingHome
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@import '../../common/styles/variables';
|
||||
|
||||
.mobile {
|
||||
@media (min-width: $desktop) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.desktop {
|
||||
display: none;
|
||||
|
||||
@media (min-width: $desktop) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import LoadingHome from './LoadingHome'
|
||||
|
||||
export default LoadingHome
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
font-family: $font;
|
||||
font-size: calculateRem(17);
|
||||
margin-left: calculateRem(15);
|
||||
margin-bottom: 0;
|
||||
margin-bottom: calculateRem(10);
|
||||
}
|
||||
|
||||
.grid {
|
||||
|
|
@ -14,8 +14,11 @@
|
|||
grid-template-rows: 1fr 1fr 1fr;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
@media (min-width: $desktop) {
|
||||
grid-auto-columns: calc(30%);
|
||||
grid-auto-flow: row;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue