Skip to content

Commit a6bcdde

Browse files
david-crespobenjaminleonard
david-crespo
and
benjaminleonard
authored
Style polish on update release cards (#2922)
* min width on update release list cardblock * let's just wrap instead. this is why I'm not a designer * Fix card block child border * Add divider * Tweak tuf repo list rows * Responsive tweaks --------- Co-authored-by: Benjamin Leonard <[email protected]>
1 parent 089db49 commit a6bcdde

File tree

4 files changed

+74
-50
lines changed

4 files changed

+74
-50
lines changed

‎app/components/MoreActionsMenu.tsx‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,33 @@ import * as DropdownMenu from '~/ui/lib/DropdownMenu'
1515
interface MoreActionsMenuProps {
1616
/** The accessible name for the menu button */
1717
label: string
18-
isSmall?: boolean
18+
variant?: 'default' | 'small' | 'filled'
1919
/** Dropdown items only */
2020
children?: ReactNode
2121
}
2222

2323
export const MoreActionsMenu = ({
2424
label,
25-
isSmall = false,
25+
variant = 'default',
2626
children,
2727
}: MoreActionsMenuProps) => {
2828
return (
2929
<DropdownMenu.Root>
30-
<DropdownMenu.Trigger aria-label={label} className="rounded">
30+
<DropdownMenu.Trigger
31+
aria-label={label}
32+
className={cn(
33+
'headless-hide-focus rounded',
34+
variant === 'filled' && 'h-full w-full'
35+
)}
36+
>
3137
<div
3238
className={cn(
33-
'active-clicked border-default hover:bg-tertiary flex items-center justify-center rounded border',
34-
isSmall ? 'h-6 w-6' : 'h-8 w-8'
39+
'active-clicked hover:bg-tertiary flex items-center justify-center',
40+
variant === 'small' && 'h-6 w-6',
41+
variant === 'default' && 'h-8 w-8',
42+
(variant === 'default' || variant === 'small') &&
43+
'border-default rounded border',
44+
variant === 'filled' && 'h-full w-full px-3'
3545
)}
3646
>
3747
<More12Icon />

‎app/components/oxql-metrics/OxqlMetric.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export function OxqlMetric({ title, description, unit, ...queryObj }: OxqlMetric
8989
return (
9090
<ChartContainer>
9191
<ChartHeader title={title} label={label} description={description}>
92-
<MoreActionsMenu label="Instance actions" isSmall>
92+
<MoreActionsMenu label="Instance actions" variant="small">
9393
<Dropdown.LinkItem to={links.oxqlSchemaDocs(queryObj.metricName)}>
9494
About this metric
9595
</Dropdown.LinkItem>

‎app/pages/system/UpdatePage.tsx‎

Lines changed: 57 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@ import * as R from 'remeda'
1111

1212
import {
1313
Images24Icon,
14+
SizeOutline12Icon,
1415
SoftwareUpdate16Icon,
1516
SoftwareUpdate24Icon,
16-
Time16Icon,
17+
TimeOutline12Icon,
1718
} from '@oxide/design-system/icons/react'
1819
import { Badge } from '@oxide/design-system/ui'
1920

@@ -34,6 +35,7 @@ import { addToast } from '~/stores/toast'
3435
import { EmptyCell } from '~/table/cells/EmptyCell'
3536
import { CardBlock } from '~/ui/lib/CardBlock'
3637
import { DateTime } from '~/ui/lib/DateTime'
38+
import { Divider } from '~/ui/lib/Divider'
3739
import * as DropdownMenu from '~/ui/lib/DropdownMenu'
3840
import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
3941
import { PropertiesTable } from '~/ui/lib/PropertiesTable'
@@ -106,7 +108,7 @@ export default function UpdatePage() {
106108
/>
107109
</div>
108110
</PageHeader>
109-
<PropertiesTable className="-mt-8 mb-8">
111+
<PropertiesTable className="-mt-8">
110112
{/* targetRelease will never be null on a customer system after the
111113
first time it is set. */}
112114
<PropertiesTable.Row label="Target release">
@@ -132,7 +134,7 @@ export default function UpdatePage() {
132134
{componentProgress ? (
133135
<>
134136
<div className="mr-1.5">{componentProgress.percentage}%</div>
135-
<div className="text-secondary">
137+
<div className="text-tertiary">
136138
({componentProgress.current} of {componentProgress.total})
137139
</div>
138140
</>
@@ -166,6 +168,8 @@ export default function UpdatePage() {
166168
</PropertiesTable.Row>
167169
</PropertiesTable>
168170

171+
<Divider className="my-8" />
172+
169173
<CardBlock>
170174
<CardBlock.Header title="Releases" />
171175
<CardBlock.Body>
@@ -175,50 +179,60 @@ export default function UpdatePage() {
175179
return (
176180
<li
177181
key={repo.hash}
178-
className="border-secondary flex items-center gap-4 rounded border p-4"
182+
className="border-default @container flex items-center gap-3 rounded border pl-4"
179183
>
180-
<Images24Icon className="text-secondary shrink-0" aria-hidden />
181-
<div className="flex-1">
182-
<div className="flex items-center gap-2">
183-
<span className="text-sans-semi-lg text-raise">
184-
{repo.systemVersion}
185-
</span>
186-
{isTarget && <Badge color="default">Target</Badge>}
184+
<Images24Icon className="text-tertiary shrink-0" aria-hidden />
185+
<div className="flex min-w-0 flex-1 flex-col flex-wrap items-start gap-x-4 gap-y-1 py-3 @md:flex-row @md:items-center">
186+
<div className="flex-1">
187+
<div className="flex items-center gap-1.5">
188+
<span className="text-sans-semi-lg text-raise">
189+
{repo.systemVersion}
190+
</span>
191+
{isTarget && <Badge color="default">Target</Badge>}
192+
</div>
187193
</div>
188-
<div className="text-secondary">{repo.fileName}</div>
189-
</div>
190-
<div className="flex items-center gap-4">
191-
<div className="flex items-center gap-1">
192-
<Time16Icon aria-hidden />
193-
<DateTime date={repo.timeCreated} />
194+
<div className="flex flex-col items-start gap-0.5 @md:items-end">
195+
<div className="flex items-center gap-1.5">
196+
<DateTime date={repo.timeCreated} />
197+
<TimeOutline12Icon className="text-quaternary" aria-hidden />
198+
</div>
199+
<div className="flex items-center gap-1.5">
200+
<div>{repo.fileName}</div>
201+
<SizeOutline12Icon className="text-quaternary" aria-hidden />
202+
</div>
194203
</div>
195204
</div>
196-
<MoreActionsMenu label={`${repo.systemVersion} actions`} isSmall>
197-
<DropdownMenu.Item
198-
label="Set as target release"
199-
onSelect={() => {
200-
confirmAction({
201-
actionType: 'primary',
202-
doAction: () =>
203-
setTargetRelease({
204-
body: { systemVersion: repo.systemVersion },
205-
}),
206-
modalTitle: 'Confirm set target release',
207-
modalContent: (
208-
<p>
209-
Are you sure you want to set <HL>{repo.systemVersion}</HL> as
210-
the target release?
211-
</p>
212-
),
213-
errorTitle: `Error setting target release to ${repo.systemVersion}`,
214-
})
215-
}}
216-
// TODO: follow API logic, disabling for older releases.
217-
// Or maybe just have the API tell us by adding a field to
218-
// the TufRepo response type.
219-
disabled={isTarget && 'Already set as target'}
220-
/>
221-
</MoreActionsMenu>
205+
<div className="border-secondary flex items-center justify-center self-stretch border-l">
206+
<MoreActionsMenu
207+
label={`${repo.systemVersion} actions`}
208+
variant="filled"
209+
>
210+
<DropdownMenu.Item
211+
label="Set as target release"
212+
onSelect={() => {
213+
confirmAction({
214+
actionType: 'primary',
215+
doAction: () =>
216+
setTargetRelease({
217+
body: { systemVersion: repo.systemVersion },
218+
}),
219+
modalTitle: 'Confirm set target release',
220+
modalContent: (
221+
<p>
222+
Are you sure you want to set <HL>{repo.systemVersion}</HL>{' '}
223+
as the target release?
224+
</p>
225+
),
226+
errorTitle: `Error setting target release to ${repo.systemVersion}`,
227+
})
228+
}}
229+
// TODO: follow API logic, disabling for older releases.
230+
// Or maybe just have the API tell us by adding a field to
231+
// the TufRepo response type.
232+
disabled={isTarget && 'Already set as target'}
233+
/>
234+
</MoreActionsMenu>
235+
</div>
222236
</li>
223237
)
224238
})}

‎app/ui/lib/CardBlock.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export function CardBlock({ children, width = 'full' }: CardBlockProps) {
2828
return (
2929
<div
3030
className={cn(
31-
'text-sans-md border-default *:border-b-secondary flex flex-col rounded-lg border py-5 *:border-b last:*:border-0 last:*:pb-0',
31+
'text-sans-md border-default *:border-b-secondary flex flex-col rounded-lg border py-5 *:border-b *:last:border-0 *:last:pb-0',
3232
widthClass[width]
3333
)}
3434
>

0 commit comments

Comments
 (0)