Skip to content

I
interface
Commit 404d7a60 authored by Ian Lapham's avatar Ian Lapham Committed by GitHub
Browse files
Options

bug fixes, style updates dark mode (#729) 

* Prepare for V2 testing

* Bug fixes and tweaks

* Add form link

* Design tweaks

* higher quality favicon

* Favicon... again.

* Start dark mode

* Add dark toggle

* New dark theme unicorn

* header style changes
Co-authored-by: default avatarCallil Capuozzo <callil.capuozzo@gmail.com>
parent b6b094ac
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 253 additions and 149 deletions
src/assets/svg/logo_pink.svg 0 → 100644
View file @ 404d7a60
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3078 13.7367C14.9143 14.8093 13.5578 15.1418 12.9212 15.203C11.9566 15.2972 11.7569 14.7387 11.9453 14.0371C12.0072 13.7859 12.1444 13.5599 12.3384 13.3898C12.5325 13.2196 12.7739 13.1135 13.03 13.0859C13.2823 13.0627 13.5361 13.1114 13.7621 13.2265C13.9881 13.3417 14.1773 13.5185 14.3078 13.7367V13.7367Z" fill="#FF007A"/>
<path d="M18.094 11.7521C17.389 17.169 26.8931 16.0418 26.7122 20.3531C27.6497 19.1288 28.0528 15.8026 25.2929 14.0905C22.8339 12.5639 19.6296 13.3992 18.094 11.7521Z" fill="#FF007A"/>
<path d="M23.5684 9.7093C23.5065 9.65186 23.4427 9.59535 23.3809 9.53885C23.4437 9.59629 23.5065 9.65657 23.5684 9.7093Z" fill="#FF007A"/>
<path d="M25.7771 13.6581L25.7715 13.6496C25.6857 13.4895 25.5879 13.3362 25.479 13.191C25.1586 12.7549 24.699 12.4424 24.1769 12.3057C23.8293 12.2156 23.4739 12.1595 23.1156 12.1381C22.7528 12.1117 22.3825 12.0966 22.0085 12.0769C21.2585 12.0354 20.4907 11.9582 19.7407 11.7435C19.5532 11.6898 19.3658 11.6314 19.1848 11.5608C19.0911 11.5269 19.0039 11.4902 18.9111 11.4506C18.8183 11.4111 18.7236 11.3658 18.6298 11.3178C18.2772 11.1238 17.9505 10.8855 17.6577 10.6087C17.0802 10.0691 16.6265 9.45692 16.1718 8.86362C15.7432 8.26804 15.2831 7.6959 14.7937 7.14964C14.3108 6.61451 13.74 6.16664 13.1063 5.82555C12.45 5.49351 11.7372 5.28902 11.0054 5.22283C11.7646 5.14002 12.5326 5.23412 13.2497 5.49782C13.9733 5.78002 14.6348 6.20204 15.1968 6.73999C15.5637 7.08565 15.9082 7.45463 16.228 7.84465C18.6092 7.37378 20.5404 7.79192 22.0244 8.6037L22.0582 8.62065C22.5305 8.87801 22.9732 9.18689 23.3781 9.54168C23.4428 9.59819 23.5066 9.65469 23.5656 9.71214C23.8817 10.0039 24.1759 10.3187 24.4459 10.6539L24.4665 10.6812C25.3431 11.7962 25.7762 12.9555 25.7771 13.6581Z" fill="#FF007A"/>
<path d="M25.776 13.657L25.7705 13.6458L25.776 13.657Z" fill="#FF007A"/>
<path d="M11.1263 5.92056C11.7338 6.00909 12.3535 6.25206 12.7528 6.7154C13.1522 7.17874 13.2994 7.78146 13.4147 8.35498C13.5084 8.79949 13.5825 9.25247 13.7569 9.67343C13.8412 9.87873 13.965 10.0586 14.0681 10.2526C14.1534 10.4136 14.309 10.5587 14.369 10.731C14.3798 10.7558 14.3838 10.7829 14.3806 10.8097C14.3775 10.8365 14.3674 10.862 14.3512 10.8836C14.1394 11.119 13.5675 10.8572 13.3519 10.7517C12.9791 10.5661 12.6453 10.3104 12.3685 9.99834C11.5032 9.03304 11.056 7.64396 11.0832 6.37919C11.0892 6.22564 11.1036 6.07253 11.1263 5.92056Z" fill="#FF007A"/>
<path d="M21.2865 16.8057C19.974 20.4851 25.927 22.9535 23.6967 26.6941C25.9851 25.7448 27.0716 22.8772 26.122 20.6019C25.2914 18.6045 22.8352 17.8765 21.2865 16.8057Z" fill="#FF007A"/>
<path d="M13.4131 21.6174C13.7707 21.3466 14.1618 21.1234 14.5765 20.9535C14.996 20.7848 15.4313 20.6586 15.8758 20.5768C16.758 20.4082 17.6308 20.3668 18.3639 20.0701C18.7261 19.928 19.0594 19.7206 19.3473 19.458C19.626 19.1979 19.8393 18.8751 19.9698 18.5162C20.1034 18.1375 20.1577 17.7351 20.1291 17.3343C20.096 16.9038 19.999 16.4807 19.8413 16.079C20.1681 16.4204 20.4061 16.8375 20.5341 17.2933C20.6621 17.7492 20.6763 18.2297 20.5754 18.6923C20.4607 19.1821 20.2131 19.6303 19.8601 19.9872C19.5107 20.333 19.0893 20.5967 18.6264 20.7595C18.1846 20.9151 17.7238 21.0102 17.2567 21.042C16.8067 21.0797 16.3717 21.09 15.9443 21.1154C15.08 21.1519 14.2263 21.3211 13.4131 21.6174V21.6174Z" fill="#FF007A"/>
<path d="M21.8102 28.0852C21.678 28.1907 21.5458 28.3028 21.4005 28.4007C21.2543 28.4975 21.101 28.5831 20.9421 28.6569C20.6111 28.8191 20.2472 28.9019 19.879 28.8989C18.8815 28.8801 18.1765 28.1342 17.7641 27.2913C17.4828 26.7169 17.2888 26.0962 16.955 25.5491C16.4778 24.7665 15.6613 24.1365 14.7051 24.2532C14.3151 24.3022 13.9495 24.4783 13.7329 24.8183C13.1629 25.7064 13.9814 26.9504 15.0248 26.7743C15.1135 26.7607 15.2003 26.7367 15.2835 26.7027C15.3664 26.6673 15.4437 26.62 15.5132 26.5624C15.6589 26.4405 15.7688 26.281 15.831 26.101C15.8995 25.9133 15.9148 25.7101 15.875 25.5142C15.8322 25.3095 15.7119 25.1295 15.5394 25.0123C15.74 25.1066 15.8962 25.2754 15.9754 25.4832C16.0574 25.6969 16.0785 25.9295 16.0363 26.1546C15.9953 26.3892 15.8924 26.6085 15.7382 26.7894C15.6563 26.8824 15.5616 26.9633 15.4569 27.0295C15.3532 27.095 15.2421 27.1478 15.126 27.1868C14.8905 27.2677 14.6399 27.2937 14.3929 27.2631C14.0461 27.2135 13.7191 27.071 13.4461 26.8506C13.1236 26.5944 12.8836 26.2592 12.592 25.971C12.2578 25.6187 11.8635 25.3294 11.4277 25.1168C11.1272 24.9842 10.8127 24.8863 10.4902 24.8249C10.328 24.791 10.164 24.7665 9.99991 24.7458C9.92491 24.7383 9.55742 24.6563 9.50586 24.7043C10.0129 24.2354 10.5657 23.819 11.1558 23.4612C11.7617 23.1 12.4123 22.8205 13.0908 22.6297C13.7942 22.4308 14.53 22.3741 15.2554 22.463C15.6288 22.508 15.9945 22.6031 16.3428 22.7455C16.7078 22.892 17.0447 23.101 17.3384 23.3633C17.6292 23.6384 17.8641 23.9675 18.0303 24.3324C18.1803 24.6739 18.2923 25.0311 18.364 25.3975C18.5778 26.4927 18.499 28.1907 19.9268 28.4412C20.0012 28.4557 20.0763 28.4664 20.1518 28.4732L20.3852 28.4789C20.5457 28.4674 20.7052 28.4444 20.8624 28.4101C21.1881 28.3332 21.5056 28.2243 21.8102 28.0852V28.0852Z" fill="#FF007A"/>
<path d="M13.514 26.8916L13.4766 26.8622L13.514 26.8916Z" fill="#FF007A"/>
<path d="M12.2325 11.4336C12.1805 11.6343 12.0897 11.8228 11.9653 11.9883C11.7338 12.2902 11.4273 12.5256 11.0766 12.6711C10.7612 12.8076 10.4272 12.8958 10.0857 12.9329C10.0116 12.9423 9.93478 12.9479 9.86072 12.9536C9.64444 12.9618 9.43648 13.0394 9.26728 13.175C9.09808 13.3106 8.97653 13.497 8.92043 13.707C8.89474 13.8115 8.87564 13.9175 8.86324 14.0244C8.82949 14.3012 8.82387 14.5894 8.79387 14.9378C8.72041 15.5308 8.54967 16.1074 8.28857 16.6443C7.94921 17.3619 7.5686 17.9401 7.65672 18.767C7.71484 19.3038 7.98858 19.6635 8.35232 20.0346C9.00855 20.7089 10.4776 21.0102 10.1495 22.6715C9.95165 23.6631 8.31482 24.7038 6.01426 25.0673C6.24301 25.0324 5.72083 24.1481 5.68802 24.0916C5.44147 23.7036 5.17148 23.3382 4.97555 22.9173C4.59118 22.1008 4.41306 21.1562 4.57056 20.2615C4.73649 19.3198 5.43022 18.5984 6.00677 17.8789C6.693 17.0229 7.41297 15.9013 7.57234 14.79C7.60984 14.5207 7.63609 14.1835 7.69609 13.8482C7.75329 13.4768 7.86912 13.1169 8.0392 12.7822C8.1553 12.5626 8.30815 12.3648 8.49106 12.1974C8.58643 12.1085 8.64935 11.99 8.66975 11.8609C8.69014 11.7318 8.66684 11.5996 8.60356 11.4854L4.93617 4.85926L10.2038 11.3893C10.2638 11.465 10.3396 11.5265 10.4259 11.5694C10.5122 11.6123 10.6069 11.6357 10.7031 11.6377C10.7994 11.6398 10.8949 11.6206 10.983 11.5814C11.071 11.5422 11.1494 11.484 11.2126 11.411C11.2793 11.3328 11.3171 11.2339 11.3197 11.131C11.3222 11.0281 11.2894 10.9274 11.2266 10.846C10.8826 10.4043 10.5188 9.95412 10.1663 9.5115L8.84075 7.86344L6.1802 4.57297L2.55225 0L6.52144 4.27821L9.35354 7.42364L10.7663 9.00013C11.235 9.53034 11.7038 10.0436 12.1725 10.6011L12.2494 10.6953L12.2663 10.8412C12.2891 11.0392 12.2777 11.2396 12.2325 11.4336Z" fill="#FF007A"/>
<path d="M13.447 26.8463C13.1925 26.6488 12.966 26.4171 12.7739 26.1579C12.98 26.4047 13.205 26.6349 13.447 26.8463V26.8463Z" fill="#FF007A"/>
</svg>
src/assets/svg/logo_white.svg 0 → 100644
View file @ 404d7a60
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3078 13.7367C14.9143 14.8093 13.5578 15.1418 12.9212 15.203C11.9566 15.2972 11.7569 14.7387 11.9453 14.0371C12.0072 13.7859 12.1444 13.5599 12.3384 13.3898C12.5325 13.2196 12.7739 13.1135 13.03 13.0859C13.2823 13.0627 13.5361 13.1114 13.7621 13.2265C13.9881 13.3417 14.1773 13.5185 14.3078 13.7367V13.7367Z" fill="white"/>
<path d="M18.094 11.7521C17.389 17.169 26.8931 16.0418 26.7122 20.3531C27.6497 19.1288 28.0528 15.8026 25.2929 14.0905C22.8339 12.5639 19.6296 13.3992 18.094 11.7521Z" fill="white"/>
<path d="M23.5684 9.7093C23.5065 9.65186 23.4427 9.59535 23.3809 9.53885C23.4437 9.59629 23.5065 9.65657 23.5684 9.7093Z" fill="white"/>
<path d="M25.7771 13.6581L25.7715 13.6496C25.6857 13.4895 25.5879 13.3362 25.479 13.191C25.1586 12.7549 24.699 12.4424 24.1769 12.3057C23.8293 12.2156 23.4739 12.1595 23.1156 12.1381C22.7528 12.1117 22.3825 12.0966 22.0085 12.0769C21.2585 12.0354 20.4907 11.9582 19.7407 11.7435C19.5532 11.6898 19.3658 11.6314 19.1848 11.5608C19.0911 11.5269 19.0039 11.4902 18.9111 11.4506C18.8183 11.4111 18.7236 11.3658 18.6298 11.3178C18.2772 11.1238 17.9505 10.8855 17.6577 10.6087C17.0802 10.0691 16.6265 9.45692 16.1718 8.86362C15.7432 8.26804 15.2831 7.6959 14.7937 7.14964C14.3108 6.61451 13.74 6.16664 13.1063 5.82555C12.45 5.49351 11.7372 5.28902 11.0054 5.22283C11.7646 5.14002 12.5326 5.23412 13.2497 5.49782C13.9733 5.78002 14.6348 6.20204 15.1968 6.73999C15.5637 7.08565 15.9082 7.45463 16.228 7.84465C18.6092 7.37378 20.5404 7.79192 22.0244 8.6037L22.0582 8.62065C22.5305 8.87801 22.9732 9.18689 23.3781 9.54168C23.4428 9.59819 23.5066 9.65469 23.5656 9.71214C23.8817 10.0039 24.1759 10.3187 24.4459 10.6539L24.4665 10.6812C25.3431 11.7962 25.7762 12.9555 25.7771 13.6581Z" fill="white"/>
<path d="M25.776 13.657L25.7705 13.6458L25.776 13.657Z" fill="white"/>
<path d="M11.1263 5.92056C11.7338 6.00909 12.3535 6.25206 12.7528 6.7154C13.1522 7.17874 13.2994 7.78146 13.4147 8.35498C13.5084 8.79949 13.5825 9.25247 13.7569 9.67343C13.8412 9.87873 13.965 10.0586 14.0681 10.2526C14.1534 10.4136 14.309 10.5587 14.369 10.731C14.3798 10.7558 14.3838 10.7829 14.3806 10.8097C14.3775 10.8365 14.3674 10.862 14.3512 10.8836C14.1394 11.119 13.5675 10.8572 13.3519 10.7517C12.9791 10.5661 12.6453 10.3104 12.3685 9.99834C11.5032 9.03304 11.056 7.64396 11.0832 6.37919C11.0892 6.22564 11.1036 6.07253 11.1263 5.92056Z" fill="white"/>
<path d="M21.2865 16.8057C19.974 20.4851 25.927 22.9535 23.6967 26.6941C25.9851 25.7448 27.0716 22.8772 26.122 20.6019C25.2914 18.6045 22.8352 17.8765 21.2865 16.8057Z" fill="white"/>
<path d="M13.4131 21.6174C13.7707 21.3466 14.1618 21.1234 14.5765 20.9535C14.996 20.7848 15.4313 20.6586 15.8758 20.5768C16.758 20.4082 17.6308 20.3668 18.3639 20.0701C18.7261 19.928 19.0594 19.7206 19.3473 19.458C19.626 19.1979 19.8393 18.8751 19.9698 18.5162C20.1034 18.1375 20.1577 17.7351 20.1291 17.3343C20.096 16.9038 19.999 16.4807 19.8413 16.079C20.1681 16.4204 20.4061 16.8375 20.5341 17.2933C20.6621 17.7492 20.6763 18.2297 20.5754 18.6923C20.4607 19.1821 20.2131 19.6303 19.8601 19.9872C19.5107 20.333 19.0893 20.5967 18.6264 20.7595C18.1846 20.9151 17.7238 21.0102 17.2567 21.042C16.8067 21.0797 16.3717 21.09 15.9443 21.1154C15.08 21.1519 14.2263 21.3211 13.4131 21.6174V21.6174Z" fill="white"/>
<path d="M21.8102 28.0852C21.678 28.1907 21.5458 28.3028 21.4005 28.4007C21.2543 28.4975 21.101 28.5831 20.9421 28.6569C20.6111 28.8191 20.2472 28.9019 19.879 28.8989C18.8815 28.8801 18.1765 28.1342 17.7641 27.2913C17.4828 26.7169 17.2888 26.0962 16.955 25.5491C16.4778 24.7665 15.6613 24.1365 14.7051 24.2532C14.3151 24.3022 13.9495 24.4783 13.7329 24.8183C13.1629 25.7064 13.9814 26.9504 15.0248 26.7743C15.1135 26.7607 15.2003 26.7367 15.2835 26.7027C15.3664 26.6673 15.4437 26.62 15.5132 26.5624C15.6589 26.4405 15.7688 26.281 15.831 26.101C15.8995 25.9133 15.9148 25.7101 15.875 25.5142C15.8322 25.3095 15.7119 25.1295 15.5394 25.0123C15.74 25.1066 15.8962 25.2754 15.9754 25.4832C16.0574 25.6969 16.0785 25.9295 16.0363 26.1546C15.9953 26.3892 15.8924 26.6085 15.7382 26.7894C15.6563 26.8824 15.5616 26.9633 15.4569 27.0295C15.3532 27.095 15.2421 27.1478 15.126 27.1868C14.8905 27.2677 14.6399 27.2937 14.3929 27.2631C14.0461 27.2135 13.7191 27.071 13.4461 26.8506C13.1236 26.5944 12.8836 26.2592 12.592 25.971C12.2578 25.6187 11.8635 25.3294 11.4277 25.1168C11.1272 24.9842 10.8127 24.8863 10.4902 24.8249C10.328 24.791 10.164 24.7665 9.99991 24.7458C9.92491 24.7383 9.55742 24.6563 9.50586 24.7043C10.0129 24.2354 10.5657 23.819 11.1558 23.4612C11.7617 23.1 12.4123 22.8205 13.0908 22.6297C13.7942 22.4308 14.53 22.3741 15.2554 22.463C15.6288 22.508 15.9945 22.6031 16.3428 22.7455C16.7078 22.892 17.0447 23.101 17.3384 23.3633C17.6292 23.6384 17.8641 23.9675 18.0303 24.3324C18.1803 24.6739 18.2923 25.0311 18.364 25.3975C18.5778 26.4927 18.499 28.1907 19.9268 28.4412C20.0012 28.4557 20.0763 28.4664 20.1518 28.4732L20.3852 28.4789C20.5457 28.4674 20.7052 28.4444 20.8624 28.4101C21.1881 28.3332 21.5056 28.2243 21.8102 28.0852V28.0852Z" fill="white"/>
<path d="M13.514 26.8916L13.4766 26.8622L13.514 26.8916Z" fill="white"/>
<path d="M12.2325 11.4336C12.1805 11.6343 12.0897 11.8228 11.9653 11.9883C11.7338 12.2902 11.4273 12.5256 11.0766 12.6711C10.7612 12.8076 10.4272 12.8958 10.0857 12.9329C10.0116 12.9423 9.93478 12.9479 9.86072 12.9536C9.64444 12.9618 9.43648 13.0394 9.26728 13.175C9.09808 13.3106 8.97653 13.497 8.92043 13.707C8.89474 13.8115 8.87564 13.9175 8.86324 14.0244C8.82949 14.3012 8.82387 14.5894 8.79387 14.9378C8.72041 15.5308 8.54967 16.1074 8.28857 16.6443C7.94921 17.3619 7.5686 17.9401 7.65672 18.767C7.71484 19.3038 7.98858 19.6635 8.35232 20.0346C9.00855 20.7089 10.4776 21.0102 10.1495 22.6715C9.95165 23.6631 8.31482 24.7038 6.01426 25.0673C6.24301 25.0324 5.72083 24.1481 5.68802 24.0916C5.44147 23.7036 5.17148 23.3382 4.97555 22.9173C4.59118 22.1008 4.41306 21.1562 4.57056 20.2615C4.73649 19.3198 5.43022 18.5984 6.00677 17.8789C6.693 17.0229 7.41297 15.9013 7.57234 14.79C7.60984 14.5207 7.63609 14.1835 7.69609 13.8482C7.75329 13.4768 7.86912 13.1169 8.0392 12.7822C8.1553 12.5626 8.30815 12.3648 8.49106 12.1974C8.58643 12.1085 8.64935 11.99 8.66975 11.8609C8.69014 11.7318 8.66684 11.5996 8.60356 11.4854L4.93617 4.85926L10.2038 11.3893C10.2638 11.465 10.3396 11.5265 10.4259 11.5694C10.5122 11.6123 10.6069 11.6357 10.7031 11.6377C10.7994 11.6398 10.8949 11.6206 10.983 11.5814C11.071 11.5422 11.1494 11.484 11.2126 11.411C11.2793 11.3328 11.3171 11.2339 11.3197 11.131C11.3222 11.0281 11.2894 10.9274 11.2266 10.846C10.8826 10.4043 10.5188 9.95412 10.1663 9.5115L8.84075 7.86344L6.1802 4.57297L2.55225 0L6.52144 4.27821L9.35354 7.42364L10.7663 9.00013C11.235 9.53034 11.7038 10.0436 12.1725 10.6011L12.2494 10.6953L12.2663 10.8412C12.2891 11.0392 12.2777 11.2396 12.2325 11.4336Z" fill="white"/>
<path d="M13.447 26.8463C13.1925 26.6488 12.966 26.4171 12.7739 26.1579C12.98 26.4047 13.205 26.6349 13.447 26.8463V26.8463Z" fill="white"/>
</svg>
src/assets/svg/logo_white2.svg 0 → 100644
View file @ 404d7a60
<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M6.20269 23.3208C6.62857 23.9594 6.75962 24.96 6.95456 25.3148C7.12588 26.0129 9.14748 25.6855 10.283 25.5968L14.9834 24.0376L17.5378 25.3148C17.928 26.6629 19.081 29.4337 20.5711 29.7317C22.0611 30.0297 23.9946 28.082 24.7751 27.0709C25.325 25.7583 26.5206 23.0053 26.9037 22.4944C27.2869 21.9835 26.9214 19.4256 26.9037 18.8225L26.0444 16.3584C25.6009 15.0635 24.2791 13.5222 23.9386 12.9688C23.5128 12.277 20.3582 12.4899 19.0278 11.9045C17.9635 11.4362 16.5621 9.29692 15.9945 8.28582C14.7351 7.22151 12.0566 5.36961 11.418 6.47649C10.7794 7.58338 11.684 10.1306 12.2162 11.2659L3.22266 1.42101C5.38676 5.27027 10.1096 12.9688 9.76902 12.9688C9.42844 12.9688 8.88977 14.5215 8.7656 15.1956C8.55273 16.118 7.85826 18.8184 6.53851 19.9679C4.88883 21.4047 5.67035 22.5225 6.20269 23.3208Z" fill="black"/>
<path d="M14.9782 14.6996C15.5847 15.7722 14.2282 16.1047 13.5917 16.1659C12.627 16.2601 12.4273 15.7016 12.6158 15C12.6776 14.7488 12.8148 14.5228 13.0088 14.3527C13.2029 14.1825 13.4443 14.0764 13.7004 14.0488C13.9528 14.0256 14.2065 14.0743 14.4325 14.1894C14.6586 14.3045 14.8477 14.4814 14.9782 14.6996V14.6996Z" fill="#CED0D9"/>
<path d="M18.7644 12.715C18.0594 18.1319 27.5636 17.0047 27.3826 21.316C28.3201 20.0917 28.7232 16.7655 25.9633 15.0534C23.5043 13.5268 20.3 14.3621 18.7644 12.715Z" fill="#CED0D9"/>
<path d="M24.2388 10.6722C24.1769 10.6147 24.1131 10.5582 24.0513 10.5017C24.1141 10.5592 24.1769 10.6195 24.2388 10.6722Z" fill="black"/>
<path d="M26.4475 14.6209L26.4419 14.6125C26.3561 14.4524 26.2584 14.299 26.1494 14.1538C25.829 13.7178 25.3694 13.4053 24.8473 13.2686C24.4997 13.1785 24.1443 13.1223 23.7861 13.101C23.4233 13.0746 23.0529 13.0595 22.6789 13.0397C21.9289 12.9983 21.1611 12.9211 20.4112 12.7064C20.2237 12.6527 20.0362 12.5943 19.8552 12.5237C19.7615 12.4898 19.6743 12.453 19.5815 12.4135C19.4887 12.3739 19.394 12.3287 19.3002 12.2807C18.9476 12.0866 18.6209 11.8484 18.3281 11.5716C17.7506 11.0319 17.2969 10.4198 16.8422 9.8265C16.4136 9.23092 15.9535 8.65877 15.4641 8.11252C14.9812 7.57738 14.4104 7.12951 13.7767 6.78842C13.1204 6.45638 12.4076 6.25189 11.6758 6.18571C12.435 6.1029 13.203 6.19699 13.9201 6.4607C14.6437 6.7429 15.3053 7.16492 15.8672 7.70286C16.2342 8.04853 16.5786 8.41751 16.8984 8.80753C19.2796 8.33666 21.2108 8.75479 22.6948 9.56658L22.7286 9.58353C23.2009 9.84088 23.6436 10.1498 24.0486 10.5046C24.1132 10.5611 24.177 10.6176 24.236 10.675C24.5521 10.9668 24.8464 11.2815 25.1163 11.6168L25.137 11.6441C26.0135 12.7591 26.4466 13.9184 26.4475 14.6209Z" fill="#CED0D9"/>
<path d="M26.4464 14.6199L26.4409 14.6087L26.4464 14.6199Z" fill="black"/>
<path d="M11.7967 6.88345C12.4042 6.97198 13.0239 7.21495 13.4232 7.67829C13.8226 8.14163 13.9698 8.74435 14.0851 9.31787C14.1788 9.76238 14.2529 10.2154 14.4273 10.6363C14.5117 10.8416 14.6354 11.0215 14.7385 11.2155C14.8238 11.3765 14.9794 11.5216 15.0394 11.6939C15.0502 11.7186 15.0542 11.7458 15.051 11.7726C15.0479 11.7994 15.0378 11.8249 15.0216 11.8465C14.8098 12.0819 14.2379 11.8201 14.0223 11.7146C13.6495 11.529 13.3157 11.2733 13.0389 10.9612C12.1736 9.99593 11.7264 8.60685 11.7536 7.34208C11.7596 7.18853 11.774 7.03542 11.7967 6.88345Z" fill="#CED0D9"/>
<path d="M21.9569 17.7686C20.6444 21.448 26.5974 23.9164 24.3671 27.657C26.6555 26.7077 27.742 23.8401 26.7924 21.5648C25.9618 19.5674 23.5056 18.8394 21.9569 17.7686Z" fill="#CED0D9"/>
<path d="M14.0835 22.5803C14.4412 22.3095 14.8322 22.0863 15.2469 21.9164C15.6665 21.7477 16.1017 21.6215 16.5462 21.5397C17.4284 21.3711 18.3012 21.3296 19.0343 21.033C19.3965 20.8909 19.7298 20.6835 20.0177 20.4209C20.2964 20.1608 20.5097 19.838 20.6402 19.4791C20.7739 19.1004 20.8281 18.698 20.7995 18.2972C20.7664 17.8667 20.6694 17.4436 20.5117 17.0419C20.8385 17.3833 21.0765 17.8004 21.2045 18.2562C21.3325 18.7121 21.3467 19.1926 21.2458 19.6552C21.1311 20.145 20.8835 20.5932 20.5305 20.9501C20.1811 21.2959 19.7597 21.5596 19.2968 21.7224C18.855 21.878 18.3943 21.9731 17.9271 22.0049C17.4771 22.0426 17.0422 22.0529 16.6147 22.0783C15.7504 22.1148 14.8967 22.284 14.0835 22.5803V22.5803Z" fill="#CED0D9"/>
<path d="M22.4806 29.0481C22.3484 29.1536 22.2162 29.2656 22.0709 29.3636C21.9247 29.4604 21.7715 29.546 21.6125 29.6197C21.2815 29.7819 20.9176 29.8648 20.5494 29.8618C19.5519 29.8429 18.847 29.0971 18.4345 28.2542C18.1532 27.6797 17.9592 27.0591 17.6254 26.512C17.1483 25.7294 16.3317 25.0993 15.3755 25.2161C14.9855 25.2651 14.6199 25.4412 14.4033 25.7812C13.8334 26.6692 14.6518 27.9133 15.6952 27.7372C15.7839 27.7236 15.8708 27.6996 15.9539 27.6656C16.0368 27.6302 16.1141 27.5829 16.1836 27.5253C16.3293 27.4034 16.4392 27.2438 16.5014 27.0638C16.5699 26.8761 16.5852 26.673 16.5455 26.4771C16.5027 26.2724 16.3823 26.0924 16.2098 25.9752C16.4104 26.0695 16.5666 26.2383 16.6458 26.446C16.7278 26.6598 16.7489 26.8924 16.7067 27.1175C16.6657 27.3521 16.5628 27.5713 16.4086 27.7522C16.3267 27.8453 16.232 27.9262 16.1273 27.9924C16.0236 28.0578 15.9126 28.1106 15.7964 28.1497C15.5609 28.2305 15.3103 28.2566 15.0633 28.226C14.7166 28.1763 14.3895 28.0339 14.1165 27.8135C13.794 27.5573 13.554 27.222 13.2624 26.9339C12.9282 26.5816 12.5339 26.2923 12.0981 26.0797C11.7976 25.9471 11.4831 25.8492 11.1606 25.7878C10.9984 25.7539 10.8344 25.7294 10.6703 25.7087C10.5953 25.7011 10.2278 25.6192 10.1763 25.6672C10.6833 25.1983 11.2361 24.7818 11.8262 24.4241C12.4321 24.0629 13.0827 23.7833 13.7612 23.5925C14.4646 23.3936 15.2004 23.337 15.9258 23.4259C16.2992 23.4709 16.6649 23.5659 17.0133 23.7084C17.3782 23.8548 17.7151 24.0639 18.0088 24.3262C18.2996 24.6013 18.5345 24.9304 18.7007 25.2952C18.8507 25.6368 18.9627 25.994 19.0344 26.3603C19.2482 27.4556 19.1694 29.1536 20.5972 29.4041C20.6716 29.4186 20.7467 29.4293 20.8222 29.4361L21.0556 29.4417C21.2161 29.4303 21.3756 29.4073 21.5328 29.373C21.8585 29.296 22.176 29.1872 22.4806 29.0481V29.0481Z" fill="#CED0D9"/>
<path d="M14.1844 27.8545L14.147 27.8251L14.1844 27.8545Z" fill="black"/>
<path d="M12.9029 12.3965C12.8509 12.5972 12.7602 12.7857 12.6357 12.9512C12.4042 13.2531 12.0977 13.4885 11.747 13.634C11.4316 13.7705 11.0976 13.8587 10.7561 13.8958C10.6821 13.9052 10.6052 13.9108 10.5311 13.9165C10.3149 13.9247 10.1069 14.0023 9.93769 14.1379C9.76849 14.2735 9.64694 14.4599 9.59084 14.6699C9.56515 14.7743 9.54605 14.8804 9.53365 14.9872C9.49991 15.2641 9.49428 15.5523 9.46428 15.9007C9.39082 16.4937 9.22008 17.0703 8.95898 17.6072C8.61962 18.3248 8.23901 18.903 8.32713 19.7299C8.38525 20.2667 8.65899 20.6264 9.02273 20.9975C9.67896 21.6718 11.148 21.9731 10.8199 23.6344C10.6221 24.626 8.98523 25.6667 6.68468 26.0302C6.91342 25.9953 6.39124 25.111 6.35843 25.0545C6.11188 24.6665 5.84189 24.3011 5.64596 23.8802C5.26159 23.0637 5.08347 22.1191 5.24097 21.2244C5.4069 20.2827 6.10063 19.5613 6.67718 18.8418C7.36341 17.9858 8.08338 16.8641 8.24275 15.7529C8.28025 15.4835 8.3065 15.1464 8.3665 14.8111C8.4237 14.4397 8.53953 14.0798 8.70961 13.7451C8.82571 13.5255 8.97856 13.3277 9.16147 13.1603C9.25684 13.0713 9.31976 12.9529 9.34016 12.8238C9.36055 12.6947 9.33725 12.5625 9.27397 12.4483L5.60658 5.82215L10.8742 12.3522C10.9342 12.4279 11.0101 12.4894 11.0963 12.5323C11.1826 12.5752 11.2773 12.5986 11.3735 12.6006C11.4698 12.6027 11.5654 12.5835 11.6534 12.5443C11.7414 12.5051 11.8198 12.4469 11.883 12.3739C11.9497 12.2957 11.9875 12.1968 11.9901 12.0939C11.9926 11.9909 11.9598 11.8903 11.897 11.8088C11.553 11.3672 11.1892 10.917 10.8367 10.4744L9.51116 8.82633L6.85061 5.53586L3.22266 0.962891L7.19185 5.2411L10.024 8.38653L11.4367 9.96302C11.9055 10.4932 12.3742 11.0065 12.8429 11.564L12.9198 11.6582L12.9367 11.8041C12.9595 12.0021 12.9481 12.2025 12.9029 12.3965Z" fill="#CED0D9"/>
<path d="M14.1174 27.8092C13.8629 27.6116 13.6364 27.38 13.4443 27.1208C13.6504 27.3676 13.8755 27.5978 14.1174 27.8092V27.8092Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0">
<rect y="0.962891" width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
src/assets/svg/wordmark_pink.svg 0 → 100644
View file @ 404d7a60
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/svg/wordmark_white.svg 0 → 100644
View file @ 404d7a60
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/AccountDetails/index.js
View file @ 404d7a60
import React from 'react'
import styled from 'styled-components'
import React, { useContext } from 'react'
import styled, { ThemeContext } from 'styled-components'
import { useWeb3React } from '../../hooks'
import { isMobile } from 'react-device-detect'
import Copy from './Copy'
......@@ -231,6 +231,7 @@ export default function AccountDetails({
openOptions
}) {
const { chainId, account, connector } = useWeb3React()
const theme = useContext(ThemeContext)
function formatConnectorName() {
const isMetaMask = window.ethereum && window.ethereum.isMetaMask ? true : false
......@@ -359,7 +360,7 @@ export default function AccountDetails({
</LowerSection>
) : (
<LowerSection>
<TYPE.body>Your transactions will appear here...</TYPE.body>
<TYPE.body color={theme.text1}>Your transactions will appear here...</TYPE.body>
</LowerSection>
)}
</>
......
src/components/Button/index.js
View file @ 404d7a60
......@@ -54,7 +54,7 @@ export const ButtonPrimary = styled(Base)`
export const ButtonLight = styled(Base)`
background-color: ${({ theme }) => theme.blue5};
color: ${({ theme }) => theme.blue1};
color: ${({ theme }) => theme.buttonSecondaryText};
font-size: 16px;
font-weight: 500;
&:focus {
......@@ -90,7 +90,7 @@ export const ButtonGray = styled(Base)`
export const ButtonSecondary = styled(Base)`
background-color: ${({ theme }) => theme.blue5};
color: ${({ theme }) => theme.blue1};
color: ${({ theme }) => theme.buttonSecondaryText};
font-size: 16px;
border-radius: 8px;
padding: 10px;
......@@ -136,7 +136,7 @@ export const ButtonPink = styled(Base)`
`
export const ButtonOutlined = styled(Base)`
border: 1px solid #edeef2;
border: 1px solid ${({ theme }) => theme.bg2};
background-color: transparent;
color: ${({ theme }) => theme.text1};
......
src/components/Card/index.js
View file @ 404d7a60
......@@ -18,11 +18,11 @@ export const LightCard = styled(Card)`
`
export const GreyCard = styled(Card)`
background-color: rgba(237, 238, 242, 0.5);
background-color: ${({ theme }) => theme.advancedBG};
`
export const OutlineCard = styled(Card)`
border: 1px solid rgba(237, 238, 242, 0.5);
border: 1px solid ${({ theme }) => theme.advancedBG};
`
export const YellowCard = styled(Card)`
......
src/components/CurrencyInputPanel/index.js
View file @ 404d7a60
import React, { useState, useContext } from 'react'
import styled from 'styled-components'
import styled, { ThemeContext } from 'styled-components'
import '@reach/tooltip/styles.css'
import { darken } from 'polished'
......@@ -14,7 +14,6 @@ import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
import { useWeb3React } from '../../hooks'
import { useTranslation } from 'react-i18next'
import { useAddressBalance } from '../../contexts/Balances'
import { ThemeContext } from 'styled-components'
const InputRow = styled.div`
${({ theme }) => theme.flexRowNoWrap}
......@@ -103,7 +102,7 @@ const StyledBalanceMax = styled.button`
font-weight: 500;
cursor: pointer;
margin-right: 0.5rem;
color: ${({ theme }) => theme.blue1};
color: ${({ theme }) => theme.buttonSecondaryText};
:hover {
border: 1px solid ${({ theme }) => theme.blue1};
}
......
src/components/ExchangePage/index.tsx
View file @ 404d7a60
This diff is collapsed.
src/components/Footer/index.js
View file @ 404d7a60
import React from 'react'
import styled from 'styled-components'
import { Send } from 'react-feather'
import { Link } from '../../theme/components'
import { Send, Sun, Moon } from 'react-feather'
import { useDarkModeManager } from '../../contexts/LocalStorage'
import { ButtonSecondary } from '../Button'
......@@ -19,19 +19,30 @@ const FooterFrame = styled.div`
`
export default function Footer() {
const [darkMode, toggleDarkMode] = useDarkModeManager()
return (
<FooterFrame>
<form action="https://forms.gle/DaLuqvJsVhVaAM3J9">
<ButtonSecondary
style={{
padding: ' 8px 12px',
marginRight: '8px',
width: 'fit-content'
}}
>
<Send size={16} style={{ marginRight: '8px' }} /> Feedback
</ButtonSecondary>
</form>
<ButtonSecondary
onClick={toggleDarkMode}
style={{
padding: ' 8px 12px',
marginRight: '0px',
width: 'fit-content'
}}
href="https://forms.gle/DaLuqvJsVhVaAM3J9"
>
<Link href="https://forms.gle/DaLuqvJsVhVaAM3J9">
<Send size={16} style={{ marginRight: '8px' }} /> Feedback
</Link>
{darkMode ? <Sun size={16} /> : <Moon size={16} />}
</ButtonSecondary>
</FooterFrame>
)
......
src/components/Header/index.js
View file @ 404d7a60
......@@ -14,9 +14,12 @@ import { YellowCard, GreyCard } from '../Card'
import { useWeb3React } from '../../hooks'
import { useAddressBalance } from '../../contexts/Balances'
import { useWalletModalToggle } from '../../contexts/Application'
import { useDarkModeManager } from '../../contexts/LocalStorage'
import Logo from '../../assets/svg/logo.svg'
import Wordmark from '../../assets/svg/wordmark.svg'
import LogoDark from '../../assets/svg/logo_white2.svg'
import WordmarkDark from '../../assets/svg/wordmark_white.svg'
import { AutoColumn } from '../Column'
import { RowBetween } from '../Row'
......@@ -67,8 +70,8 @@ const AccountElement = styled.div`
display: flex;
flex-direction: row;
align-items: center;
background-color: ${({ theme, active }) => (!active ? theme.white : theme.bg3)};
border: 1px solid ${({ theme }) => theme.bg3};
background-color: ${({ theme, active }) => (!active ? theme.bg1 : theme.bg3)};
/* border: 1px solid ${({ theme }) => theme.bg1}; */
border-radius: 12px;
padding-left: ${({ active }) => (active ? '8px' : 0)};
white-space: nowrap;
......@@ -99,7 +102,7 @@ const Alpha = styled(GreyCard)`
margin-right: 10px;
border-radius: 12px;
padding: 3px 7px;
background-color: ${({ theme }) => theme.blue1};
background-color: ${({ theme }) => theme.pink2};
color: ${({ theme }) => theme.white};
font-size: 12px;
font-weight: 600;
......@@ -117,7 +120,7 @@ const MigrateBanner = styled(AutoColumn)`
padding: 12px 0;
display: flex;
justify-content: center;
background-color: ${({ theme }) => theme.blue4};
background-color: ${({ theme }) => theme.pink3};
color: ${({ theme }) => theme.pink2};
font-weight: 500;
text-align: center;
......@@ -136,6 +139,7 @@ function Header({ history }) {
const userEthBalance = useAddressBalance(account, WETH[chainId])
const toggleWalletModal = useWalletModalToggle()
const [isDark] = useDarkModeManager()
return (
<HeaderFrame>
......@@ -153,12 +157,18 @@ function Header({ history }) {
<RowBetween padding="1rem">
<HeaderElement>
<Title>
<UniIcon onClick={() => history.push('/')}>
<img src={Logo} alt="logo" />
<UniIcon id="link" href="/">
<img src={isDark ? LogoDark : Logo} alt="logo" />
</UniIcon>
{!isMobile && (
<TitleText onClick={() => history.push('/')}>
<img style={{ marginLeft: '4px', marginTop: '4px' }} src={Wordmark} alt="logo" />
<TitleText>
<Link id="link" href="/">
<img
style={{ marginLeft: '4px', marginTop: '4px' }}
src={isDark ? WordmarkDark : Wordmark}
alt="logo"
/>
</Link>
</TitleText>
)}
</Title>
......@@ -173,7 +183,7 @@ function Header({ history }) {
</TestnetWrapper>
<AccountElement active={!!account}>
{account ? (
<Row style={{ marginRight: '-1.25rem', paddingRight: '1.75rem' }}>
<Row style={{ marginRight: '-1.25rem' }}>
<Text fontWeight={500}> {userEthBalance && userEthBalance?.toFixed(4) + ' ETH'}</Text>
</Row>
) : (
......
src/components/Modal/index.js
View file @ 404d7a60
......@@ -29,7 +29,7 @@ const StyledDialogOverlay = styled(WrappedDialogOverlay).attrs({
&::after {
content: '';
background-color: ${({ theme }) => 'rgba(0,0,0,0.6)'};
background-color: ${({ theme }) => theme.modalBG};
opacity: 0.5;
top: 0;
left: 0;
......@@ -54,7 +54,7 @@ const StyledDialogContent = styled(FilteredDialogContent)`
padding: 0px;
width: 50vw;
max-width: 355px;
max-width: 420px;
${({ maxHeight }) =>
maxHeight &&
css`
......
src/components/NavigationTabs/index.js
View file @ 404d7a60
......@@ -58,12 +58,12 @@ const StyledNavLink = styled(NavLink).attrs({
border-radius: 12px;
box-sizing: border-box;
font-weight: 500;
color: ${({ theme }) => theme.black};
color: ${({ theme }) => theme.text1};
}
:hover,
:focus {
color: ${({ theme }) => darken(0.1, theme.black)};
color: ${({ theme }) => darken(0.1, theme.text1)};
}
`
......@@ -73,7 +73,7 @@ const ActiveText = styled.div`
`
const ArrowLink = styled(ArrowLeft)`
color: ${({ theme }) => theme.black};
color: ${({ theme }) => theme.text1};
`
function NavigationTabs({ location: { pathname }, history }) {
......@@ -113,8 +113,8 @@ function NavigationTabs({ location: { pathname }, history }) {
<QuestionHelper
text={
adding
? 'When you add liquidity to a pair, you receive pool tokens (ERC20) that represent both your portion of the liquidity pool and accrued liquidity provider fees .'
: 'Your liquidity is represented by a pool token (ERC20). Removing will convert your position back into the underlying tokens at the current rate and proportional to the amount of each token in the pool. Any accrued fees are included in the token amounts you receive.'
? 'When you add liqudiity, you are given pool tokens that represent your position in this pool. These tokens automatically earn fees proportional to your pool share and can be redeemed at any time.'
: 'Your liquidity is represented by a pool token (ERC20). Removing will convert your position back into tokens at the current rate and proportional to the amount of each token in the pool. Any fees you accrued are included in the token amounts you receive.'
}
/>
</RowBetween>
......
src/components/Question/index.js
View file @ 404d7a60
import React, { useState } from 'react'
import styled, { keyframes } from 'styled-components'
import { HelpCircle as Question } from 'react-feather'
import question from '../../assets/images/question.svg'
// import question from '../../assets/images/question.svg'
const Wrapper = styled.div`
position: relative;
......@@ -18,18 +19,14 @@ const QuestionWrapper = styled.div`
outline: none;
cursor: default;
border-radius: 36px;
background-color: ${({ theme }) => theme.bg2};
color: ${({ theme }) => theme.text2};
:hover,
:focus {
opacity: 0.7;
}
`
const HelpCircleStyled = styled.img`
height: 20px;
width: 20px;
`
const fadeIn = keyframes`
from {
opacity : 0;
......@@ -83,7 +80,7 @@ export default function QuestionHelper({ text }) {
setPopup(false)
}}
>
<HelpCircleStyled src={question} alt="popup" />
<Question size={16} />
</QuestionWrapper>
{showPopup && <Popup>{text}</Popup>}
</Wrapper>
......
src/components/SearchModal/index.js
View file @ 404d7a60
import React, { useState, useRef, useMemo, useEffect } from 'react'
import React, { useState, useRef, useMemo, useEffect, useContext } from 'react'
import '@reach/tooltip/styles.css'
import styled from 'styled-components'
import styled, { ThemeContext } from 'styled-components'
import escapeStringRegex from 'escape-string-regexp'
import { JSBI, WETH } from '@uniswap/sdk'
import { isMobile } from 'react-device-detect'
......@@ -74,7 +74,7 @@ const Input = styled.input`
background: none;
border: none;
outline: none;
border: 1px solid #edeef2;
border: 1px solid ${({ theme }) => theme.bg2};
box-sizing: border-box;
border-radius: 20px;
color: ${({ theme }) => theme.text1};
......@@ -88,7 +88,7 @@ const Input = styled.input`
const FilterWrapper = styled(RowFixed)`
padding: 8px;
background-color: ${({ selected, theme }) => selected && theme.bg2};
color: ${({ selected, theme }) => (selected ? theme.black : '#888D9B')};
color: ${({ selected, theme }) => (selected ? theme.text1 : theme.text2)};
border-radius: 8px;
user-select: none;
& > * {
......@@ -155,6 +155,7 @@ function SearchModal({
}) {
const { t } = useTranslation()
const { account, chainId } = useWeb3React()
const theme = useContext(ThemeContext)
const allTokens = useAllTokens()
const allPairs = useAllPairs()
......@@ -486,9 +487,9 @@ function SearchModal({
{zeroBalance && showSendWithSwap ? (
<ColumnCenter
justify="center"
style={{ backgroundColor: '#EBF4FF', padding: '8px', borderRadius: '12px' }}
style={{ backgroundColor: theme.bg2, padding: '8px', borderRadius: '12px' }}
>
<Text textAlign="center" fontWeight={500} color="#2172E5">
<Text textAlign="center" fontWeight={500} color={theme.blue1}>
Send With Swap
</Text>
</ColumnCenter>
......@@ -622,8 +623,9 @@ function SearchModal({
</RowBetween>
</PaddedColumn>
)}
{!showTokenImport && <div style={{ width: '100%', height: '1px', backgroundColor: '#E1E1E1' }} />}
{!showTokenImport && <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />}
{!showTokenImport && <TokenList>{filterType === 'tokens' ? renderTokenList() : renderPairsList()}</TokenList>}
{!showTokenImport && <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />}
{!showTokenImport && (
<Card>
<AutoRow justify={'center'}>
......@@ -641,7 +643,7 @@ function SearchModal({
</Text>
)}
{filterType === 'tokens' && (
<Text fontWeight={500}>
<Text fontWeight={500} color={theme.text2} fontSize={14}>
{!isMobile && "Don't see a token? "}
<StyledLink
......
src/components/Web3Status/index.js
View file @ 404d7a60
......@@ -11,6 +11,7 @@ import WalletModal from '../WalletModal'
import FortmaticIcon from '../../assets/images/fortmaticIcon.png'
import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
import { ButtonSecondary } from '../Button'
import { Spinner } from '../../theme'
import LightCircle from '../../assets/svg/lightcircle.svg'
......@@ -37,7 +38,7 @@ const IconWrapper = styled.div`
}
`
const Web3StatusGeneric = styled.button`
const Web3StatusGeneric = styled(ButtonSecondary)`
${({ theme }) => theme.flexRowNoWrap}
width: 100%;
/* font-size: 0.9rem; */
......@@ -64,15 +65,14 @@ const Web3StatusError = styled(Web3StatusGeneric)`
const Web3StatusConnect = styled(Web3StatusGeneric)`
background-color: ${({ theme }) => theme.blue4};
border: 1px solid ${({ theme }) => theme.blue4};
border: none;
color: ${({ theme }) => theme.blue1};
color: ${({ theme }) => theme.buttonSecondaryText};
font-weight: 500;
:hover,
:focus {
border: 1px solid ${({ theme }) => darken(0.1, theme.blue4)};
color: ${({ theme }) => darken(0.1, theme.blue1)};
border: 1px solid ${({ theme }) => darken(0.05, theme.blue4)};
color: ${({ theme }) => theme.buttonSecondaryText};
}
${({ faded }) =>
......@@ -80,12 +80,12 @@ const Web3StatusConnect = styled(Web3StatusGeneric)`
css`
background-color: ${({ theme }) => theme.blue5};
border: 1px solid ${({ theme }) => theme.blue5};
color: ${({ theme }) => theme.blue1};
color: ${({ theme }) => theme.buttonSecondaryText};
:hover,
:focus {
border: 1px solid ${({ theme }) => darken(0.1, theme.blue4)};
color: ${({ theme }) => darken(0.1, theme.blue1)};
border: 1px solid ${({ theme }) => darken(0.05, theme.blue4)};
color: ${({ theme }) => darken(0.05, theme.buttonSecondaryText)};
}
`}
`
......
src/contexts/LocalStorage.tsx
View file @ 404d7a60
......@@ -84,7 +84,7 @@ export default function Provider({ children }) {
LocalStorageKeys.MIGRATION_MESSAGE_DISMISSED,
false
)
const [darkMode, setDarkMode] = useLocalStorage<boolean>(LocalStorageKeys.DARK_MODE, false)
const [darkMode, setDarkMode] = useLocalStorage<boolean>(LocalStorageKeys.DARK_MODE, true)
const [tokens, setTokens] = useLocalStorage<Token[], ReturnType<typeof serializeTokens>>(
LocalStorageKeys.TOKENS,
[],
......
src/pages/App.js
View file @ 404d7a60
......@@ -46,7 +46,7 @@ const BodyWrapper = styled.div`
transition: height 0.3s ease;
& > * {
max-width: calc(355px + 4rem);
max-width: calc(420px + 4rem);
width: 90%;
}
......@@ -58,7 +58,7 @@ const BodyWrapper = styled.div`
`
const Body = styled.div`
max-width: 355px;
max-width: 420px;
width: 100%;
/* min-height: 340px; */
background: ${({ theme }) => theme.bg1};
......@@ -73,9 +73,8 @@ const Body = styled.div`
const StyledRed = styled.div`
width: 100%;
height: 150vh;
border-radius: 10vw;
background: ${({ theme }) => `radial-gradient(50% 50% at 50% 50%, ${theme.pink2} 0%, ${theme.white} 100%)`};
height: 200vh;
background: ${({ theme }) => `radial-gradient(50% 50% at 50% 50%, ${theme.pink2} 0%, ${theme.bg1} 100%)`};
position: absolute;
top: 0px;
left: 0px;
......
src/pages/Pool/AddLiquidity.tsx
View file @ 404d7a60
......@@ -569,7 +569,7 @@ function AddLiquidity({ token0, token1, step = false }) {
{tokens[Field.INPUT]?.symbol + ':' + tokens[Field.OUTPUT]?.symbol + ' Pool Tokens'}
</Text>
</Row>
<TYPE.italic fontSize={12} color="#565A69" textAlign="center" padding={'12px 0 0 0 '}>
<TYPE.italic fontSize={12} textAlign="center" padding={'12px 0 0 0 '}>
{`Output is estimated. You will receive at least ${liquidityMinted?.toSignificant(6)} UNI ${
tokens[Field.INPUT]?.symbol
}/${tokens[Field.OUTPUT]?.symbol} or the transaction will revert.`}
......@@ -650,26 +650,22 @@ function AddLiquidity({ token0, token1, step = false }) {
return (
<AutoRow justify="space-between">
<AutoColumn justify="center">
<Text fontWeight={500} fontSize={16} color="#000000">
{displayPriceInput}
</Text>
<TYPE.black>{displayPriceInput}</TYPE.black>
<Text fontWeight={500} fontSize={14} color="#888D9B" pt={1}>
{tokens[Field.OUTPUT]?.symbol} per {tokens[Field.INPUT]?.symbol}
</Text>
</AutoColumn>
<AutoColumn justify="center">
<Text fontWeight={500} fontSize={16} color="#000000">
{displayPriceOutput}
</Text>
<TYPE.black>{displayPriceOutput}</TYPE.black>
<Text fontWeight={500} fontSize={14} color="#888D9B" pt={1}>
{tokens[Field.INPUT]?.symbol} per {tokens[Field.OUTPUT]?.symbol}
</Text>
</AutoColumn>
<AutoColumn justify="center">
<Text fontWeight={500} fontSize={16} color="#000000">
<TYPE.black>
{noLiquidity && derivedPrice ? '100' : poolTokenPercentage ? poolTokenPercentage?.toFixed(2) : '0.0'}
{'%'}
</Text>
</TYPE.black>
<Text fontWeight={500} fontSize={14} color="#888D9B" pt={1}>
Pool Share
</Text>
......
src/pages/Pool/index.js
View file @ 404d7a60
import React, { useState } from 'react'
import styled from 'styled-components'
import React, { useState, useContext } from 'react'
import styled, { ThemeContext } from 'styled-components'
import { JSBI } from '@uniswap/sdk'
import { withRouter } from 'react-router-dom'
......@@ -36,6 +36,7 @@ function Supply({ history }) {
const allTokens = useAllTokens()
const allBalances = useAllBalances()
const allPairs = useAllPairs()
const theme = useContext(ThemeContext)
// initiate listener for LP balances
useAccountLPBalances(account)
......@@ -75,7 +76,9 @@ function Supply({ history }) {
<Positions>
<AutoColumn gap="12px">
<RowBetween padding={'0 8px'}>
<Text fontWeight={500}>Your Pooled Liquidity</Text>
<Text color={theme.text1} fontWeight={500}>
Your Pooled Liquidity
</Text>
<Question text="When you add liquidity, you are given pool tokens that represent your share. If you don’t see a pool you joined in this list, try importing a pool below." />
</RowBetween>
{filteredExchangeList?.length === 0 && (
......@@ -83,7 +86,9 @@ function Supply({ history }) {
padding="40px
"
>
<TYPE.body textAlign="center">No liquidity found.</TYPE.body>
<TYPE.body color={theme.text3} textAlign="center">
No liquidity found.
</TYPE.body>
</LightCard>
)}
{filteredExchangeList}
......
src/theme/index.js
View file @ 404d7a60
import React, { useEffect } from 'react'
import { ThemeProvider as StyledComponentsThemeProvider, createGlobalStyle, css } from 'styled-components'
import styled, { ThemeProvider as StyledComponentsThemeProvider, createGlobalStyle, css } from 'styled-components'
import { getQueryParam, checkSupportedTheme } from '../utils'
import { SUPPORTED_THEMES } from '../constants'
import { useDarkModeManager } from '../contexts/LocalStorage'
......@@ -49,31 +49,41 @@ export const theme = darkMode => ({
// text
text1: darkMode ? '#FFFFFF' : '#000000',
text2: darkMode ? '#888D9B' : '#565A69',
text2: darkMode ? '#CED0D9' : '#565A69',
text3: darkMode ? '#6C7284' : '#888D9B',
text4: '#C3C5CB',
text4: darkMode ? '#565A69' : '#C3C5CB',
text5: '#EDEEF2',
// backgrounds / greys
bg1: darkMode ? '#191B1F' : '#FFFFFF',
bg1: darkMode ? '#212429' : '#FFFFFF',
bg2: darkMode ? '#2C2F36' : '#F7F8FA',
bg3: darkMode ? '#40444F' : '#EDEEF2',
bg4: darkMode ? '#565A69' : '#CED0D9',
bg5: darkMode ? '#565A69' : '#888D9B',
modalBG: darkMode ? 'rgba(0,0,0,0.85)' : 'rgba(0,0,0,0.6)',
advancedBG: darkMode ? 'rgba(0,0,0,0.15)' : 'rgba(255,255,255,0.6)',
//blues
// blue1: '#2172E5',
blue1: '#ff007a',
blue1: darkMode ? '#2172E5' : '#ff007a',
blue2: darkMode ? '#3680E7' : '#1966D2',
blue3: darkMode ? '#4D8FEA' : '#165BBB',
// blue5: '#EBF4FF',
// blue4: '#C4D9F8',
blue4: '#F6DDE8',
blue5: '#FDEAF1',
// blue4: darkMode ? '#153d6f70' : '#C4D9F8',
// blue5: darkMode ? '#153d6f70' : '#EBF4FF',
blue4: darkMode ? '#153d6f70' : '#F6DDE8',
blue5: darkMode ? '#153d6f70' : '#FDEAF1',
buttonSecondaryText: darkMode ? '#6da8ff' : '#ff007a',
// blue1: '#ff007a',
// blue4: '#F6DDE8',
// blue5: '#FDEAF1',
// pinks
pink1: '#DC6BE5',
pink2: '#ff007a',
pink2: darkMode ? '#2172E5' : '#ff007a',
pink3: darkMode ? '#17000b26' : '#F6DDE8',
pink4: darkMode ? '#17000b26' : '#FDEAF1',
// other
red1: '#FF6871',
......@@ -103,71 +113,75 @@ export const theme = darkMode => ({
`
})
const TextWrapper = styled(Text)`
color = ${({ color, theme }) => theme[color]}
`
export const TYPE = {
main: ({ children, ...rest }) => (
<Text fontWeight={500} color={theme().text2} {...rest}>
<TextWrapper fontWeight={500} color={'text2'} {...rest}>
{children}
</Text>
</TextWrapper>
),
black: ({ children, ...rest }) => (
<Text fontWeight={500} color={theme().text1} {...rest}>
<TextWrapper fontWeight={500} color={'text1'} {...rest}>
{children}
</Text>
</TextWrapper>
),
largeHeader: ({ children, ...rest }) => (
<Text fontWeight={600} fontSize={24} {...rest}>
<TextWrapper fontWeight={600} fontSize={24} {...rest}>
{children}
</Text>
</TextWrapper>
),
mediumHeader: ({ children, ...rest }) => (
<Text fontWeight={500} fontSize={20} color={theme().text1} {...rest}>
<TextWrapper fontWeight={500} fontSize={20} color={'text1'} {...rest}>
{children}
</Text>
</TextWrapper>
),
subHeader: ({ children, ...rest }) => (
<Text fontWeight={400} fontSize={14} color={theme().text1} {...rest}>
<TextWrapper fontWeight={400} fontSize={14} color={'text1'} {...rest}>
{children}
</Text>
</TextWrapper>
),
body: ({ children, ...rest }) => (
<Text fontWeight={400} fontSize={16} color={'#191B1F'} {...rest}>
<TextWrapper fontWeight={400} fontSize={16} color={'text1'} {...rest}>
{children}
</Text>
</TextWrapper>
),
blue: ({ children, ...rest }) => (
<Text fontWeight={500} color={theme().blue1} {...rest}>
<TextWrapper fontWeight={500} color={'blue1'} {...rest}>
{children}
</Text>
</TextWrapper>
),
yellow: ({ children, ...rest }) => (
<Text fontWeight={500} color={theme().yellow2} {...rest}>
<TextWrapper fontWeight={500} color={'yellow2'} {...rest}>
{children}
</Text>
</TextWrapper>
),
green: ({ children, ...rest }) => (
<Text fontWeight={500} color={theme().green1} {...rest}>
<TextWrapper fontWeight={500} color={'green1'} {...rest}>
{children}
</Text>
</TextWrapper>
),
gray: ({ children, ...rest }) => (
<Text fontWeight={500} color={theme().bg3} {...rest}>
<TextWrapper fontWeight={500} color={'bg3'} {...rest}>
{children}
</Text>
</TextWrapper>
),
darkGray: ({ children, ...rest }) => (
<Text fontWeight={500} color={theme().text3} {...rest}>
<TextWrapper fontWeight={500} color={'text3'} {...rest}>
{children}
</Text>
</TextWrapper>
),
italic: ({ children, ...rest }) => (
<Text fontWeight={500} fontSize={12} fontStyle={'italic'} color={theme().text2} {...rest}>
<TextWrapper fontWeight={500} fontSize={12} fontStyle={'italic'} color={'text2'} {...rest}>
{children}
</Text>
</TextWrapper>
),
error: ({ children, error, ...rest }) => (
<Text fontWeight={500} color={error ? theme().red1 : theme().text2} {...rest}>
<TextWrapper fontWeight={500} color={error ? 'red1' : 'text2'} {...rest}>
{children}
</Text>
</TextWrapper>
)
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment