forkless/strix
1
0
Fork 0
mirror of https://github.com/usestrix/strix.git synced 2026-08-21 10:48:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

Show Pro descriptions under each sidebar item and widen the rail

Browse Source 
The hover tooltips read as too subtle, so the one-liners now sit as secondary
text under each title and the left menu is a little wider to fit them.
This commit is contained in:
Jonathan Singer
2026-07-20 12:36:45 -04:00
parent dfc672c947
commit 54e9c0239b
5 changed files with 127 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
strix/viewer/viewer_dist/assets/index-RvPMq9wX.js → strix/viewer/viewer_dist/assets/index-CfmkjooJ.js
+100 -100
View File
File diff suppressed because one or more lines are too long
strix/viewer/viewer_dist/assets/index-Dffipx3y.css → strix/viewer/viewer_dist/assets/index-CjWyBgvB.css
+1 -1
View File
File diff suppressed because one or more lines are too long
strix/viewer/viewer_dist/index.html
+2 -2
View File
@@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark" />
<title>Strix Results</title>
<script type="module" crossorigin src="./assets/index-RvPMq9wX.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-Dffipx3y.css">
<script type="module" crossorigin src="./assets/index-CfmkjooJ.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-CjWyBgvB.css">
</head>
<body>
<div id="root"></div>
strix/viewer_src/src/components/ProCta.tsx
+21 -15
View File
@@ -93,25 +93,31 @@ export function ProTile({ item }: { item: ProItem }) {
}
/**
* Sidebar-row Pro item: icon + label + Pro tag, with the one-liner as a hover
* tooltip. Link-out to sign-up in a new tab.
* Sidebar-row Pro item: icon + label + Pro tag, with the one-liner shown as
* always-visible secondary text under the title. Link-out to sign-up in a new
* tab.
*/
export function ProNavItem({ item }: { item: ProItem }) {
const Icon = item.icon;
return (
<Tooltip text={item.desc} className="w-full">
<a
href={SIGNUP_URL}
target="_blank"
rel="noopener noreferrer"
onClick={() => trackCta(item.slug)}
className="group flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm text-[#888] transition-colors hover:bg-[rgba(255,255,255,0.06)] hover:text-white"
>
<Icon className="h-4 w-4 flex-shrink-0 text-[#666] transition-colors group-hover:text-[#aaa]" aria-hidden="true" />
<span className="flex-1 truncate">{item.title}</span>
<ProTag />
</a>
</Tooltip>
<a
href={SIGNUP_URL}
target="_blank"
rel="noopener noreferrer"
onClick={() => trackCta(item.slug)}
className="group flex w-full items-start gap-2.5 rounded-md px-2.5 py-2 transition-colors hover:bg-[rgba(255,255,255,0.06)]"
>
<Icon className="mt-0.5 h-4 w-4 flex-shrink-0 text-[#666] transition-colors group-hover:text-[#aaa]" aria-hidden="true" />
<span className="min-w-0 flex-1">
<span className="flex items-center gap-1.5">
<span className="flex-1 truncate text-sm text-[#aaa] transition-colors group-hover:text-white">
{item.title}
</span>
<ProTag />
</span>
<span className="mt-0.5 block text-[11px] leading-snug text-[#666]">{item.desc}</span>
</span>
</a>
);
}
strix/viewer_src/src/components/Sidebar.tsx
+3 -3
View File
@@ -34,8 +34,8 @@ import type { View } from "@/App";
// Integrations, Members), then the rest of the platform surface.
const PLATFORM_ITEMS: ProItem[] = [
{ title: "PR Reviews", desc: "Pentest every pull request your team opens.", slug: "pr_reviews", icon: GitPullRequest },
{ title: "Repositories", desc: "Connect your org's repositories and domains.", slug: "repositories", icon: Layers },
{ title: "Domains", desc: "Connect your org's repositories and domains.", slug: "domains", icon: Globe },
{ title: "Repositories", desc: "Connect your org's repositories.", slug: "repositories", icon: Layers },
{ title: "Domains", desc: "Add the domains your team owns.", slug: "domains", icon: Globe },
{ title: "Integrations", desc: "Two-way sync findings to Jira, Linear, and Slack.", slug: "integrations", icon: Puzzle },
{ title: "Members", desc: "Invite your team and set roles.", slug: "members", icon: Users },
{ title: "Pentests", desc: "Launch deeper pentests on managed infra.", slug: "pentests", icon: Search },
@@ -72,7 +72,7 @@ export default function Sidebar({
onForget,
}: SidebarProps) {
return (
<aside className="hidden w-60 flex-shrink-0 border-r border-[#222] lg:block">
<aside className="hidden w-72 flex-shrink-0 border-r border-[#222] lg:block">
<div className="sticky top-0 flex h-screen flex-col overflow-y-auto px-3 py-4">
{/* Header: wordmark + Start free + signed-in chip */}
<div className="px-1.5">