GlcoinCore/alby-hub
1
0
Fork 0
mirror of https://github.com/getAlby/hub.git synced 2026-08-13 12:33:39 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat: update app spacing

Browse source
This commit is contained in:
Wutche 2026-06-11 16:02:38 +01:00
parent a21c320fde
commit 59be99e23e
No known key found for this signature in database
19 changed files with 39 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/connections/AlbyConnectionCard.tsx
View file

@ -84,7 +84,7 @@ function AlbyConnectionCard() {
</CardHeader>
<Separator />
<CardContent className="group">
<div className="grid grid-cols-1 xl:grid-cols-2 gap-3 items-center relative">
<div className="grid grid-cols-1 xl:grid-cols-2 gap-4 items-center relative">
<div className="flex flex-col gap-4">
<div className="flex flex-row gap-4">
<UserAvatar className="h-14 w-14" />

2
frontend/src/components/connections/AppDetailConnectedApps.tsx
View file

@ -20,7 +20,7 @@ export function AppDetailConnectedApps({
{showTitle && (
<h2 className="font-medium text-lg mt-6">Your Connections</h2>
)}
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{connectedApps.map((app) => (
<AppCard key={app.id} app={app} />
))}

4
frontend/src/components/connections/AppStore.tsx
View file

@ -4,7 +4,7 @@ import SuggestedApps from "src/components/connections/SuggestedApps";
function AppStore() {
return (
<>
<div className="flex flex-col gap-4">
<div className="flex flex-col flex-1">
<div className="flex justify-between items-center">
<div className="flex-1">
@ -21,7 +21,7 @@ function AppStore() {
</div>
</div>
<SuggestedApps />
</>
</div>
);
}

4
frontend/src/components/connections/AppUsage.tsx
View file

@ -77,7 +77,7 @@ export function AppUsage({ app }: { app: App }) {
{app.isolated && (
<div
className={cn(
"grid grid-cols-1 gap-3",
"grid grid-cols-1 gap-4",
app.metadata?.app_store_app_id === SUBWALLET_APPSTORE_APP_ID &&
"lg:grid-cols-2"
)}
@ -201,7 +201,7 @@ export function AppUsage({ app }: { app: App }) {
</div>
)}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<Card>
<CardHeader>
<CardTitle>Total Spent</CardTitle>

10
frontend/src/components/connections/ConnectedApps.tsx
View file

@ -52,7 +52,7 @@ function ConnectedApps() {
);
return (
<>
<div className="flex flex-col gap-4">
<div className="flex flex-col flex-1">
<div className="flex justify-between items-center">
<div className="flex-1">
@ -76,13 +76,11 @@ function ConnectedApps() {
</div>
{info.albyAccountConnected && (
<div className="mt-6">
<div>
<AlbyConnectionCard />
</div>
)}
<div className="mt-6" />
{!otherApps.length && (
<EmptyState
icon={CableIcon}
@ -97,7 +95,7 @@ function ConnectedApps() {
{otherApps.length > 0 && (
<div
ref={appsListRef}
className="grid grid-cols-1 lg:grid-cols-2 gap-3 items-stretch"
className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch"
>
{otherApps.map((app, index) => (
<AppCard key={index} app={app} />
@ -111,7 +109,7 @@ function ConnectedApps() {
page={page}
handlePageChange={handlePageChange}
/>
</>
</div>
);
}

14
frontend/src/components/connections/SuggestedApps.tsx
View file

@ -17,8 +17,8 @@ import {
function AppCard(app: AppStoreApp) {
return (
<Link to={getAppStoreUrl(app)}>
<Card className="h-full">
<Link to={getAppStoreUrl(app)} className="min-w-0">
<Card className="h-full min-w-0">
<CardContent>
<div className="flex gap-3 items-center">
<img
@ -26,7 +26,7 @@ function AppCard(app: AppStoreApp) {
alt={`${app.title} logo`}
className="inline rounded-lg size-12"
/>
<div className="grow">
<div className="grow min-w-0">
<CardTitle>{app.title}</CardTitle>
<CardDescription>
{app.description}
@ -53,7 +53,7 @@ export default function SuggestedApps() {
return (
<>
<div className="flex gap-2 flex-wrap mt-6 mb-2">
<div className="flex gap-2 flex-wrap">
{sortedAppStoreCategories.map(([categoryId, category]) => (
<Badge
key={categoryId}
@ -77,7 +77,7 @@ export default function SuggestedApps() {
</Badge>
))}
</div>
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-4">
{sortedAppStoreCategories
.filter(
([categoryId]) =>
@ -86,9 +86,9 @@ export default function SuggestedApps() {
)
.map(([categoryId, category]) => {
return (
<div key={categoryId} className="pt-4">
<div key={categoryId}>
<h3 className="font-semibold text-xl">{category.title}</h3>
<div className="grid md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-3 mt-4">
<div className="grid md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 mt-4">
{appStoreApps
.filter((app) =>
(app.categories as string[]).includes(categoryId)

4
frontend/src/components/layouts/SettingsLayout.tsx
View file

@ -110,7 +110,7 @@ export default function SettingsLayout() {
}
/>
<div className="flex flex-col space-y-8 lg:flex-row lg:space-x-4 lg:space-y-0 h-full">
<div className="flex flex-col gap-4 lg:flex-row h-full">
<aside className="flex flex-col justify-between lg:w-1/5">
<nav className="flex overflow-x-auto pb-2 gap-1 lg:flex-col lg:overflow-x-visible lg:pb-0 lg:gap-0 lg:space-y-0.5">
<MenuItem to="/settings" icon={SlidersHorizontalIcon}>
@ -182,7 +182,7 @@ export default function SettingsLayout() {
</aside>
<Separator orientation="vertical" className="hidden lg:block" />
<div className="flex-1 lg:max-w-2xl">
<div className="grid gap-6">
<div className="grid gap-4">
<Outlet />
</div>
</div>

2
frontend/src/screens/ConnectAlbyAccount.tsx
View file

@ -32,7 +32,7 @@ export function ConnectAlbyAccount({ connectUrl }: ConnectAlbyAccountProps) {
pageTitle="Connect Your Alby Account"
description="Your Alby Account brings several benefits to your Alby Hub"
/>
<div className="grid grid-cols-1 md:grid-cols-2 w-full gap-3 mt-5">
<div className="grid grid-cols-1 md:grid-cols-2 w-full gap-4 mt-5">
<Card className="w-full relative py-2">
<CardHeader className="flex flex-col justify-center items-center text-center p-4">
<ZapIcon className="size-6" />

4
frontend/src/screens/Home.tsx
View file

@ -40,7 +40,7 @@ function Home() {
title="Home"
contentRight={<SearchInput placeholder="Search" />}
/>
<div className="columns-1 lg:columns-2 gap-3 *:mb-3 *:break-inside-avoid">
<div className="columns-1 lg:columns-2 gap-4 *:mb-4 *:break-inside-avoid">
<OnboardingChecklist />
<StoriesWidget />
<WhatsNewWidget />
@ -60,7 +60,7 @@ function Home() {
</CardHeader>
{isNerd && (
<CardContent>
<div className="grid gap-3">
<div className="grid gap-4">
<NodeStatusWidget />
<BlockHeightWidget />
<OnchainFeesWidget />

2
frontend/src/screens/ai/AI.tsx
View file

@ -419,7 +419,7 @@ export function AI() {
{/* Featured services — branded full cards */}
<div>
<h2 className="text-2xl font-bold mb-4">Featured Services</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<ExternalLink to="https://www.bitrefill.com/agents">
<Card className="group relative h-full hover:border-primary/30 transition-colors p-0">
<CardContent className="p-4 flex flex-col h-full">

2
frontend/src/screens/alby/SupportAlby.tsx
View file

@ -163,7 +163,7 @@ function SupportAlby() {
description="We are committed to elevating the Bitcoin ecosystem by offering reliable, efficient, and user-friendly software solutions for seamless transactions. With your help, we can keep pushing boundaries and evolving Alby Hub into something extraordinary."
/>
<h2 className="text-2xl font-semibold">Become a Supporter</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<Card className="flex flex-col">
<CardHeader className="grow">
<CardTitle>Upgrade to Pro</CardTitle>

2
frontend/src/screens/apps/AppDetails.tsx
View file

@ -393,7 +393,7 @@ function AppInternal({ app, refetchApp, capabilities }: AppInternalProps) {
{!isEditingPermissions && (
<>
{appStoreApp && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<AboutAppCard appStoreApp={appStoreApp} />
<AppLinksCard appStoreApp={appStoreApp} />
</div>

4
frontend/src/screens/apps/AppsCleanup.tsx
View file

@ -68,8 +68,8 @@ export function AppsCleanup() {
</AlertDescription>
</Alert>
)}
<div className="grid grid-cols-1 lg:grid-cols-5 gap-3">
<div className="lg:col-span-3 flex flex-col gap-3">
<div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
<div className="lg:col-span-3 flex flex-col gap-4">
{currentApp && (
<>
<div className="w-full h-full">

4
frontend/src/screens/apps/Connections.tsx
View file

@ -41,8 +41,8 @@ export function Connections() {
/>
}
/>
<Tabs value={tab} onValueChange={setTab} className="px-2 lg:px-0">
<TabsList className="mb-2 lg:mb-6">
<Tabs value={tab} onValueChange={setTab} className="gap-4">
<TabsList>
<TabsTrigger value="app-store" className="flex gap-2 items-center">
<LayoutGridIcon className="w-5 h-5" /> App Store
</TabsTrigger>

4
frontend/src/screens/appstore/AppStoreDetail.tsx
View file

@ -46,9 +46,9 @@ function AppStoreDetailInternal({ appStoreApp }: { appStoreApp: AppStoreApp }) {
}
return (
<div className="grid gap-3">
<div className="grid gap-4">
<AppStoreDetailHeader appStoreApp={appStoreApp} />
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<AboutAppCard appStoreApp={appStoreApp} />
<AppLinksCard appStoreApp={appStoreApp} />
{/* <Card>

2
frontend/src/screens/channels/Channels.tsx
View file

@ -339,7 +339,7 @@ export default function Channels() {
<div
className={cn(
"flex flex-col sm:flex-row flex-wrap gap-3 slashed-zero"
"flex flex-col sm:flex-row flex-wrap gap-4 slashed-zero"
)}
>
<Card className="flex flex-1 sm:flex-2 flex-col">

2
frontend/src/screens/internal-apps/Tictactoe.tsx
View file

@ -146,7 +146,7 @@ export function Tictactoe() {
{!!tictactoeApps?.length && (
<>
<h2 className="font-semibold text-xl">Tic Tac Toe connections</h2>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3 items-stretch">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch">
{tictactoeApps.map((app, index) => (
<AppCard key={index} app={app} />
))}

4
frontend/src/screens/internal-apps/ZapPlanner.tsx
View file

@ -515,7 +515,7 @@ export function ZapPlanner() {
scheduled payment. This allows you to securely setup recurring payments
and be in full control.
</p>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
{recipients.map((recipient) => (
<Card key={recipient.lightningAddress}>
<CardHeader>
@ -544,7 +544,7 @@ export function ZapPlanner() {
{!!zapplannerApps?.length && (
<>
<h2 className="font-semibold text-xl">Recurring Payments</h2>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3 items-stretch">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch">
{zapplannerApps.map((app, index) => (
<AppCard
key={index}

8
frontend/src/screens/subwallets/SubwalletList.tsx
View file

@ -81,7 +81,7 @@ export function SubwalletList() {
subwalletTotalAmountMsat <= balances.lightning.totalSpendableMsat;
return (
<div className="grid gap-3">
<div className="grid gap-4">
<AppHeader
title="Sub-wallets"
pageTitle="Sub-wallets"
@ -148,7 +148,7 @@ export function SubwalletList() {
</Alert>
)}
<div className="flex flex-col sm:flex-row flex-wrap gap-3 slashed-zero">
<div className="flex flex-col sm:flex-row flex-wrap gap-4 slashed-zero">
<Card className="flex flex-1 flex-col">
<CardHeader className="pb-2">
<CardTitle className="text-lg">
@ -191,11 +191,11 @@ export function SubwalletList() {
</CardContent>
</Card>
</div>
<div className="mt-8">
<div>
<h3 className="font-semibold text-2xl mb-4">Managed Sub-wallets</h3>
<div
ref={appsListRef}
className="grid grid-cols-1 lg:grid-cols-2 gap-3 items-stretch"
className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch"
>
{subwalletApps.map((app, index) => (
<AppCard key={index} app={app} />