Update top navigation menu style

Author: gtsiolis

components/dashboard/src/components/PillMenuItem.tsx

@@ -14,9 +14,9 @@ export default function PillMenuItem(p: {
     onClick?: (event: React.MouseEvent) => void;
 }) {
     let classes =
-        "flex block font-medium dark:text-gray-400 px-3 py-1 rounded-2xl transition ease-in-out font-semibold " +
+        "flex block font-medium dark:text-gray-400 px-3 py-1 rounded-2xl transition ease-in-out " +
         (p.selected
-            ? "text-gray-50 bg-gray-800 dark:text-gray-900 dark:bg-gray-50"
+            ? "text-gray-500 bg-gray-50 dark:text-gray-100 dark:bg-gray-700"
             : "hover:bg-gray-100 dark:hover:bg-gray-700");
     if (p.additionalClasses) {
         classes = classes + " " + p.additionalClasses;

components/dashboard/src/menu/Menu.tsx

@@ -88,7 +88,7 @@ export default function Menu() {
                             <img src={gitpodIcon} className="h-6" alt="Gitpod's logo" />
                         </Link>
                         <OrganizationSelector />
-                        <div className="pl-2 text-base text-gray-500 dark:text-gray-400 flex max-w-lg overflow-hidden">
+                        <div className="pl-1 text-base text-gray-500 dark:text-gray-400 flex max-w-lg overflow-hidden">
                             {leftMenu.map((entry) => (
                                 <div className="p-1" key={entry.title}>
                                     <PillMenuItem

components/dashboard/src/menu/OrganizationSelector.tsx

@@ -186,11 +186,11 @@ export default function OrganizationSelector(p: OrganizationSelectorProps) {
 
     const selectedTitle = currentOrg ? currentOrg.name : userFullName;
     const classes =
-        "flex h-full text-base py-0 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";
+        "flex h-full text-base py-0 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700";
     return (
         <ContextMenu customClasses="w-64 left-0" menuEntries={entries}>
             <div className={`${classes} rounded-2xl pl-1`}>
-                <div className="py-1 pr-1 flex font-semibold whitespace-nowrap max-w-xs overflow-hidden">
+                <div className="py-1 pr-1 flex font-medium whitespace-nowrap max-w-xs overflow-hidden">
                     <OrgIcon
                         id={currentOrg?.id || user?.id || "empty"}
                         name={selectedTitle}