refactor: use local svg file
This commit is contained in:
zerosoul
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.16739 1.33531C8.11172 1.33395 8.05592 1.33325 7.99992 1.33325C4.31792 1.33325 1.33325 4.31792 1.33325 7.99992C1.33325 11.6813 4.31792 14.6666 7.99992 14.6666C11.6819 14.6666 14.6666 11.6813 14.6666 7.99992C14.6666 7.94392 14.6659 7.88812 14.6645 7.83245C14.239 7.94179 13.7929 7.99992 13.3333 7.99992C10.3877 7.99992 7.99992 5.61211 7.99992 2.66659C7.99992 2.20693 8.05805 1.76085 8.16739 1.33531ZM6.66659 5.33325C6.66659 4.59725 6.06925 3.99992 5.33325 3.99992C4.59725 3.99992 3.99992 4.59725 3.99992 5.33325C3.99992 6.06992 4.59725 6.66659 5.33325 6.66659C6.06925 6.66659 6.66659 6.06992 6.66659 5.33325ZM7.99992 12.6666C10.0933 12.6666 11.9999 11.0779 11.9999 9.33325V8.66659H3.99992V9.33325C3.99992 11.0779 5.90659 12.6666 7.99992 12.6666Z" fill="#78787C"/>
|
||||||
|
<path d="M14.0001 2V0H12.6667V2H10.6667V3.33333H12.6667V5.33333H14.0001V3.33333H16.0001V2H14.0001Z" fill="#78787C"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M11.0004 17.5C11.0004 16.2111 11.3755 15.0098 12.0226 13.9993L4.25278 13.9999C3.01076 13.9999 2.00391 15.0068 2.00391 16.2488V17.1688C2.00391 17.7409 2.18231 18.2987 2.51427 18.7646C4.05643 20.9289 6.5794 22.0011 10.0004 22.0011C10.9317 22.0011 11.7966 21.9216 12.5921 21.7615C11.6006 20.6205 11.0004 19.1303 11.0004 17.5ZM15.0004 7.00464C15.0004 4.24321 12.7618 2.00464 10.0004 2.00464C7.23894 2.00464 5.00036 4.24321 5.00036 7.00464C5.00036 9.76606 7.23894 12.0046 10.0004 12.0046C12.7618 12.0046 15.0004 9.76606 15.0004 7.00464ZM23.0004 17.5C23.0004 14.4624 20.5379 12 17.5004 12C14.4628 12 12.0004 14.4624 12.0004 17.5C12.0004 20.5376 14.4628 23 17.5004 23C20.5379 23 23.0004 20.5376 23.0004 17.5ZM17.4105 14.008L17.5004 14L17.5902 14.008C17.7943 14.0451 17.9553 14.206 17.9923 14.4101L18.0004 14.5L17.9994 17H20.5043L20.5942 17.0081C20.7982 17.0451 20.9592 17.206 20.9962 17.4101L21.0043 17.5L20.9962 17.5899C20.9592 17.794 20.7982 17.9549 20.5942 17.9919L20.5043 18H17.9994L18.0004 20.5L17.9923 20.5899C17.9553 20.794 17.7943 20.9549 17.5902 20.9919L17.5004 21L17.4105 20.9919C17.2064 20.9549 17.0455 20.794 17.0084 20.5899L17.0004 20.5L16.9994 18H14.5043L14.4144 17.9919C14.2103 17.9549 14.0494 17.794 14.0123 17.5899L14.0043 17.5L14.0123 17.4101C14.0494 17.206 14.2103 17.0451 14.4144 17.0081L14.5043 17H16.9994L17.0004 14.5L17.0084 14.4101C17.0455 14.206 17.2064 14.0451 17.4105 14.008Z" fill="#70707B"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12.75 4.125C12.75 3.50368 12.2463 3 11.625 3C11.0037 3 10.5 3.50368 10.5 4.125V10.5H4.125C3.50368 10.5 3 11.0037 3 11.625C3 12.2463 3.50368 12.75 4.125 12.75H10.5V19.125C10.5 19.7463 11.0037 20.25 11.625 20.25C12.2463 20.25 12.75 19.7463 12.75 19.125V12.75H19.125C19.7463 12.75 20.25 12.2463 20.25 11.625C20.25 11.0037 19.7463 10.5 19.125 10.5H12.75V4.125Z" fill="#78787C"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 488 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M9.04173 19.003H14.9583C14.7196 20.4211 13.486 21.5015 12 21.5015C10.514 21.5015 9.28037 20.4211 9.04173 19.003ZM12 2.00391C16.1421 2.00391 19.5 5.36177 19.5 9.50391V13.5024L20.9183 16.6625C20.9732 16.7848 21.0016 16.9174 21.0016 17.0515C21.0016 17.5762 20.5763 18.0015 20.0516 18.0015H3.95219C3.8184 18.0015 3.68613 17.9733 3.56402 17.9186C3.08515 17.7042 2.87073 17.1422 3.08511 16.6633L4.50001 13.5028L4.50011 9.49099L4.50453 9.24107C4.6436 5.21035 7.95588 2.00391 12 2.00391Z" fill="#70707B"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 610 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M10 4L6 8L10 12" stroke="black" stroke-opacity="0.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 214 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M7.7716 2.43923L8.84819 2.09522C9.85701 1.77287 10.9349 2.29382 11.3669 3.31256L12.2266 5.33991C12.6013 6.22336 12.3934 7.26227 11.7126 7.9084L9.81832 9.70641C9.9352 10.7819 10.2967 11.8409 10.9029 12.8834C11.509 13.9259 12.266 14.7907 13.1739 15.4778L15.4491 14.7191C16.3115 14.4315 17.2507 14.762 17.7797 15.5392L19.0121 17.3498C19.627 18.2532 19.5164 19.4995 18.7534 20.2655L17.9356 21.0865C17.1217 21.9036 15.9592 22.2 14.8838 21.8645C12.3449 21.0726 10.0106 18.7214 7.88083 14.8109C5.74796 10.8947 4.99521 7.57214 5.62258 4.84313C5.88658 3.69482 6.70409 2.78033 7.7716 2.43923Z" fill="#70707B"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 713 B |
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M6.83667 8.33333L6.48667 11.6667H6.4H3.25V13.3333H6.23333L5.8 17.5H7.475L7.91667 13.3333H11.2417L10.8083 17.5H12.4917L12.9333 13.3333H16.6167V11.6667H13.1167L13.2917 10H11.6625L11.4875 11.6667H8.1625L8.5125 8.33333H10.8334V6.66667H8.66667L9.10833 2.5H7.43333L7 6.66667H3.325V8.33333H6.83667Z" fill="#616161"/>
|
||||||
|
<path d="M16.6875 4.16675V3.33341C16.6875 2.40008 15.875 1.66675 15 1.66675C14.125 1.66675 13.3333 2.40008 13.3333 3.33341V4.16675C12.8731 4.16675 12.5 4.53985 12.5 5.00008V7.50008C12.5 7.96031 12.8731 8.33341 13.3333 8.33341H15H16.6667C17.1269 8.33341 17.5 7.96031 17.5 7.50008V4.97925C17.5 4.53051 17.1362 4.16675 16.6875 4.16675ZM15.8333 4.16675H14.1667V3.33341C14.1667 2.85722 14.5556 2.50008 15 2.50008C15.4444 2.50008 15.8333 2.85722 15.8333 3.33341V4.16675Z" fill="#616161"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 905 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 d="M6.48667 11.6667L6.83667 8.33333H3.325V6.66667H7L7.43333 2.5H9.10833L8.66667 6.66667H11.9833L12.4167 2.5H14.0917L13.65 6.66667H16.625V8.33333H13.4667L13.1167 11.6667H16.6167V13.3333H12.9333L12.4917 17.5H10.8083L11.2417 13.3333H7.91667L7.475 17.5H5.8L6.23333 13.3333H3.25V11.6667H6.4H6.48667ZM8.1625 11.6667H11.4875L11.8375 8.33333H8.5125L8.1625 11.6667Z" fill="#616161"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 484 B |
@@ -1,4 +1,4 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M11.7207 25.7835C13.4371 27.17 15.6215 28.0002 17.9998 28.0002C19.5087 28.0002 20.9418 27.6654 22.2269 27.0653L26.8037 27.9809C27.1315 28.0464 27.4705 27.9438 27.7069 27.7074C27.9433 27.471 28.046 27.132 27.9804 26.8042L27.065 22.227C27.665 20.942 27.9998 19.509 27.9998 18.0002C27.9998 15.6224 27.1699 13.4385 25.7839 11.7222C25.9257 12.4597 25.9999 13.2213 25.9999 14.0002C25.9999 14.7535 25.9305 15.4906 25.7977 16.2055C25.93 16.7824 25.9998 17.3832 25.9998 18.0002C25.9998 19.3117 25.685 20.5466 25.1278 21.6365C25.0252 21.8373 24.9934 22.0668 25.0376 22.2879L25.7251 25.7255L22.2878 25.0379C22.0667 24.9936 21.8371 25.0254 21.6364 25.1281C20.5464 25.6854 19.3113 26.0002 17.9998 26.0002C17.3827 26.0002 16.7819 25.9304 16.2049 25.7981C15.4901 25.9308 14.7531 26.0002 13.9999 26.0002C13.2215 26.0002 12.4594 25.9258 11.7207 25.7835ZM14 4C8.47717 4 4.00002 8.47715 4.00002 14C4.00002 15.5088 4.3348 16.9418 4.93483 18.2267L4.01943 22.8039C3.95386 23.1318 4.05649 23.4707 4.29293 23.7072C4.52936 23.9436 4.86831 24.0462 5.19617 23.9806L9.77298 23.0651C11.058 23.6652 12.4911 24 14 24C19.5229 24 24 19.5228 24 14C24 8.47715 19.5229 4 14 4Z" fill="#4B5563"/>
|
<path d="M11.7207 25.7835C13.4371 27.17 15.6215 28.0002 17.9998 28.0002C19.5087 28.0002 20.9418 27.6654 22.2269 27.0653L26.8037 27.9809C27.1315 28.0464 27.4705 27.9438 27.7069 27.7074C27.9433 27.471 28.046 27.132 27.9804 26.8042L27.065 22.227C27.665 20.942 27.9998 19.509 27.9998 18.0002C27.9998 15.6224 27.1699 13.4385 25.7839 11.7222C25.9257 12.4597 25.9999 13.2213 25.9999 14.0002C25.9999 14.7535 25.9305 15.4906 25.7977 16.2055C25.93 16.7824 25.9998 17.3832 25.9998 18.0002C25.9998 19.3117 25.685 20.5466 25.1278 21.6365C25.0252 21.8373 24.9934 22.0668 25.0376 22.2879L25.7251 25.7255L22.2878 25.0379C22.0667 24.9936 21.8371 25.0254 21.6364 25.1281C20.5464 25.6854 19.3113 26.0002 17.9998 26.0002C17.3827 26.0002 16.7819 25.9304 16.2049 25.7981C15.4901 25.9308 14.7531 26.0002 13.9999 26.0002C13.2215 26.0002 12.4594 25.9258 11.7207 25.7835ZM14 4C8.47717 4 4.00002 8.47715 4.00002 14C4.00002 15.5088 4.3348 16.9418 4.93483 18.2267L4.01943 22.8039C3.95386 23.1318 4.05649 23.4707 4.29293 23.7072C4.52936 23.9436 4.86831 24.0462 5.19617 23.9806L9.77298 23.0651C11.058 23.6652 12.4911 24 14 24C19.5229 24 24 19.5228 24 14C24 8.47715 19.5229 4 14 4Z" fill="#4B5563"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M7 6.7929L10.5355 3.25736C10.7308 3.0621 11.0474 3.0621 11.2426 3.25736C11.4379 3.45262 11.4379 3.76921 11.2426 3.96447L7.70711 7.5L11.2426 11.0355C11.4379 11.2308 11.4379 11.5474 11.2426 11.7426C11.0474 11.9379 10.7308 11.9379 10.5355 11.7426L7 8.20711L3.46447 11.7426C3.26921 11.9379 2.95262 11.9379 2.75736 11.7426C2.5621 11.5474 2.5621 11.2308 2.75736 11.0355L6.2929 7.5L2.75736 3.96447C2.5621 3.76921 2.5621 3.45262 2.75736 3.25736C2.95262 3.0621 3.26921 3.0621 3.46447 3.25736L7 6.7929Z" fill="black" fill-opacity="0.5"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 640 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M13.7036 5.75927L18.2405 10.2962L9.33146 19.2052C9.08325 19.4534 8.77457 19.6325 8.43593 19.7249L3.84998 20.9756C3.34808 21.1124 2.88755 20.6519 3.02443 20.15L4.27515 15.5641C4.3675 15.2254 4.54664 14.9167 4.79484 14.6685L13.7036 5.75927ZM20.0604 3.93956C21.3132 5.19232 21.3132 7.22343 20.0604 8.47618L19.1907 9.34506L14.6538 4.80903L15.5238 3.93956C16.7766 2.68681 18.8077 2.68681 20.0604 3.93956Z" fill="#616161"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 530 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M17.75 3C19.5449 3 21 4.45507 21 6.25V17.75C21 19.5449 19.5449 21 17.75 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25C3 4.45507 4.45507 3 6.25 3H17.75ZM8.49315 7.64823C8.44349 7.28215 8.1297 7 7.75 7C7.33579 7 7 7.33579 7 7.75V8.75L7.00685 8.85177C7.05651 9.21785 7.3703 9.5 7.75 9.5C8.16421 9.5 8.5 9.16421 8.5 8.75V7.75L8.49315 7.64823ZM8.49315 15.1482C8.44349 14.7822 8.1297 14.5 7.75 14.5C7.33579 14.5 7 14.8358 7 15.25V16.25L7.00685 16.3518C7.05651 16.7178 7.3703 17 7.75 17C8.16421 17 8.5 16.6642 8.5 16.25V15.25L8.49315 15.1482ZM7.75685 10.6729C7.34263 10.6729 7.00685 11.0087 7.00685 11.4229L7 12.5712L7.00685 12.6729C7.05651 13.039 7.3703 13.3212 7.75 13.3212C8.16421 13.3212 8.5 12.9854 8.5 12.5712L8.50685 11.4229L8.5 11.3212C8.45034 10.9551 8.13654 10.6729 7.75685 10.6729Z" fill="#9CA3AF"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 912 B |
@@ -0,0 +1,2 @@
|
|||||||
|
|
||||||
|
<svg width="2443" height="2500" viewBox="0 0 256 262" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"/><path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"/><path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"/><path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"/></svg>
|
||||||
|
After Width: | Height: | Size: 1019 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 d="M5.33333 4C4.04467 4 3 5.07452 3 6.4V6.64156L10.0001 10.5185L17 6.64169V6.4C17 5.07452 15.9553 4 14.6667 4H5.33333ZM17 8.0046L10.2767 11.7283C10.104 11.8239 9.89621 11.8239 9.72355 11.7283L3 8.00447V13.6C3 14.9255 4.04467 16 5.33333 16H14.6667C15.9553 16 17 14.9255 17 13.6V8.0046Z" fill="#616161"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 412 B |
@@ -0,0 +1,2 @@
|
|||||||
|
|
||||||
|
<svg fill="none" height="33" viewBox="0 0 35 33" width="35" xmlns="http://www.w3.org/2000/svg"><g stroke-linecap="round" stroke-linejoin="round" stroke-width=".25"><path d="m32.9582 1-13.1341 9.7183 2.4424-5.72731z" fill="#e17726" stroke="#e17726"/><g fill="#e27625" stroke="#e27625"><path d="m2.66296 1 13.01714 9.809-2.3254-5.81802z"/><path d="m28.2295 23.5335-3.4947 5.3386 7.4829 2.0603 2.1436-7.2823z"/><path d="m1.27281 23.6501 2.13055 7.2823 7.46994-2.0603-3.48166-5.3386z"/><path d="m10.4706 14.5149-2.0786 3.1358 7.405.3369-.2469-7.969z"/><path d="m25.1505 14.5149-5.1575-4.58704-.1688 8.05974 7.4049-.3369z"/><path d="m10.8733 28.8721 4.4819-2.1639-3.8583-3.0062z"/><path d="m20.2659 26.7082 4.4689 2.1639-.6105-5.1701z"/></g><path d="m24.7348 28.8721-4.469-2.1639.3638 2.9025-.039 1.231z" fill="#d5bfb2" stroke="#d5bfb2"/><path d="m10.8732 28.8721 4.1572 1.9696-.026-1.231.3508-2.9025z" fill="#d5bfb2" stroke="#d5bfb2"/><path d="m15.1084 21.7842-3.7155-1.0884 2.6243-1.2051z" fill="#233447" stroke="#233447"/><path d="m20.5126 21.7842 1.0913-2.2935 2.6372 1.2051z" fill="#233447" stroke="#233447"/><path d="m10.8733 28.8721.6495-5.3386-4.13117.1167z" fill="#cc6228" stroke="#cc6228"/><path d="m24.0982 23.5335.6366 5.3386 3.4946-5.2219z" fill="#cc6228" stroke="#cc6228"/><path d="m27.2291 17.6507-7.405.3369.6885 3.7966 1.0913-2.2935 2.6372 1.2051z" fill="#cc6228" stroke="#cc6228"/><path d="m11.3929 20.6958 2.6242-1.2051 1.0913 2.2935.6885-3.7966-7.40495-.3369z" fill="#cc6228" stroke="#cc6228"/><path d="m8.392 17.6507 3.1049 6.0513-.1039-3.0062z" fill="#e27525" stroke="#e27525"/><path d="m24.2412 20.6958-.1169 3.0062 3.1049-6.0513z" fill="#e27525" stroke="#e27525"/><path d="m15.797 17.9876-.6886 3.7967.8704 4.4833.1949-5.9087z" fill="#e27525" stroke="#e27525"/><path d="m19.8242 17.9876-.3638 2.3584.1819 5.9216.8704-4.4833z" fill="#e27525" stroke="#e27525"/><path d="m20.5127 21.7842-.8704 4.4834.6236.4406 3.8584-3.0062.1169-3.0062z" fill="#f5841f" stroke="#f5841f"/><path d="m11.3929 20.6958.104 3.0062 3.8583 3.0062.6236-.4406-.8704-4.4834z" fill="#f5841f" stroke="#f5841f"/><path d="m20.5906 30.8417.039-1.231-.3378-.2851h-4.9626l-.3248.2851.026 1.231-4.1572-1.9696 1.4551 1.1921 2.9489 2.0344h5.0536l2.962-2.0344 1.442-1.1921z" fill="#c0ac9d" stroke="#c0ac9d"/><path d="m20.2659 26.7082-.6236-.4406h-3.6635l-.6236.4406-.3508 2.9025.3248-.2851h4.9626l.3378.2851z" fill="#161616" stroke="#161616"/><path d="m33.5168 11.3532 1.1043-5.36447-1.6629-4.98873-12.6923 9.3944 4.8846 4.1205 6.8983 2.0085 1.52-1.7752-.6626-.4795 1.0523-.9588-.8054-.622 1.0523-.8034z" fill="#763e1a" stroke="#763e1a"/><path d="m1 5.98873 1.11724 5.36447-.71451.5313 1.06527.8034-.80545.622 1.05228.9588-.66255.4795 1.51997 1.7752 6.89835-2.0085 4.8846-4.1205-12.69233-9.3944z" fill="#763e1a" stroke="#763e1a"/><path d="m32.0489 16.5234-6.8983-2.0085 2.0786 3.1358-3.1049 6.0513 4.1052-.0519h6.1318z" fill="#f5841f" stroke="#f5841f"/><path d="m10.4705 14.5149-6.89828 2.0085-2.29944 7.1267h6.11883l4.10519.0519-3.10487-6.0513z" fill="#f5841f" stroke="#f5841f"/><path d="m19.8241 17.9876.4417-7.5932 2.0007-5.4034h-8.9119l2.0006 5.4034.4417 7.5932.1689 2.3842.013 5.8958h3.6635l.013-5.8958z" fill="#f5841f" stroke="#f5841f"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 3.2 KiB |
@@ -0,0 +1,4 @@
|
|||||||
|
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M18.25 11C18.6297 11 18.9435 11.2822 18.9932 11.6482L19 11.75V12.25C19 15.8094 16.245 18.7254 12.751 18.9817L12.75 21.25C12.75 21.6642 12.4142 22 12 22C11.6203 22 11.3065 21.7178 11.2568 21.3518L11.25 21.25L11.25 18.9818C7.83323 18.7316 5.12283 15.938 5.00406 12.4863L5 12.25V11.75C5 11.3358 5.33579 11 5.75 11C6.1297 11 6.44349 11.2822 6.49315 11.6482L6.5 11.75V12.25C6.5 15.077 8.73445 17.3821 11.5336 17.4956L11.75 17.5H12.25C15.077 17.5 17.3821 15.2656 17.4956 12.4664L17.5 12.25V11.75C17.5 11.3358 17.8358 11 18.25 11ZM12 2C14.2091 2 16 3.79086 16 6V12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12V6C8 3.79086 9.79086 2 12 2Z" fill="#78787C"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 771 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M8 12C8 13.1046 7.10457 14 6 14C4.89543 14 4 13.1046 4 12C4 10.8954 4.89543 10 6 10C7.10457 10 8 10.8954 8 12ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12ZM18 14C19.1046 14 20 13.1046 20 12C20 10.8954 19.1046 10 18 10C16.8954 10 16 10.8954 16 12C16 13.1046 16.8954 14 18 14Z" fill="#616161"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 479 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M3.5 14L13.5 14.001C14.2793 14.001 14.9204 14.5963 14.9931 15.3566L15 15.501V17.5C14.999 21 11.284 22 8.5 22C5.77787 22 2.1647 21.044 2.00545 17.7296L2 17.5V15.5C2 14.7207 2.59527 14.0796 3.35561 14.0069L3.5 14ZM15.488 14H20.5C21.2793 14 21.9204 14.5944 21.9931 15.3555L22 15.5V17C21.999 20.062 19.142 21 17 21C16.32 21 15.569 20.904 14.86 20.678C15.5128 19.9277 15.9362 18.9748 15.9934 17.78L16 17.5V15.5C16 15.0056 15.8507 14.5488 15.601 14.1616L15.488 14H20.5H15.488ZM8.5 3C10.985 3 13 5.015 13 7.5C13 9.985 10.985 12 8.5 12C6.015 12 4 9.985 4 7.5C4 5.015 6.015 3 8.5 3ZM17.5 5C19.433 5 21 6.567 21 8.5C21 10.433 19.433 12 17.5 12C15.567 12 14 10.433 14 8.5C14 6.567 15.567 5 17.5 5Z" fill="#70707B"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 817 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M21.0682 7.75765L16.2425 2.93189C14.9152 1.60462 12.6777 1.96772 11.8382 3.6466L9.40281 8.51748C9.31512 8.69287 9.16223 8.82694 8.97688 8.89096L4.81061 10.3302C3.93791 10.6317 3.682 11.7427 4.33487 12.3956L7.43936 15.5001L3.00008 19.9394L3 21.0001H4.06074L8.50002 16.5607L11.6045 19.6653C12.2574 20.3181 13.3684 20.0622 13.6699 19.1895L15.1092 15.0232C15.1732 14.8379 15.3073 14.685 15.4826 14.5973L20.3535 12.1619C22.0324 11.3224 22.3955 9.08491 21.0682 7.75765Z" fill="#70707B"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 594 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM8.81606 14.5046C8.58538 14.2118 8.16104 14.1615 7.86826 14.3922C7.57548 14.6228 7.52514 15.0472 7.75582 15.34C8.77321 16.6312 10.3239 17.4006 12 17.4006C13.6739 17.4006 15.2227 16.6333 16.2402 15.345C16.4712 15.0525 16.4214 14.6281 16.1289 14.397C15.8364 14.166 15.412 14.2158 15.181 14.5084C14.4167 15.4759 13.2564 16.0508 12 16.0508C10.7419 16.0508 9.58016 15.4744 8.81606 14.5046ZM9.30082 9.07603C8.67995 9.07603 8.17664 9.57935 8.17664 10.2002C8.17664 10.8211 8.67995 11.3244 9.30082 11.3244C9.92169 11.3244 10.425 10.8211 10.425 10.2002C10.425 9.57935 9.92169 9.07603 9.30082 9.07603ZM14.7 9.07603C14.0791 9.07603 13.5758 9.57935 13.5758 10.2002C13.5758 10.8211 14.0791 11.3244 14.7 11.3244C15.3209 11.3244 15.8242 10.8211 15.8242 10.2002C15.8242 9.57935 15.3209 9.07603 14.7 9.07603Z" fill="#616161"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M9.7042 16.2945C10.0945 16.6853 10.094 17.3184 9.70324 17.7087C9.31245 18.0989 8.67928 18.0985 8.28902 17.7077L3.29241 12.7043C2.90237 12.3137 2.90255 11.681 3.29282 11.2906L8.28943 6.29297C8.67992 5.9024 9.31308 5.90234 9.70365 6.29282C10.0942 6.6833 10.0943 7.31647 9.70379 7.70703L6.411 11H13C17.3349 11 20.8645 14.4478 20.9962 18.7508L21 19C21 19.5523 20.5523 20 20 20C19.4477 20 19 19.5523 19 19C19 15.7616 16.4344 13.1224 13.2249 13.0041L13 13H6.414L9.7042 16.2945Z" fill="#616161"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 602 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 d="M17.5 17.5L12.5 12.5M14.1667 8.33333C14.1667 9.09938 14.0158 9.85792 13.7226 10.5657C13.4295 11.2734 12.9998 11.9164 12.4581 12.4581C11.9164 12.9998 11.2734 13.4295 10.5657 13.7226C9.85792 14.0158 9.09938 14.1667 8.33333 14.1667C7.56729 14.1667 6.80875 14.0158 6.10101 13.7226C5.39328 13.4295 4.75022 12.9998 4.20854 12.4581C3.66687 11.9164 3.23719 11.2734 2.94404 10.5657C2.65088 9.85792 2.5 9.09938 2.5 8.33333C2.5 6.78624 3.11458 5.30251 4.20854 4.20854C5.30251 3.11458 6.78624 2.5 8.33333 2.5C9.88043 2.5 11.3642 3.11458 12.4581 4.20854C13.5521 5.30251 14.1667 6.78624 14.1667 8.33333Z" stroke="#A1A1AA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 786 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12.0124 2.25006C12.7464 2.25852 13.4775 2.34332 14.1939 2.5031C14.5067 2.57285 14.7406 2.83357 14.7761 3.15202L14.9463 4.67887C15.0233 5.37992 15.6152 5.9109 16.3209 5.91164C16.5105 5.91194 16.6982 5.87244 16.8734 5.79489L18.2741 5.17962C18.5654 5.05165 18.9057 5.12142 19.1232 5.35368C20.1354 6.4347 20.8892 7.73121 21.3279 9.14564C21.4225 9.45064 21.3137 9.78209 21.0566 9.97156L19.8151 10.8867C19.461 11.1469 19.2518 11.5601 19.2518 11.9995C19.2518 12.439 19.461 12.8522 19.8159 13.113L21.0585 14.0284C21.3156 14.2178 21.4246 14.5493 21.3299 14.8544C20.8914 16.2685 20.138 17.565 19.1264 18.6462C18.9091 18.8784 18.569 18.9483 18.2777 18.8207L16.8714 18.2046C16.4691 18.0285 16.007 18.0543 15.6268 18.274C15.2466 18.4938 14.9935 18.8813 14.9452 19.3178L14.7761 20.8445C14.7413 21.1593 14.5124 21.4182 14.2043 21.4916C12.7558 21.8362 11.2467 21.8362 9.79828 21.4916C9.49015 21.4182 9.26129 21.1593 9.22643 20.8445L9.0576 19.32C9.00802 18.8843 8.75459 18.498 8.37467 18.279C7.99475 18.06 7.53345 18.0344 7.13244 18.2094L5.72582 18.8257C5.43446 18.9534 5.09428 18.8833 4.87703 18.651C3.86487 17.5685 3.11144 16.2706 2.67344 14.8549C2.57911 14.5499 2.68811 14.2187 2.94509 14.0294L4.18842 13.1134C4.54256 12.8532 4.75172 12.44 4.75172 12.0005C4.75172 11.5611 4.54256 11.1479 4.18796 10.8873L2.94541 9.97291C2.68804 9.78351 2.57894 9.45184 2.67361 9.14664C3.11236 7.73221 3.86619 6.4357 4.87837 5.35468C5.09584 5.12242 5.43618 5.05265 5.72749 5.18062L7.12786 5.79579C7.53081 5.97262 7.99404 5.94591 8.37601 5.72275C8.75633 5.50215 9.00953 5.11428 9.05841 4.6777L9.22849 3.15202C9.26401 2.83341 9.49811 2.5726 9.81105 2.503C10.5283 2.34348 11.2602 2.25871 12.0124 2.25006ZM11.9999 9.00001C10.3431 9.00001 8.99994 10.3432 8.99994 12C8.99994 13.6569 10.3431 15 11.9999 15C13.6568 15 14.9999 13.6569 14.9999 12C14.9999 10.3432 13.6568 9.00001 11.9999 9.00001Z" fill="#9CA3AF"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,10 @@
|
|||||||
|
|
||||||
|
<svg width="352" height="322" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g fill-rule="nonzero" fill="none">
|
||||||
|
<path d="M87.97296 282.3527L27.24133 177.02207c-5.62041-9.75765-5.62041-21.77908 0-31.53674L87.97296 40.2328c5.64643-9.78367 16.08061-15.79439 27.32143-15.79439h121.3852c11.26684 0 21.72704 6.01072 27.32143 15.7944l60.75765 105.30458c5.62041 9.75766 5.62041 21.77909 0 31.53674l-60.73163 105.33061c-5.64643 9.78367-16.08061 15.79439-27.32143 15.79439H115.37245c-11.31888-.05204-21.72704-6.08878-27.3995-15.84643z" fill="#FFF"/>
|
||||||
|
<path d="M93.15102 275.19708l-57.1148-99.0597c-5.30816-9.1852-5.30816-20.50408 0-29.66326l57.1148-99.08572c5.33418-9.21122 15.14388-14.85765 25.73418-14.85765h114.2296c10.5903 0 20.42602 5.64643 25.73418 14.85765l57.16684 99.03368c5.30816 9.1852 5.30816 20.50408 0 29.66326L258.875 275.2231c-5.33418 9.21122-15.14388 14.85765-25.73418 14.85765H118.93724c-10.64234 0-20.45204-5.67245-25.78622-14.88367z" fill="#7C4DFF"/>
|
||||||
|
<path d="M118.46888 142.2328h117.53418c1.48316 0 2.65408-1.19695 2.65408-2.65409v-22.03928c0-14.6495-11.89132-26.54085-26.54081-26.54085h-70.56735c-20.5301-.026-37.15722 16.60105-37.15722 37.13115-.02594 7.83214 6.271 14.10306 14.07712 14.10306zM129.99592 239.60116H200.225c21.20663 0 38.43214-17.22551 38.43214-38.43214 0-7.07755-5.72449-12.82806-12.82806-12.82806H106.94184c-1.45715 0-2.55005 1.17091-2.55005 2.55v23.05408c-.02597 14.18112 11.47505 25.65612 25.60413 25.65612z" fill="#F7F7F7"/>
|
||||||
|
<path d="M109.59592 139.3185l87.66275 87.66276c5.80255 5.80255 15.19592 5.80255 20.99847 0l15.19592-15.19592c5.80255-5.80255 5.80255-15.19591 0-20.99847l-87.63673-87.66275c-5.80255-5.80255-15.19592-5.80255-20.99847 0l-15.19592 15.19592c-5.8546 5.80255-5.8546 15.22194-.02602 20.99847z" fill="#F7F7F7"/>
|
||||||
|
<path fill="#444" opacity=".3" d="M198.6898 228.46443l-51.4944-40.12347h11.39695zM144.35918 101.66698l40.56582 40.56581h13.7648z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,4 @@
|
|||||||
|
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M15 4.25V19.7456C15 20.8243 13.7255 21.3965 12.9194 20.6797L8.42793 16.686C8.29063 16.5639 8.11329 16.4965 7.92956 16.4965H4.25C3.00736 16.4965 2 15.4891 2 14.2465V9.74859C2 8.50595 3.00736 7.49859 4.25 7.49859H7.92961C8.11333 7.49859 8.29065 7.43116 8.42794 7.30909L12.9195 3.31583C13.7255 2.59915 15 3.17138 15 4.25ZM18.9916 5.89733C19.3244 5.65079 19.7941 5.72077 20.0407 6.05362C21.2717 7.7157 22 9.7739 22 12C22 14.2261 21.2717 16.2843 20.0407 17.9464C19.7941 18.2793 19.3244 18.3492 18.9916 18.1027C18.6587 17.8562 18.5888 17.3865 18.8353 17.0536C19.8815 15.6411 20.5 13.8939 20.5 12C20.5 10.1062 19.8815 8.35896 18.8353 6.94641C18.5888 6.61356 18.6587 6.14387 18.9916 5.89733ZM17.143 8.36933C17.5072 8.17214 17.9624 8.30757 18.1596 8.67184C18.6958 9.66245 19 10.7968 19 12C19 13.2032 18.6958 14.3376 18.1596 15.3282C17.9624 15.6924 17.5072 15.8279 17.143 15.6307C16.7787 15.4335 16.6432 14.9783 16.8404 14.6141C17.2609 13.8373 17.5 12.9477 17.5 12C17.5 11.0523 17.2609 10.1627 16.8404 9.38593C16.6432 9.02167 16.7787 8.56652 17.143 8.36933Z" fill="#78787C"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 6.25C21 4.45507 19.5449 3 17.75 3H6.25C4.45507 3 3 4.45507 3 6.25V17.75C3 19.5449 4.45507 21 6.25 21H17.75C19.5449 21 21 19.5449 21 17.75V6.25ZM7.25 15.5C6.83579 15.5 6.5 15.8358 6.5 16.25C6.5 16.6642 6.83579 17 7.25 17H11.75C12.1642 17 12.5 16.6642 12.5 16.25C12.5 15.8358 12.1642 15.5 11.75 15.5H7.25ZM6.5 12.25C6.5 11.8358 6.83579 11.5 7.25 11.5H11.75C12.1642 11.5 12.5 11.8358 12.5 12.25C12.5 12.6642 12.1642 13 11.75 13H7.25C6.83579 13 6.5 12.6642 6.5 12.25ZM7.25 7C6.83579 7 6.5 7.33579 6.5 7.75C6.5 8.16421 6.83579 8.5 7.25 8.5H11.75C12.1642 8.5 12.5 8.16421 12.5 7.75C12.5 7.33579 12.1642 7 11.75 7H7.25Z" fill="#9CA3AF"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 787 B |
@@ -0,0 +1,22 @@
|
|||||||
|
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g filter="url(#filter0_dd_4473_35750)">
|
||||||
|
<circle cx="17" cy="16" r="14" fill="white"/>
|
||||||
|
</g>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.25 9.25H11.75C10.9216 9.25 10.25 9.92157 10.25 10.75V21.25C10.25 22.0784 10.9216 22.75 11.75 22.75H22.25C23.0784 22.75 23.75 22.0784 23.75 21.25V16.75H22.25V21.25H11.75V10.75H16.25V9.25H19.25ZM18.47 16.2175L16.4075 18.8725L14.9375 17.1025L12.875 19.75H21.125L18.47 16.2175ZM22.25 10.75H24.5V12.25H22.25V14.5H20.75V12.25H18.5V10.75H20.75V8.5H22.25V10.75Z" fill="#99AAB5"/>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_dd_4473_35750" x="0" y="0" width="34" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset dy="1"/>
|
||||||
|
<feGaussianBlur stdDeviation="1"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.06 0"/>
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4473_35750"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset dy="1"/>
|
||||||
|
<feGaussianBlur stdDeviation="1.5"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.1 0"/>
|
||||||
|
<feBlend mode="normal" in2="effect1_dropShadow_4473_35750" result="effect2_dropShadow_4473_35750"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_4473_35750" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M16 16.25C16 18.0449 14.5449 19.5 12.75 19.5H5.25C3.45507 19.5 2 18.0449 2 16.25V7.75C2 5.95507 3.45507 4.5 5.25 4.5H12.75C14.5449 4.5 16 5.95507 16 7.75V16.25ZM21.762 5.89334C21.9156 6.07414 22 6.30368 22 6.54096V17.4588C22 18.0111 21.5523 18.4588 21 18.4588C20.7627 18.4588 20.5332 18.3744 20.3524 18.2208L17 15.3709V8.62794L20.3524 5.77899C20.7732 5.42132 21.4043 5.47252 21.762 5.89334Z" fill="#70707B"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 521 B |
@@ -1,5 +1,6 @@
|
|||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
import uploadIcon from "../../assets/icons/upload.image.svg?url";
|
||||||
import { getInitials, getInitialsAvatar } from "../utils";
|
import { getInitials, getInitialsAvatar } from "../utils";
|
||||||
const StyledWrapper = styled.div`
|
const StyledWrapper = styled.div`
|
||||||
width: 96px;
|
width: 96px;
|
||||||
@@ -101,13 +102,7 @@ export default function AvatarUploader({
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{!disabled && (
|
{!disabled && <img src={uploadIcon} alt="icon" className="icon" />}
|
||||||
<img
|
|
||||||
src="https://static.nicegoodthings.com/project/rustchat/icon.avatar.uploader.svg"
|
|
||||||
alt="icon"
|
|
||||||
className="icon"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</StyledWrapper>
|
</StyledWrapper>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,49 +1,12 @@
|
|||||||
// import React from 'react';
|
// import React from 'react';
|
||||||
const HashIcon = ({ size = 20, color = "#616161", ...rest }) => {
|
import hashIcon from "../../assets/icons/channel.svg?url";
|
||||||
|
import lockHashIcon from "../../assets/icons/channel.private.svg?url";
|
||||||
|
export default function ChannelIcon({ personal = false, ...rest }) {
|
||||||
return (
|
return (
|
||||||
<svg
|
<img
|
||||||
width={size}
|
src={personal ? lockHashIcon : hashIcon}
|
||||||
height={size}
|
alt="channel icon"
|
||||||
viewBox={`0 0 ${size} ${size}`}
|
|
||||||
fill="none"
|
|
||||||
{...rest}
|
{...rest}
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M6.48667 11.6667L6.83667 8.33333H3.325V6.66667H7L7.43333 2.5H9.10833L8.66667 6.66667H11.9833L12.4167 2.5H14.0917L13.65 6.66667H16.625V8.33333H13.4667L13.1167 11.6667H16.6167V13.3333H12.9333L12.4917 17.5H10.8083L11.2417 13.3333H7.91667L7.475 17.5H5.8L6.23333 13.3333H3.25V11.6667H6.4H6.48667ZM8.1625 11.6667H11.4875L11.8375 8.33333H8.5125L8.1625 11.6667Z"
|
|
||||||
fill={color}
|
|
||||||
/>
|
/>
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const PrivateHashIcon = ({ size = 20, color = "#616161", ...rest }) => {
|
|
||||||
return (
|
|
||||||
<svg
|
|
||||||
width={size}
|
|
||||||
height={size}
|
|
||||||
viewBox={`0 0 ${size} ${size}`}
|
|
||||||
fill="none"
|
|
||||||
{...rest}
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M6.83667 8.33333L6.48667 11.6667H6.4H3.25V13.3333H6.23333L5.8 17.5H7.475L7.91667 13.3333H11.2417L10.8083 17.5H12.4917L12.9333 13.3333H16.6167V11.6667H13.1167L13.2917 10H11.6625L11.4875 11.6667H8.1625L8.5125 8.33333H10.8334V6.66667H8.66667L9.10833 2.5H7.43333L7 6.66667H3.325V8.33333H6.83667Z"
|
|
||||||
fill={color}
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M16.6875 4.16663V3.33329C16.6875 2.39996 15.875 1.66663 15 1.66663C14.125 1.66663 13.3333 2.39996 13.3333 3.33329V4.16663C12.8731 4.16663 12.5 4.53973 12.5 4.99996V7.49996C12.5 7.96019 12.8731 8.33329 13.3333 8.33329H15H16.6667C17.1269 8.33329 17.5 7.96019 17.5 7.49996V4.97913C17.5 4.53039 17.1362 4.16663 16.6875 4.16663ZM15.8333 4.16663H14.1667V3.33329C14.1667 2.8571 14.5556 2.49996 15 2.49996C15.4444 2.49996 15.8333 2.8571 15.8333 3.33329V4.16663Z"
|
|
||||||
fill={color}
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export default function ChannelIcon({
|
|
||||||
personal = false,
|
|
||||||
size = 20,
|
|
||||||
color = "#616161",
|
|
||||||
...rest
|
|
||||||
}) {
|
|
||||||
return personal ? (
|
|
||||||
<PrivateHashIcon size={size} color={color} {...rest} />
|
|
||||||
) : (
|
|
||||||
<HashIcon size={size} color={color} {...rest} />
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ import Input from "../styled/Input";
|
|||||||
import Label from "../styled/Label";
|
import Label from "../styled/Label";
|
||||||
import Textarea from "../styled/Textarea";
|
import Textarea from "../styled/Textarea";
|
||||||
import SaveTip from "../SaveTip";
|
import SaveTip from "../SaveTip";
|
||||||
|
import channelIcon from "../../../assets/icons/channel.svg?url";
|
||||||
const StyledWrapper = styled.div`
|
const StyledWrapper = styled.div`
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 512px;
|
width: 512px;
|
||||||
@@ -29,7 +30,7 @@ const StyledWrapper = styled.div`
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
.name {
|
.name {
|
||||||
padding-left: 36px;
|
padding-left: 36px;
|
||||||
background: url(https://static.nicegoodthings.com/project/rustchat/icon.hash.svg);
|
background: url(${channelIcon});
|
||||||
background-size: 20px;
|
background-size: 20px;
|
||||||
background-position-x: 8px;
|
background-position-x: 8px;
|
||||||
background-position-y: 8px;
|
background-position-y: 8px;
|
||||||
|
|||||||
@@ -7,6 +7,8 @@ import useCopy from "../hook/useCopy";
|
|||||||
import { useLazyDeleteContactQuery } from "../../app/services/contact";
|
import { useLazyDeleteContactQuery } from "../../app/services/contact";
|
||||||
import Contact from "./Contact";
|
import Contact from "./Contact";
|
||||||
import StyledMenu from "./StyledMenu";
|
import StyledMenu from "./StyledMenu";
|
||||||
|
import InviteLink from "./InviteLink";
|
||||||
|
import moreIcon from "../../assets/icons/more.svg?url";
|
||||||
const StyledWrapper = styled.section`
|
const StyledWrapper = styled.section`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -116,6 +118,7 @@ export default function ManageMembers({ members = [] }) {
|
|||||||
const uids = !members || members.length == 0 ? contacts.ids : members;
|
const uids = !members || members.length == 0 ? contacts.ids : members;
|
||||||
return (
|
return (
|
||||||
<StyledWrapper>
|
<StyledWrapper>
|
||||||
|
<InviteLink />
|
||||||
<div className="intro">
|
<div className="intro">
|
||||||
<h4 className="title">Manage Members</h4>
|
<h4 className="title">Manage Members</h4>
|
||||||
<p className="desc">
|
<p className="desc">
|
||||||
@@ -142,7 +145,7 @@ export default function ManageMembers({ members = [] }) {
|
|||||||
data-uid={uid}
|
data-uid={uid}
|
||||||
onClick={toggleMenu}
|
onClick={toggleMenu}
|
||||||
className="dots"
|
className="dots"
|
||||||
src="https://static.nicegoodthings.com/project/rustchat/icon.dots.svg"
|
src={moreIcon}
|
||||||
alt="dots icon"
|
alt="dots icon"
|
||||||
/>
|
/>
|
||||||
{menuVisible == uid && (
|
{menuVisible == uid && (
|
||||||
|
|||||||
@@ -7,7 +7,12 @@ import { addReplyingMessage } from "../../../app/slices/message";
|
|||||||
import StyledMenu from "../StyledMenu";
|
import StyledMenu from "../StyledMenu";
|
||||||
import DeleteMessageConfirm from "./DeleteMessageConfirm";
|
import DeleteMessageConfirm from "./DeleteMessageConfirm";
|
||||||
import EmojiPicker from "./EmojiPicker";
|
import EmojiPicker from "./EmojiPicker";
|
||||||
|
import replyIcon from "../../../assets/icons/reply.svg?url";
|
||||||
|
import reactIcon from "../../../assets/icons/reaction.svg?url";
|
||||||
|
import editIcon from "../../../assets/icons/edit.svg?url";
|
||||||
|
import moreIcon from "../../../assets/icons/more.svg?url";
|
||||||
const StyledCmds = styled.ul`
|
const StyledCmds = styled.ul`
|
||||||
|
z-index: 9999;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -33,6 +38,12 @@ const StyledCmds = styled.ul`
|
|||||||
height: 24px;
|
height: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
> .picker {
|
||||||
|
position: absolute;
|
||||||
|
left: -10px;
|
||||||
|
top: 0;
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
.menu {
|
.menu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -70,34 +81,24 @@ export default function Commands({
|
|||||||
return (
|
return (
|
||||||
<StyledCmds className={`cmds ${alwaysVisible ? "visible" : ""}`}>
|
<StyledCmds className={`cmds ${alwaysVisible ? "visible" : ""}`}>
|
||||||
<li className="cmd" onClick={toggleEmojiPopover}>
|
<li className="cmd" onClick={toggleEmojiPopover}>
|
||||||
<img
|
<img src={reactIcon} alt="icon emoji" />
|
||||||
src="https://static.nicegoodthings.com/project/rustchat/icon.reply.svg"
|
|
||||||
alt="icon emoji"
|
|
||||||
/>
|
|
||||||
</li>
|
</li>
|
||||||
{emojiPopVisible && (
|
{emojiPopVisible && (
|
||||||
|
<div className="picker">
|
||||||
<EmojiPicker mid={mid} hidePicker={toggleEmojiPopover} />
|
<EmojiPicker mid={mid} hidePicker={toggleEmojiPopover} />
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
{currUid == from_uid ? (
|
{currUid == from_uid ? (
|
||||||
<li className="cmd" onClick={toggleEditMessage}>
|
<li className="cmd" onClick={toggleEditMessage}>
|
||||||
<img
|
<img src={editIcon} alt="icon edit" />
|
||||||
src="https://static.nicegoodthings.com/project/rustchat/icon.edit.svg"
|
|
||||||
alt="icon edit"
|
|
||||||
/>
|
|
||||||
</li>
|
</li>
|
||||||
) : (
|
) : (
|
||||||
<li className="cmd" onClick={handleReply}>
|
<li className="cmd" onClick={handleReply}>
|
||||||
<img
|
<img src={replyIcon} alt="icon reply" />
|
||||||
src="https://static.nicegoodthings.com/project/rustchat/icon.forward.svg"
|
|
||||||
alt="icon reply"
|
|
||||||
/>
|
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
<li className="cmd" onClick={toggleMenu}>
|
<li className="cmd" onClick={toggleMenu}>
|
||||||
<img
|
<img src={moreIcon} alt="icon emoji" />
|
||||||
src="https://static.nicegoodthings.com/project/rustchat/icon.dots.svg"
|
|
||||||
alt="icon emoji"
|
|
||||||
/>
|
|
||||||
</li>
|
</li>
|
||||||
{menuVisible && (
|
{menuVisible && (
|
||||||
<StyledMenu className="menu" ref={menuRef}>
|
<StyledMenu className="menu" ref={menuRef}>
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
import settingIcon from "../../assets/icons/setting.svg?url";
|
||||||
const StyledWrapper = styled.div`
|
const StyledWrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -68,7 +69,8 @@ const StyledWrapper = styled.div`
|
|||||||
display: flex;
|
display: flex;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
background-image: url("https://static.nicegoodthings.com/project/rustchat/icon.setting.svg");
|
background-image: url(${settingIcon});
|
||||||
|
background-size: 16px;
|
||||||
}
|
}
|
||||||
> .badge {
|
> .badge {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@@ -161,6 +163,12 @@ const StyledWrapper = styled.div`
|
|||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
line-height: 10px;
|
line-height: 10px;
|
||||||
|
&.dot {
|
||||||
|
min-width: unset;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
&.mute {
|
&.mute {
|
||||||
background: #bfbfbf;
|
background: #bfbfbf;
|
||||||
}
|
}
|
||||||
|
|||||||
+5
-10
@@ -1,6 +1,9 @@
|
|||||||
// import React from 'react'
|
// import React from 'react'
|
||||||
import { useDispatch } from "react-redux";
|
import { useDispatch } from "react-redux";
|
||||||
import { toggleSetting } from "../../app/slices/ui";
|
import { toggleSetting } from "../../app/slices/ui";
|
||||||
|
import settingIcon from "../../assets/icons/setting.svg?url";
|
||||||
|
import foldIcon from "../../assets/icons/fold.svg?url";
|
||||||
|
import unfoldIcon from "../../assets/icons/unfold.svg?url";
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
const StyledMenus = styled.ul`
|
const StyledMenus = styled.ul`
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -38,11 +41,7 @@ export default function Menu({ toggle, expand = true }) {
|
|||||||
return (
|
return (
|
||||||
<StyledMenus>
|
<StyledMenus>
|
||||||
<li className="menu" onClick={handleSetting}>
|
<li className="menu" onClick={handleSetting}>
|
||||||
<img
|
<img src={settingIcon} alt="setting icon" className="icon" />
|
||||||
src="https://static.nicegoodthings.com/project/rustchat/menu.setting.png"
|
|
||||||
alt="setting icon"
|
|
||||||
className="icon"
|
|
||||||
/>
|
|
||||||
{expand && (
|
{expand && (
|
||||||
<span className="txt animate__animated animate__fadeIn">
|
<span className="txt animate__animated animate__fadeIn">
|
||||||
Settings
|
Settings
|
||||||
@@ -51,11 +50,7 @@ export default function Menu({ toggle, expand = true }) {
|
|||||||
</li>
|
</li>
|
||||||
<li className="menu" onClick={toggle}>
|
<li className="menu" onClick={toggle}>
|
||||||
<img
|
<img
|
||||||
src={
|
src={expand ? foldIcon : unfoldIcon}
|
||||||
expand
|
|
||||||
? "https://static.nicegoodthings.com/project/rustchat/menu.toggle.collapse.png"
|
|
||||||
: "https://static.nicegoodthings.com/project/rustchat/menu.toggle.expand.png"
|
|
||||||
}
|
|
||||||
alt="expand icon"
|
alt="expand icon"
|
||||||
className="icon"
|
className="icon"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -12,8 +12,8 @@ import usePreload from "./usePreload";
|
|||||||
import SettingModal from "../../common/component/Setting";
|
import SettingModal from "../../common/component/Setting";
|
||||||
import ChannelSettingModal from "../../common/component/ChannelSetting";
|
import ChannelSettingModal from "../../common/component/ChannelSetting";
|
||||||
|
|
||||||
import ChatIcon from "../../assets/icons/chat.svg";
|
import ChatIcon from "../../assets/icons/chat.svg?url";
|
||||||
import ContactIcon from "../../assets/icons/contact.svg";
|
import ContactIcon from "../../assets/icons/contact.svg?url";
|
||||||
// import NotificationHub from "../../common/component/NotificationHub";
|
// import NotificationHub from "../../common/component/NotificationHub";
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
@@ -29,7 +29,7 @@ export default function HomePage() {
|
|||||||
const toggleExpand = () => {
|
const toggleExpand = () => {
|
||||||
dispatch(toggleMenuExpand());
|
dispatch(toggleMenuExpand());
|
||||||
};
|
};
|
||||||
console.log("index loading", loading, ready);
|
// console.log("index loading", loading, ready);
|
||||||
if (loading || !ready) {
|
if (loading || !ready) {
|
||||||
return <Loading />;
|
return <Loading />;
|
||||||
}
|
}
|
||||||
|
|||||||
+41
-32
@@ -1,25 +1,30 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from "react";
|
||||||
import StyledWrapper from './styled';
|
import StyledWrapper from "./styled";
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from "react-router-dom";
|
||||||
import toast from 'react-hot-toast';
|
import toast from "react-hot-toast";
|
||||||
|
import BASE_URL from "../../app/config";
|
||||||
import { useRegisterMutation } from '../../app/services/contact';
|
import { useRegisterMutation } from "../../app/services/contact";
|
||||||
import { useCheckInviteTokenValidMutation } from '../../app/services/auth';
|
import { useCheckInviteTokenValidMutation } from "../../app/services/auth";
|
||||||
|
|
||||||
export default function InvitePage() {
|
export default function InvitePage() {
|
||||||
const [secondPwd, setSecondPwd] = useState('');
|
const [secondPwd, setSecondPwd] = useState("");
|
||||||
const [samePwd, setSamePwd] = useState(true);
|
const [samePwd, setSamePwd] = useState(true);
|
||||||
const [token, setToken] = useState('');
|
const [token, setToken] = useState("");
|
||||||
const [valid, setValid] = useState(false);
|
const [valid, setValid] = useState(false);
|
||||||
// const [sp] = useSearchParams();
|
// const [sp] = useSearchParams();
|
||||||
const navigateTo = useNavigate();
|
const navigateTo = useNavigate();
|
||||||
const [register, { data, isLoading, isSuccess, isError, error }] = useRegisterMutation();
|
const [
|
||||||
const [checkToken, { data: isValid, isLoading: checkLoading, isSuccess: checkSuccess }] =
|
register,
|
||||||
useCheckInviteTokenValidMutation();
|
{ data, isLoading, isSuccess, isError, error },
|
||||||
|
] = useRegisterMutation();
|
||||||
|
const [
|
||||||
|
checkToken,
|
||||||
|
{ data: isValid, isLoading: checkLoading, isSuccess: checkSuccess },
|
||||||
|
] = useCheckInviteTokenValidMutation();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// console.log(search);
|
// console.log(search);
|
||||||
const query = new URLSearchParams(location.search);
|
const query = new URLSearchParams(location.search);
|
||||||
setToken(query.get('token'));
|
setToken(query.get("token"));
|
||||||
}, []);
|
}, []);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (token) {
|
if (token) {
|
||||||
@@ -36,22 +41,22 @@ export default function InvitePage() {
|
|||||||
}, [checkSuccess, isValid]);
|
}, [checkSuccess, isValid]);
|
||||||
|
|
||||||
const [input, setInput] = useState({
|
const [input, setInput] = useState({
|
||||||
name: '',
|
name: "",
|
||||||
email: '',
|
email: "",
|
||||||
password: ''
|
password: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleReg = (evt) => {
|
const handleReg = (evt) => {
|
||||||
evt.preventDefault();
|
evt.preventDefault();
|
||||||
if (!samePwd) {
|
if (!samePwd) {
|
||||||
toast.error('two passwords not same');
|
toast.error("two passwords not same");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
console.log('wtf', input);
|
console.log("wtf", input);
|
||||||
register({
|
register({
|
||||||
...input,
|
...input,
|
||||||
magic_token: token,
|
magic_token: token,
|
||||||
gender: 1
|
gender: 1,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const handleInput = (evt) => {
|
const handleInput = (evt) => {
|
||||||
@@ -74,48 +79,48 @@ export default function InvitePage() {
|
|||||||
};
|
};
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!samePwd) {
|
if (!samePwd) {
|
||||||
toast.error('two passwords not same');
|
toast.error("two passwords not same");
|
||||||
}
|
}
|
||||||
}, [samePwd]);
|
}, [samePwd]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isSuccess && data) {
|
if (isSuccess && data) {
|
||||||
// 去登录
|
// 去登录
|
||||||
toast.success('register success, login please');
|
toast.success("register success, login please");
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
navigateTo('/login');
|
navigateTo("/login");
|
||||||
}, 500);
|
}, 500);
|
||||||
} else if (isError) {
|
} else if (isError) {
|
||||||
console.log('register failed', error);
|
console.log("register failed", error);
|
||||||
switch (error.status) {
|
switch (error.status) {
|
||||||
case 412:
|
case 412:
|
||||||
toast.error('register failed: invalid token or expired');
|
toast.error("register failed: invalid token or expired");
|
||||||
break;
|
break;
|
||||||
case 409: {
|
case 409: {
|
||||||
const tips = {
|
const tips = {
|
||||||
email_conflict: 'email conflict',
|
email_conflict: "email conflict",
|
||||||
name_conflict: 'name conflict'
|
name_conflict: "name conflict",
|
||||||
};
|
};
|
||||||
toast.error(`register failed: ${tips[error.data?.reason]}`);
|
toast.error(`register failed: ${tips[error.data?.reason]}`);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
default:
|
default:
|
||||||
toast.error('register failed');
|
toast.error("register failed");
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [data, isSuccess, isError, error]);
|
}, [data, isSuccess, isError, error]);
|
||||||
|
|
||||||
const { email, password, name } = input;
|
const { email, password, name } = input;
|
||||||
if (!token) return 'token not found';
|
if (!token) return "token not found";
|
||||||
if (checkLoading) return 'checking token valid';
|
if (checkLoading) return "checking token valid";
|
||||||
if (!valid) return 'invite token expires or invalid';
|
if (!valid) return "invite token expires or invalid";
|
||||||
return (
|
return (
|
||||||
<StyledWrapper>
|
<StyledWrapper>
|
||||||
<div className="form animate__animated animate__fadeInDown animate__faster">
|
<div className="form animate__animated animate__fadeInDown animate__faster">
|
||||||
<div className="tips">
|
<div className="tips">
|
||||||
<img
|
<img
|
||||||
src="https://static.nicegoodthings.com/project/ext/webrowse.logo.png"
|
src={`${BASE_URL}/resource/organization/logo`}
|
||||||
alt="logo"
|
alt="logo"
|
||||||
className="logo"
|
className="logo"
|
||||||
/>
|
/>
|
||||||
@@ -158,7 +163,11 @@ export default function InvitePage() {
|
|||||||
onChange={handleSecondPwdInput}
|
onChange={handleSecondPwdInput}
|
||||||
placeholder="Enter your password again"
|
placeholder="Enter your password again"
|
||||||
/>
|
/>
|
||||||
<button disabled={isLoading || isSuccess} className="btn" type="submit">
|
<button
|
||||||
|
disabled={isLoading || isSuccess}
|
||||||
|
className="btn"
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
Sign Up
|
Sign Up
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -1,30 +1,33 @@
|
|||||||
// import { useState, useEffect } from "react";
|
// import { useState, useEffect } from "react";
|
||||||
import { useGoogleLogin } from 'react-google-login';
|
import { useGoogleLogin } from "react-google-login";
|
||||||
import { googleClientID } from '../../app/config';
|
import { googleClientID } from "../../app/config";
|
||||||
|
import googleSvg from "../../assets/icons/google.svg?url";
|
||||||
|
|
||||||
export default function GoogleLoginButton({ login }) {
|
export default function GoogleLoginButton({ login }) {
|
||||||
const { signIn, loaded } = useGoogleLogin({
|
const { signIn, loaded } = useGoogleLogin({
|
||||||
clientId: googleClientID,
|
clientId: googleClientID,
|
||||||
onSuccess: ({ tokenId, ...rest }) => {
|
onSuccess: ({ tokenId, ...rest }) => {
|
||||||
console.log('success', tokenId, rest);
|
console.log("success", tokenId, rest);
|
||||||
login({
|
login({
|
||||||
id_token: tokenId,
|
id_token: tokenId,
|
||||||
type: 'google'
|
type: "google",
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
onFailure: (wtf) => {
|
onFailure: (wtf) => {
|
||||||
console.log('failure', wtf);
|
console.log("failure", wtf);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
const handleGoogleLogin = () => {
|
const handleGoogleLogin = () => {
|
||||||
signIn();
|
signIn();
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<button disabled={!loaded} onClick={handleGoogleLogin} href="#" className="btn social">
|
<button
|
||||||
<img
|
disabled={!loaded}
|
||||||
className="icon"
|
onClick={handleGoogleLogin}
|
||||||
src="https://static.nicegoodthings.com/project/rustchat/google.icon.png"
|
href="#"
|
||||||
alt="google icon"
|
className="btn social"
|
||||||
/>
|
>
|
||||||
|
<img className="icon" src={googleSvg} alt="google icon" />
|
||||||
Sign in with Google
|
Sign in with Google
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
import { useState, useEffect, useRef } from "react";
|
import { useState, useEffect, useRef } from "react";
|
||||||
import MetaMaskOnboarding from "@metamask/onboarding";
|
import MetaMaskOnboarding from "@metamask/onboarding";
|
||||||
import { useLazyGetMetamaskNonceQuery } from "../../app/services/auth";
|
import { useLazyGetMetamaskNonceQuery } from "../../app/services/auth";
|
||||||
|
import metamaskSvg from "../../assets/icons/metamask.svg?url";
|
||||||
export default function MetamaskLoginButton({ login }) {
|
export default function MetamaskLoginButton({ login }) {
|
||||||
const [requesting, setRequesting] = useState(false);
|
const [requesting, setRequesting] = useState(false);
|
||||||
const [getNonce] = useLazyGetMetamaskNonceQuery();
|
const [getNonce] = useLazyGetMetamaskNonceQuery();
|
||||||
@@ -48,11 +49,7 @@ export default function MetamaskLoginButton({ login }) {
|
|||||||
href="#"
|
href="#"
|
||||||
className="btn social"
|
className="btn social"
|
||||||
>
|
>
|
||||||
<img
|
<img className="icon" src={metamaskSvg} alt="meta mask icon" />
|
||||||
className="icon"
|
|
||||||
src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjMzIiB2aWV3Qm94PSIwIDAgMzUgMzMiIHdpZHRoPSIzNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iLjI1Ij48cGF0aCBkPSJtMzIuOTU4MiAxLTEzLjEzNDEgOS43MTgzIDIuNDQyNC01LjcyNzMxeiIgZmlsbD0iI2UxNzcyNiIgc3Ryb2tlPSIjZTE3NzI2Ii8+PGcgZmlsbD0iI2UyNzYyNSIgc3Ryb2tlPSIjZTI3NjI1Ij48cGF0aCBkPSJtMi42NjI5NiAxIDEzLjAxNzE0IDkuODA5LTIuMzI1NC01LjgxODAyeiIvPjxwYXRoIGQ9Im0yOC4yMjk1IDIzLjUzMzUtMy40OTQ3IDUuMzM4NiA3LjQ4MjkgMi4wNjAzIDIuMTQzNi03LjI4MjN6Ii8+PHBhdGggZD0ibTEuMjcyODEgMjMuNjUwMSAyLjEzMDU1IDcuMjgyMyA3LjQ2OTk0LTIuMDYwMy0zLjQ4MTY2LTUuMzM4NnoiLz48cGF0aCBkPSJtMTAuNDcwNiAxNC41MTQ5LTIuMDc4NiAzLjEzNTggNy40MDUuMzM2OS0uMjQ2OS03Ljk2OXoiLz48cGF0aCBkPSJtMjUuMTUwNSAxNC41MTQ5LTUuMTU3NS00LjU4NzA0LS4xNjg4IDguMDU5NzQgNy40MDQ5LS4zMzY5eiIvPjxwYXRoIGQ9Im0xMC44NzMzIDI4Ljg3MjEgNC40ODE5LTIuMTYzOS0zLjg1ODMtMy4wMDYyeiIvPjxwYXRoIGQ9Im0yMC4yNjU5IDI2LjcwODIgNC40Njg5IDIuMTYzOS0uNjEwNS01LjE3MDF6Ii8+PC9nPjxwYXRoIGQ9Im0yNC43MzQ4IDI4Ljg3MjEtNC40NjktMi4xNjM5LjM2MzggMi45MDI1LS4wMzkgMS4yMzF6IiBmaWxsPSIjZDViZmIyIiBzdHJva2U9IiNkNWJmYjIiLz48cGF0aCBkPSJtMTAuODczMiAyOC44NzIxIDQuMTU3MiAxLjk2OTYtLjAyNi0xLjIzMS4zNTA4LTIuOTAyNXoiIGZpbGw9IiNkNWJmYjIiIHN0cm9rZT0iI2Q1YmZiMiIvPjxwYXRoIGQ9Im0xNS4xMDg0IDIxLjc4NDItMy43MTU1LTEuMDg4NCAyLjYyNDMtMS4yMDUxeiIgZmlsbD0iIzIzMzQ0NyIgc3Ryb2tlPSIjMjMzNDQ3Ii8+PHBhdGggZD0ibTIwLjUxMjYgMjEuNzg0MiAxLjA5MTMtMi4yOTM1IDIuNjM3MiAxLjIwNTF6IiBmaWxsPSIjMjMzNDQ3IiBzdHJva2U9IiMyMzM0NDciLz48cGF0aCBkPSJtMTAuODczMyAyOC44NzIxLjY0OTUtNS4zMzg2LTQuMTMxMTcuMTE2N3oiIGZpbGw9IiNjYzYyMjgiIHN0cm9rZT0iI2NjNjIyOCIvPjxwYXRoIGQ9Im0yNC4wOTgyIDIzLjUzMzUuNjM2NiA1LjMzODYgMy40OTQ2LTUuMjIxOXoiIGZpbGw9IiNjYzYyMjgiIHN0cm9rZT0iI2NjNjIyOCIvPjxwYXRoIGQ9Im0yNy4yMjkxIDE3LjY1MDctNy40MDUuMzM2OS42ODg1IDMuNzk2NiAxLjA5MTMtMi4yOTM1IDIuNjM3MiAxLjIwNTF6IiBmaWxsPSIjY2M2MjI4IiBzdHJva2U9IiNjYzYyMjgiLz48cGF0aCBkPSJtMTEuMzkyOSAyMC42OTU4IDIuNjI0Mi0xLjIwNTEgMS4wOTEzIDIuMjkzNS42ODg1LTMuNzk2Ni03LjQwNDk1LS4zMzY5eiIgZmlsbD0iI2NjNjIyOCIgc3Ryb2tlPSIjY2M2MjI4Ii8+PHBhdGggZD0ibTguMzkyIDE3LjY1MDcgMy4xMDQ5IDYuMDUxMy0uMTAzOS0zLjAwNjJ6IiBmaWxsPSIjZTI3NTI1IiBzdHJva2U9IiNlMjc1MjUiLz48cGF0aCBkPSJtMjQuMjQxMiAyMC42OTU4LS4xMTY5IDMuMDA2MiAzLjEwNDktNi4wNTEzeiIgZmlsbD0iI2UyNzUyNSIgc3Ryb2tlPSIjZTI3NTI1Ii8+PHBhdGggZD0ibTE1Ljc5NyAxNy45ODc2LS42ODg2IDMuNzk2Ny44NzA0IDQuNDgzMy4xOTQ5LTUuOTA4N3oiIGZpbGw9IiNlMjc1MjUiIHN0cm9rZT0iI2UyNzUyNSIvPjxwYXRoIGQ9Im0xOS44MjQyIDE3Ljk4NzYtLjM2MzggMi4zNTg0LjE4MTkgNS45MjE2Ljg3MDQtNC40ODMzeiIgZmlsbD0iI2UyNzUyNSIgc3Ryb2tlPSIjZTI3NTI1Ii8+PHBhdGggZD0ibTIwLjUxMjcgMjEuNzg0Mi0uODcwNCA0LjQ4MzQuNjIzNi40NDA2IDMuODU4NC0zLjAwNjIuMTE2OS0zLjAwNjJ6IiBmaWxsPSIjZjU4NDFmIiBzdHJva2U9IiNmNTg0MWYiLz48cGF0aCBkPSJtMTEuMzkyOSAyMC42OTU4LjEwNCAzLjAwNjIgMy44NTgzIDMuMDA2Mi42MjM2LS40NDA2LS44NzA0LTQuNDgzNHoiIGZpbGw9IiNmNTg0MWYiIHN0cm9rZT0iI2Y1ODQxZiIvPjxwYXRoIGQ9Im0yMC41OTA2IDMwLjg0MTcuMDM5LTEuMjMxLS4zMzc4LS4yODUxaC00Ljk2MjZsLS4zMjQ4LjI4NTEuMDI2IDEuMjMxLTQuMTU3Mi0xLjk2OTYgMS40NTUxIDEuMTkyMSAyLjk0ODkgMi4wMzQ0aDUuMDUzNmwyLjk2Mi0yLjAzNDQgMS40NDItMS4xOTIxeiIgZmlsbD0iI2MwYWM5ZCIgc3Ryb2tlPSIjYzBhYzlkIi8+PHBhdGggZD0ibTIwLjI2NTkgMjYuNzA4Mi0uNjIzNi0uNDQwNmgtMy42NjM1bC0uNjIzNi40NDA2LS4zNTA4IDIuOTAyNS4zMjQ4LS4yODUxaDQuOTYyNmwuMzM3OC4yODUxeiIgZmlsbD0iIzE2MTYxNiIgc3Ryb2tlPSIjMTYxNjE2Ii8+PHBhdGggZD0ibTMzLjUxNjggMTEuMzUzMiAxLjEwNDMtNS4zNjQ0Ny0xLjY2MjktNC45ODg3My0xMi42OTIzIDkuMzk0NCA0Ljg4NDYgNC4xMjA1IDYuODk4MyAyLjAwODUgMS41Mi0xLjc3NTItLjY2MjYtLjQ3OTUgMS4wNTIzLS45NTg4LS44MDU0LS42MjIgMS4wNTIzLS44MDM0eiIgZmlsbD0iIzc2M2UxYSIgc3Ryb2tlPSIjNzYzZTFhIi8+PHBhdGggZD0ibTEgNS45ODg3MyAxLjExNzI0IDUuMzY0NDctLjcxNDUxLjUzMTMgMS4wNjUyNy44MDM0LS44MDU0NS42MjIgMS4wNTIyOC45NTg4LS42NjI1NS40Nzk1IDEuNTE5OTcgMS43NzUyIDYuODk4MzUtMi4wMDg1IDQuODg0Ni00LjEyMDUtMTIuNjkyMzMtOS4zOTQ0eiIgZmlsbD0iIzc2M2UxYSIgc3Ryb2tlPSIjNzYzZTFhIi8+PHBhdGggZD0ibTMyLjA0ODkgMTYuNTIzNC02Ljg5ODMtMi4wMDg1IDIuMDc4NiAzLjEzNTgtMy4xMDQ5IDYuMDUxMyA0LjEwNTItLjA1MTloNi4xMzE4eiIgZmlsbD0iI2Y1ODQxZiIgc3Ryb2tlPSIjZjU4NDFmIi8+PHBhdGggZD0ibTEwLjQ3MDUgMTQuNTE0OS02Ljg5ODI4IDIuMDA4NS0yLjI5OTQ0IDcuMTI2N2g2LjExODgzbDQuMTA1MTkuMDUxOS0zLjEwNDg3LTYuMDUxM3oiIGZpbGw9IiNmNTg0MWYiIHN0cm9rZT0iI2Y1ODQxZiIvPjxwYXRoIGQ9Im0xOS44MjQxIDE3Ljk4NzYuNDQxNy03LjU5MzIgMi4wMDA3LTUuNDAzNGgtOC45MTE5bDIuMDAwNiA1LjQwMzQuNDQxNyA3LjU5MzIuMTY4OSAyLjM4NDIuMDEzIDUuODk1OGgzLjY2MzVsLjAxMy01Ljg5NTh6IiBmaWxsPSIjZjU4NDFmIiBzdHJva2U9IiNmNTg0MWYiLz48L2c+PC9zdmc+"
|
|
||||||
alt="meta mask icon"
|
|
||||||
/>
|
|
||||||
Sign in with MetaMask
|
Sign in with MetaMask
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
/* eslint-disable no-undef */
|
/* eslint-disable no-undef */
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import { useGetOpenidMutation } from "../../app/services/auth";
|
import { useGetOpenidMutation } from "../../app/services/auth";
|
||||||
|
import solidSvg from "../../assets/icons/solid.svg?url";
|
||||||
export default function SolidLoginButton() {
|
export default function SolidLoginButton() {
|
||||||
const [getOpenId, { data, isLoading, isSuccess }] = useGetOpenidMutation();
|
const [getOpenId, { data, isLoading, isSuccess }] = useGetOpenidMutation();
|
||||||
|
|
||||||
@@ -26,11 +27,7 @@ export default function SolidLoginButton() {
|
|||||||
href="#"
|
href="#"
|
||||||
className="btn social"
|
className="btn social"
|
||||||
>
|
>
|
||||||
<img
|
<img src={solidSvg} className="icon" alt="solid icon" />
|
||||||
className="icon"
|
|
||||||
src="https://solidproject.org/assets/img/solid-emblem.svg"
|
|
||||||
alt="solid logo icon"
|
|
||||||
/>
|
|
||||||
{isLoading ? `Redirecting...` : `Sign in with Solid`}
|
{isLoading ? `Redirecting...` : `Sign in with Solid`}
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
/* eslint-disable no-undef */
|
/* eslint-disable no-undef */
|
||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import StyledWrapper from "./styled";
|
|
||||||
import { useDispatch } from "react-redux";
|
import { useDispatch } from "react-redux";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import toast from "react-hot-toast";
|
import toast from "react-hot-toast";
|
||||||
|
import BASE_URL from "../../app/config";
|
||||||
// import web3 from "web3";
|
// import web3 from "web3";
|
||||||
|
import StyledWrapper from "./styled";
|
||||||
import MetamaskLoginButton from "./MetamaskLoginButton";
|
import MetamaskLoginButton from "./MetamaskLoginButton";
|
||||||
import SolidLoginButton from "./SolidLoginButton";
|
import SolidLoginButton from "./SolidLoginButton";
|
||||||
|
|
||||||
@@ -88,7 +88,7 @@ export default function LoginPage() {
|
|||||||
<div className="form">
|
<div className="form">
|
||||||
<div className="tips">
|
<div className="tips">
|
||||||
<img
|
<img
|
||||||
src="https://static.nicegoodthings.com/project/ext/webrowse.logo.png"
|
src={`${BASE_URL}/resource/organization/logo`}
|
||||||
alt="logo"
|
alt="logo"
|
||||||
className="logo"
|
className="logo"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import styled from 'styled-components';
|
import styled from "styled-components";
|
||||||
const StyledWrapper = styled.div`
|
const StyledWrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -7,7 +7,8 @@ const StyledWrapper = styled.div`
|
|||||||
.form {
|
.form {
|
||||||
padding: 36px 40px 32px 40px;
|
padding: 36px 40px 32px 40px;
|
||||||
/* border: 1px solid #eee; */
|
/* border: 1px solid #eee; */
|
||||||
box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
|
box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
|
||||||
|
0px 2px 4px -2px rgba(16, 24, 40, 0.06);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
.tips {
|
.tips {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -18,6 +19,7 @@ const StyledWrapper = styled.div`
|
|||||||
width: 56px;
|
width: 56px;
|
||||||
height: 56px;
|
height: 56px;
|
||||||
margin-bottom: 28px;
|
margin-bottom: 28px;
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
.title {
|
.title {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -59,7 +61,7 @@ const StyledWrapper = styled.div`
|
|||||||
&:after {
|
&:after {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
content: 'OR';
|
content: "OR";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
|||||||
Reference in New Issue
Block a user