From 6ed143226bffdf66e4513373a087b96ff7eab454 Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Fri, 27 May 2022 17:44:04 +0000
Subject: [PATCH] Update dashboard navigation

---
 components/dashboard/src/Menu.tsx             | 128 +++++++++++-------
 .../dashboard/src/components/PillMenuItem.tsx |   6 +-
 .../dashboard/src/icons/CaretUpDown.svg       |   3 -
 3 files changed, 81 insertions(+), 56 deletions(-)
 delete mode 100644 components/dashboard/src/icons/CaretUpDown.svg

diff --git a/components/dashboard/src/Menu.tsx b/components/dashboard/src/Menu.tsx
index 2d7207fb3529ab..8e926a6743814e 100644
--- a/components/dashboard/src/Menu.tsx
+++ b/components/dashboard/src/Menu.tsx
@@ -11,8 +11,6 @@ import { useLocation, useRouteMatch } from "react-router";
 import { Location } from "history";
 import { countries } from "countries-list";
 import gitpodIcon from "./icons/gitpod.svg";
-import CaretDown from "./icons/CaretDown.svg";
-import CaretUpDown from "./icons/CaretUpDown.svg";
 import { getGitpodService, gitpodHostUrl } from "./service/service";
 import { UserContext } from "./user-context";
 import { TeamsContext, getCurrentTeam } from "./teams/teams-context";
@@ -108,6 +106,8 @@ export default function Menu() {
 
     // Hide most of the top menu when in a full-page form.
     const isMinimalUI = ["/new", "/teams/new", "/open"].includes(location.pathname);
+    const isWorkspacesUI = ["/workspaces"].includes(location.pathname);
+    const isAdminUI = window.location.pathname.startsWith("/admin");
 
     const [teamMembers, setTeamMembers] = useState<Record<string, TeamMemberInfo[]>>({});
     useEffect(() => {
@@ -228,11 +228,6 @@ export default function Menu() {
         }
         // User menu
         return [
-            {
-                title: "Workspaces",
-                link: "/workspaces",
-                alternatives: ["/"],
-            },
             {
                 title: "Projects",
                 link: "/projects",
@@ -255,8 +250,9 @@ export default function Menu() {
               ]
             : []),
         {
-            title: "Docs",
-            link: "https://www.gitpod.io/docs/",
+            title: "Workspaces",
+            link: "/workspaces",
+            alternatives: ["/"],
         },
     ];
 
@@ -268,25 +264,39 @@ export default function Menu() {
         setFeedbackFormVisible(false);
     };
     const renderTeamMenu = () => {
+        const classes =
+            "flex h-full text-base py-0 " +
+            (!projectSlug && !isWorkspacesUI && !isAdminUI && teamOrUserSlug
+                ? "text-gray-50 bg-gray-800 dark:text-gray-900 dark:bg-gray-50 border-gray-700"
+                : "text-gray-500 bg-gray-50 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700  dark:border-gray-700");
         return (
-            <div className="flex p-1 pl-3 ">
+            <div className="flex p-1 pl-3">
                 {projectSlug && (
-                    <div className="flex h-full rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 px-2 py-1">
-                        <Link to={team ? `/t/${team.slug}/projects` : `/projects`}>
-                            <span className="text-base text-gray-600 dark:text-gray-400 font-semibold">
-                                {team?.name || userFullName}
-                            </span>
-                        </Link>
-                    </div>
+                    <Link to={team ? `/t/${team.slug}/projects` : `/projects`}>
+                        <span
+                            className={`${classes} rounded-tl-2xl rounded-bl-2xl  dark:border-gray-700 border-r pl-3 pr-2 py-1 bg-gray-50  font-semibold`}
+                        >
+                            {team?.name || userFullName}
+                        </span>
+                    </Link>
                 )}
-                <div className="flex h-full rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
+                {!projectSlug && (
+                    <Link to={team ? `/t/${team.slug}/projects` : `/projects`}>
+                        <span
+                            className={`${classes} rounded-tl-2xl rounded-bl-2xl  dark:border-gray-200 border-r pl-3 pr-2 py-1 bg-gray-50  font-semibold`}
+                        >
+                            {team?.name || userFullName}
+                        </span>
+                    </Link>
+                )}
+                <div className={`${classes} rounded-tr-2xl rounded-br-2xl dark:border-gray-700  px-1 bg-gray-50`}>
                     <ContextMenu
                         customClasses="w-64 left-0"
                         menuEntries={[
                             {
                                 title: userFullName,
                                 customContent: (
-                                    <div className="w-full text-gray-400 flex flex-col">
+                                    <div className="w-full text-gray-500 flex flex-col">
                                         <span className="text-gray-800 dark:text-gray-100 text-base font-semibold">
                                             {userFullName}
                                         </span>
@@ -295,7 +305,7 @@ export default function Menu() {
                                 ),
                                 active: !team,
                                 separator: true,
-                                link: "/",
+                                link: "/projects",
                             },
                             ...(teams || [])
                                 .map((t) => ({
@@ -343,35 +353,50 @@ export default function Menu() {
                             },
                         ]}
                     >
-                        <div className="flex h-full px-2 py-1 space-x-3.5">
-                            {!projectSlug && (
-                                <span className="text-base text-gray-600 dark:text-gray-400 font-semibold">
-                                    {team?.name || userFullName}
-                                </span>
-                            )}
-                            <img
-                                alt=""
-                                aria-label="Toggle team selection menu"
-                                className="filter-grayscale"
-                                style={{ marginTop: 5, marginBottom: 5 }}
-                                src={CaretUpDown}
-                            />
+                        <div className="flex h-full pl-0 pr-1 py-1.5 text-gray-50">
+                            <svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    fill-rule="evenodd"
+                                    clip-rule="evenodd"
+                                    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"
+                                    fill="#78716C"
+                                />
+                                <title>Toggle team selection menu</title>
+                            </svg>
                         </div>
                     </ContextMenu>
                 </div>
-                {projectSlug && (
-                    <div className="flex h-full rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 px-2 py-1">
-                        <Link to={`${teamOrUserSlug}/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
-                            <span className="text-base text-gray-600 dark:text-gray-400 font-semibold">
-                                {project?.name}
-                            </span>
-                        </Link>
-                    </div>
+                {projectSlug && !prebuildId && !isAdminUI && (
+                    <Link to={`${teamOrUserSlug}/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
+                        <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">
+                            {project?.name}
+                        </span>
+                    </Link>
                 )}
                 {prebuildId && (
-                    <div className="flex h-full ml-2 py-1">
-                        <img alt="" className="mr-3 filter-grayscale m-auto transform -rotate-90" src={CaretDown} />
-                        <span className="text-base text-gray-600 dark:text-gray-400 font-semibold">{prebuildId}</span>
+                    <Link to={`${teamOrUserSlug}/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
+                        <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">
+                            {project?.name}
+                        </span>
+                    </Link>
+                )}
+                {prebuildId && (
+                    <div className="flex ml-2">
+                        <div className="flex pl-0 pr-1 py-1.5">
+                            <svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    fill-rule="evenodd"
+                                    clip-rule="evenodd"
+                                    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"
+                                    fill="#78716C"
+                                />
+                            </svg>
+                        </div>
+                        <Link to={`${teamOrUserSlug}/${projectSlug}/${prebuildId}`}>
+                            <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">
+                                {prebuildId.substring(0, 8).trimEnd()}
+                            </span>
+                        </Link>
                     </div>
                 )}
             </div>
@@ -380,11 +405,8 @@ export default function Menu() {
 
     return (
         <>
-            <header
-                className={`app-container flex flex-col pt-4 space-y-4 ${isMinimalUI || !!prebuildId ? "pb-4" : ""}`}
-                data-analytics='{"button_type":"menu"}'
-            >
-                <div className="flex h-10">
+            <header className="app-container flex flex-col pt-4 space-y-4" data-analytics='{"button_type":"menu"}'>
+                <div className="flex h-10 mb-3">
                     <div className="flex justify-between items-center pr-3">
                         <Link to="/">
                             <img src={gitpodIcon} className="h-6" alt="Gitpod's logo" />
@@ -393,7 +415,7 @@ export default function Menu() {
                     </div>
                     <div className="flex flex-1 items-center w-auto" id="menu">
                         <nav className="flex-1">
-                            <ul className="flex flex-1 items-center justify-between text-base text-gray-700 space-x-2">
+                            <ul className="flex flex-1 items-center justify-between text-base text-gray-500 dark:text-gray-400 space-x-2">
                                 <li className="flex-1"></li>
                                 {!isMinimalUI &&
                                     rightMenu.map((entry) => (
@@ -427,6 +449,10 @@ export default function Menu() {
                                         title: "Settings",
                                         link: "/settings",
                                     },
+                                    {
+                                        title: "Docs",
+                                        link: "https://www.gitpod.io/docs/",
+                                    },
                                     {
                                         title: "Help",
                                         href: "https://www.gitpod.io/support",
@@ -448,7 +474,7 @@ export default function Menu() {
                     </div>
                     {isFeedbackFormVisible && <FeedbackFormModal onClose={onFeedbackFormClose} />}
                 </div>
-                {!isMinimalUI && !prebuildId && (
+                {!isMinimalUI && !prebuildId && !isWorkspacesUI && !isAdminUI && (
                     <nav className="flex">
                         {leftMenu.map((entry: Entry) => (
                             <TabMenuItem
diff --git a/components/dashboard/src/components/PillMenuItem.tsx b/components/dashboard/src/components/PillMenuItem.tsx
index 5616b9cd63316f..27e0e572c3c809 100644
--- a/components/dashboard/src/components/PillMenuItem.tsx
+++ b/components/dashboard/src/components/PillMenuItem.tsx
@@ -13,8 +13,10 @@ export default function PillMenuItem(p: {
     onClick?: (event: React.MouseEvent) => void;
 }) {
     const classes =
-        "flex block font-medium dark:text-gray-200 px-2 py-1 rounded-lg transition ease-in-out " +
-        (p.selected ? "bg-gray-200 dark:bg-gray-700" : "text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800");
+        "flex block font-medium dark:text-gray-400 px-3 py-1 rounded-2xl transition ease-in-out font-semibold " +
+        (p.selected
+            ? "text-gray-50 bg-gray-800 dark:text-gray-900 dark:bg-gray-50"
+            : "hover:bg-gray-100 dark:hover:bg-gray-700");
     return !p.link || p.link.startsWith("https://") ? (
         <a className={classes} href={p.link} onClick={p.onClick} data-analytics='{"button_type":"pill_menu"}'>
             {p.name}
diff --git a/components/dashboard/src/icons/CaretUpDown.svg b/components/dashboard/src/icons/CaretUpDown.svg
deleted file mode 100644
index ececdc543c2a45..00000000000000
--- a/components/dashboard/src/icons/CaretUpDown.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z" fill="#57534E"/>
-</svg>