improvement: design revisions and various overflow handling

frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx

@@ -1,12 +1,12 @@
 import {
   faBook,
   faCog,
-  faCubes,
   faDoorClosed,
   faInfinity,
   faMoneyBill,
   faPlug,
   faShare,
+  faTable,
   faUserCog,
   faUsers,
   faUserTie
@@ -56,7 +56,7 @@ export const OrgSidebar = ({ isHidden }: Props) => {
                       <MenuItem isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
-                            <FontAwesomeIcon icon={faCubes} />
+                            <FontAwesomeIcon icon={faTable} />
                           </div>
                           Projects
                         </div>

frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx

@@ -110,7 +110,7 @@ export const ProjectSelect = () => {
             <div>
               <FontAwesomeIcon icon={faTable} className="text-xs text-bunker-300" />
             </div>
-            <Tooltip content={currentWorkspace.name} className="max-w-96">
+            <Tooltip content={currentWorkspace.name} className="max-w-96 break-words">
               <div className="max-w-44 overflow-hidden text-ellipsis whitespace-nowrap">
                 {currentWorkspace?.name}
               </div>

frontend/src/pages/organization/ProjectsPage/components/AllProjectView.tsx

@@ -17,6 +17,7 @@ import { twMerge } from "tailwind-merge";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
+  Badge,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -26,6 +27,7 @@ import {
   FormControl,
   IconButton,
   Input,
+  Lottie,
   Modal,
   ModalContent,
   Pagination,
@@ -33,7 +35,7 @@ import {
   Tooltip
 } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
-import { getProjectHomePage, getProjectTitle } from "@app/helpers/project";
+import { getProjectHomePage, getProjectLottieIcon, getProjectTitle } from "@app/helpers/project";
 import {
   getUserTablePreference,
   PreferenceKey,
@@ -216,14 +218,17 @@ export const AllProjectView = ({
         </DropdownMenu>
         <div className="ml-2 flex rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
           <Tooltip content="Disabled across All Project view.">
-            <IconButton
+            <div className="flex cursor-not-allowed items-center justify-center">
-              variant="outline_bg"
+              <IconButton
-              ariaLabel="grid"
+                variant="outline_bg"
-              size="xs"
+                ariaLabel="grid"
-              className="min-w-[2.4rem] border-none bg-transparent hover:bg-mineshaft-600"
+                size="xs"
-            >
+                isDisabled
-              <FontAwesomeIcon icon={faBorderAll} />
+                className="pointer-events-none min-w-[2.4rem] border-none bg-transparent hover:bg-mineshaft-600"
-            </IconButton>
+              >
+                <FontAwesomeIcon icon={faBorderAll} />
+              </IconButton>
+            </div>
           </Tooltip>
           <IconButton
             variant="outline_bg"
@@ -238,7 +243,7 @@ export const AllProjectView = ({
           {(isAllowed) => (
             <Button
               isDisabled={!isAllowed}
-              colorSchema="primary"
+              colorSchema="secondary"
               leftIcon={<FontAwesomeIcon icon={faPlus} />}
               onClick={() => {
                 if (isAddingProjectsAllowed) {
@@ -295,39 +300,41 @@ export const AllProjectView = ({
               }}
               key={workspace.id}
               className={twMerge(
-                "group flex min-w-72 grid-cols-6 items-center justify-center border-l border-r border-t border-mineshaft-600 bg-mineshaft-800 px-6 py-3 first:rounded-t-md",
+                "group flex min-w-72 items-center justify-center border-l border-r border-t border-mineshaft-600 bg-mineshaft-800 px-6 py-3 first:rounded-t-md",
                 workspace.isMember ? "cursor-pointer hover:bg-mineshaft-700" : "cursor-default"
               )}
             >
-              <div className="w-full items-center">
+              <div className="mr-3 flex min-w-0 flex-1 items-center gap-3">
-                <div className="flex flex-grow items-center">
+                <div className="rounded border border-mineshaft-500 bg-mineshaft-600 p-1 shadow-inner">
-                  <div className="flex-grow truncate text-sm text-mineshaft-100">
+                  <Lottie
-                    {workspace.name}
+                    className="h-[1.35rem] w-[1.35rem] shrink-0"
-                  </div>
+                    icon={getProjectLottieIcon(workspace.type)}
-                  <div className="flex items-center">
+                  />
-                    {workspace.isMember ? (
-                      <div className="flex items-center text-center text-sm text-primary">
-                        <FontAwesomeIcon icon={faCheck} className="mr-2" />
-                        Joined
-                      </div>
-                    ) : (
-                      <div className="opacity-0 transition-all group-hover:opacity-100">
-                        <Button
-                          size="xs"
-                          variant="outline_bg"
-                          onClick={() => handlePopUpOpen("requestAccessConfirmation", workspace)}
-                        >
-                          Request Access
-                        </Button>
-                      </div>
-                    )}
-                  </div>
                 </div>
-                <div className="mt-1 max-w-lg overflow-hidden text-ellipsis whitespace-nowrap text-xs text-mineshaft-300">
+                <div className="-mt-0.5 flex min-w-0 flex-col">
-                  {getProjectTitle(workspace.type)}{" "}
+                  <p className="truncate text-sm text-mineshaft-100">{workspace.name}</p>
-                  {workspace.description ? `- ${workspace.description}` : ""}
+                  <p className="truncate text-xs leading-4 text-mineshaft-300">
+                    {getProjectTitle(workspace.type)}{" "}
+                    {workspace.description ? `- ${workspace.description}` : ""}
+                  </p>
                 </div>
               </div>
+              {workspace.isMember ? (
+                <Badge className="flex items-center" variant="success">
+                  <FontAwesomeIcon icon={faCheck} className="mr-1" />
+                  <span>Joined</span>
+                </Badge>
+              ) : (
+                <div className="opacity-0 transition-all group-hover:opacity-100">
+                  <Button
+                    size="xs"
+                    variant="outline_bg"
+                    onClick={() => handlePopUpOpen("requestAccessConfirmation", workspace)}
+                  >
+                    Request Access
+                  </Button>
+                </div>
+              )}
             </div>
           ))}
       </div>

frontend/src/pages/organization/ProjectsPage/components/MyProjectView.tsx

@@ -192,47 +192,46 @@ export const MyProjectView = ({
         });
       }}
       key={workspace.id}
-      className="relative flex h-36 min-w-72 cursor-pointer flex-col rounded-md border border-mineshaft-500 bg-mineshaft-800 p-4 transition-all hover:border-mineshaft-400"
+      className="cursor-pointer overflow-clip rounded border border-l-[4px] border-mineshaft-600 border-l-mineshaft-400 bg-mineshaft-800 p-4 transition-transform duration-100 hover:scale-[103%] hover:border-l-primary hover:bg-mineshaft-700"
     >
       <div className="flex items-center gap-4">
-        <div className="h-12 w-12 rounded bg-mineshaft-600 p-2">
+        <div className="rounded border border-mineshaft-500 bg-mineshaft-600 p-1.5 shadow-inner">
-          <Lottie icon={getProjectLottieIcon(workspace.type)} className="h-full w-full" />
+          <Lottie
+            className="h-[1.75rem] w-[1.75rem] shrink-0"
+            icon={getProjectLottieIcon(workspace.type)}
+          />
         </div>
-        <div className="flex-1">
+        <div className="min-w-0 flex-1">
-          <div className="flex">
+          <p className="truncate text-lg font-semibold text-mineshaft-100">{workspace.name}</p>
-            <div className="flex-1 text-lg font-semibold text-mineshaft-100">
+          <p className="truncate text-sm leading-4 text-mineshaft-300">
-              <div className="max-w-72 truncate">{workspace.name}</div>
-            </div>
-            <div className="flex-shrink-0">
-              {isFavorite ? (
-                <FontAwesomeIcon
-                  icon={faSolidStar}
-                  className="text-sm text-yellow-600 hover:text-mineshaft-400"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    removeProjectFromFavorites(workspace.id);
-                  }}
-                />
-              ) : (
-                <FontAwesomeIcon
-                  icon={faStar}
-                  className="text-sm text-mineshaft-400 hover:text-mineshaft-300"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    addProjectToFavorites(workspace.id);
-                  }}
-                />
-              )}
-            </div>
-          </div>
-          <div className="truncate text-sm text-mineshaft-300">
             {getProjectTitle(workspace.type)}
-          </div>
+          </p>
+        </div>
+        <div className="mt-0.5 self-start">
+          {isFavorite ? (
+            <FontAwesomeIcon
+              icon={faSolidStar}
+              className="text-sm text-yellow-600 hover:text-mineshaft-400"
+              onClick={(e) => {
+                e.stopPropagation();
+                removeProjectFromFavorites(workspace.id);
+              }}
+            />
+          ) : (
+            <FontAwesomeIcon
+              icon={faStar}
+              className="text-sm text-mineshaft-400 hover:text-mineshaft-300"
+              onClick={(e) => {
+                e.stopPropagation();
+                addProjectToFavorites(workspace.id);
+              }}
+            />
+          )}
         </div>
       </div>
-      <div className="mt-4 truncate text-sm text-mineshaft-400">
+      <p className="mt-4 truncate text-sm text-mineshaft-400">
         {workspace.description || "No description"}
-      </div>
+      </p>
     </div>
   );
   const renderProjectListItem = (workspace: Workspace, isFavorite: boolean, index: number) => (
@@ -247,18 +246,26 @@ export const MyProjectView = ({
         });
       }}
       key={workspace.id}
-      className={`group grid h-16 min-w-72 cursor-pointer grid-cols-6 border-l border-r border-t border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700 ${
+      className={`group flex min-w-72 cursor-pointer border-l border-r border-t border-mineshaft-600 bg-mineshaft-800 px-6 py-3 hover:bg-mineshaft-700 ${
         index === 0 && "rounded-t-md"
       }`}
     >
-      <div className="flex flex-col justify-center sm:col-span-3 lg:col-span-4">
+      <div className="flex min-w-0 flex-1 items-center gap-3">
-        <div className="truncate text-sm text-mineshaft-100">{workspace.name}</div>
+        <div className="rounded border border-mineshaft-500 bg-mineshaft-600 p-1 shadow-inner">
-        <div className="mt-1 text-xs text-mineshaft-300">
+          <Lottie
-          {getProjectTitle(workspace.type)}{" "}
+            className="h-[1.35rem] w-[1.35rem] shrink-0"
-          {workspace.description ? `- ${workspace.description}` : ""}
+            icon={getProjectLottieIcon(workspace.type)}
+          />
+        </div>
+        <div className="-mt-0.5 flex min-w-0 flex-col">
+          <p className="truncate text-sm text-mineshaft-100">{workspace.name}</p>
+          <p className="truncate text-xs leading-4 text-mineshaft-300">
+            {getProjectTitle(workspace.type)}{" "}
+            {workspace.description ? `- ${workspace.description}` : ""}
+          </p>
         </div>
       </div>
-      <div className="flex items-center justify-end sm:col-span-3 lg:col-span-2">
+      <div className="flex items-center justify-end">
         {isFavorite ? (
           <FontAwesomeIcon
             icon={faSolidStar}
@@ -287,7 +294,7 @@ export const MyProjectView = ({
     switch (projectsViewMode) {
       case ProjectsViewMode.GRID:
         projectsComponents = (
-          <div className="mt-4 grid w-full grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3">
+          <div className="mt-4 grid w-full grid-cols-1 gap-5 lg:grid-cols-2 xl:grid-cols-3">
             {isProjectViewLoading &&
               Array.apply(0, Array(3)).map((_x, i) => (
                 <div
@@ -349,7 +356,18 @@ export const MyProjectView = ({
         <div className="text-center font-light">No projects match search...</div>
       </div>
     );
+  } else if (filteredWorkspaces.length === 0) {
+    projectsComponents = (
+      <div className="mt-4 w-full rounded-md border border-mineshaft-700 bg-mineshaft-800 px-4 py-6 text-base text-mineshaft-300">
+        <FontAwesomeIcon
+          icon={faSearch}
+          className="mb-4 mt-2 w-full text-center text-5xl text-mineshaft-400"
+        />
+        <div className="text-center font-light">No projects match filters...</div>
+      </div>
+    );
   }
+
   return (
     <div>
       <div className="flex w-full flex-row">
@@ -457,7 +475,7 @@ export const MyProjectView = ({
           {(isAllowed) => (
             <Button
               isDisabled={!isAllowed}
-              colorSchema="primary"
+              colorSchema="secondary"
               leftIcon={<FontAwesomeIcon icon={faPlus} />}
               onClick={() => {
                 if (isAddingProjectsAllowed) {

frontend/src/pages/organization/ProjectsPage/components/ProjectListToggle.tsx

@@ -27,7 +27,7 @@ export const ProjectListToggle = ({ value, onChange }: Props) => {
         value={value}
         onValueChange={onChange}
         className="absolute left-0 top-0 h-full w-full cursor-pointer opacity-0"
-        dropdownContainerClassName="mt-10 ml-5"
+        position="popper"
       >
         <SelectItem value={ProjectListView.MyProjects}>My Projects</SelectItem>
         <SelectItem value={ProjectListView.AllProjects}>All Projects</SelectItem>

frontend/src/pages/secret-manager/OverviewPage/components/utils/index.ts

@@ -1,6 +1,6 @@
 export const getExpandedRowStyle = (scrollOffset: number) => ({
   marginLeft: scrollOffset,
-  width: "calc(100vw - 355px)", // 350px accounts for sidebar and margin
+  width: "calc(100vw - 275px)", // accounts for sidebar and margin
   maxWidth: "1270px" // largest width of table on ultra-wide
 });