UI refac

[zugdev]

Resolves #356

also resolves all other UI open issues in the repo. #344 #312 #237

1. Adds a shimmer effect instead of loading:

Screen.Recording.2025-01-30.at.16.24.04.mov

2. Quit table approach, use flex boxes for layouting.

3. Fixes header and footer.

4. Fixes addresses and ens ellipsis.

5. Contains debit card stuff into a modal.

Here is a quick demo in dark mode:

Screen.Recording.2025-01-30.at.16.27.05.mov

Here is a quick demo in light mode:

Screen.Recording.2025-01-30.at.16.27.52.mov

[github-actions]

Unused exports (1)

Filename	exports
static/scripts/rewards/button-controller.ts	getCardContainer

[ubiquity-os-deployer]

759efb8

b85f371

0e1a994

2920e44

97b81f1

[github-actions]

Preview Deployment
97b81f1fbc8182d3890996be203fcb98b6820c01

[0x4007]

Looks good but not sure about the drawer on the bottom. Why not use the same modal tech we already have? I like that it's hands off and disappears after the visible timer expires.

Also one thing that has always bothered me but in dark mode the ubiquity logo is not white and matching the text. Please fix the fill.

If there is no permit data it should show something. Just checked the QA link at https://5e1f8539.pay-ubq-fi.pages.dev/

[zugdev]

Looks good but not sure about the drawer on the bottom. Why not use the same modal tech we already have? I like that it's hands off and disappears after the visible timer expires.

The drawer contains card mint stuff, it's a little bigger (in content) than modal and its not really temporary. I dont think its the best solution, when rollups are through we will enable arbitrary claiming, therefore a mint card page would make more sense.

Also one thing that has always bothered me but in dark mode the ubiquity logo is not white and matching the text. Please fix the fill.

Will do.

If there is no permit data it should show something.

Gotcha.

[0x4007]

when rollups are through

Having second thoughts on permit rollups if the UI will automatically fetch all the unclaimed permits from the previous month.

Permit rollups have been in proposal stage for like a year with still no traction. However my proposal on fetching and importing the unclaimed permits seems pretty straightforward to implement without security concerns.

[zugdev]

when rollups are through

Having second thoughts on permit rollups if the UI will automatically fetch all the unclaimed permits from the previous month.

Permit rollups have been in proposal stage for like a year with still no traction. However my proposal on fetching and importing the unclaimed permits seems pretty straightforward to implement without security concerns.

Yeah, I think both are fine. The biggest problem for me are forgotten permits, when I forget to claim, so fetching all pending ones is a straight forward solution. It also reduces the complexity of voiding an existing permit from an admin pov,

[EresDev]

• fix word-break: break-all;
  

• payment card section needs work.
  

• error toaster is behind the card section. making toaster invisible. I had to tweak opacity to find it.
  

• can you hide/close the card section once opened? I think the drag handler is for that? It doesn't seem to work with mouse. probably z-index issue.

• similarly problem with redeem card section. Reveal button is under another element.
  

[0x4007]

@zugdev i thought you got rid of the unnecessary pictures of the cards

[ubiquity-os]

@zugdev, this task has been idle for a while. Please provide an update.