getAlby / getAlby/hub

Update cards layout

Open
#1,012 0 comments 0 reactions 0 assignees View on GitHub
ready for implementation
Dominant language
TypeScript
Stars
280
Forks
132
Avg merge
5d 18h
Merged PRs (30d)
8

Description

All cards should have:

- header title 2x large semibold (24px, 32px lineheight)
- 1.5rem; /* 24px */ padding
- 1.5rem; /* 24px */ spacing between the title and content inside the card and other elements within the card
- lg (8px) border radius
- no shadow

This is [official shadcn card component](https://ui.shadcn.com/docs/components/card) specs for cards

![Image](https://github.com/user-attachments/assets/88dec533-23aa-452c-8712-613ec8ccc857)

![Image](https://github.com/user-attachments/assets/c046ee2a-256e-447b-87c7-c781fd321787)

![Image](https://github.com/user-attachments/assets/b04dc38d-c8fa-473f-9f1c-f4d2c77b02be)

![Image](https://github.com/user-attachments/assets/d86ad082-5117-479f-8c79-824e9a95fbb7)

![Image](https://github.com/user-attachments/assets/f047e18f-fa21-43d3-b5c6-8d03b02662e3)

## Exceptions:
- App cards (and eg. those that show our apps in Home) have smaller header (extra large)
- "Payment" card that's present in opening channels flow or depositing bitcoin onchain

![Image](https://github.com/user-attachments/assets/04bf939b-12af-4557-b0c7-8bd150ad5597)

![Image](https://github.com/user-attachments/assets/8ec7e5b9-3de9-456c-86a9-b4e7706b585c)

![Image](https://github.com/user-attachments/assets/a204093c-9927-4d5a-ac29-4a148a3d61ab)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.