Skip to content

Commit efbdade

Browse files
selfcontainedselfcontained
authored
Repo List - Style updates (#19157)
* adjust prebuilds disabled styling * Make headings all semibold * update icon based on if prebuilds enabled * adjust cell padding * shift import button to search row * fix search input and button on smaller screens * adjusting button & input border radius and height to match * update font size on inputs to match buttons * prevent table from overflowing * adjust icon sizes * wrap url on smaller screens too
1 parent 3a6b125 commit efbdade

File tree

14 files changed

+50
-48
lines changed

14 files changed

+50
-48
lines changed

‎components/dashboard/src/components/Button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
5252
className={classNames(
5353
"cursor-pointer my-auto",
5454
"text-sm font-medium whitespace-nowrap",
55-
"rounded-xl focus:outline-none focus:ring transition ease-in-out",
55+
"rounded-lg focus:outline-none focus:ring transition ease-in-out",
5656
spacing === "compact" ? ["px-1 py-1"] : null,
5757
spacing === "default" ? ["px-4 py-2"] : null,
5858
type === "primary"

‎components/dashboard/src/components/Header.tsx

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,10 @@ import { useLocation } from "react-router";
88
import { useDocumentTitle } from "../hooks/use-document-title";
99
import { Separator } from "./Separator";
1010
import TabMenuItem from "./TabMenuItem";
11-
import { Heading1, Subheading } from "@podkit/typography/Headings";
11+
import { PageHeading } from "@podkit/layout/PageHeading";
1212

1313
export interface HeaderProps {
1414
title: string;
15-
complexTitle?: React.ReactElement;
1615
subtitle: string | React.ReactElement;
1716
tabs?: TabEntry[];
1817
}
@@ -28,16 +27,8 @@ export default function Header(p: HeaderProps) {
2827
useDocumentTitle(`${p.title}`);
2928
return (
3029
<div className="app-container border-gray-200 dark:border-gray-800">
31-
<div className="flex pb-8 pt-6">
32-
<div className="w-full">
33-
{p.complexTitle ? p.complexTitle : <Heading1 tracking="tight">{p.title}</Heading1>}
34-
{typeof p.subtitle === "string" ? (
35-
<Subheading tracking="wide">{p.subtitle}</Subheading>
36-
) : (
37-
p.subtitle
38-
)}
39-
</div>
40-
</div>
30+
<PageHeading title={p.title} subtitle={p.subtitle} />
31+
4132
<nav className="flex">
4233
{p.tabs?.map((entry) => (
4334
<TabMenuItem

‎components/dashboard/src/components/forms/SelectInputField.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export const SelectInput: FunctionComponent<SelectInputProps> = memo(
9090
return (
9191
<select
9292
id={id}
93-
className={classNames("w-full max-w-lg", className)}
93+
className={classNames("w-full max-w-lg text-sm", className)}
9494
value={value}
9595
disabled={disabled}
9696
required={required}

‎components/dashboard/src/components/forms/TextInputField.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,8 @@ export const TextInput: FunctionComponent<TextInputProps> = memo(
9797
return (
9898
<input
9999
id={id}
100-
className={cn("w-full max-w-lg dark:text-[#A8A29E]", className)}
100+
// 7px top/bottom padding ensures height matches buttons (36px)
101+
className={cn("py-[7px] w-full max-w-lg rounded-lg dark:text-[#A8A29E]", "text-sm", className)}
101102
value={value}
102103
type={type}
103104
placeholder={placeholder}

‎components/dashboard/src/components/podkit/buttons/Button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { cva, VariantProps } from "class-variance-authority";
1010
import { cn } from "@podkit/lib/cn";
1111

1212
export const buttonVariants = cva(
13-
"inline-flex items-center justify-center whitespace-nowrap rounded-xl text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
13+
"inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
1414
{
1515
variants: {
1616
variant: {

‎components/dashboard/src/components/podkit/layout/PageHeading.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,16 @@ import { Heading1, Subheading } from "@podkit/typography/Headings";
88
import { FC, ReactNode } from "react";
99

1010
type PageHeadingProps = {
11-
title: string;
12-
subtitle?: string;
13-
action?: ReactNode;
11+
title: ReactNode;
12+
subtitle?: ReactNode;
1413
};
15-
export const PageHeading: FC<PageHeadingProps> = ({ title, subtitle, action }) => {
14+
export const PageHeading: FC<PageHeadingProps> = ({ title, subtitle }) => {
1615
return (
1716
<div className="flex flex-row flex-wrap justify-between py-8 gap-2">
1817
<div>
1918
<Heading1>{title}</Heading1>
2019
{subtitle && <Subheading>{subtitle}</Subheading>}
2120
</div>
22-
{action && action}
2321
</div>
2422
);
2523
};

‎components/dashboard/src/components/podkit/loading/LoadingState.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,11 @@ import { Delayed } from "./Delayed";
99
import { FC } from "react";
1010

1111
type Props = {
12+
size?: number;
1213
delay?: boolean;
1314
};
14-
export const LoadingState: FC<Props> = ({ delay = true }) => {
15-
const loader = <Loader2 className="animate-spin" />;
15+
export const LoadingState: FC<Props> = ({ delay = true, size = 24 }) => {
16+
const loader = <Loader2 className="animate-spin" size={size} />;
1617

1718
if (!delay) {
1819
return loader;

‎components/dashboard/src/components/podkit/tables/SortableTable.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,15 @@ export const SortableTableHead = React.forwardRef<
3131
{...props}
3232
aria-sort={sortOrder === "asc" ? "ascending" : sortOrder === "desc" ? "descending" : "none"}
3333
>
34-
<Button variant="ghost" onClick={handleClick} className="flex flex-row items-center gap-1">
34+
<Button
35+
variant="ghost"
36+
onClick={handleClick}
37+
className="flex flex-row items-center gap-1 font-semibold p-0 -h-9"
38+
>
3539
{children}
3640
{/* keep element in dom to preserve space */}
3741
<span className={cn(!sortOrder && "invisible")}>
38-
{sortOrder === "asc" ? <ChevronUpIcon size={20} /> : <ChevronDownIcon size={20} />}
42+
{sortOrder === "asc" ? <ChevronUpIcon size={16} /> : <ChevronDownIcon size={16} />}
3943
</span>
4044
</Button>
4145
</TableHead>

‎components/dashboard/src/components/podkit/tables/Table.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLA
2727
return (
2828
<thead
2929
ref={ref}
30-
className="[&_th]:p-3 [&_th]:bg-gray-100 dark:[&_th]:bg-gray-800 [&_th:first-child]:rounded-tl-md [&_th:last-child]:rounded-tr-md text-semibold"
30+
className="[&_th]:py-2 [&_th]:px-4 [&_th]:bg-gray-100 [&_th]:font-semibold dark:[&_th]:bg-gray-800 [&_th:first-child]:rounded-tl-md [&_th:last-child]:rounded-tr-md"
3131
{...props}
3232
/>
3333
);
@@ -53,7 +53,11 @@ TableHead.displayName = "TableHead";
5353
export const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
5454
({ className, ...props }, ref) => {
5555
return (
56-
<tbody ref={ref} className="[&_td]:p-3 [&_td:last-child]:text-right [&_tr]:hover:bg-muted/5" {...props} />
56+
<tbody
57+
ref={ref}
58+
className="[&_td]:py-3 [&_td]:px-4 [&_td:last-child]:text-right [&_tr]:hover:bg-muted/5"
59+
{...props}
60+
/>
5761
);
5862
},
5963
);

‎components/dashboard/src/index.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
input[type="email"],
7070
input[type="url"],
7171
select {
72-
@apply block w-56 text-gray-600 dark:text-gray-400 dark:bg-gray-800 bg-white rounded-md border border-gray-300 dark:border-gray-500 focus:border-gray-400 dark:focus:border-gray-400 focus:ring-0;
72+
@apply block w-56 text-gray-600 dark:text-gray-400 dark:bg-gray-800 bg-white rounded-lg border border-gray-300 dark:border-gray-500 focus:border-gray-400 dark:focus:border-gray-400 focus:ring-0;
7373
}
7474
textarea::placeholder,
7575
input[type="text"]::placeholder,
@@ -102,7 +102,7 @@
102102

103103
/* Search */
104104
input[type="search"] {
105-
@apply border-0 dark:bg-gray-800 bg-gray-50 text-gray-600 dark:text-gray-400 rounded-md focus:border-gray-400 dark:focus:border-gray-400 focus:outline-none focus:ring ring-0 focus:ring-blue-400 dark:focus:ring-blue-500 transition ease-in-out;
105+
@apply border-0 dark:bg-gray-800 bg-gray-50 text-gray-600 dark:text-gray-400 rounded-lg focus:border-gray-400 dark:focus:border-gray-400 focus:outline-none focus:ring ring-0 focus:ring-blue-400 dark:focus:ring-blue-500 transition ease-in-out;
106106
}
107107
input[type="checkbox"] {
108108
@apply disabled:opacity-50;

‎components/dashboard/src/repositories/detail/ConfigurationDetailPage.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const ConfigurationDetailPage: FC = () => {
2626
let { path, url } = useRouteMatch();
2727

2828
const { data, error, isLoading, refetch } = useConfiguration(id);
29+
const prebuildsEnabled = !!data?.prebuildSettings?.enabled;
2930

3031
const settingsMenu = useMemo(() => {
3132
const menu: SubmenuItemProps[] = [
@@ -36,7 +37,7 @@ const ConfigurationDetailPage: FC = () => {
3637
{
3738
title: "Prebuilds",
3839
link: [`${url}/prebuilds`],
39-
icon: <AlertTriangle size={20} />,
40+
icon: !prebuildsEnabled ? <AlertTriangle size={20} /> : undefined,
4041
},
4142
{
4243
title: "Environment variables",
@@ -48,7 +49,7 @@ const ConfigurationDetailPage: FC = () => {
4849
},
4950
];
5051
return menu;
51-
}, [url]);
52+
}, [prebuildsEnabled, url]);
5253

5354
return (
5455
<div className="w-full">

‎components/dashboard/src/repositories/list/RepoListItem.tsx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { TextMuted } from "@podkit/typography/TextMuted";
1010
import { Text } from "@podkit/typography/Text";
1111
import { LinkButton } from "@podkit/buttons/LinkButton";
1212
import type { Configuration } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
13-
import { cn } from "@podkit/lib/cn";
1413
import { AlertTriangleIcon, CheckCircle2Icon } from "lucide-react";
1514
import { TableCell, TableRow } from "@podkit/tables/Table";
1615

@@ -31,12 +30,12 @@ export const RepositoryListItem: FC<Props> = ({ configuration }) => {
3130
<div className="flex flex-col gap-1">
3231
<Text className="font-semibold">{configuration.name}</Text>
3332
{/* We show the url on a 2nd line for smaller screens since we hide the column */}
34-
<TextMuted className="inline md:hidden text-sm">{url}</TextMuted>
33+
<TextMuted className="inline md:hidden text-sm break-all">{url}</TextMuted>
3534
</div>
3635
</TableCell>
3736

3837
<TableCell hideOnSmallScreen>
39-
<TextMuted className="text-sm">{url}</TextMuted>
38+
<TextMuted className="text-sm break-all">{url}</TextMuted>
4039
</TableCell>
4140

4241
<TableCell hideOnSmallScreen>{created}</TableCell>
@@ -46,12 +45,10 @@ export const RepositoryListItem: FC<Props> = ({ configuration }) => {
4645
{prebuildsEnabled ? (
4746
<CheckCircle2Icon size={20} className="text-green-500" />
4847
) : (
49-
<AlertTriangleIcon size={20} className="text-red-500" />
48+
<AlertTriangleIcon size={20} className="text-kumquat-base" />
5049
)}
5150

52-
<TextMuted className={cn(!prebuildsEnabled && "text-red-500 dark:text-red-500")}>
53-
{prebuildsEnabled ? "Enabled" : "Disabled"}
54-
</TextMuted>
51+
<TextMuted>{prebuildsEnabled ? "Enabled" : "Disabled"}</TextMuted>
5552
</div>
5653
</TableCell>
5754

‎components/dashboard/src/repositories/list/RepositoryList.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { FC, useCallback, useEffect, useMemo, useState } from "react";
88
import { useHistory } from "react-router-dom";
99
import { useListConfigurations } from "../../data/configurations/configuration-queries";
1010
import { PageHeading } from "@podkit/layout/PageHeading";
11-
import { Button } from "@podkit/buttons/Button";
1211
import { useDocumentTitle } from "../../hooks/use-document-title";
1312
import { ImportRepositoryModal } from "../create/ImportRepositoryModal";
1413
import type { Configuration } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
@@ -88,9 +87,6 @@ const RepositoryListPage: FC = () => {
8887
<PageHeading
8988
title="Imported repositories"
9089
subtitle="Configure and refine the experience of working with a repository in Gitpod"
91-
action={
92-
showTable && <Button onClick={() => setShowCreateProjectModal(true)}>Import Repository</Button>
93-
}
9490
/>
9591

9692
{isLoading && <LoadingState />}
@@ -106,6 +102,7 @@ const RepositoryListPage: FC = () => {
106102
isFetchingNextPage={isFetchingNextPage}
107103
hasNextPage={!!hasNextPage}
108104
hasMoreThanOnePage={hasMoreThanOnePage}
105+
onImport={() => setShowCreateProjectModal(true)}
109106
onLoadNextPage={() => fetchNextPage()}
110107
onSearchTermChange={setSearchTerm}
111108
onSort={handleSort}

‎components/dashboard/src/repositories/list/RepositoryTable.tsx

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { Subheading } from "@podkit/typography/Headings";
1515
import { cn } from "@podkit/lib/cn";
1616
import { SortableTableHead, TableSortOrder } from "@podkit/tables/SortableTable";
1717
import { LoadingState } from "@podkit/loading/LoadingState";
18+
import { Button } from "@podkit/buttons/Button";
1819

1920
type Props = {
2021
configurations: Configuration[];
@@ -25,6 +26,7 @@ type Props = {
2526
hasMoreThanOnePage: boolean;
2627
isSearching: boolean;
2728
isFetchingNextPage: boolean;
29+
onImport: () => void;
2830
onSearchTermChange: (val: string) => void;
2931
onLoadNextPage: () => void;
3032
onSort: (columnName: string, direction: TableSortOrder) => void;
@@ -39,26 +41,32 @@ export const RepositoryTable: FC<Props> = ({
3941
hasMoreThanOnePage,
4042
isSearching,
4143
isFetchingNextPage,
44+
onImport,
4245
onSearchTermChange,
4346
onLoadNextPage,
4447
onSort,
4548
}) => {
4649
return (
4750
<>
4851
{/* Search/Filter bar */}
49-
<div className="flex flex-row flex-wrap justify-between items-center">
50-
<div className="flex flex-row flex-wrap gap-2 items-center">
51-
{/* TODO: Add search icon on left and decide on pulling Inputs into podkit */}
52+
<div className="flex flex-col-reverse md:flex-row flex-wrap justify-between items-center gap-2">
53+
<div className="flex flex-row flex-wrap items-center w-full md:w-auto">
54+
{/* TODO: Add search icon on left - need to revisit TextInputs for podkit - and remove global styles */}
5255
<TextInput
53-
className="w-80"
56+
className="w-full max-w-none md:w-80"
5457
value={searchTerm}
5558
onChange={onSearchTermChange}
5659
placeholder="Search imported repositories"
5760
/>
5861
{/* TODO: Add prebuild status filter dropdown */}
5962
</div>
63+
64+
{/* TODO: Consider making all podkit buttons behave this way, full width on small screen */}
65+
<Button className="w-full md:w-auto" onClick={onImport}>
66+
Import Repository
67+
</Button>
6068
</div>
61-
<div className="relative w-full overflow-auto mt-2">
69+
<div className="relative w-full overflow-auto mt-4">
6270
{configurations.length > 0 ? (
6371
<Table>
6472
<TableHeader>
@@ -88,7 +96,7 @@ export const RepositoryTable: FC<Props> = ({
8896
<TableHead className="w-24 text-right">
8997
{isSearching && (
9098
<div className="flex flex-right justify-end items-center">
91-
<LoadingState delay={false} />
99+
<LoadingState delay={false} size={16} />
92100
</div>
93101
)}
94102
</TableHead>

0 commit comments

Comments
 (0)