chore: update dashboard page
This commit is contained in:
jinhojang6
parent
bf81e9cf3b
commit
390baf77cc
|
|
@ -0,0 +1,6 @@
|
||||||
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="chevron-down">
|
||||||
|
<path id="icon" d="M10.5001 5.66137L9.67762 4.83887L7.00012 7.51053L4.32262 4.83887L3.50012 5.66137L7.00012 9.16137L10.5001 5.66137Z" fill="#F29AE9"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 301 B |
|
|
@ -0,0 +1,5 @@
|
||||||
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g opacity="0.5">
|
||||||
|
<path d="M1.75 10.0625V12.25H3.9375L10.3892 5.79833L8.20167 3.61083L1.75 10.0625ZM12.0808 4.10666C12.3083 3.87916 12.3083 3.51166 12.0808 3.28416L10.7158 1.91916C10.4883 1.69166 10.1208 1.69166 9.89333 1.91916L8.82583 2.98666L11.0133 5.17416L12.0808 4.10666Z" fill="white"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 401 B |
|
|
@ -0,0 +1,6 @@
|
||||||
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g opacity="0.5">
|
||||||
|
<path d="M9.33332 0.583252H2.33332C1.69166 0.583252 1.16666 1.10825 1.16666 1.74992V9.91659H2.33332V1.74992H9.33332V0.583252ZM8.74999 2.91659H4.66666C4.02499 2.91659 3.50582 3.44159 3.50582 4.08325L3.49999 12.2499C3.49999 12.8916 4.01916 13.4166 4.66082 13.4166H11.0833C11.725 13.4166 12.25 12.8916 12.25 12.2499V6.41659L8.74999 2.91659ZM4.66666 12.2499V4.08325H8.16666V6.99992H11.0833V12.2499H4.66666Z" fill="#F29AE9"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 567 B |
|
|
@ -0,0 +1,5 @@
|
||||||
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g opacity="0.5">
|
||||||
|
<path d="M9.33332 0.583252H2.33332C1.69166 0.583252 1.16666 1.10825 1.16666 1.74992V9.91659H2.33332V1.74992H9.33332V0.583252ZM8.74999 2.91659H4.66666C4.02499 2.91659 3.50582 3.44159 3.50582 4.08325L3.49999 12.2499C3.49999 12.8916 4.01916 13.4166 4.66082 13.4166H11.0833C11.725 13.4166 12.25 12.8916 12.25 12.2499V6.41659L8.74999 2.91659ZM4.66666 12.2499V4.08325H8.16666V6.99992H11.0833V12.2499H4.66666Z" fill="white"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 545 B |
|
|
@ -1,3 +1,5 @@
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"
|
||||||
<path d="M11.6667 7.58325H7.58337V11.6666H6.41671V7.58325H2.33337V6.41658H6.41671V2.33325H7.58337V6.41658H11.6667V7.58325Z" fill="white"/>
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M9.66671 5.58325H5.58337V9.66658H4.41671V5.58325H0.333374V4.41658H4.41671V0.333252H5.58337V4.41658H9.66671V5.58325Z" fill="white"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 242 B After Width: | Height: | Size: 256 B |
|
|
@ -0,0 +1,15 @@
|
||||||
|
<svg width="55" height="54" viewBox="0 0 55 54" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M27.5493 53.2196C41.9694 53.2196 53.6591 41.5298 53.6591 27.1098C53.6591 12.6898 41.9694 1 27.5493 1C13.1293 1 1.43956 12.6898 1.43956 27.1098C1.43956 41.5298 13.1293 53.2196 27.5493 53.2196Z" fill="black"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5492 1.46066C13.3835 1.46066 1.89995 12.9442 1.89995 27.1099C1.89995 41.2756 13.3835 52.7591 27.5492 52.7591C41.7149 52.7591 53.1984 41.2756 53.1984 27.1099C53.1984 12.9442 41.7149 1.46066 27.5492 1.46066ZM0.978836 27.1099C0.978836 12.4355 12.8748 0.539551 27.5492 0.539551C42.2236 0.539551 54.1195 12.4355 54.1195 27.1099C54.1195 41.7843 42.2236 53.6802 27.5492 53.6802C12.8748 53.6802 0.978836 41.7843 0.978836 27.1099Z" fill="white"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5062 6.50488L42.7278 21.7246L35.117 29.3354L27.5061 36.9443L12.2865 21.7246L27.5062 6.50488ZM27.5062 7.28645L13.068 21.7246L27.5062 36.1627L41.9462 21.7246L27.5062 7.28645Z" fill="white"/>
|
||||||
|
<path d="M27.5412 12.4219L42.4049 27.2856L27.5412 42.1494L12.6774 27.2856L27.5412 12.4219Z" fill="black"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5061 11.9395L39.8138 24.2472L42.7277 27.1611L27.5061 42.3808L12.2864 27.1611L15.2003 24.2473L27.5061 11.9395ZM27.5061 12.7212L15.5911 24.6381L13.068 27.1611L27.5061 41.5993L41.9462 27.1611L39.4231 24.6381L27.5061 12.7212Z" fill="white"/>
|
||||||
|
<path d="M18.0419 27.0892L20.0926 25.0385L27.5061 17.623L34.9216 25.0385L36.9723 27.0892L39.6908 29.8077L42.337 32.452L27.5061 47.2828L12.6772 32.452L15.3234 29.8077L18.0419 27.0892Z" fill="url(#paint0_linear_2733_3370)"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5061 17.2322L39.8861 29.6122L42.7278 32.4518L27.5061 47.6736L12.2864 32.4518L15.128 29.6122L19.8972 24.843L27.5061 17.2322ZM27.5062 18.0138L15.5188 30.003L13.0681 32.452L27.5061 46.8919L41.9461 32.452L39.4955 30.0031L27.5062 18.0138Z" fill="white"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_2733_3370" x1="37.7314" y1="21.2649" x2="17.8354" y2="41.5294" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop offset="0.278236" stop-color="#6F3FFF"/>
|
||||||
|
<stop offset="0.8" stop-color="#FF30F8"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1,20 @@
|
||||||
|
<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="10 day streak">
|
||||||
|
<path id="Vector" d="M27.1098 53.2196C41.5298 53.2196 53.2196 41.5298 53.2196 27.1098C53.2196 12.6898 41.5298 1 27.1098 1C12.6897 1 1 12.6898 1 27.1098C1 41.5298 12.6897 53.2196 27.1098 53.2196Z" fill="black"/>
|
||||||
|
<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M27.1098 1.46066C12.9441 1.46066 1.46055 12.9442 1.46055 27.1099C1.46055 41.2756 12.9441 52.7591 27.1098 52.7591C41.2755 52.7591 52.759 41.2756 52.759 27.1099C52.759 12.9442 41.2755 1.46066 27.1098 1.46066ZM0.539444 27.1099C0.539444 12.4355 12.4354 0.539551 27.1098 0.539551C41.7842 0.539551 53.6801 12.4355 53.6801 27.1099C53.6801 41.7843 41.7842 53.6802 27.1098 53.6802C12.4354 53.6802 0.539444 41.7843 0.539444 27.1099Z" fill="white"/>
|
||||||
|
<path id="Vector_2" d="M17.6022 16.3612L19.653 14.3104L27.0665 6.89502L34.4819 14.3104L36.5326 16.3612L39.2511 19.0797L41.8973 21.7239L27.0665 36.5548L12.2376 21.7239L14.8837 19.0797L17.6022 16.3612Z" fill="url(#paint0_linear_2733_3351)"/>
|
||||||
|
<path id="Vector (Stroke)_2" fill-rule="evenodd" clip-rule="evenodd" d="M27.0665 6.50439L39.4465 18.8844L42.2882 21.7241L27.0665 36.9458L11.8467 21.7241L14.6884 18.8845L19.4576 14.1153L27.0665 6.50439ZM27.0665 7.28603L15.0791 19.2753L12.6284 21.7242L27.0665 36.1642L41.5065 21.7242L39.0558 19.2753L27.0665 7.28603Z" fill="white"/>
|
||||||
|
<path id="Vector_3" d="M17.6022 21.8878L19.653 19.837L27.0665 12.4216L34.4819 19.837L36.5326 21.8878L39.2511 24.6063L41.8973 27.2506L27.0665 42.0814L12.2376 27.2506L14.8837 24.6063L17.6022 21.8878Z" fill="black"/>
|
||||||
|
<path id="Vector (Stroke)_3" fill-rule="evenodd" clip-rule="evenodd" d="M27.0665 12.0312L39.4465 24.4112L42.2882 27.2509L27.0665 42.4726L11.8467 27.2509L14.6884 24.4113L19.4576 19.6421L27.0665 12.0312ZM27.0665 12.8129L15.0791 24.8021L12.6284 27.2511L27.0665 41.691L41.5065 27.2511L39.0558 24.8022L27.0665 12.8129Z" fill="white"/>
|
||||||
|
<g id="Group">
|
||||||
|
<path id="Rectangle 624" d="M27.1015 17.5801L41.9653 32.4438L27.1015 47.3076L12.2378 32.4438L27.1015 17.5801Z" fill="black"/>
|
||||||
|
<path id="Rectangle 624 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M41.1837 32.4438L27.1015 18.3617L13.0194 32.4438L27.1015 46.526L41.1837 32.4438ZM27.1015 17.5801L12.2378 32.4438L27.1015 47.3076L41.9653 32.4438L27.1015 17.5801Z" fill="white"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_2733_3351" x1="27.359" y1="6.89502" x2="12.2376" y2="27.1375" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop offset="0.23274" stop-color="#FD435C"/>
|
||||||
|
<stop offset="0.763381" stop-color="#FF9900"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -0,0 +1,19 @@
|
||||||
|
<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="100 days streak">
|
||||||
|
<path id="Vector" d="M27.3291 53.2196C41.7491 53.2196 53.4389 41.5298 53.4389 27.1098C53.4389 12.6898 41.7491 1 27.3291 1C12.909 1 1.21929 12.6898 1.21929 27.1098C1.21929 41.5298 12.909 53.2196 27.3291 53.2196Z" fill="black"/>
|
||||||
|
<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M27.3292 1.46066C13.1635 1.46066 1.67998 12.9442 1.67998 27.1099C1.67998 41.2756 13.1635 52.7591 27.3292 52.7591C41.4949 52.7591 52.9785 41.2756 52.9785 27.1099C52.9785 12.9442 41.4949 1.46066 27.3292 1.46066ZM0.758865 27.1099C0.758865 12.4355 12.6548 0.539551 27.3292 0.539551C42.0036 0.539551 53.8996 12.4355 53.8996 27.1099C53.8996 41.7843 42.0036 53.6802 27.3292 53.6802C12.6548 53.6802 0.758865 41.7843 0.758865 27.1099Z" fill="white"/>
|
||||||
|
<g id="Group">
|
||||||
|
<path id="Vector (Stroke)_2" fill-rule="evenodd" clip-rule="evenodd" d="M27.286 6.50439L42.5077 21.7241L34.8968 29.3349L27.286 36.9438L12.0663 21.7241L27.286 6.50439ZM27.286 7.28596L12.8479 21.7241L27.2861 36.1623L41.7261 21.7241L27.286 7.28596Z" fill="white"/>
|
||||||
|
<path id="Rectangle 624" d="M27.3208 12.4216L42.1845 27.2854L27.3208 42.1491L12.457 27.2854L27.3208 12.4216Z" fill="url(#paint0_linear_2733_3361)"/>
|
||||||
|
<path id="Vector (Stroke)_3" fill-rule="evenodd" clip-rule="evenodd" d="M27.2857 11.9392L39.5935 24.247L42.5074 27.1609L27.2857 42.3806L12.066 27.1609L14.9799 24.247L27.2857 11.9392ZM27.2858 12.7209L15.3707 24.6378L12.8476 27.1609L27.2858 41.599L41.7258 27.1609L39.2027 24.6379L27.2858 12.7209Z" fill="white"/>
|
||||||
|
<path id="Vector_2" d="M17.8215 27.0885L19.8723 25.0377L27.2858 17.6223L34.7012 25.0377L36.7519 27.0885L39.4704 29.807L42.1166 32.4512L27.2858 47.2821L12.4568 32.4512L15.103 29.807L17.8215 27.0885Z" fill="black"/>
|
||||||
|
<path id="Vector (Stroke)_4" fill-rule="evenodd" clip-rule="evenodd" d="M27.2857 17.2319L39.6657 29.6119L42.5075 32.4516L27.2857 47.6733L12.066 32.4516L14.9076 29.612L19.6768 24.8428L27.2857 17.2319ZM27.2858 18.0136L15.2984 30.0028L12.8477 32.4518L27.2858 46.8917L41.7257 32.4517L39.2751 30.0029L27.2858 18.0136Z" fill="white"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_2733_3361" x1="34.7527" y1="19.8535" x2="19.8889" y2="34.7172" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#BDC455"/>
|
||||||
|
<stop offset="0.59" stop-color="#27D500"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -0,0 +1,4 @@
|
||||||
|
<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="0.658768" y="0.109863" width="52" height="52" rx="26" fill="#1F1F1F" fill-opacity="0.9"/>
|
||||||
|
<path opacity="0.6" d="M26.4105 28.563V28.5114C26.4161 27.9636 26.4728 27.5276 26.5805 27.2036C26.6882 26.8795 26.8413 26.617 27.0397 26.4163C27.2381 26.2155 27.4762 26.0305 27.754 25.8613C27.9212 25.758 28.0715 25.6362 28.2047 25.4956C28.3379 25.3522 28.4428 25.1873 28.5193 25.0009C28.5987 24.8145 28.6383 24.608 28.6383 24.3814C28.6383 24.1003 28.5732 23.8565 28.4428 23.65C28.3124 23.4435 28.1381 23.2843 27.9198 23.1725C27.7016 23.0606 27.4592 23.0047 27.1928 23.0047C26.9603 23.0047 26.7364 23.0535 26.521 23.151C26.3056 23.2485 26.1256 23.4019 25.981 23.6113C25.8365 23.8207 25.7529 24.0946 25.7302 24.433H24.6588C24.6814 23.9454 24.8061 23.5281 25.0329 23.1811C25.2625 22.8341 25.5644 22.5688 25.9385 22.3852C26.3155 22.2016 26.7336 22.1099 27.1928 22.1099C27.6916 22.1099 28.1253 22.2102 28.4938 22.411C28.8651 22.6118 29.1514 22.8871 29.3526 23.237C29.5567 23.5869 29.6588 23.9856 29.6588 24.433C29.6588 24.7485 29.6106 25.0339 29.5142 25.2891C29.4207 25.5444 29.2846 25.7724 29.106 25.9732C28.9303 26.1739 28.7177 26.3517 28.4683 26.5066C28.2188 26.6644 28.019 26.8307 27.8688 27.0057C27.7186 27.1777 27.6094 27.3828 27.5414 27.6209C27.4734 27.8589 27.4365 28.1558 27.4309 28.5114V28.563H26.4105ZM26.9547 31.1099C26.7449 31.1099 26.5649 31.0339 26.4147 30.8819C26.2645 30.7298 26.1894 30.5477 26.1894 30.3355C26.1894 30.1232 26.2645 29.9411 26.4147 29.7891C26.5649 29.6371 26.7449 29.5611 26.9547 29.5611C27.1644 29.5611 27.3444 29.6371 27.4946 29.7891C27.6449 29.9411 27.72 30.1232 27.72 30.3355C27.72 30.476 27.6845 30.6051 27.6137 30.7227C27.5457 30.8403 27.4535 30.9349 27.3373 31.0066C27.2239 31.0754 27.0964 31.1099 26.9547 31.1099Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -18,13 +18,14 @@ const OperatorGrid: React.FC<OperatorGridProps> = ({
|
||||||
<Header>
|
<Header>
|
||||||
<Title>Operators</Title>
|
<Title>Operators</Title>
|
||||||
<Controls>
|
<Controls>
|
||||||
<FilterDropdown>
|
<PlusIcon>
|
||||||
<p>Filter</p>
|
<img
|
||||||
<img src="/assets/chevron-down.svg" alt="chevron down" />
|
src="/assets/plus.svg"
|
||||||
</FilterDropdown>
|
width={10}
|
||||||
<IconButton>
|
height={10}
|
||||||
<img src="/assets/plus.svg" alt="Settings" />
|
alt="Add Operator"
|
||||||
</IconButton>
|
/>
|
||||||
|
</PlusIcon>
|
||||||
</Controls>
|
</Controls>
|
||||||
</Header>
|
</Header>
|
||||||
<Stats>
|
<Stats>
|
||||||
|
|
@ -34,14 +35,14 @@ const OperatorGrid: React.FC<OperatorGridProps> = ({
|
||||||
</Stat>
|
</Stat>
|
||||||
<Stat>
|
<Stat>
|
||||||
<Label>Staked</Label>
|
<Label>Staked</Label>
|
||||||
|
<Value>6</Value>
|
||||||
|
</Stat>
|
||||||
|
<Stat>
|
||||||
|
<Label>Unstaked</Label>
|
||||||
<Value>1</Value>
|
<Value>1</Value>
|
||||||
</Stat>
|
</Stat>
|
||||||
<Stat>
|
<Stat>
|
||||||
<Label>Total Points</Label>
|
<Label>XP/Block</Label>
|
||||||
<Value>4,278</Value>
|
|
||||||
</Stat>
|
|
||||||
<Stat>
|
|
||||||
<Label>Points/Hr</Label>
|
|
||||||
<Value>912</Value>
|
<Value>912</Value>
|
||||||
</Stat>
|
</Stat>
|
||||||
</Stats>
|
</Stats>
|
||||||
|
|
@ -83,7 +84,7 @@ const OperatorGrid: React.FC<OperatorGridProps> = ({
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
const StyledOperatorGrid = styled.section`
|
const StyledOperatorGrid = styled.section`
|
||||||
margin-top: 94px;
|
margin-top: 116px;
|
||||||
|
|
||||||
@media (max-width: ${breakpoints.md}px) {
|
@media (max-width: ${breakpoints.md}px) {
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
|
|
@ -109,24 +110,16 @@ const Controls = styled.div`
|
||||||
align-items: center;
|
align-items: center;
|
||||||
`
|
`
|
||||||
|
|
||||||
const FilterDropdown = styled.div`
|
const PlusIcon = styled.button`
|
||||||
background-color: transparent;
|
|
||||||
width: 128px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: center;
|
||||||
|
|
||||||
border: 1px solid rgb(var(--lsd-border-primary));
|
border: 1px solid rgb(var(--lsd-border-primary));
|
||||||
border-right: none;
|
background-color: transparent;
|
||||||
color: rgb(var(--lsd-text-primary));
|
width: 28px;
|
||||||
font-weight: 400;
|
|
||||||
font-size: 12px;
|
|
||||||
padding-left: 12px;
|
|
||||||
height: 28px;
|
height: 28px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
img {
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
`
|
`
|
||||||
|
|
||||||
const IconButton = styled.button`
|
const IconButton = styled.button`
|
||||||
|
|
@ -172,7 +165,7 @@ const Value = styled.div`
|
||||||
|
|
||||||
const Grid = styled.div`
|
const Grid = styled.div`
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
`
|
`
|
||||||
|
|
||||||
|
|
@ -201,6 +194,13 @@ const OperatorName = styled.div`
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
// 1 line of text
|
||||||
|
display: -webkit-inline-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
line-clamp: 1;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
`
|
`
|
||||||
|
|
||||||
const PointsPerHour = styled.div`
|
const PointsPerHour = styled.div`
|
||||||
|
|
@ -219,17 +219,22 @@ const Actions = styled.div`
|
||||||
const ActionButton = styled.button<{ isStaked: boolean }>`
|
const ActionButton = styled.button<{ isStaked: boolean }>`
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background-color: ${(props) =>
|
background-color: ${(props) =>
|
||||||
props.isStaked ? 'transparent' : 'rgb(var(--lsd-surface-secondary))'};
|
props.isStaked ? 'rgb(var(--lsd-surface-secondary))' : 'transparent'};
|
||||||
color: ${(props) =>
|
color: ${(props) =>
|
||||||
props.isStaked
|
props.isStaked
|
||||||
? 'rgb(var(--lsd-text-primary))'
|
? 'rgb(var(--lsd-text-secondary))'
|
||||||
: 'rgb(var(--lsd-text-secondary))'};
|
: 'rgb(var(--lsd-text-primary))'};
|
||||||
border: none;
|
border: none;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgb(var(--lsd-surface-secondary));
|
||||||
|
color: rgb(var(--lsd-text-secondary));
|
||||||
|
}
|
||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
`
|
`
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
import { Collapse } from '@/components/common/Collapse'
|
||||||
|
import { truncateString } from '@/utils/general.utils'
|
||||||
import styled from '@emotion/styled'
|
import styled from '@emotion/styled'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
|
||||||
|
|
@ -6,23 +8,19 @@ interface OperatorPanelProps {}
|
||||||
const TEMP_BADGES = [
|
const TEMP_BADGES = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
image: '/dashboard/badges/badge-1.svg',
|
image: '/dashboard/badges/1-year-streak.svg',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
image: '/dashboard/badges/badge-2.svg',
|
image: '/dashboard/badges/10-day-streak.svg',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
image: '/dashboard/badges/badge-3.svg',
|
image: '/dashboard/badges/100-days-streak.svg',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
image: '/dashboard/badges/badge-4.svg',
|
image: '/dashboard/badges/badege-placeholder.svg',
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
image: '/dashboard/badges/badge-5.svg',
|
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
@ -35,8 +33,7 @@ const OperatorPanel: React.FC<OperatorPanelProps> = () => {
|
||||||
alt="Operator"
|
alt="Operator"
|
||||||
/>
|
/>
|
||||||
<OperatorInfo>
|
<OperatorInfo>
|
||||||
<OperatorType>Operator</OperatorType>
|
<OperatorType>Quantum Recursive Memetic </OperatorType>
|
||||||
<OperatorName>Memetic #1234</OperatorName>
|
|
||||||
</OperatorInfo>
|
</OperatorInfo>
|
||||||
</Profile>
|
</Profile>
|
||||||
<InfoRow>
|
<InfoRow>
|
||||||
|
|
@ -45,17 +42,31 @@ const OperatorPanel: React.FC<OperatorPanelProps> = () => {
|
||||||
</InfoRow>
|
</InfoRow>
|
||||||
|
|
||||||
<CallSignContainer>
|
<CallSignContainer>
|
||||||
|
<InfoRow>
|
||||||
|
<Label>Wallet</Label>
|
||||||
|
<Value>{truncateString('bc1qaa13nskasjovehs9')}</Value>
|
||||||
|
<ActionButton>
|
||||||
|
<img src="/assets/file-copy.svg" alt="Copy wallet address" />
|
||||||
|
</ActionButton>
|
||||||
|
</InfoRow>
|
||||||
<InfoRow>
|
<InfoRow>
|
||||||
<Label>Callsign</Label>
|
<Label>Callsign</Label>
|
||||||
<Value>RagingBull</Value>
|
<Value>RagingBull</Value>
|
||||||
|
<ActionButton>
|
||||||
|
<img src="/assets/edit.svg" alt="Edit callsign" />
|
||||||
|
</ActionButton>
|
||||||
|
</InfoRow>
|
||||||
|
<InfoRow>
|
||||||
|
<Label>Role</Label>
|
||||||
|
<Value>Operator</Value>
|
||||||
</InfoRow>
|
</InfoRow>
|
||||||
</CallSignContainer>
|
|
||||||
|
|
||||||
<ProfileInfo>
|
|
||||||
<InfoRow>
|
<InfoRow>
|
||||||
<Label>OP Number</Label>
|
<Label>OP Number</Label>
|
||||||
<Value>#214</Value>
|
<Value>#214</Value>
|
||||||
</InfoRow>
|
</InfoRow>
|
||||||
|
</CallSignContainer>
|
||||||
|
|
||||||
|
<ProfileInfo>
|
||||||
<BadgesSection>
|
<BadgesSection>
|
||||||
<BadgeTitle>
|
<BadgeTitle>
|
||||||
<Label>Badges</Label>
|
<Label>Badges</Label>
|
||||||
|
|
@ -72,6 +83,11 @@ const OperatorPanel: React.FC<OperatorPanelProps> = () => {
|
||||||
</BadgeList>
|
</BadgeList>
|
||||||
</BadgesSection>
|
</BadgesSection>
|
||||||
</ProfileInfo>
|
</ProfileInfo>
|
||||||
|
|
||||||
|
<Collapse
|
||||||
|
header="Refer Operators +100 XP"
|
||||||
|
content={truncateString('445f5slk1as4645sdf54')}
|
||||||
|
/>
|
||||||
</StyledPanel>
|
</StyledPanel>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
@ -90,21 +106,13 @@ const OperatorImage = styled.img`
|
||||||
|
|
||||||
const OperatorInfo = styled.div`
|
const OperatorInfo = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: center;
|
||||||
padding: 16px 8px;
|
padding: 16px 8px;
|
||||||
margin-bottom: 2px;
|
margin-bottom: 2px;
|
||||||
`
|
`
|
||||||
|
|
||||||
const OperatorType = styled.span``
|
const OperatorType = styled.span``
|
||||||
|
|
||||||
const OperatorName = styled.span``
|
|
||||||
|
|
||||||
const InfoColumn = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2px;
|
|
||||||
`
|
|
||||||
|
|
||||||
const InfoRow = styled.div`
|
const InfoRow = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
@ -129,10 +137,13 @@ const CallSignContainer = styled.div`
|
||||||
margin-bottom: 2px;
|
margin-bottom: 2px;
|
||||||
`
|
`
|
||||||
|
|
||||||
const Label = styled.span``
|
const Label = styled.span`
|
||||||
|
width: 87px;
|
||||||
|
`
|
||||||
|
|
||||||
const Value = styled.span`
|
const Value = styled.span`
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
width: 155px;
|
||||||
`
|
`
|
||||||
|
|
||||||
const BadgesSection = styled.div`
|
const BadgesSection = styled.div`
|
||||||
|
|
@ -159,14 +170,23 @@ const BadgeIcon = styled.img`
|
||||||
const BadgeList = styled.div`
|
const BadgeList = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 8px;
|
gap: 16px;
|
||||||
`
|
`
|
||||||
|
|
||||||
const Badge = styled.img`
|
const Badge = styled.img`
|
||||||
width: 45px;
|
width: 52px;
|
||||||
height: 42px;
|
height: 52px;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
|
`
|
||||||
|
|
||||||
|
const ActionButton = styled.button`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
margin-left: 18px;
|
||||||
`
|
`
|
||||||
|
|
||||||
export default OperatorPanel
|
export default OperatorPanel
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
import { numberWithCommas } from '@/utils/general.utils'
|
||||||
import styled from '@emotion/styled'
|
import styled from '@emotion/styled'
|
||||||
import React, { useEffect, useState } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
|
|
||||||
|
|
@ -56,22 +57,30 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
|
||||||
</ClaimPeriodWrapper>
|
</ClaimPeriodWrapper>
|
||||||
</ProgressTrack>
|
</ProgressTrack>
|
||||||
<ProgressStats>
|
<ProgressStats>
|
||||||
<Stat>Staking Rate: 100%</Stat>
|
<Stat>Current Rate: 100%</Stat>
|
||||||
<Stat>Bonus Reward: 20%</Stat>
|
<Stat>XP Bonus: +20%</Stat>
|
||||||
</ProgressStats>
|
</ProgressStats>
|
||||||
<ProgressFooter>
|
<ProgressFooter>
|
||||||
<TimeRemaining>
|
<TimeRemaining>
|
||||||
<Label>Time Remaining</Label>
|
<Label>Time Remaining</Label>
|
||||||
<Value color="var(--orange)" backgroundColor="var(--dark-orange)">
|
<Value color="var(--orange)" backgroundColor="var(--dark-orange)">
|
||||||
{timeRemaining}
|
{`${numberWithCommas(1026)} blocks`}
|
||||||
</Value>
|
</Value>
|
||||||
</TimeRemaining>
|
</TimeRemaining>
|
||||||
<EarnedReward>
|
<PointsRow>
|
||||||
<Label>Earned Epoch 1</Label>
|
<EarnedReward>
|
||||||
<Value color="#F29AE9" backgroundColor="#320430">
|
<Label>Total Points</Label>
|
||||||
200.12
|
<Value color="#F29AE9" backgroundColor="#320430">
|
||||||
</Value>
|
{`${numberWithCommas(40278)}`}
|
||||||
</EarnedReward>
|
</Value>
|
||||||
|
</EarnedReward>
|
||||||
|
<EarnedReward>
|
||||||
|
<Label>Epoch 1 XP</Label>
|
||||||
|
<Value color="#F29AE9" backgroundColor="#320430">
|
||||||
|
{`${numberWithCommas(5020)}`}
|
||||||
|
</Value>
|
||||||
|
</EarnedReward>
|
||||||
|
</PointsRow>
|
||||||
</ProgressFooter>
|
</ProgressFooter>
|
||||||
</StyledProgressBar>
|
</StyledProgressBar>
|
||||||
)
|
)
|
||||||
|
|
@ -99,6 +108,8 @@ const EpochLabel = styled.span`
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
width: 72px;
|
||||||
|
text-align: center;
|
||||||
`
|
`
|
||||||
|
|
||||||
const EpochInfo = styled.div`
|
const EpochInfo = styled.div`
|
||||||
|
|
@ -111,7 +122,7 @@ const NextEpoch = styled.span``
|
||||||
const ProgressTrack = styled.div`
|
const ProgressTrack = styled.div`
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
margin: 14px 0;
|
margin: 16px 0;
|
||||||
border-bottom: 1px solid rgb(var(--lsd-border-primary));
|
border-bottom: 1px solid rgb(var(--lsd-border-primary));
|
||||||
border-right: 1px solid rgb(var(--lsd-border-primary));
|
border-right: 1px solid rgb(var(--lsd-border-primary));
|
||||||
`
|
`
|
||||||
|
|
@ -165,19 +176,18 @@ const TimeRemaining = styled.div`
|
||||||
border: 1px solid var(--dark-orange);
|
border: 1px solid var(--dark-orange);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16px;
|
|
||||||
`
|
`
|
||||||
|
|
||||||
const EarnedReward = styled.div`
|
const EarnedReward = styled.div`
|
||||||
border: 1px solid #320430;
|
border: 1px solid #320430;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16px;
|
|
||||||
`
|
`
|
||||||
|
|
||||||
const Label = styled.div`
|
const Label = styled.div`
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
|
line-height: 16px;
|
||||||
`
|
`
|
||||||
|
|
||||||
const Value = styled.div<{ color: string; backgroundColor: string }>`
|
const Value = styled.div<{ color: string; backgroundColor: string }>`
|
||||||
|
|
@ -185,6 +195,12 @@ const Value = styled.div<{ color: string; backgroundColor: string }>`
|
||||||
color: ${(props) => props.color};
|
color: ${(props) => props.color};
|
||||||
background-color: ${(props) => props.backgroundColor};
|
background-color: ${(props) => props.backgroundColor};
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
letter-spacing: 0.12px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const PointsRow = styled.div`
|
||||||
|
display: flex;
|
||||||
`
|
`
|
||||||
|
|
||||||
export default ProgressBar
|
export default ProgressBar
|
||||||
|
|
|
||||||
|
|
@ -68,7 +68,7 @@ const Navigation = styled.ul`
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
gap: 37px;
|
gap: 41px;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,97 @@
|
||||||
|
import styled from '@emotion/styled'
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
|
||||||
|
interface CollapsibleProps {
|
||||||
|
header: string
|
||||||
|
content: string
|
||||||
|
enableCopy?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const Collapse: React.FC<CollapsibleProps> = ({
|
||||||
|
header,
|
||||||
|
content,
|
||||||
|
enableCopy = true,
|
||||||
|
}) => {
|
||||||
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
|
|
||||||
|
const toggleOpen = () => {
|
||||||
|
setIsOpen(!isOpen)
|
||||||
|
}
|
||||||
|
|
||||||
|
const copyToClipboard = () => {
|
||||||
|
navigator.clipboard.writeText(content)
|
||||||
|
alert('Copied to clipboard!')
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Container>
|
||||||
|
<Header onClick={toggleOpen}>
|
||||||
|
<span>{header}</span>
|
||||||
|
<Chevron isExpanded={isOpen}>
|
||||||
|
{isOpen ? (
|
||||||
|
<img src="/assets/chevron-down-purple.svg" alt="chevron up" />
|
||||||
|
) : (
|
||||||
|
<img src="/assets/chevron-down-purple.svg" alt="chevron down" />
|
||||||
|
)}
|
||||||
|
</Chevron>
|
||||||
|
</Header>
|
||||||
|
<Body isOpen={isOpen}>
|
||||||
|
{content}
|
||||||
|
{enableCopy && (
|
||||||
|
<CopyButton onClick={copyToClipboard}>
|
||||||
|
<img src="/assets/file-copy-purple.svg" alt="file copy" />
|
||||||
|
</CopyButton>
|
||||||
|
)}
|
||||||
|
</Body>
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const Container = styled.div`
|
||||||
|
background-color: #320430;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 10px 0;
|
||||||
|
color: #f29ae9;
|
||||||
|
cursor: pointer;
|
||||||
|
`
|
||||||
|
|
||||||
|
const Header = styled.div`
|
||||||
|
padding: 20px 16px 20px 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
`
|
||||||
|
|
||||||
|
const Body = styled.div<{ isOpen: boolean }>`
|
||||||
|
display: ${({ isOpen }) => (isOpen ? 'flex' : 'none')};
|
||||||
|
justify-content: space-between;
|
||||||
|
max-height: ${({ isOpen }) => (isOpen ? '100px' : '0')};
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height 0.3s ease;
|
||||||
|
background-color: #320430;
|
||||||
|
padding: 20px 16px 20px 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
color: #f29ae9;
|
||||||
|
letter-spacing: 0.14px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const CopyButton = styled.button`
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #f29ae9;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: 10px;
|
||||||
|
`
|
||||||
|
|
||||||
|
const Chevron = styled.span<{ isExpanded: boolean }>`
|
||||||
|
display: inline-flex;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
transform: ${({ isExpanded }) =>
|
||||||
|
isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'};
|
||||||
|
`
|
||||||
|
|
||||||
|
export default Collapse
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export { default as Collapse } from './Collapse'
|
||||||
|
|
@ -9,3 +9,16 @@ export function arrayIncludesAnyElementFromOtherArray<T>(a: T[], b: T[]) {
|
||||||
|
|
||||||
return a.some((el) => b.includes(el))
|
return a.some((el) => b.includes(el))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function numberWithCommas(x: number) {
|
||||||
|
return x?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||||
|
}
|
||||||
|
|
||||||
|
// truncates a string to first 5 and last 5, appends an ellipsis in the middle
|
||||||
|
export function truncateString(str: string, length = 10) {
|
||||||
|
if (str.length <= length) {
|
||||||
|
return str
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${str.slice(0, 5)}...${str.slice(-5)}`
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue