Skip to content

Swarm Fix: [BUG] [v1.1.0] About Cortex Desktop (SystemSpecs): labels and secondary text use Tailwind text-neutral-* / text-red-400 instead of Cortex text/error tokens #37649

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
hinzwilliam52-ship-it wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Swarm Fix: [BUG] [v1.1.0] About Cortex Desktop (SystemSpecs): labels and secondary text use Tailwind text-neutral-* / text-red-400 instead of Cortex text/error tokens #37649

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
48 changes: 48 additions & 0 deletions FIX_PROPOSAL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
To fix the issue, we need to replace the Tailwind palette classes with the Cortex text tokens in the `SystemSpecs.tsx` file.

Here's the exact code fix:

Replace the following lines:
```tsx
className="text-neutral-400"
className="text-neutral-500"
className="text-red-400"
```
With:
```tsx
className="text-secondary" // for secondary text
className="text-inactive" // for inactive text
className="text-error" // for error text
```
Or, if you want to use the Cortex CSS variable theme:
```tsx
style={{ color: 'var(--cortex-text-secondary)' }} // for secondary text
style={{ color: 'var(--cortex-text-inactive)' }} // for inactive text
style={{ color: 'var(--cortex-error)' }} // for error text
```
Make sure to update all occurrences of `text-neutral-400`, `text-neutral-500`, and `text-red-400` in the `SystemSpecs.tsx` file.

Here's an example of how the updated code might look:
```tsx
// Before
<div className="text-neutral-400">Secondary text</div>
<div className="text-neutral-500">Inactive text</div>
<div className="text-red-400">Error text</div>

// After
<div className="text-secondary">Secondary text</div>
<div className="text-inactive">Inactive text</div>
<div className="text-error">Error text</div>
```
Or:
```tsx
// Before
<div className="text-neutral-400">Secondary text</div>
<div className="text-neutral-500">Inactive text</div>
<div className="text-red-400">Error text</div>

// After
<div style={{ color: 'var(--cortex-text-secondary)' }}>Secondary text</div>
<div style={{ color: 'var(--cortex-text-inactive)' }}>Inactive text</div>
<div style={{ color: 'var(--cortex-error)' }}>Error text</div>
```