fix(misc): minor tweaks to layout & nx console integration

nrwl · Jan 17, 2024 · a130e13 · a130e13
1 parent b1f3f36
commit a130e13
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/graph/project-details/src/lib/project-details-page.tsx b/graph/project-details/src/lib/project-details-page.tsx
@@ -21,7 +21,7 @@ export function ProjectDetailsPage() {
   return (
     <div className="flex flex-col justify-center w-full text-slate-700 dark:text-slate-400">
       {environment !== 'nx-console' ? (
-        <header className="flex w-full justify-center items-center px-4 py-2 border-b-2 border-slate-900/10 mb-16 dark:border-slate-300/10">
+        <header className="flex w-full justify-center items-center px-4 py-2 border-b-2 border-slate-900/10 mb-12 dark:border-slate-300/10">
           <div className="flex flex-grow items-center justify-between max-w-6xl">
             <svg
               className="h-10 w-auto text-slate-900 dark:text-white"
@@ -41,7 +41,7 @@ export function ProjectDetailsPage() {
                   )}
                   title="View in Graph"
                 >
-                  Graph
+                  View in Graph
                 </Link>
               </li>
               <li className="ml-4">
@@ -51,7 +51,7 @@ export function ProjectDetailsPage() {
           </div>
         </header>
       ) : null}
-      <div className="flex-grow mx-auto w-full max-w-6xl px-8 mb-8">
+      <div className="flex-grow mx-auto w-full max-w-6xl px-8 mb-8 mt-4">
         <ProjectDetails
           project={project}
           sourceMap={sourceMap}

diff --git a/graph/project-details/src/lib/project-details.tsx b/graph/project-details/src/lib/project-details.tsx
@@ -52,13 +52,17 @@ export function ProjectDetails({
   return (
     <>
       <header className="border-b border-slate-900/10 mb-4 dark:border-slate-300/10">
-        <h1 className="text-6xl flex items-center mb-4 gap-2">
+        <h1
+          className={`${
+            environment === 'nx-console' ? 'text-3xl mb-2' : 'text-6xl mb-4'
+          } flex items-center gap-2`}
+        >
           {name}{' '}
           {environment === 'nx-console' ? (
             <EyeIcon className="h-5 w-5" onClick={viewInProjectGraph}></EyeIcon>
           ) : null}{' '}
         </h1>
-        <div className="p-4">
+        <div className="py-4">
           {projectData.tags ? (
             <p>
               {projectData.tags?.map((tag) => (
@@ -77,7 +81,13 @@ export function ProjectDetails({
         </div>
       </header>
       <div>
-        <h2 className="text-3xl mb-2">Targets</h2>
+        <h2
+          className={`${
+            environment === 'nx-console' ? 'text-2xl' : 'text-3xl'
+          } mb-2`}
+        >
+          Targets
+        </h2>
         <ul>
           {Object.entries(projectData.targets ?? {}).map(
             ([targetName, target]) => {

diff --git a/graph/project-details/src/lib/target.tsx b/graph/project-details/src/lib/target.tsx
@@ -144,10 +144,19 @@ export function Target({
           <EyeIcon
             className="h-4 w-4 mr-2 hidden group-hover:inline-block"
             title="View in Task Graph"
-            onClick={viewInTaskGraph}
+            onClick={(e) => {
+              e.stopPropagation();
+              viewInTaskGraph();
+            }}
           ></EyeIcon>
           {environment === 'nx-console' && (
-            <PlayIcon className="h-5 w-5" onClick={runTarget} />
+            <PlayIcon
+              className="h-5 w-5"
+              onClick={(e) => {
+                e.stopPropagation();
+                runTarget();
+              }}
+            />
           )}
           {collapsed ? (
             <ChevronDownIcon className="h-3 w-3" />