-
Notifications
You must be signed in to change notification settings - Fork 40
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update Guardian Admin UI to match Figma spec #168
Conversation
…gn to match figma
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not finished but left some comments.
Still need to review:
- apps/guardian-ui/src/admin/FederationAdmin.tsx
- apps/guardian-ui/src/components/BalanceCard.tsx
- apps/guardian-ui/src/components/BitcoinNodeCard.tsx
- apps/guardian-ui/src/components/FederationInfoCard.tsx
- apps/guardian-ui/src/components/GatewaysCard.tsx
const { t } = useTranslation(); | ||
const { api } = useAdminContext(); | ||
const [versions, setVersions] = useState<Versions>(); | ||
const [epochCount, setEpochCount] = useState<number>(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Building on other discussions around a similar topic, wonder when we need to migrate this to bigint
.
const [gateways, setGateways] = useState<Gateway[]>([]); | ||
|
||
const lnModuleId = config | ||
? Object.entries(config.client_config.modules).find( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wonder about some utils around modules.
borderTopLeftRadius={0} | ||
borderBottomLeftRadius={0} | ||
size={size} | ||
height={size == 'lg' ? '46px' : '42px'} | ||
height='100%' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Shouldn't this be buttonHeight
?
height='100%' | |
height={buttonHeight} |
Going to approve and merge to unlock all the other PRs. |
Closes #166, closes #64, closes #95 (sorta?), closes #27, closes #148
Apologies for the size of this PR. Doing it all at once made it easier to get the organization and component abstractions right the first time, rather than having to re-work it a piece at a time.
What This Does
Card
component now matches Figma specTable
component now matches Figma specCopyInput
component now matches Figma specsm
size support<Input readOnly />
now renders with lighter textWrapper
component now matches Figma specsize="md|lg"
prop for admin's wider 1200px templateStatusIndicator
componentPill
inguardian-ui
, but no longer comes with the label prefixKeyValues
component for displaying lists of information with a label on top and a value below<Wrapper size="lg">
to match Figma spec widthCard
stylesNote that some deviations to the Figma spec were made to match the information we have available:
Screenshots
Guardian UI admin
Gateway UI