UI update with sidebar and settings tabs (#3288)
Co-authored-by: Nahiyan Khan <nahiyan@squareup.com> Co-authored-by: Taylor Ho <taylorkmho@gmail.com> Co-authored-by: Lily Delalande <119957291+lily-de@users.noreply.github.com> Co-authored-by: Spence <spencrmartin@gmail.com> Co-authored-by: spencrmartin <spencermartin@squareup.com> Co-authored-by: Judson Stephenson <Jud@users.noreply.github.com> Co-authored-by: Max Novich <mnovich@squareup.com> Co-authored-by: Best Codes <106822363+The-Best-Codes@users.noreply.github.com> Co-authored-by: caroline-a-mckenzie <cmckenzie@squareup.com> Co-authored-by: Michael Neale <michael.neale@gmail.com>
This commit is contained in:
Zane
@@ -0,0 +1,64 @@
|
||||
export default function CoinIcon({ className = '', size = 16 }) {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
>
|
||||
{/* Main coin circle */}
|
||||
<circle
|
||||
cx="10"
|
||||
cy="10"
|
||||
r="9"
|
||||
fill="currentColor"
|
||||
opacity="0.1"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
|
||||
{/* Inner circle for depth */}
|
||||
<circle
|
||||
cx="10"
|
||||
cy="10"
|
||||
r="6.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0.8"
|
||||
opacity="0.4"
|
||||
/>
|
||||
|
||||
{/* Scalloped edge decoration - 8 evenly spaced notches */}
|
||||
<circle cx="10" cy="1.5" r="1" fill="currentColor" opacity="0.3" />
|
||||
<circle cx="15.7" cy="4.3" r="1" fill="currentColor" opacity="0.3" />
|
||||
<circle cx="18.5" cy="10" r="1" fill="currentColor" opacity="0.3" />
|
||||
<circle cx="15.7" cy="15.7" r="1" fill="currentColor" opacity="0.3" />
|
||||
<circle cx="10" cy="18.5" r="1" fill="currentColor" opacity="0.3" />
|
||||
<circle cx="4.3" cy="15.7" r="1" fill="currentColor" opacity="0.3" />
|
||||
<circle cx="1.5" cy="10" r="1" fill="currentColor" opacity="0.3" />
|
||||
<circle cx="4.3" cy="4.3" r="1" fill="currentColor" opacity="0.3" />
|
||||
|
||||
{/* Dollar sign */}
|
||||
<g fill="currentColor" stroke="none">
|
||||
{/* Vertical line */}
|
||||
<rect x="9.3" y="5" width="1.4" height="10" />
|
||||
{/* Top S curve */}
|
||||
<path
|
||||
d="M7 7.5 Q7 6.5 8 6.5 L12 6.5 Q13 6.5 13 7.5 Q13 8.5 12 8.5 L8.5 8.5"
|
||||
strokeWidth="1.2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
/>
|
||||
{/* Bottom S curve */}
|
||||
<path
|
||||
d="M13 12.5 Q13 13.5 12 13.5 L8 13.5 Q7 13.5 7 12.5 Q7 11.5 8 11.5 L11.5 11.5"
|
||||
strokeWidth="1.2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
export default function Discord({ className = '' }) {
|
||||
return (
|
||||
<svg
|
||||
width="1.5rem"
|
||||
height="1.5rem"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
aria-hidden="true"
|
||||
className={className}
|
||||
>
|
||||
<path
|
||||
d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
export default function LinkedIn({ className = '' }) {
|
||||
return (
|
||||
<svg
|
||||
width="1.5rem"
|
||||
height="1.5rem"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
aria-hidden="true"
|
||||
className={className}
|
||||
>
|
||||
<path
|
||||
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
export default function Youtube({ className = '' }) {
|
||||
return (
|
||||
<svg
|
||||
width="1.5rem"
|
||||
height="1.5rem"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 576 512"
|
||||
aria-hidden="true"
|
||||
className={className}
|
||||
>
|
||||
<path
|
||||
d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -8,10 +8,13 @@ import ChevronDown from './ChevronDown';
|
||||
import ChevronUp from './ChevronUp';
|
||||
import { ChevronRight } from './ChevronRight';
|
||||
import Close from './Close';
|
||||
import CoinIcon from './CoinIcon';
|
||||
import Copy from './Copy';
|
||||
import Discord from './Discord';
|
||||
import Document from './Document';
|
||||
import Edit from './Edit';
|
||||
import Idea from './Idea';
|
||||
import LinkedIn from './LinkedIn';
|
||||
import More from './More';
|
||||
import Refresh from './Refresh';
|
||||
import SensitiveHidden from './SensitiveHidden';
|
||||
@@ -20,6 +23,7 @@ import Send from './Send';
|
||||
import Settings from './Settings';
|
||||
import Time from './Time';
|
||||
import { Gear } from './Gear';
|
||||
import Youtube from './Youtube';
|
||||
import { Microphone } from './Microphone';
|
||||
|
||||
export {
|
||||
@@ -33,12 +37,15 @@ export {
|
||||
ChevronRight,
|
||||
ChevronUp,
|
||||
Close,
|
||||
CoinIcon,
|
||||
Copy,
|
||||
Discord,
|
||||
Document,
|
||||
Edit,
|
||||
Idea,
|
||||
Gear,
|
||||
Microphone,
|
||||
LinkedIn,
|
||||
More,
|
||||
Refresh,
|
||||
SensitiveHidden,
|
||||
@@ -46,4 +53,5 @@ export {
|
||||
Send,
|
||||
Settings,
|
||||
Time,
|
||||
Youtube,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user