Skip to content

fix(ui): align Repository & Self-Host typography and layout with Dashboard #477

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.

Sign up for GitHub

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

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
+50 −66
Open

fix(ui): align Repository & Self-Host typography and layout with Dashboard #477

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0bec1c1
Corrections in self host page
xavieralves16 Oct 10, 2025
5c8e204
Correction of typography in repositories
xavieralves16 Oct 10, 2025
20bbc6f
fix(ui): remove nested heading, use plain text in DahboardUtilityHead…
xavieralves16 Oct 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 16 additions & 3 deletions view/app/self-host/components/github-repositories/list-repositories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ import GithubRepositories, { GithubRepositoriesSkeletonLoader } from './reposito
import PaginationWrapper from '@/components/ui/pagination';
import { useTranslation } from '@/hooks/use-translation';

/* Typography */
import { TypographyMuted } from '@/components/ui/typography';

function ListRepositories() {
const { t } = useTranslation();
const {
Expand All @@ -28,8 +31,12 @@ function ListRepositories() {
return <GithubRepositoriesSkeletonLoader />;
}

if (paginatedApplications?.length === 0 && !isLoading) {
return <div className="text-center">{t('selfHost.repositories.noRepositories')}</div>;
if (paginatedApplications?.length === 0 && !isLoading) {
return (
<div className="text-center">
{t('selfHost.repositories.noRepositories')}
</div>
);
}
return (
<>
Expand Down Expand Up @@ -62,9 +69,15 @@ function ListRepositories() {
sortConfig={sortConfig}
onSortChange={onSortChange}
sortOptions={sortOptions}
/* (changed) plain string label, no nested heading */
label={t('selfHost.repositories.title')}
className="mt-5 mb-5"
className="mt-5 mb-2 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2"
/>
{/* (added) description outside header for consistency */}
<TypographyMuted className="mb-5">
{t('selfHost.repositories.description')}
</TypographyMuted>

{renderGithubRepositories()}
</div>
);
Expand Down
61 changes: 13 additions & 48 deletions view/app/self-host/components/github-repositories/repository-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ import { GithubRepository } from '@/redux/types/github';
import { Skeleton } from '@/components/ui/skeleton';
import { useTranslation } from '@/hooks/use-translation';

/* Typography */
import { TypographySmall, TypographyMuted } from '@/components/ui/typography';

const GithubRepositories = ({
name,
html_url: url,
Expand All @@ -23,13 +26,16 @@ const GithubRepositories = ({

return (
<Card
className="group relative w-full max-w-md cursor-pointer overflow-hidden transition-all duration-300 hover:bg-muted hover:shadow-lg"
className="group relative w-full max-w-md cursor-pointer overflow-hidden transition-all duration-300 hover:bg-muted hover:shadow-lg"
onClick={() => setSelectedRepository(id.toString())}
>
<CardHeader className="pb-2">
<CardTitle className="flex items-center gap-2 text-lg font-bold">
<Github className="text-primary" size={24} />
{name || t('selfHost.repositoryCard.unnamed')}
{/* (changed) consistent typography: TypographySmall with xs/sm size */}
<CardTitle className="flex items-center gap-2 text-xs sm:text-sm font-bold">
<Github className="text-primary" size={20} />
<TypographySmall>
{name || t('selfHost.repositoryCard.unnamed')}
</TypographySmall>
{url && (
<a
href={url}
Expand All @@ -43,8 +49,9 @@ const GithubRepositories = ({
)}
</CardTitle>
{description && (
<CardDescription className="line-clamp-2 text-sm text-muted-foreground">
{description}
<CardDescription className="line-clamp-2">
{/* (changed) muted description */}
<TypographyMuted>{description}</TypographyMuted>
</CardDescription>
)}
</CardHeader>
Expand Down Expand Up @@ -103,45 +110,3 @@ const GithubRepositories = ({
};

export default GithubRepositories;

export const GithubRepositoriesSkeletonLoader: React.FC = () => {
return (
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3">
{[...Array(6)].map((_, index) => (
<Card
key={index}
className="group relative w-full max-w-md overflow-hidden transition-all duration-300 hover:bg-muted hover:shadow-lg"
>
<CardHeader className="pb-2">
<CardTitle className="flex items-center gap-2 text-lg font-bold">
<Skeleton className="h-6 w-6 rounded-full" />
<Skeleton className="h-6 w-40" />
<Skeleton className="ml-auto h-6 w-6 rounded-full" />
</CardTitle>
<CardDescription>
<Skeleton className="mt-2 h-4 w-full" />
<Skeleton className="mt-1 h-4 w-3/4" />
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex flex-wrap items-center gap-2">
<Skeleton className="h-5 w-16 rounded-full" />
<Skeleton className="h-5 w-20 rounded-full" />
</div>
<div className="flex items-center gap-4 text-sm">
<Skeleton className="h-4 w-12" />
<Skeleton className="h-4 w-12" />
<Skeleton className="h-4 w-12" />
</div>
<div className="flex flex-wrap items-center gap-2">
<Skeleton className="h-5 w-16 rounded-full" />
<Skeleton className="h-5 w-16 rounded-full" />
<Skeleton className="h-5 w-16 rounded-full" />
<Skeleton className="h-5 w-16 rounded-full" />
</div>
</CardContent>
</Card>
))}
</div>
);
};
36 changes: 21 additions & 15 deletions view/app/self-host/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,9 @@ import { FeatureNames } from '@/types/feature-flags';
import DisabledFeature from '@/components/features/disabled-feature';
import { ResourceGuard, AnyPermissionGuard } from '@/components/rbac/PermissionGuard';
import PageLayout from '@/components/layout/page-layout';
import { TypographyH2 } from '@/components/ui/typography';
import { TypographyMuted } from '@/components/ui/typography';

/* Typography */
import { TypographyH2, TypographyMuted } from '@/components/ui/typography';

function page() {
const { t } = useTranslation();
Expand Down Expand Up @@ -50,10 +51,7 @@ function page() {

const renderContent = () => {
return (
<AnyPermissionGuard
permissions={['deploy:create']}
loadingFallback={null}
>
<AnyPermissionGuard permissions={['deploy:create']} loadingFallback={null}>
{inGitHubFlow && (
<GitHubAppSetup GetGithubConnectors={GetGithubConnectors} />
)}
Expand All @@ -72,13 +70,14 @@ function page() {
};

return (
<ResourceGuard
resource="deploy"
<ResourceGuard
resource="deploy"
action="read"
loadingFallback={<Skeleton />}
fallback={
<div className="flex h-full items-center justify-center">
<div className="text-center">
{/* Consistent access denied message */}
<TypographyH2>{t('selfHost.page.accessDenied.title')}</TypographyH2>
<TypographyMuted>{t('selfHost.page.accessDenied.description')}</TypographyMuted>
</div>
Expand All @@ -87,7 +86,7 @@ function page() {
>
<PageLayout maxWidth="6xl" padding="md" spacing="lg">
{renderContent()}

{showApplications && (
<>
<DahboardUtilityHeader<Application>
Expand All @@ -96,13 +95,11 @@ function page() {
sortConfig={sortConfig}
onSortChange={onSortChange}
sortOptions={sortOptions}
/* (changed) pass plain string, no nested heading */
label={t('selfHost.page.title')}
className="mt-5 mb-5 justify-between items-center"
className="mt-5 mb-2 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2"
children={
<AnyPermissionGuard
permissions={['deploy:create']}
loadingFallback={null}
>
<AnyPermissionGuard permissions={['deploy:create']} loadingFallback={null}>
<Button
className="mb-4 w-max flex justify-self-end mt-4"
onClick={() => {
Expand All @@ -114,6 +111,11 @@ function page() {
</AnyPermissionGuard>
}
/>
{/* (added) description outside header */}
<TypographyMuted className="mb-5">
{t('selfHost.page.description')}
</TypographyMuted>

{isLoading || isLoadingApplications ? (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
<AppItemSkeleton />
Expand All @@ -123,7 +125,10 @@ function page() {
) : (
<>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{applications && applications.map((app: any) => <AppItem key={app.id} {...app} />)}
{applications &&
applications.map((app: any) => (
<AppItem key={app.id} {...app} />
))}
</div>

{totalPages > 1 && (
Expand All @@ -145,3 +150,4 @@ function page() {
}

export default page;