Skip to content

Commit 3645b52

Browse files
gtsiolisgtsiolis
committed
Update dashboard navigation
1 parent 78a3d19 commit 3645b52

File tree

3 files changed

+69
-55
lines changed

3 files changed

+69
-55
lines changed

‎components/dashboard/src/Menu.tsx

Lines changed: 65 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,6 @@ import { useLocation, useRouteMatch } from "react-router";
1111
import { Location } from "history";
1212
import { countries } from "countries-list";
1313
import gitpodIcon from "./icons/gitpod.svg";
14-
import CaretDown from "./icons/CaretDown.svg";
15-
import CaretUpDown from "./icons/CaretUpDown.svg";
1614
import { getGitpodService, gitpodHostUrl } from "./service/service";
1715
import { UserContext } from "./user-context";
1816
import { TeamsContext, getCurrentTeam } from "./teams/teams-context";
@@ -108,6 +106,7 @@ export default function Menu() {
108106

109107
// Hide most of the top menu when in a full-page form.
110108
const isMinimalUI = ["/new", "/teams/new", "/open"].includes(location.pathname);
109+
const isWorkspacesUI = ["/workspaces"].includes(location.pathname);
111110

112111
const [teamMembers, setTeamMembers] = useState<Record<string, TeamMemberInfo[]>>({});
113112
useEffect(() => {
@@ -228,11 +227,6 @@ export default function Menu() {
228227
}
229228
// User menu
230229
return [
231-
{
232-
title: "Workspaces",
233-
link: "/workspaces",
234-
alternatives: ["/"],
235-
},
236230
{
237231
title: "Projects",
238232
link: "/projects",
@@ -255,8 +249,8 @@ export default function Menu() {
255249
]
256250
: []),
257251
{
258-
title: "Docs",
259-
link: "https://www.gitpod.io/docs/",
252+
title: "Workspaces",
253+
link: "/workspaces",
260254
},
261255
];
262256

@@ -269,24 +263,29 @@ export default function Menu() {
269263
};
270264
const renderTeamMenu = () => {
271265
return (
272-
<div className="flex p-1 pl-3 ">
266+
<div className="flex p-1 pl-3">
273267
{projectSlug && (
274-
<div className="flex h-full rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 px-2 py-1">
275-
<Link to={team ? `/t/${team.slug}/projects` : `/projects`}>
276-
<span className="text-base text-gray-600 dark:text-gray-400 font-semibold">
277-
{team?.name || userFullName}
278-
</span>
279-
</Link>
280-
</div>
268+
<Link to={team ? `/t/${team.slug}/projects` : `/projects`}>
269+
<span className="flex h-full text-base text-gray-500 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 font-semibold pl-3 pr-2 py-1 bg-gray-50 hover:bg-gray-100 rounded-tl-2xl rounded-bl-2xl border-gray-100 dark:border-gray-700 border-r">
270+
{team?.name || userFullName}
271+
</span>
272+
</Link>
281273
)}
282-
<div className="flex h-full rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
274+
{!projectSlug && (
275+
<Link to="/projects">
276+
<span className="flex h-full text-base text-gray-500 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 font-semibold pl-3 pr-2 py-1 bg-gray-50 hover:bg-gray-100 rounded-tl-2xl rounded-bl-2xl border-gray-100 dark:border-gray-700 border-r">
277+
{team?.name || userFullName}
278+
</span>
279+
</Link>
280+
)}
281+
<div className="flex h-full rounded-tr-2xl rounded-br-2xl bg-gray-50 hover:bg-gray-100 px-1 dark:bg-gray-800 dark:hover:bg-gray-700">
283282
<ContextMenu
284283
classes="w-64 left-0"
285284
menuEntries={[
286285
{
287286
title: userFullName,
288287
customContent: (
289-
<div className="w-full text-gray-400 flex flex-col">
288+
<div className="w-full text-gray-500 flex flex-col">
290289
<span className="text-gray-800 dark:text-gray-100 text-base font-semibold">
291290
{userFullName}
292291
</span>
@@ -343,35 +342,50 @@ export default function Menu() {
343342
},
344343
]}
345344
>
346-
<div className="flex h-full px-2 py-1 space-x-3.5">
347-
{!projectSlug && (
348-
<span className="text-base text-gray-600 dark:text-gray-400 font-semibold">
349-
{team?.name || userFullName}
350-
</span>
351-
)}
352-
<img
353-
alt=""
354-
aria-label="Toggle team selection menu"
355-
className="filter-grayscale"
356-
style={{ marginTop: 5, marginBottom: 5 }}
357-
src={CaretUpDown}
358-
/>
345+
<div className="flex h-full pl-0 pr-1 py-1.5 text-gray-50">
346+
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
347+
<path
348+
fill-rule="evenodd"
349+
clip-rule="evenodd"
350+
d="M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z"
351+
fill="#78716C"
352+
/>
353+
<title>Toggle team selection menu</title>
354+
</svg>
359355
</div>
360356
</ContextMenu>
361357
</div>
362-
{projectSlug && (
363-
<div className="flex h-full rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 px-2 py-1">
364-
<Link to={`${teamOrUserSlug}/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
365-
<span className="text-base text-gray-600 dark:text-gray-400 font-semibold">
366-
{project?.name}
367-
</span>
368-
</Link>
369-
</div>
358+
{projectSlug && !prebuildId && (
359+
<Link to={`${teamOrUserSlug}/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
360+
<span className=" flex h-full text-base text-gray-50 bg-gray-800 dark:bg-gray-50 dark:text-gray-900 font-semibold ml-2 px-3 py-1 rounded-2xl border-gray-100">
361+
{project?.name}
362+
</span>
363+
</Link>
370364
)}
371365
{prebuildId && (
372-
<div className="flex h-full ml-2 py-1">
373-
<img alt="" className="mr-3 filter-grayscale m-auto transform -rotate-90" src={CaretDown} />
374-
<span className="text-base text-gray-600 dark:text-gray-400 font-semibold">{prebuildId}</span>
366+
<Link to={`${teamOrUserSlug}/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
367+
<span className=" flex h-full text-base text-gray-500 bg-gray-50 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 font-semibold ml-2 px-3 py-1 rounded-2xl border-gray-100">
368+
{project?.name}
369+
</span>
370+
</Link>
371+
)}
372+
{prebuildId && (
373+
<div className="flex ml-2">
374+
<div className="flex pl-0 pr-1 py-1.5">
375+
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
376+
<path
377+
fill-rule="evenodd"
378+
clip-rule="evenodd"
379+
d="M7.293 14.707a1 1 0 0 1 0-1.414L10.586 10 7.293 6.707a1 1 0 1 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0Z"
380+
fill="#78716C"
381+
/>
382+
</svg>
383+
</div>
384+
<Link to={`${teamOrUserSlug}/${projectSlug}/${prebuildId}`}>
385+
<span className="flex h-full text-base text-gray-50 bg-gray-800 dark:bg-gray-50 dark:text-gray-900 font-semibold px-3 py-1 rounded-2xl border-gray-100">
386+
{prebuildId.substring(0, 8).trimEnd()}
387+
</span>
388+
</Link>
375389
</div>
376390
)}
377391
</div>
@@ -380,11 +394,8 @@ export default function Menu() {
380394

381395
return (
382396
<>
383-
<header
384-
className={`app-container flex flex-col pt-4 space-y-4 ${isMinimalUI || !!prebuildId ? "pb-4" : ""}`}
385-
data-analytics='{"button_type":"menu"}'
386-
>
387-
<div className="flex h-10">
397+
<header className="app-container flex flex-col pt-4 space-y-4" data-analytics='{"button_type":"menu"}'>
398+
<div className="flex h-10 mb-3">
388399
<div className="flex justify-between items-center pr-3">
389400
<Link to="/">
390401
<img src={gitpodIcon} className="h-6" alt="Gitpod's logo" />
@@ -393,7 +404,7 @@ export default function Menu() {
393404
</div>
394405
<div className="flex flex-1 items-center w-auto" id="menu">
395406
<nav className="flex-1">
396-
<ul className="flex flex-1 items-center justify-between text-base text-gray-700 space-x-2">
407+
<ul className="flex flex-1 items-center justify-between text-base text-gray-500 dark:text-gray-400 space-x-2">
397408
<li className="flex-1"></li>
398409
{!isMinimalUI &&
399410
rightMenu.map((entry) => (
@@ -427,6 +438,10 @@ export default function Menu() {
427438
title: "Settings",
428439
link: "/settings",
429440
},
441+
{
442+
title: "Docs",
443+
link: "https://www.gitpod.io/docs/",
444+
},
430445
{
431446
title: "Help",
432447
href: "https://www.gitpod.io/support",
@@ -448,7 +463,7 @@ export default function Menu() {
448463
</div>
449464
{isFeedbackFormVisible && <FeedbackFormModal onClose={onFeedbackFormClose} />}
450465
</div>
451-
{!isMinimalUI && !prebuildId && (
466+
{!isMinimalUI && !prebuildId && !isWorkspacesUI && (
452467
<nav className="flex">
453468
{leftMenu.map((entry: Entry) => (
454469
<TabMenuItem

‎components/dashboard/src/components/PillMenuItem.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,10 @@ export default function PillMenuItem(p: {
1313
onClick?: (event: React.MouseEvent) => void;
1414
}) {
1515
const classes =
16-
"flex block font-medium dark:text-gray-200 px-2 py-1 rounded-lg transition ease-in-out " +
17-
(p.selected ? "bg-gray-200 dark:bg-gray-700" : "text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800");
16+
"flex block font-medium dark:text-gray-400 px-3 py-1 rounded-2xl transition ease-in-out font-semibold " +
17+
(p.selected
18+
? "text-gray-50 bg-gray-800 dark:text-gray-900 dark:bg-gray-50"
19+
: "hover:bg-gray-100 dark:hover:bg-gray-700");
1820
return !p.link || p.link.startsWith("https://") ? (
1921
<a className={classes} href={p.link} onClick={p.onClick} data-analytics='{"button_type":"pill_menu"}'>
2022
{p.name}

‎components/dashboard/src/icons/CaretUpDown.svg

Lines changed: 0 additions & 3 deletions
This file was deleted.

0 commit comments

Comments
 (0)