Consider having a max-width for layout content. Will need to adapt all existing pages:

• adapt home page
• adapt airdrops list page
• adapt airdrops create page
• adapt airdrops escrow page
• adapt airdrops register page
• adapt airdrops fund page
• adapt airdrops success page

Tasks

• remove unused stylesheets
• remove unused font families
• remove dark mode (since figma spec has one color mode/scheme)
• sync button styles
• sync typography styles

Links

• https://www.figma.com/file/ajr8SLkAaA08upoIMp6bds/Juno_V1?node-id=60%3A7

Screenshots

Button style

Tasks

• install tailwind form plugin
• Create and style TextInput component

Screenshots

Client side search for now. Should filter the table rows onChange.

https://fusejs.io/

https://github.com/basementstudio/basement-grotesque/blob/3c3704e0f4f5284f3cec938a272070876b460f7f/src/css/fonts.css#L19-L27

• update /airdrops/escrow page
• update /airdrops/register page
• update /airdrops/fund page

Current airdrop escrow step is combined in /airdrops/register page. This issue highlights on the idea of extracting the escrow step as a separate page (e.g., /airdrops/escrow).

Reason

Current implementation for escrowing is shown in /airdrops/register after creating an airdrop, where after depositing it'll show the register form.

Related with #50 which if its implemented, users can navigate through each step which per step has its own page:

• /airdrops/create
• /airdrops/escrow
• /airdrops/register
• /airdrops/fund

On Night Theme- JunoTools text and Airdrops button frame is evident

On Light Theme- They're not evident

On Light Theme- In airdrops page, the texts in the middle module are not readable.

• create mockup in figma
• create initial /airdrops/ page

Thinking about the home page here

Besides conventions, this definitely needs more citation on whether named-exports improves tree-shaking.

References:

• https://web.dev/reduce-javascript-payloads-with-tree-shaking/
• ethers-io/ethers.js#1009

Having proper meta tags and extensive favicon assets would be great for SEO and discoverability.

• Styling and design implementation
• Breadcrumbs
• No JSON upload
• Use CSV for accounts
• Some design elements still in flux (accounts list)

Current design:

Inspiration for improvements:

Only the table rows should scroll. The page header, search, and table headers should be sticky.

Current form implementations throughout the app does not use any form handling library. This RFC issue highlights on using react-hook-form for handling form fields.

Reason

While using regular forms (or just basic input controls) works as is, it adds overhead when needing to handle additional fields or having input validations. Using a form handling library will help abstracting logics better to determine what fields and which is valid without having to jump hoops on several useStates and other quirks.

Pros

• less controlled states (no useStates for each field)
• easier and robust field validation (use prebuild validators or add your own)
• fields definition colocation (typed field datas)
• GUI-based form builder to generate form code (https://www.react-hook-form.com/form-builder)

Cons

• package dependency overhead
• uncontrolled fields (react-hook-form only attaches to field refs)
• ...

References

• https://www.react-hook-form.com
• https://www.react-hook-form.com/get-started
• https://www.react-hook-form.com/form-builder

cc @RyanWarner @xanderjl @findolor @Highlander-maker

When refreshing the page multiple times we get Keplr extension is not available error. After a while it connects normally.

Description

We should avoid using white on top of plumbus because it does not have enough contrast. Update the color of the numbers in each circle to be #000 or whatever the darker text color we are using in the app.

How it looks now

How it should look

Per the new designs on Figma, create a stepper component/layout for airdrop pages to navigate airdrop pages.

[BLOCKED UNTIL NEW LOGO IS FINAL]

Related to #50, remove interstitial airdrop pages and instead directly navigating to main pages.

• remove create/register/fund interstitial page
• remove list/create interstitial page

I see scrollbars on my local. We should update the CSS to prevent the need for scrolling the sidebar.

https://www.figma.com/file/FHGAAxlpvIkCo8qoYlzqqA/?node-id=173%3A3038

It's currently black but should be the primary plumbus color

note: some things are still WIP design

• Deprecate color theme (We are only using dark mode)
• Change buttons to anchor tag
• Nav item styling & selected state
• Collapse button (lower priority, not needed to ship)

Description

When the content in page is long enough, the scrollbar appears. It's rather looking odd in the middle

Let's remove it in the pages like these

Use cases

• form status, errors, validation notices, etc.
• extra attention before doing such action
• ...

Design

While displaying https://test.juno.tools/airdrops/list/ page , I can't see the claim button for the projects (Google Chrome). I have to zoom out 10 percent to see it. I am attaching before/after screenshots.

Current download URL is invalid due to brand assets are not inside public/ directory.

Current layout needs major overhaul on various cases listed below (will be updated accordingly):

• fix sidebar sizing and responsiveness (see #17)
• fix layout sizing and positioning
• handle unsupported viewports (redirect to /unsupported maybe?)

https://headlessui.dev/react/radio-group

Description

Implement table styling to match the Figma spec.

Subheader copy text is still TBD. Placeholder is fine for now.

Figma

https://www.figma.com/file/FHGAAxlpvIkCo8qoYlzqqA/Juno-Tools-V1?node-id=20%3A5075

Screenshot

Description

The claim airdrop page has 4 different states. Make updates to the design and logic to display each UI at the correct time.

• Claim
• Already claimed
• No allocation
• Wallet not connected

Screenshots

Figma

https://www.figma.com/file/FHGAAxlpvIkCo8qoYlzqqA/Juno-Tools-V1?node-id=379%3A2884