From d3aeb729e081880b7c114563816dc38901c2292c Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Wed, 12 Jul 2023 11:18:42 -0700
Subject: [PATCH] fixing ui/ux bugs

---
 frontend/src/layouts/AppLayout/AppLayout.tsx  | 152 ++++++++++--------
 .../src/pages/org/[id]/overview/index.tsx     | 135 +++++++++++-----
 2 files changed, 181 insertions(+), 106 deletions(-)

diff --git a/frontend/src/layouts/AppLayout/AppLayout.tsx b/frontend/src/layouts/AppLayout/AppLayout.tsx
index 586f171f4..0f5050554 100644
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -163,7 +163,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
       if (currentOrg && (
         (workspaces?.length === 0 && router.asPath.includes("project")) 
         || router.asPath.includes("/project/undefined")
-        || (!orgs?.map(org => org._id)?.includes(router.query.id) && !router.asPath.includes("project") && !router.asPath.includes("integration"))
+        || (!orgs?.map(org => org._id)?.includes(router.query.id) && !router.asPath.includes("project") && !router.asPath.includes("personal") && !router.asPath.includes("integration"))
       )) {
         router.push(`/org/${currentOrg?._id}/overview`);
       } 
@@ -259,7 +259,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                         <div className="pl-3 text-mineshaft-100 text-sm">{currentOrg?.name} <FontAwesomeIcon icon={faAngleDown} className="text-xs pl-1 pt-1 text-mineshaft-300" /></div>
                       </div>
                     </DropdownMenuTrigger>
-                    <DropdownMenuContent align="start" className="">
+                    <DropdownMenuContent align="start" className="p-1">
                       <div className="text-xs text-mineshaft-400 px-2 py-1">{user?.email}</div>
                       {orgs?.map(org => <DropdownMenuItem key={org._id}>
                           <Button
@@ -267,7 +267,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                             variant="plain"
                             colorSchema="secondary"
                             size="xs"
-                            className="w-full flex items-center justify-start"
+                            className="w-full flex items-center justify-start p-0 font-normal"
                             leftIcon={currentOrg._id === org._id && <FontAwesomeIcon icon={faCheck} className="mr-3 text-primary"/>}
                           >
                             <div className="w-full flex justify-between items-center">{org.name}</div>
@@ -285,8 +285,8 @@ export const AppLayout = ({ children }: LayoutProps) => {
                     </DropdownMenuContent>
                   </DropdownMenu>
                   <DropdownMenu>
-                    <DropdownMenuTrigger asChild className="data-[state=open]:bg-mineshaft-600 p-1">
-                      <div className="w-6 h-6 rounded-full bg-mineshaft hover:bg-mineshaft-400 pr-1 text-xs text-mineshaft-300 flex justify-center">
+                    <DropdownMenuTrigger asChild className="hover:bg-primary-400 hover:text-black data-[state=open]:text-black data-[state=open]:bg-primary-400 p-1">
+                      <div className="child w-6 h-6 rounded-full bg-mineshaft hover:bg-mineshaft-500 pr-1 text-xs text-mineshaft-300 flex justify-center items-center">
                         {user?.firstName?.charAt(0)}{user?.lastName && user?.lastName?.charAt(0)}
                       </div>
                     </DropdownMenuTrigger>
@@ -369,64 +369,76 @@ export const AppLayout = ({ children }: LayoutProps) => {
                       </div>
                     </Select>
                   </div>
-                ) : <div className="pr-2 my-6 flex justify-center items-center text-mineshaft-300 hover:text-mineshaft-100 cursor-default text-sm">
+                ) : <Link href={`/org/${currentOrg?._id}/overview`}><div className="pr-2 my-6 flex justify-center items-center text-mineshaft-300 hover:text-mineshaft-100 cursor-default text-sm">
                   <FontAwesomeIcon icon={faArrowLeft} className="pr-3"/>
-                  <Link href={`/org/${currentOrg?._id}/overview`}>Back to organization</Link>
-                </div>)}
+                  Back to organization
+                </div></Link>)}
                 <div className={`px-1 ${!router.asPath.includes("personal") ? "block" : "hidden"}`}>
                   {((router.asPath.includes("project") || router.asPath.includes("integrations")) && currentWorkspace) ? <Menu>
                     <Link href={`/project/${currentWorkspace?._id}/secrets`} passHref>
-                      <MenuItem
-                        isSelected={router.asPath.includes(`/project/${currentWorkspace?._id}/secrets`)}
-                        icon="system-outline-90-lock-closed"
-                      >
-                        {t("nav.menu.secrets")}
-                      </MenuItem>
+                      <a>
+                        <MenuItem
+                          isSelected={router.asPath.includes(`/project/${currentWorkspace?._id}/secrets`)}
+                          icon="system-outline-90-lock-closed"
+                        >
+                          {t("nav.menu.secrets")}
+                        </MenuItem>
+                      </a>
                     </Link>
                     <Link href={`/project/${currentWorkspace?._id}/members`} passHref>
-                      <MenuItem
-                        isSelected={router.asPath === `/project/${currentWorkspace?._id}/members`}
-                        icon="system-outline-96-groups"
-                      >
-                        {t("nav.menu.members")}
-                      </MenuItem>
+                      <a>
+                        <MenuItem
+                          isSelected={router.asPath === `/project/${currentWorkspace?._id}/members`}
+                          icon="system-outline-96-groups"
+                        >
+                          {t("nav.menu.members")}
+                        </MenuItem>
+                      </a>
                     </Link>
                     <Link href={`/integrations/${currentWorkspace?._id}`} passHref>
-                      <MenuItem
-                        isSelected={router.asPath === `/integrations/${currentWorkspace?._id}`}
-                        icon="system-outline-82-extension"
-                      >
-                        {t("nav.menu.integrations")}
-                      </MenuItem>
+                      <a>
+                        <MenuItem
+                          isSelected={router.asPath === `/integrations/${currentWorkspace?._id}`}
+                          icon="system-outline-82-extension"
+                        >
+                          {t("nav.menu.integrations")}
+                        </MenuItem>
+                      </a>
                     </Link>
                     <Link href={`/project/${currentWorkspace?._id}/audit-logs`} passHref>
-                      <MenuItem
-                        isSelected={router.asPath === `/project/${currentWorkspace?._id}/audit-logs`}
-                        // icon={<FontAwesomeIcon icon={faFileLines} size="lg" />}
-                        icon="system-outline-168-view-headline"
-                      >
-                        Audit Logs
-                      </MenuItem>
+                      <a>
+                        <MenuItem
+                          isSelected={router.asPath === `/project/${currentWorkspace?._id}/audit-logs`}
+                          // icon={<FontAwesomeIcon icon={faFileLines} size="lg" />}
+                          icon="system-outline-168-view-headline"
+                        >
+                          Audit Logs
+                        </MenuItem>
+                      </a>
                     </Link>
                     <Link href={`/project/${currentWorkspace?._id}/settings`} passHref>
-                      <MenuItem
-                        isSelected={
-                          router.asPath === `/project/${currentWorkspace?._id}/settings`
-                        }
-                        icon="system-outline-109-slider-toggle-settings"
-                      >
-                        {t("nav.menu.project-settings")}
-                      </MenuItem>
+                      <a>
+                        <MenuItem
+                          isSelected={
+                            router.asPath === `/project/${currentWorkspace?._id}/settings`
+                          }
+                          icon="system-outline-109-slider-toggle-settings"
+                        >
+                          {t("nav.menu.project-settings")}
+                        </MenuItem>
+                      </a>
                     </Link>
                   </Menu>
                   : <Menu className="mt-4">
                       <Link href={`/org/${currentOrg?._id}/overview`} passHref>
-                        <MenuItem
-                          isSelected={router.asPath.includes("/overview")}
-                          icon="system-outline-165-view-carousel"
-                        >
-                          Overview
-                        </MenuItem>
+                        <a>
+                          <MenuItem
+                            isSelected={router.asPath.includes("/overview")}
+                            icon="system-outline-165-view-carousel"
+                          >
+                            Overview
+                          </MenuItem>
+                        </a>
                       </Link>
                       {/* {workspaces.map(project => <Link key={project._id} href={`/project/${project?._id}/secrets`} passHref>
                         <a>
@@ -442,30 +454,36 @@ export const AppLayout = ({ children }: LayoutProps) => {
                         </div>
                       </Link>)} */}
                       <Link href={`/org/${currentOrg?._id}/members`} passHref>
-                        <MenuItem
-                          isSelected={router.asPath === `/org/${currentOrg?._id}/members`}
-                          icon="system-outline-96-groups"
-                        >
-                          Members
-                        </MenuItem>
+                        <a>
+                          <MenuItem
+                            isSelected={router.asPath === `/org/${currentOrg?._id}/members`}
+                            icon="system-outline-96-groups"
+                          >
+                            Members
+                          </MenuItem>
+                        </a>
                       </Link>
                       <Link href={`/org/${currentOrg?._id}/billing`} passHref>
-                        <MenuItem
-                          isSelected={router.asPath === `/org/${currentOrg?._id}/billing`}
-                          icon="system-outline-103-coin-cash-monetization"
-                        >
-                          Usage & Billing
-                        </MenuItem>
+                        <a>
+                          <MenuItem
+                            isSelected={router.asPath === `/org/${currentOrg?._id}/billing`}
+                            icon="system-outline-103-coin-cash-monetization"
+                          >
+                            Usage & Billing
+                          </MenuItem>
+                        </a>
                       </Link>
                       <Link href={`/org/${currentOrg?._id}/settings`} passHref>
-                        <MenuItem
-                          isSelected={
-                            router.asPath === `/org/${currentOrg?._id}/settings`
-                          }
-                          icon="system-outline-109-slider-toggle-settings"
-                        >
-                          Organization Settings
-                        </MenuItem>
+                        <a>
+                          <MenuItem
+                            isSelected={
+                              router.asPath === `/org/${currentOrg?._id}/settings`
+                            }
+                            icon="system-outline-109-slider-toggle-settings"
+                          >
+                            Organization Settings
+                          </MenuItem>
+                        </a>
                       </Link>
                   </Menu>}
                 </div>
diff --git a/frontend/src/pages/org/[id]/overview/index.tsx b/frontend/src/pages/org/[id]/overview/index.tsx
index 6d4f5341d..22f58cb42 100644
--- a/frontend/src/pages/org/[id]/overview/index.tsx
+++ b/frontend/src/pages/org/[id]/overview/index.tsx
@@ -133,6 +133,61 @@ const learningItem = ({
   );
 };
 
+const learningItemSquare = ({
+  text,
+  subText,
+  complete,
+  icon,
+  time,
+  userAction,
+  link
+}: ItemProps): JSX.Element => {
+  return (
+    <a
+      target={`${link?.includes("https") ? "_blank" : "_self"}`}
+      rel="noopener noreferrer"
+      className={`w-full ${complete && "opacity-30 duration-200 hover:opacity-100"}`}
+      href={link}
+    >
+      <div className={`${complete ? "bg-gradient-to-r from-primary-500/70 p-[0.07rem]" : ""} rounded-md w-full`}>
+        <div
+          onKeyDown={() => null}
+          role="button"
+          tabIndex={0}
+          onClick={async () => {
+            if (userAction && userAction !== "first_time_secrets_pushed") {
+              await registerUserAction({
+                action: userAction
+              });
+            }
+          }}
+          className={`group relative flex w-full items-center justify-between overflow-hidden rounded-md border ${complete? "bg-gradient-to-r from-[#0e1f01] to-mineshaft-700 border-mineshaft-900 cursor-default" : "bg-mineshaft-800 hover:bg-mineshaft-700 border-mineshaft-600 shadow-xl cursor-pointer"} duration-200 text-mineshaft-100`}
+        >
+          <div className="flex flex-col items-center w-full px-6 py-4">
+            <div className="flex flex-row items-start justify-between w-full">
+              <FontAwesomeIcon icon={icon} className="w-16 text-5xl text-mineshaft-200 group-hover:text-mineshaft-100 duration-100 pt-2" />
+              {complete && (
+                <div className="absolute left-14 top-12 flex h-7 w-7 items-center justify-center rounded-full bg-bunker-500 p-2 group-hover:bg-mineshaft-700">
+                  <FontAwesomeIcon icon={faCheckCircle} className="h-5 w-5 text-4xl text-primary" />
+                </div>
+              )}
+              <div
+                className={`text-right text-sm font-normal text-mineshaft-300 ${complete ? "text-primary font-semibold" : ""}`}
+              >
+                {complete ? "Complete!" : `About ${time}`}
+              </div>
+            </div>
+            <div className="flex flex-col items-start justify-start w-full pt-4">
+              <div className="mt-0.5 text-lg font-medium">{text}</div>
+              <div className="text-sm font-normal text-mineshaft-300">{subText}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a>
+  );
+};
+
 const formSchema = yup.object({
   name: yup.string().required().label("Project Name").trim(),
   addMembers: yup.bool().required().label("Add Members")
@@ -242,7 +297,7 @@ export default function Organization() {
         <link rel="icon" href="/infisical.ico" />
       </Head>
       <div className="flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl mb-4">
-        <p className="mr-4 font-semibold text-white">Projects {orgWorkspaces.map(ws => ws?.name).join("")}</p>
+        <p className="mr-4 font-semibold text-white">Projects</p>
         <div className="w-full flex flex-row mt-6">
           <Input
             className="h-[2.3rem] text-sm bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
@@ -266,10 +321,10 @@ export default function Organization() {
             Add New Project
           </Button>
         </div>
-        <div className="mt-4 w-full grid gap-4 grid-cols-3 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-          {orgWorkspaces.filter(ws => ws?.name?.toLowerCase().includes(searchFilter.toLowerCase())).map(workspace => <div key={workspace._id} className="h-32 lg:h-40 min-w-72 rounded-md bg-mineshaft-800 border border-mineshaft-600 p-4 flex flex-col justify-between">
+        <div className="mt-4 w-full grid gap-4 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+          {orgWorkspaces.filter(ws => ws?.name?.toLowerCase().includes(searchFilter.toLowerCase())).map(workspace => <div key={workspace._id} className="h-40 min-w-72 rounded-md bg-mineshaft-800 border border-mineshaft-600 p-4 flex flex-col justify-between">
             <div className="text-lg text-mineshaft-100 mt-0">{workspace.name}</div>
-            <div className="text-sm text-mineshaft-300 mt-0 lg:pb-6">{(workspace.environments?.length || 0)} environments</div>
+            <div className="text-sm text-mineshaft-300 mt-0 pb-6">{(workspace.environments?.length || 0)} environments</div>
             <Link href={`/project/${workspace._id}/secrets`}>
               <div className="group cursor-default ml-auto hover:bg-primary-800/20 text-sm text-mineshaft-300 hover:text-mineshaft-200 bg-mineshaft-900 py-2 px-4 rounded-full w-max border border-mineshaft-600 hover:border-primary-500/80">Explore <FontAwesomeIcon icon={faArrowRight} className="pl-1.5 pr-0.5 group-hover:pl-2 group-hover:pr-0 duration-200" /></div>
             </Link>
@@ -290,24 +345,43 @@ export default function Organization() {
       </div>
       {((new Date()).getTime() - (new Date(user?.createdAt)).getTime()) < 30 * 24 * 60 * 60 * 1000 && <div className="flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl mb-4">
         <p className="mr-4 font-semibold text-white mb-4">Onboarding Guide</p>
-        {learningItem({
-          text: "Watch a video about Infisical",
-          subText: "",
-          complete: hasUserClickedIntro,
-          icon: faHandPeace,
-          time: "3 min",
-          userAction: "intro_cta_clicked",
-          link: "https://www.youtube.com/watch?v=PK23097-25I"
-        })}
-        {orgWorkspaces.length !== 0 && learningItem({
-          text: "Add your secrets",
-          subText: "Click to see example secrets, and add your own.",
-          complete: hasUserPushedSecrets,
-          icon: faPlus,
-          time: "1 min",
-          userAction: "first_time_secrets_pushed",
-          link: `/project/${orgWorkspaces[0]?._id}/secrets`
-        })}
+        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3 w-full mb-3">
+          {learningItemSquare({
+            text: "Watch Infisical demo",
+            subText: "Set up Infisical in 3 min.",
+            complete: hasUserClickedIntro,
+            icon: faHandPeace,
+            time: "3 min",
+            userAction: "intro_cta_clicked",
+            link: "https://www.youtube.com/watch?v=PK23097-25I"
+          })}
+          {orgWorkspaces.length !== 0 && learningItemSquare({
+            text: "Add your secrets",
+            subText: "Drop a .env file or type your secrets.",
+            complete: hasUserPushedSecrets,
+            icon: faPlus,
+            time: "1 min",
+            userAction: "first_time_secrets_pushed",
+            link: `/project/${orgWorkspaces[0]?._id}/secrets`
+          })}
+          {learningItemSquare({
+            text: "Invite your teammates",
+            subText: "Infisical is better used as a team.",
+            complete: usersInOrg,
+            icon: faUserPlus,
+            time: "2 min",
+            link: `/org/${router.query.id}/members?action=invite`
+          })}
+          <div className="block xl:hidden 2xl:block">{learningItemSquare({
+            text: "Join Infisical Slack",
+            subText: "Have any questions? Ask us!",
+            complete: hasUserClickedSlack,
+            icon: faSlack,
+            time: "1 min",
+            userAction: "slack_cta_clicked",
+            link: "https://join.slack.com/t/infisical-users/shared_invite/zt-1ye0tm8ab-899qZ6ZbpfESuo6TEikyOQ"
+          })}</div>
+        </div>
         {orgWorkspaces.length !== 0 && <div className="group text-mineshaft-100 relative mb-3 flex h-full w-full cursor-default flex-col items-center justify-between overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-800 pl-2 pr-2 pt-4 pb-2 shadow-xl duration-200">
           <div className="mb-4 flex w-full flex-row items-center pr-4">
             <div className="mr-4 flex w-full flex-row items-center">
@@ -339,23 +413,6 @@ export default function Organization() {
           time: "15 min",
           link: "https://infisical.com/docs/integrations/overview"
         })}
-        {learningItem({
-          text: "Invite your teammates",
-          subText: "",
-          complete: usersInOrg,
-          icon: faUserPlus,
-          time: "2 min",
-          link: `/org/${router.query.id}/members?action=invite`
-        })}
-        {learningItem({
-          text: "Join Infisical Slack",
-          subText: "Have any questions? Ask us!",
-          complete: hasUserClickedSlack,
-          icon: faSlack,
-          time: "1 min",
-          userAction: "slack_cta_clicked",
-          link: "https://join.slack.com/t/infisical-users/shared_invite/zt-1ye0tm8ab-899qZ6ZbpfESuo6TEikyOQ"
-        })}
       </div>}
       <div className="flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl mb-4 pb-6">
         <p className="mr-4 font-semibold text-white">Explore More</p>