Match Design Guidelines and Headless Components

[JoseRFelix]

Problem

As the app grows we must start relying on design guidelines to maintain consistent styling and user experience. Further, components must be customizable, and accessible for screen readers and keyboard users.

Proposed Solution

We must start creating components that adhere to our design guidelines and maintain accessibility throughout the app. Since we use Tailwind CSS, it makes sense to use headless components like Headless UI and Radix that integrate beautifully and are accessible. Furthermore, following modern practices standardized by libraries like Material UI and Chakra UI, we'll use the library CVA to build components with variants to avoid the arduous task of class matching.

I've identified the following components that must be migrated/integrated:

Button

• General Component (Feat Match Button with Design Guidelines #1157)
• Icon Button (inspiration) (feat: Add Icon Button #1199)

Popover

• Topbar Settings (feat: Match design guidelines for topbar and transaction settings popover #1201)
• Transaction Settings (feat: Match design guidelines for topbar and transaction settings popover #1201)

Modal

• New Pool
• Deposit
• Withdraw
• Connect Wallet

Input

• Search input (feat: Match Search Box With Design #1212)

Select

• Deposit (Network select)

Drawer

• General Component (feat: Add Profile Modal #1176)
• Token select
• Bond Card

Icons

• Add Accessible Icon Component

[syed8rahman]

Adjust Swap settings to match Figma UI https://www.figma.com/file/om93lu8iXOhxwGHSUpAXEP/Trade-UI?node-id=93%3A1765&t=3ZhgpLpgcHzq2Pia-1

[jonator]

Closing in favor of tracking on ClickUp