chore(dep-graph): clean-up dark mode and remove feature flag (#9762)

* feat(dep-graph): add dark mode * cleanup(dep-graph): fix dep-graph e2e * chore(dep-graph): remove feature flag on dark mode Co-authored-by: Philip Fulcher <[email protected]>
nrwl · Apr 16, 2022 · 68f883d · 68f883d
1 parent c0de03b
commit 68f883d
Show file tree

Hide file tree

Showing 35 changed files with 212 additions and 514 deletions.
diff --git a/dep-graph/client/src/app/dark-theme-styles.tsx b/dep-graph/client/src/app/dark-theme-styles.tsx
diff --git a/dep-graph/client/src/app/debugger-panel.tsx b/dep-graph/client/src/app/debugger-panel.tsx
@@ -1,7 +1,6 @@
+import { memo } from 'react';
 import { ProjectGraphList } from './interfaces';
 import { GraphPerfReport } from './machines/interfaces';
-import { memo } from 'react';
-import { DarkClasses } from './dark-theme-styles';
 
 export interface DebuggerPanelProps {
   projectGraphs: ProjectGraphList[];
@@ -19,28 +18,13 @@ export const DebuggerPanel = memo(function ({
   return (
     <div
       data-cy="debugger-panel"
-      className="
-          flex-column
-          flex-column
-          dark:bg-sidebar-dark
-          dark:border-sidebar-border-dark flex
-          flex
-          w-auto items-center
-          items-center
-          justify-items-center
-          justify-items-center gap-4
-          gap-4
-          border-b
-          border-gray-200
-          bg-gray-50
-          p-4 transition-all
-        "
+      className="flex-column flex w-auto items-center items-center justify-items-center justify-items-center gap-4 border-b border-slate-900/10 bg-slate-50 p-4 transition-all dark:border-slate-300/10 dark:bg-transparent"
     >
-      <h4 className="dark:text-sidebar-title-dark mr-4 text-lg font-bold">
+      <h4 className="dark:text-sidebar-title-dark mr-4 text-lg font-normal">
         Debugger
       </h4>
       <select
-        className={`flex w-auto items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 ${DarkClasses.button}`}
+        className="flex w-auto items-center rounded-md rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
         data-cy="project-select"
         onChange={(event) => projectGraphChange(event.target.value)}
         value={selectedProjectGraph}
@@ -53,7 +37,7 @@ export const DebuggerPanel = memo(function ({
           );
         })}
       </select>
-      <p className="dark:text-sidebar-subtitle-dark text-sm">
+      <p className="text-sm">
         Last render took {lastPerfReport.renderTime}ms:{' '}
         <b className="text-medium font-mono">{lastPerfReport.numNodes} nodes</b>{' '}
         |{' '}

diff --git a/dep-graph/client/src/app/edge-tooltip.tsx b/dep-graph/client/src/app/edge-tooltip.tsx
@@ -17,13 +17,13 @@ function EdgeNodeTooltip({
         {source} &rarr; {target}
       </h4>
       {type !== 'implicit' ? (
-        <div className="rounded-md border border-gray-200">
-          <div className="rounded-t-md bg-gray-50 px-4 py-2 text-xs font-medium uppercase text-gray-500">
+        <div className="overflow-hidden rounded-md border border-slate-200 dark:border-slate-800">
+          <div className="bg-slate-50 px-4 py-2 text-xs font-medium uppercase text-slate-500 dark:bg-slate-800 dark:text-slate-400">
             <span>Files</span>
           </div>
-          <ul className="max-h-[300px] divide-y divide-gray-200 overflow-auto">
+          <ul className="max-h-[300px] divide-y divide-slate-200 overflow-auto dark:divide-slate-800">
             {fileDependencies.map((fileDep) => (
-              <li className="dark:text-sidebar-text-dark whitespace-nowrap px-4 py-2 text-sm font-medium text-gray-900">
+              <li className="whitespace-nowrap px-4 py-2 text-sm font-medium text-slate-800 dark:text-slate-300">
                 <span className="block truncate font-normal">
                   {fileDep.fileName}
                 </span>

diff --git a/dep-graph/client/src/app/hooks/use-interval-when.ts b/dep-graph/client/src/app/hooks/use-interval-when.ts
@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 export const useIntervalWhen = (
   callback: () => void,

diff --git a/dep-graph/client/src/app/icons/flag.tsx b/dep-graph/client/src/app/icons/flag.tsx
diff --git a/dep-graph/client/src/app/icons/map-marker.tsx b/dep-graph/client/src/app/icons/map-marker.tsx
diff --git a/dep-graph/client/src/app/icons/x-circle-outline.tsx b/dep-graph/client/src/app/icons/x-circle-outline.tsx
diff --git a/dep-graph/client/src/app/machines/custom-selected.state.ts b/dep-graph/client/src/app/machines/custom-selected.state.ts
@@ -1,5 +1,5 @@
 import { assign } from '@xstate/immer';
-import { send, actions } from 'xstate';
+import { actions, send } from 'xstate';
 import { DepGraphStateNodeConfig } from './interfaces';
 
 export const customSelectedStateConfig: DepGraphStateNodeConfig = {

diff --git a/dep-graph/client/src/app/machines/dep-graph.spec.ts b/dep-graph/client/src/app/machines/dep-graph.spec.ts
@@ -1,8 +1,7 @@
 // nx-ignore-next-line
 import type { ProjectGraphDependency, ProjectGraphNode } from '@nrwl/devkit';
-import './match-media-mock.spec';
-import { depGraphMachine } from './dep-graph.machine';
 import { interpret } from 'xstate';
+import { depGraphMachine } from './dep-graph.machine';
 
 export const mockProjects: ProjectGraphNode[] = [
   {

diff --git a/dep-graph/client/src/app/machines/graph.service.ts b/dep-graph/client/src/app/machines/graph.service.ts
@@ -1,5 +1,5 @@
-import { GraphService } from './graph';
 import { GraphTooltipService } from '../tooltip-service';
+import { GraphService } from './graph';
 
 let graphService: GraphService;
 

diff --git a/dep-graph/client/src/app/machines/graph.ts b/dep-graph/client/src/app/machines/graph.ts
@@ -7,20 +7,19 @@ import type { VirtualElement } from '@popperjs/core';
 import { default as cy } from 'cytoscape';
 import { default as cytoscapeDagre } from 'cytoscape-dagre';
 import { default as popper } from 'cytoscape-popper';
-import path from 'path/posix';
 import type { Instance } from 'tippy.js';
 import EdgeNodeTooltip from '../edge-tooltip';
 import ProjectNodeToolTip from '../project-node-tooltip';
 import { edgeStyles, nodeStyles } from '../styles-graph';
+import { selectValueByThemeStatic } from '../theme-resolver';
 import { GraphTooltipService } from '../tooltip-service';
 import {
   CytoscapeDagreConfig,
   ParentNode,
   ProjectEdge,
   ProjectNode,
 } from '../util-cytoscape';
-import { GraphRenderEvents, GraphPerfReport } from './interfaces';
-import { selectValueByThemeStatic } from '../theme-resolver';
+import { GraphPerfReport, GraphRenderEvents } from './interfaces';
 
 export class GraphService {
   private traversalGraph: cy.Core;
@@ -669,7 +668,7 @@ export class GraphService {
   }
 
   getImage() {
-    const bg = selectValueByThemeStatic('#262626', '#fff');
+    const bg = selectValueByThemeStatic('#0F172A', '#FFFFFF');
     return this.renderGraph.png({ bg, full: true });
   }
 

diff --git a/dep-graph/client/src/app/machines/match-media-mock.spec.ts b/dep-graph/client/src/app/machines/match-media-mock.spec.ts
diff --git a/dep-graph/client/src/app/machines/route-listener.actor.ts b/dep-graph/client/src/app/machines/route-listener.actor.ts
@@ -1,6 +1,6 @@
+import { createBrowserHistory } from 'history';
 import { InvokeCallback } from 'xstate';
 import { DepGraphUIEvents } from './interfaces';
-import { createBrowserHistory } from 'history';
 
 function parseSearchParamsToEvents(searchParams: string): DepGraphUIEvents[] {
   const events: DepGraphUIEvents[] = [];

diff --git a/dep-graph/client/src/app/machines/tracing.state.ts b/dep-graph/client/src/app/machines/tracing.state.ts
@@ -1,5 +1,4 @@
 import { assign } from '@xstate/immer';
-import { send, actions } from 'xstate';
 import { DepGraphStateNodeConfig } from './interfaces';
 
 export const tracingStateConfig: DepGraphStateNodeConfig = {

diff --git a/dep-graph/client/src/app/machines/unselected.state.ts b/dep-graph/client/src/app/machines/unselected.state.ts
@@ -1,7 +1,7 @@
 import { assign } from '@xstate/immer';
 import { send, spawn } from 'xstate';
-import { routeListener } from './route-listener.actor';
 import { DepGraphStateNodeConfig } from './interfaces';
+import { routeListener } from './route-listener.actor';
 
 export const unselectedStateConfig: DepGraphStateNodeConfig = {
   entry: [

diff --git a/dep-graph/client/src/app/project-node-tooltip.tsx b/dep-graph/client/src/app/project-node-tooltip.tsx
@@ -1,5 +1,5 @@
-import { getDepGraphService } from './machines/dep-graph.service';
 import ExperimentalFeature from './experimental-feature';
+import { getDepGraphService } from './machines/dep-graph.service';
 
 export interface ProjectNodeToolTipProps {
   type: 'app' | 'lib' | 'e2e';
@@ -57,7 +57,7 @@ function ProjectNodeToolTip({ type, id, tags }: ProjectNodeToolTipProps) {
           <button className="flex flex-row items-center" onClick={onStartTrace}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              className="mr-2 h-5 w-5 text-gray-500"
+              className="mr-2 h-5 w-5 text-slate-500"
               viewBox="0 0 20 20"
               fill="currentColor"
             >
@@ -72,7 +72,7 @@ function ProjectNodeToolTip({ type, id, tags }: ProjectNodeToolTipProps) {
           <button className="flex flex-row items-center" onClick={onEndTrace}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              className="mr-2 h-5 w-5 text-gray-500"
+              className="mr-2 h-5 w-5 text-slate-500"
               viewBox="0 0 20 20"
               fill="currentColor"
             >

diff --git a/dep-graph/client/src/app/shell.tsx b/dep-graph/client/src/app/shell.tsx
@@ -1,6 +1,8 @@
+import { ArrowCircleLeftIcon, DownloadIcon } from '@heroicons/react/solid';
+import Tippy from '@tippyjs/react';
+import classNames from 'classnames';
 // nx-ignore-next-line
 import type { DepGraphClientResponse } from 'nx/src/command-line/dep-graph';
-import Tippy from '@tippyjs/react';
 import { useEffect, useState } from 'react';
 import DebuggerPanel from './debugger-panel';
 import { useDepGraphService } from './hooks/use-dep-graph';
@@ -100,7 +102,7 @@ export function Shell() {
       <Sidebar></Sidebar>
       <div
         id="main-content"
-        className="dark:bg-graph-dark flex-grow overflow-hidden transition-all"
+        className="flex-grow overflow-hidden transition-all"
       >
         {environment.appConfig.showDebugger ? (
           <DebuggerPanel
@@ -114,22 +116,9 @@ export function Shell() {
         {!projectIsSelected ? (
           <div
             id="no-projects-chosen"
-            className="dark:text-graph-text-dark flex text-gray-700"
+            className="flex text-slate-700 dark:text-slate-400"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="mr-4 h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z"
-              />
-            </svg>
+            <ArrowCircleLeftIcon className="mr-4 h-6 w-6" />
             <h4>Please select projects in the sidebar.</h4>
           </div>
         ) : null}
@@ -142,42 +131,14 @@ export function Shell() {
           >
             <button
               type="button"
-              className={`
-            bg-green-nx-base
-            fixed
-            bottom-4
-            right-4
-            z-50
-            block
-            h-16
-            w-16
-            transform
-            rounded-full
-            text-white
-            shadow-sm
-            transition
-            duration-300
-            ${!projectIsSelected ? 'opacity-0' : ''}
-          `}
+              className={classNames(
+                !projectIsSelected ? 'opacity-0' : '',
+                'bg-green-nx-base fixed bottom-4 right-4 z-50 block h-16 w-16 transform rounded-full text-white shadow-sm transition duration-300'
+              )}
               data-cy="downloadImageButton"
               onClick={downloadImage}
             >
-              <svg
-                height="24"
-                width="24"
-                className="absolute top-1/2 left-1/2 -mt-3 -ml-3"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-                ></path>
-              </svg>
+              <DownloadIcon className="absolute top-1/2 left-1/2 -mt-3 -ml-3 h-6 w-6" />
             </button>
           </Tippy>
         </div>

diff --git a/dep-graph/client/src/app/sidebar/collapse-edges-panel.tsx b/dep-graph/client/src/app/sidebar/collapse-edges-panel.tsx
@@ -16,19 +16,19 @@ export const CollapseEdgesPanel = memo(
               name="collapseEdges"
               value="collapseEdges"
               type="checkbox"
-              className="h-4 w-4 rounded border-gray-300"
+              className="h-4 w-4 rounded border-slate-400 dark:border-slate-300"
               onChange={(event) => collapseEdgesChanged(event.target.checked)}
               checked={collapseEdges}
             ></input>
           </div>
           <div className="ml-3 text-sm">
             <label
               htmlFor="collapseEdges"
-              className="cursor-pointer font-medium text-gray-700"
+              className="cursor-pointer font-medium text-slate-600 dark:text-slate-400"
             >
               Collapse edges
             </label>
-            <p className="text-gray-500">
+            <p className="text-slate-400 dark:text-slate-500">
               Display edges between groups rather than libraries
             </p>
           </div>