chore(graph): remove global styles in favor of tailwind (#13882)

Co-authored-by: Philip Fulcher <philipfulcher@Philips-MacBook-Air.local>
nrwl · Dec 16, 2022 · 78f3a3c · 78f3a3c · vercel · Dec 16, 2022
1 parent b94c7e5
commit 78f3a3c
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 37 deletions.
diff --git a/graph/client/.storybook/preview.js b/graph/client/.storybook/preview.js
@@ -1,4 +1,4 @@
-import '../src/styles.scss';
+import '../src/styles.css';
 
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';

diff --git a/graph/client/project.json b/graph/client/project.json
@@ -39,7 +39,7 @@
         "main": "graph/client/src/main.tsx",
         "polyfills": "graph/client/src/polyfills.ts",
         "tsConfig": "graph/client/tsconfig.app.json",
-        "styles": ["graph/client/src/styles.scss"],
+        "styles": ["graph/client/src/styles.css"],
         "scripts": [],
         "assets": [],
         "webpackConfig": "graph/client/webpack.config.js",

diff --git a/graph/client/src/app/shell.tsx b/graph/client/src/app/shell.tsx
@@ -175,7 +175,10 @@ export function Shell(): JSX.Element {
         ) : null}
 
         <div className="h-full w-full">
-          <div className="h-full w-full" id="cytoscape-graph"></div>
+          <div
+            className="h-full w-full cursor-pointer"
+            id="cytoscape-graph"
+          ></div>
           <TooltipDisplay></TooltipDisplay>
 
           <Tooltip

diff --git a/graph/client/src/app/theme-resolver.tsx b/graph/client/src/app/theme-resolver.tsx
@@ -7,10 +7,20 @@ export let currentTheme: Theme;
 
 function mediaListener(ev: MediaQueryListEvent) {
   const resolver = ev.matches ? 'dark' : 'light';
-  htmlEl.className = resolver;
+  toggleHtmlClass(resolver);
   currentTheme = resolver;
 }
 
+function toggleHtmlClass(theme: Theme) {
+  if (theme === 'dark') {
+    htmlEl.classList.add('dark');
+    htmlEl.classList.remove('light');
+  } else {
+    htmlEl.classList.add('light');
+    htmlEl.classList.remove('dark');
+  }
+}
+
 export function themeInit() {
   const theme =
     (localStorage.getItem(localStorageThemeKey) as Theme) ?? 'system';
@@ -25,13 +35,13 @@ export function themeResolver(theme: Theme) {
   const darkMedia = window.matchMedia('(prefers-color-scheme: dark)');
   if (theme !== 'system') {
     darkMedia.removeEventListener('change', mediaListener);
-    htmlEl.className = theme;
+    toggleHtmlClass(theme);
     currentTheme = theme;
   } else {
     const resolver = darkMedia.matches ? 'dark' : 'light';
 
     darkMedia.addEventListener('change', mediaListener);
-    htmlEl.className = resolver;
+    toggleHtmlClass(resolver);
     currentTheme = resolver;
   }
 

diff --git a/graph/client/src/index.html b/graph/client/src/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="h-full w-full overflow-hidden">
   <head>
     <meta charset="utf-8" />
     <title>Nx Workspace Project Graph</title>
@@ -25,7 +25,9 @@
     </script>
   </head>
 
-  <body class="bg-white text-slate-500 dark:bg-slate-900 dark:text-slate-400">
-    <div id="app"></div>
+  <body
+    class="h-full w-full overflow-hidden bg-white text-slate-500 dark:bg-slate-900 dark:text-slate-400"
+  >
+    <div class="flex h-full w-full overflow-hidden p-0" id="app"></div>
   </body>
 </html>
diff --git a/graph/client/src/styles.css b/graph/client/src/styles.css
@@ -0,0 +1,8 @@
+@tailwind components;
+@tailwind base;
+@tailwind utilities;
+
+/** Scrollbars **/
+.dark {
+  color-scheme: dark;
+}
diff --git a/graph/client/src/styles.scss b/graph/client/src/styles.scss
diff --git a/graph/ui-graph/src/lib/nx-project-graph-viz.tsx b/graph/ui-graph/src/lib/nx-project-graph-viz.tsx
@@ -114,7 +114,7 @@ export function NxProjectGraphViz({
     <div className="not-prose">
       <div
         ref={containerRef}
-        className="w-full"
+        className="w-full cursor-pointer"
         style={{ width: '100%', height }}
       ></div>
       {tooltipToRender ? (

diff --git a/graph/ui-graph/src/lib/nx-task-graph-viz.tsx b/graph/ui-graph/src/lib/nx-task-graph-viz.tsx
@@ -99,7 +99,7 @@ export function NxTaskGraphViz({
     <div className="not-prose">
       <div
         ref={containerRef}
-        className="w-full"
+        className="w-full cursor-pointer"
         style={{ width: '100%', height }}
       ></div>
       {tooltipToRender ? (