Skip to content

Commit 2f897ee

Browse files
gtsiolisgtsiolis
committed
Update dashboard navigation
1 parent 1792902 commit 2f897ee

File tree

3 files changed

+70
-55
lines changed

3 files changed

+70
-55
lines changed

‎components/dashboard/src/Menu.tsx

Lines changed: 66 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,9 @@ export default function Menu() {
255249
]
256250
: []),
257251
{
258-
title: "Docs",
259-
link: "https://www.gitpod.io/docs/",
252+
title: "Workspaces",
253+
link: "/workspaces",
254+
alternatives: ["/"],
260255
},
261256
];
262257

@@ -269,24 +264,29 @@ export default function Menu() {
269264
};
270265
const renderTeamMenu = () => {
271266
return (
272-
<div className="flex p-1 pl-3 ">
267+
<div className="flex p-1 pl-3">
273268
{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>
269+
<Link to={team ? `/t/${team.slug}/projects` : `/projects`}>
270+
<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">
271+
{team?.name || userFullName}
272+
</span>
273+
</Link>
281274
)}
282-
<div className="flex h-full rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
275+
{!projectSlug && (
276+
<Link to="/projects">
277+
<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">
278+
{team?.name || userFullName}
279+
</span>
280+
</Link>
281+
)}
282+
<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">
283283
<ContextMenu
284284
classes="w-64 left-0"
285285
menuEntries={[
286286
{
287287
title: userFullName,
288288
customContent: (
289-
<div className="w-full text-gray-400 flex flex-col">
289+
<div className="w-full text-gray-500 flex flex-col">
290290
<span className="text-gray-800 dark:text-gray-100 text-base font-semibold">
291291
{userFullName}
292292
</span>
@@ -343,35 +343,50 @@ export default function Menu() {
343343
},
344344
]}
345345
>
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-
/>
346+
<div className="flex h-full pl-0 pr-1 py-1.5 text-gray-50">
347+
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
348+
<path
349+
fill-rule="evenodd"
350+
clip-rule="evenodd"
351+
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"
352+
fill="#78716C"
353+
/>
354+
<title>Toggle team selection menu</title>
355+
</svg>
359356
</div>
360357
</ContextMenu>
361358
</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>
359+
{projectSlug && !prebuildId && (
360+
<Link to={`${teamOrUserSlug}/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
361+
<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">
362+
{project?.name}
363+
</span>
364+
</Link>
370365
)}
371366
{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>
367+
<Link to={`${teamOrUserSlug}/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
368+
<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">
369+
{project?.name}
370+
</span>
371+
</Link>
372+
)}
373+
{prebuildId && (
374+
<div className="flex ml-2">
375+
<div className="flex pl-0 pr-1 py-1.5">
376+
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
377+
<path
378+
fill-rule="evenodd"
379+
clip-rule="evenodd"
380+
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"
381+
fill="#78716C"
382+
/>
383+
</svg>
384+
</div>
385+
<Link to={`${teamOrUserSlug}/${projectSlug}/${prebuildId}`}>
386+
<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">
387+
{prebuildId.substring(0, 8).trimEnd()}
388+
</span>
389+
</Link>
375390
</div>
376391
)}
377392
</div>
@@ -380,11 +395,8 @@ export default function Menu() {
380395

381396
return (
382397
<>
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">
398+
<header className="app-container flex flex-col pt-4 space-y-4" data-analytics='{"button_type":"menu"}'>
399+
<div className="flex h-10 mb-3">
388400
<div className="flex justify-between items-center pr-3">
389401
<Link to="/">
390402
<img src={gitpodIcon} className="h-6" alt="Gitpod's logo" />
@@ -393,7 +405,7 @@ export default function Menu() {
393405
</div>
394406
<div className="flex flex-1 items-center w-auto" id="menu">
395407
<nav className="flex-1">
396-
<ul className="flex flex-1 items-center justify-between text-base text-gray-700 space-x-2">
408+
<ul className="flex flex-1 items-center justify-between text-base text-gray-500 dark:text-gray-400 space-x-2">
397409
<li className="flex-1"></li>
398410
{!isMinimalUI &&
399411
rightMenu.map((entry) => (
@@ -427,6 +439,10 @@ export default function Menu() {
427439
title: "Settings",
428440
link: "/settings",
429441
},
442+
{
443+
title: "Docs",
444+
link: "https://www.gitpod.io/docs/",
445+
},
430446
{
431447
title: "Help",
432448
href: "https://www.gitpod.io/support",
@@ -448,7 +464,7 @@ export default function Menu() {
448464
</div>
449465
{isFeedbackFormVisible && <FeedbackFormModal onClose={onFeedbackFormClose} />}
450466
</div>
451-
{!isMinimalUI && !prebuildId && (
467+
{!isMinimalUI && !prebuildId && !isWorkspacesUI && (
452468
<nav className="flex">
453469
{leftMenu.map((entry: Entry) => (
454470
<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)