Skip to content

Commit fa27caf

Browse files
Content token shuffle (#2588)
* Content token shuffle * Bot commit: format with prettier * Upgrade to merged `@oxide/design-system` * Upgrade `@oxide/design-system` to non-canary * Brighter icons * Unrelated spacing fix * Fix missing badge colour * Boost side modal heading colour --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
1 parent aad054c commit fa27caf

File tree

97 files changed

+244
-234
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

97 files changed

+244
-234
lines changed

app/components/AccordionItem.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ export const AccordionItem = ({ children, isOpen, label, value }: AccordionItemP
3030
<Accordion.Item value={value}>
3131
<Accordion.Header className="max-w-lg">
3232
<Accordion.Trigger className="group flex w-full items-center justify-between border-t py-2 text-sans-xl border-secondary [&>svg]:data-[state=open]:rotate-90">
33-
<div className="text-secondary">{label}</div>
34-
<DirectionRightIcon className="transition-all text-secondary" />
33+
<div className="text-raise">{label}</div>
34+
<DirectionRightIcon className="transition-all text-default" />
3535
</Accordion.Trigger>
3636
</Accordion.Header>
3737
<Accordion.Content

app/components/AttachFloatingIpModal.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { Slash } from '~/ui/lib/Slash'
1818

1919
function FloatingIpLabel({ fip }: { fip: FloatingIp }) {
2020
return (
21-
<div className="text-tertiary selected:text-accent-secondary">
21+
<div className="text-secondary selected:text-accent-secondary">
2222
<div>{fip.name}</div>
2323
<div className="flex gap-0.5">
2424
<div>{fip.ip}</div>

app/components/CapacityBar.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ function TitleCell({ icon, title, unit }: TitleCellProps) {
5454
<div>
5555
<div className="flex grow items-center">
5656
<span className="mr-2 flex h-4 w-4 items-center text-accent">{icon}</span>
57-
<span className="!normal-case text-mono-sm text-secondary">{title}</span>
58-
<span className="ml-1 !normal-case text-mono-sm text-quaternary">({unit})</span>
57+
<span className="!normal-case text-mono-sm text-default">{title}</span>
58+
<span className="ml-1 !normal-case text-mono-sm text-tertiary">({unit})</span>
5959
</div>
6060
</div>
6161
)
@@ -65,8 +65,8 @@ function PctCell({ pct }: { pct: number }) {
6565
// NaN happens when both top and bottom are 0
6666
if (Number.isNaN(pct)) {
6767
return (
68-
<div className="flex -translate-y-0.5 items-baseline text-quaternary">
69-
<div className="font-light text-sans-2xl"></div>
68+
<div className="flex -translate-y-0.5 items-baseline text-tertiary">
69+
<div className="font-light text-sans-2xl text-raise"></div>
7070
<div className="text-sans-xl">%</div>
7171
</div>
7272
)
@@ -75,8 +75,8 @@ function PctCell({ pct }: { pct: number }) {
7575
const [wholeNumber, decimal] = splitDecimal(pct)
7676
return (
7777
<div className="flex -translate-y-0.5 items-baseline">
78-
<div className="font-light text-sans-2xl">{wholeNumber}</div>
79-
<div className="text-sans-xl text-quaternary">{decimal}%</div>
78+
<div className="font-light text-sans-2xl text-raise">{wholeNumber}</div>
79+
<div className="text-sans-xl text-tertiary">{decimal}%</div>
8080
</div>
8181
)
8282
}
@@ -102,8 +102,8 @@ type ValueCellProps = {
102102
function ValueCell({ label, value, unit }: ValueCellProps) {
103103
return (
104104
<div className="p-3 text-mono-sm">
105-
<div className="mb-px text-quaternary">{label}</div>
106-
<div className="!normal-case text-secondary">
105+
<div className="mb-px text-tertiary">{label}</div>
106+
<div className="!normal-case text-default">
107107
<BigNum num={value} />
108108
{unit}
109109
</div>

app/components/DocsPopover.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ export const DocsPopoverLink = ({ href, linkText }: DocsPopoverLinkProps) => (
2626
rel="noreferrer"
2727
>
2828
<div className="mx-2 border-b py-1.5 border-secondary">
29-
<div className="relative -ml-2 inline-block rounded py-1 pl-2 pr-7 text-sans-md !text-default group-hover:bg-tertiary">
29+
<div className="relative -ml-2 inline-block rounded py-1 pl-2 pr-7 text-sans-md text-raise group-hover:bg-tertiary">
3030
<span className="inline-block max-w-[300px] truncate align-middle">{linkText}</span>
31-
<OpenLink12Icon className="absolute top-1.5 ml-2 translate-y-[1px] text-tertiary" />
31+
<OpenLink12Icon className="absolute top-1.5 ml-2 translate-y-[1px] text-secondary" />
3232
</div>
3333
</div>
3434
</a>
@@ -49,18 +49,18 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
4949
</PopoverButton>
5050
<PopoverPanel
5151
// DocsPopoverPanel needed for enter animation
52-
className="DocsPopoverPanel z-10 w-96 rounded-lg border bg-raise border-secondary elevation-1"
52+
className="DocsPopoverPanel z-10 w-96 rounded-lg border bg-raise border-secondary elevation-2"
5353
anchor={{ to: 'bottom end', gap: 12 }}
5454
>
5555
<div className="px-4">
5656
<h2 className="mt-4 flex items-center gap-1 text-sans-md">
5757
<div className="mr-1 flex items-center text-accent-secondary">{icon}</div>
5858
Learn about {heading}
5959
</h2>
60-
<p className="mb-3 mt-2 text-sans-md text-secondary">{summary}</p>
60+
<p className="mb-3 mt-2 text-sans-md text-default">{summary}</p>
6161
</div>
6262
<div className="border-t pb-1 border-secondary">
63-
<h3 className="mb-1 mt-3 px-4 text-mono-sm text-quaternary">Guides</h3>
63+
<h3 className="mb-1 mt-3 px-4 text-mono-sm text-tertiary">Guides</h3>
6464
{links.map((link) => (
6565
<DocsPopoverLink key={link.href} {...link} />
6666
))}

app/components/EquivalentCliCommand.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export function EquivalentCliCommand({ command }: { command: string }) {
3737
<Modal isOpen={isOpen} onDismiss={handleDismiss} title="CLI command">
3838
<Modal.Section>
3939
<pre className="flex w-full rounded border px-4 py-3 !normal-case !tracking-normal text-mono-md bg-default border-secondary">
40-
<div className="mr-2 select-none text-quaternary">$</div>
40+
<div className="mr-2 select-none text-tertiary">$</div>
4141
{command}
4242
</pre>
4343
</Modal.Section>

app/components/ErrorBoundary.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ function ErrorFallback({ error }: Props) {
2424
return (
2525
<ErrorPage>
2626
<h1 className="text-sans-2xl">Something went wrong</h1>
27-
<p className="text-tertiary">
27+
<p className="text-secondary">
2828
Please try again. If the problem persists, contact your administrator.
2929
</p>
3030
</ErrorPage>

app/components/ErrorPage.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ export function ErrorPage({ children }: Props) {
3434
<div className="relative flex w-full justify-between">
3535
<Link
3636
to="/"
37-
className="flex items-center p-6 text-mono-sm text-secondary hover:text-default"
37+
className="flex items-center p-6 text-mono-sm text-default hover:text-raise"
3838
>
39-
<PrevArrow12Icon title="Select" className="mr-2 text-tertiary" />
39+
<PrevArrow12Icon title="Select" className="mr-2 text-secondary" />
4040
Back to console
4141
</Link>
4242
<SignOutButton className="mr-6 mt-4" />
@@ -57,7 +57,7 @@ export function NotFound() {
5757
return (
5858
<ErrorPage>
5959
<h1 className="text-sans-2xl">Page not found</h1>
60-
<p className="text-tertiary">
60+
<p className="text-secondary">
6161
The page you are looking for doesn&apos;t exist or you may not have access to it.
6262
</p>
6363
</ErrorPage>

app/components/ExternalIps.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function ExternalIps({ project, instance }: InstanceSelector) {
2727
<div className="flex items-center gap-1">
2828
{intersperse(
2929
ips.map((eip) => <CopyableIp ip={eip.ip} key={eip.ip} />),
30-
<span className="text-quinary"> / </span>
30+
<span className="text-quaternary"> / </span>
3131
)}
3232
</div>
3333
)

app/components/HL.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { classed } from '~/util/classed'
1010
// note parent with secondary text color must have 'group' on it for
1111
// this to work. see Toast for an example
1212
export const HL = classed.span`
13-
text-sans-md text-default
13+
text-sans-md text-raise
1414
group-[.text-accent-secondary]:text-accent
1515
group-[.text-error-secondary]:text-error
1616
group-[.text-info-secondary]:text-info

app/components/IpPoolUtilization.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ import { BigNum } from '~/ui/lib/BigNum'
1212

1313
const IpUtilFrac = (props: { allocated: number | bigint; capacity: number | bigint }) => (
1414
<>
15-
<BigNum className="text-default" num={props.allocated} /> /{' '}
16-
<BigNum className="text-tertiary" num={props.capacity} />
15+
<BigNum className="text-raise" num={props.allocated} /> /{' '}
16+
<BigNum className="text-secondary" num={props.capacity} />
1717
</>
1818
)
1919

0 commit comments

Comments
 (0)