From dc616e4f15d8fd4d99a1c00c0ddc5cde3e412e68 Mon Sep 17 00:00:00 2001
From: David Cramer <dcramer@gmail.com>
Date: Mon, 27 Nov 2023 11:31:06 -0800
Subject: [PATCH] Various cleanup of UI styles

---
 packages/overlay/package.json                 |  1 -
 packages/overlay/src/components/CardList.tsx  |  5 ++
 packages/overlay/src/components/Debugger.tsx  |  4 +-
 packages/overlay/src/components/SidePanel.tsx | 36 +++++++++
 packages/overlay/src/components/Tabs.tsx      |  4 +-
 packages/overlay/src/index.css                |  2 +-
 .../src/integrations/console/console-tab.tsx  |  2 +-
 .../sentry/components/EventDetails.tsx        |  2 +-
 .../sentry/components/EventList.tsx           | 45 +++++------
 .../sentry/components/SdkList.tsx             | 17 ++--
 .../sentry/components/SpanDetails.tsx         | 42 +++++-----
 .../sentry/components/SpanTree.tsx            |  4 +-
 .../sentry/components/TraceDetails.tsx        |  2 +-
 .../sentry/components/TraceList.tsx           | 19 ++---
 .../vite-inspect/vite-inspect.tsx             |  2 +-
 packages/overlay/tailwind.config.js           | 19 -----
 packages/overlay/tailwind.config.ts           | 15 ++++
 pnpm-lock.yaml                                | 80 +++----------------
 18 files changed, 141 insertions(+), 160 deletions(-)
 create mode 100644 packages/overlay/src/components/CardList.tsx
 create mode 100644 packages/overlay/src/components/SidePanel.tsx
 delete mode 100644 packages/overlay/tailwind.config.js
 create mode 100644 packages/overlay/tailwind.config.ts

diff --git a/packages/overlay/package.json b/packages/overlay/package.json
index b1d05fa2..e476189f 100644
--- a/packages/overlay/package.json
+++ b/packages/overlay/package.json
@@ -41,7 +41,6 @@
   "devDependencies": {
     "@sentry/types": "^7.77.0",
     "@spotlightjs/tsconfig": "workspace:*",
-    "@tailwindcss/forms": "^0.5.4",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
diff --git a/packages/overlay/src/components/CardList.tsx b/packages/overlay/src/components/CardList.tsx
new file mode 100644
index 00000000..1e3c3963
--- /dev/null
+++ b/packages/overlay/src/components/CardList.tsx
@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef } from 'react';
+
+export default function CardList(props: Omit<ComponentPropsWithoutRef<'div'>, 'className'>) {
+  return <div className="divide-y divide-indigo-900 border-y border-indigo-900 bg-indigo-950" {...props} />;
+}
diff --git a/packages/overlay/src/components/Debugger.tsx b/packages/overlay/src/components/Debugger.tsx
index b9e113ca..8934aec0 100644
--- a/packages/overlay/src/components/Debugger.tsx
+++ b/packages/overlay/src/components/Debugger.tsx
@@ -34,7 +34,7 @@ export default function Debugger({
       }}
     >
       <div className="sentry-debugger">
-        <div className="flex items-center gap-x-2 bg-indigo-950 px-6 py-4 text-indigo-200">
+        <div className="flex items-center gap-x-2 px-6 py-4 text-indigo-200">
           <h1 className="font-raleway flex flex-1 items-end gap-x-1 leading-7 opacity-80">
             <div className="inline-flex items-center gap-x-4">
               <Logo height={32} width={32} />
@@ -72,7 +72,7 @@ export default function Debugger({
             </div>
           </h1>
           <button
-            className="-my-1 -mr-3 cursor-pointer rounded bg-indigo-950 px-3 py-1 font-mono text-2xl hover:bg-black"
+            className="-my-1 -mr-3 cursor-pointer rounded px-3 py-1 font-mono text-2xl hover:bg-indigo-900"
             onClick={() => {
               setOpen(false);
             }}
diff --git a/packages/overlay/src/components/SidePanel.tsx b/packages/overlay/src/components/SidePanel.tsx
new file mode 100644
index 00000000..f4ed4bf2
--- /dev/null
+++ b/packages/overlay/src/components/SidePanel.tsx
@@ -0,0 +1,36 @@
+import { ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+
+export function SidePanelHeader({
+  title,
+  subtitle,
+  backTo,
+}: {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  backTo: string;
+}) {
+  return (
+    <div className="mb-4 flex border-b border-b-indigo-400 pb-4">
+      <div className="flex-1">
+        <h2 className="text-xl text-indigo-300">{title}</h2>
+        {subtitle && <h3 className="font-mono">{subtitle}</h3>}
+      </div>
+      <Link
+        className="-my-1 flex cursor-pointer  items-center justify-center rounded px-6 py-1 font-mono text-2xl hover:bg-indigo-900"
+        to={backTo}
+      >
+        {'✕'}
+      </Link>
+    </div>
+  );
+}
+
+export default function SidePanel(props: Omit<ComponentPropsWithoutRef<'div'>, 'className'>) {
+  return (
+    <div
+      className="fixed bottom-0 left-1/4 right-0 top-0 h-full overflow-auto border-l border-l-indigo-400 bg-gradient-to-br from-indigo-900 to-indigo-950 to-20% px-6 py-4"
+      {...props}
+    />
+  );
+}
diff --git a/packages/overlay/src/components/Tabs.tsx b/packages/overlay/src/components/Tabs.tsx
index 5ddbf9ee..a35f39eb 100644
--- a/packages/overlay/src/components/Tabs.tsx
+++ b/packages/overlay/src/components/Tabs.tsx
@@ -46,7 +46,7 @@ export default function Tabs({ tabs, nested }: Props) {
         </select>
       </div>
       <div className="hidden sm:block">
-        <nav className="-mb-px flex space-x-8 px-6" aria-label="Tabs">
+        <nav className="flex space-x-8 border-b border-b-indigo-900 px-6" aria-label="Tabs">
           {tabs.map(tab => (
             <Link
               to={`${nested ? '' : '/'}${tab.id}`}
@@ -55,7 +55,7 @@ export default function Tabs({ tabs, nested }: Props) {
                 tab.active
                   ? 'border-indigo-200 text-indigo-100'
                   : 'border-transparent text-indigo-400 hover:border-indigo-400 hover:text-indigo-100',
-                '-mx-2 flex whitespace-nowrap border-b-2 px-2 py-3 text-sm font-medium',
+                '-m-y -mx-2 flex whitespace-nowrap border-b-2 px-2 py-3 text-sm font-medium',
               )}
               onClick={() => tab.onSelect && tab.onSelect()}
               aria-current={tab.active ? 'page' : undefined}
diff --git a/packages/overlay/src/index.css b/packages/overlay/src/index.css
index 0fd38618..1ef0be34 100644
--- a/packages/overlay/src/index.css
+++ b/packages/overlay/src/index.css
@@ -9,7 +9,7 @@
 }
 
 .sentry-debugger {
-  @apply flex h-full flex-col overflow-auto overflow-x-hidden rounded-lg bg-indigo-900 font-sans text-white shadow-xl;
+  @apply flex h-full flex-col overflow-auto overflow-x-hidden rounded-lg bg-gradient-to-br from-indigo-900 to-indigo-950 to-20% font-sans text-white shadow-xl;
 }
 
 /* .sentry-debugger .tree li {
diff --git a/packages/overlay/src/integrations/console/console-tab.tsx b/packages/overlay/src/integrations/console/console-tab.tsx
index 8ed36b48..85c07e3b 100644
--- a/packages/overlay/src/integrations/console/console-tab.tsx
+++ b/packages/overlay/src/integrations/console/console-tab.tsx
@@ -7,7 +7,7 @@ export default function ConsoleTab({ processedEvents }: Props) {
   const messages = (processedEvents || []) as ConsoleMessage[];
 
   return (
-    <div className="divide-y divide-indigo-500 bg-indigo-950 p-4">
+    <div className="divide-y divide-indigo-900 bg-indigo-950 p-4">
       <h1 className="mb-2 text-xl">Console Logs</h1>
       <div className="flex flex-col gap-2">
         {messages.map((message, index) => {
diff --git a/packages/overlay/src/integrations/sentry/components/EventDetails.tsx b/packages/overlay/src/integrations/sentry/components/EventDetails.tsx
index d4461b2d..a00377dd 100644
--- a/packages/overlay/src/integrations/sentry/components/EventDetails.tsx
+++ b/packages/overlay/src/integrations/sentry/components/EventDetails.tsx
@@ -77,7 +77,7 @@ export default function EventDetails() {
         )}
       </div>
       <Tabs tabs={tabs} nested={true} />
-      <div className="flex-1 divide-indigo-500 bg-indigo-950 px-6 py-4">
+      <div className="flex-1 divide-indigo-900 bg-indigo-950 px-6 py-4">
         <Routes>
           <Route path="breadcrumbs" element={<EventBreadcrumbs event={event} />} />
           <Route path="contexts" element={<EventContexts event={event} />} />
diff --git a/packages/overlay/src/integrations/sentry/components/EventList.tsx b/packages/overlay/src/integrations/sentry/components/EventList.tsx
index 00b8ceac..26f9e1e6 100644
--- a/packages/overlay/src/integrations/sentry/components/EventList.tsx
+++ b/packages/overlay/src/integrations/sentry/components/EventList.tsx
@@ -1,4 +1,5 @@
 import { Link } from 'react-router-dom';
+import CardList from '~/components/CardList';
 import { useSentryEvents } from '../data/useSentryEvents';
 import { SentryEvent } from '../types';
 import { ErrorSummary } from './Events/Error';
@@ -15,28 +16,26 @@ export default function EventList() {
 
   const matchingEvents = events.filter(e => e.type !== 'transaction');
 
-  return (
-    <div className="divide-y divide-indigo-500 bg-indigo-950">
-      {matchingEvents.length !== 0 ? (
-        matchingEvents.map(e => {
-          return (
-            <Link
-              className="flex cursor-pointer items-center gap-x-4 px-6 py-4 hover:bg-indigo-800"
-              key={e.event_id}
-              to={e.event_id}
-            >
-              <PlatformIcon event={e} className="text-indigo-300" />
-              <div className="flex w-48 flex-col truncate font-mono text-indigo-300">
-                <span>{(e.event_id || '').substring(0, 8)}</span>
-                <TimeSince date={e.timestamp} />
-              </div>
-              <div className="flex-1">{renderEvent(e)}</div>
-            </Link>
-          );
-        })
-      ) : (
-        <div className="p-6 text-indigo-300">Looks like there's no events recorded matching this query. 🤔</div>
-      )}
-    </div>
+  return matchingEvents.length !== 0 ? (
+    <CardList>
+      {matchingEvents.map(e => {
+        return (
+          <Link
+            className="flex cursor-pointer items-center gap-x-4 px-6 py-4 hover:bg-indigo-900"
+            key={e.event_id}
+            to={e.event_id}
+          >
+            <PlatformIcon event={e} className="text-indigo-300" />
+            <div className="flex w-48 flex-col truncate font-mono text-indigo-300">
+              <span>{(e.event_id || '').substring(0, 8)}</span>
+              <TimeSince date={e.timestamp} />
+            </div>
+            <div className="flex-1">{renderEvent(e)}</div>
+          </Link>
+        );
+      })}
+    </CardList>
+  ) : (
+    <div className="p-6 text-indigo-300">Looks like there's no events recorded matching this query. 🤔</div>
   );
 }
diff --git a/packages/overlay/src/integrations/sentry/components/SdkList.tsx b/packages/overlay/src/integrations/sentry/components/SdkList.tsx
index 4673c6a8..649a1d6c 100644
--- a/packages/overlay/src/integrations/sentry/components/SdkList.tsx
+++ b/packages/overlay/src/integrations/sentry/components/SdkList.tsx
@@ -1,3 +1,4 @@
+import CardList from '~/components/CardList';
 import { useSentrySdks } from '../data/useSentrySdks';
 import PlatformIcon from './PlatformIcon';
 import TimeSince from './TimeSince';
@@ -15,9 +16,9 @@ export default function SdkList() {
 
   return (
     <>
-      <div className="divide-y divide-indigo-500 bg-indigo-950">
-        {sdkList.length !== 0 ? (
-          sdkList.map(sdk => {
+      {sdkList.length !== 0 ? (
+        <CardList>
+          {sdkList.map(sdk => {
             return (
               <div className="flex items-center gap-x-4 px-6 py-4" key={`${sdk.name}-${sdk.version}`}>
                 <PlatformIcon platform={sdkToPlatform(sdk.name)} />
@@ -29,11 +30,11 @@ export default function SdkList() {
                 </div>
               </div>
             );
-          })
-        ) : (
-          <div className="p-6 text-indigo-300">Looks like there's no SDKs that have reported yet. 🤔</div>
-        )}
-      </div>
+          })}
+        </CardList>
+      ) : (
+        <div className="p-6 text-indigo-300">Looks like there's no SDKs that have reported yet. 🤔</div>
+      )}
     </>
   );
 }
diff --git a/packages/overlay/src/integrations/sentry/components/SpanDetails.tsx b/packages/overlay/src/integrations/sentry/components/SpanDetails.tsx
index 1dcc0d00..54311ff4 100644
--- a/packages/overlay/src/integrations/sentry/components/SpanDetails.tsx
+++ b/packages/overlay/src/integrations/sentry/components/SpanDetails.tsx
@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom';
 import { format as formatSQL } from 'sql-formatter';
+import SidePanel, { SidePanelHeader } from '~/components/SidePanel';
 import dataCache from '../data/sentryDataCache';
 import { SentryErrorEvent, Span, TraceContext } from '../types';
 import { getDuration } from '../utils/duration';
@@ -34,21 +35,16 @@ export default function SpanDetails({
   const errors = dataCache.getEventsByTrace(span.trace_id).filter(e => e.type !== 'transaction');
 
   return (
-    <div className="fixed bottom-0 left-1/4 right-0 top-0 h-full overflow-auto border-l border-l-indigo-400 bg-indigo-900 px-6 py-4">
-      <div className="mb-4 flex border-b border-b-indigo-400 pb-4">
-        <div className="flex-1">
-          <h2 className="text-xl text-indigo-300">Span Details</h2>
-          <h3 className="font-mono">
+    <SidePanel>
+      <SidePanelHeader
+        title="Span Details"
+        subtitle={
+          <>
             {span.op} <span className="text-indigo-500">&mdash;</span> {span.span_id}
-          </h3>
-        </div>
-        <Link
-          className="-my-1 -mr-3 cursor-pointer rounded bg-indigo-900 px-3 py-1 font-mono text-2xl hover:bg-black"
-          to={`/traces/${span.trace_id}`}
-        >
-          {'✕'}
-        </Link>
-      </div>
+          </>
+        }
+        backTo={`/traces/${span.trace_id}`}
+      />
 
       <div className="space-y-6">
         <div>
@@ -157,15 +153,19 @@ export default function SpanDetails({
         <div>
           <h2 className="mb-2 font-bold uppercase">Sub-tree</h2>
           <div className="-mx-3 border border-indigo-900 bg-indigo-950">
-            <SpanTree
-              traceContext={traceContext}
-              tree={span.children || []}
-              startTimestamp={startTimestamp}
-              totalDuration={totalDuration}
-            />
+            {span.children?.length ? (
+              <SpanTree
+                traceContext={traceContext}
+                tree={span.children}
+                startTimestamp={startTimestamp}
+                totalDuration={totalDuration}
+              />
+            ) : (
+              <div className="p-4">No children present at this node.</div>
+            )}
           </div>
         </div>
       </div>
-    </div>
+    </SidePanel>
   );
 }
diff --git a/packages/overlay/src/integrations/sentry/components/SpanTree.tsx b/packages/overlay/src/integrations/sentry/components/SpanTree.tsx
index 46751baa..9d3a6938 100644
--- a/packages/overlay/src/integrations/sentry/components/SpanTree.tsx
+++ b/packages/overlay/src/integrations/sentry/components/SpanTree.tsx
@@ -34,8 +34,8 @@ export default function SpanTree({
           >
             <Link
               className={classNames(
-                'flex cursor-pointer text-sm hover:bg-indigo-800',
-                spanId === span.span_id ? 'bg-indigo-800' : '',
+                'flex cursor-pointer text-sm hover:bg-indigo-900',
+                spanId === span.span_id ? 'bg-indigo-900' : '',
               )}
               to={`/traces/${span.trace_id}/${span.span_id}`}
             >
diff --git a/packages/overlay/src/integrations/sentry/components/TraceDetails.tsx b/packages/overlay/src/integrations/sentry/components/TraceDetails.tsx
index 50b590f5..41f3242d 100644
--- a/packages/overlay/src/integrations/sentry/components/TraceDetails.tsx
+++ b/packages/overlay/src/integrations/sentry/components/TraceDetails.tsx
@@ -44,7 +44,7 @@ export default function TraceDetails() {
           </span>
         </div>
       </div>
-      <div className="flex-1 divide-indigo-500 bg-indigo-950 px-6 py-4">
+      <div className="flex-1 divide-indigo-900 bg-indigo-950 px-6 py-4">
         <SpanTree
           traceContext={trace}
           tree={trace.spanTree}
diff --git a/packages/overlay/src/integrations/sentry/components/TraceList.tsx b/packages/overlay/src/integrations/sentry/components/TraceList.tsx
index de28ea2a..01698e38 100644
--- a/packages/overlay/src/integrations/sentry/components/TraceList.tsx
+++ b/packages/overlay/src/integrations/sentry/components/TraceList.tsx
@@ -1,4 +1,5 @@
 import { Link } from 'react-router-dom';
+import CardList from '~/components/CardList';
 import classNames from '../../../lib/classNames';
 import { useSentryTraces } from '../data/useSentryTraces';
 import { getDuration } from '../utils/duration';
@@ -10,13 +11,13 @@ export default function TraceList() {
 
   return (
     <>
-      <div className="divide-y divide-indigo-500 bg-indigo-950">
-        {traceList.length !== 0 ? (
-          traceList.map(trace => {
+      {traceList.length !== 0 ? (
+        <CardList>
+          {traceList.map(trace => {
             const duration = getDuration(trace.start_timestamp, trace.timestamp);
             return (
               <Link
-                className="flex cursor-pointer items-center gap-x-4 px-6 py-4 hover:bg-indigo-800"
+                className="flex cursor-pointer items-center gap-x-4 px-6 py-4 hover:bg-indigo-900"
                 key={trace.trace_id}
                 to={trace.trace_id}
               >
@@ -42,11 +43,11 @@ export default function TraceList() {
                 </div>
               </Link>
             );
-          })
-        ) : (
-          <div className="p-6 text-indigo-300">Looks like there's no traces recorded matching this query. 🤔</div>
-        )}
-      </div>
+          })}
+        </CardList>
+      ) : (
+        <div className="p-6 text-indigo-300">Looks like there's no traces recorded matching this query. 🤔</div>
+      )}
     </>
   );
 }
diff --git a/packages/overlay/src/integrations/vite-inspect/vite-inspect.tsx b/packages/overlay/src/integrations/vite-inspect/vite-inspect.tsx
index 85d5c687..2b633f74 100644
--- a/packages/overlay/src/integrations/vite-inspect/vite-inspect.tsx
+++ b/packages/overlay/src/integrations/vite-inspect/vite-inspect.tsx
@@ -1,6 +1,6 @@
 export default function ViteInspect() {
   return (
-    <div className="h-full w-full divide-y divide-indigo-500 bg-indigo-950">
+    <div className="h-full w-full divide-y divide-indigo-900 bg-indigo-950">
       <div className="flex h-full w-full flex-col gap-2">
         <iframe src="http://localhost:4321/__inspect/" className="h-full w-full" />
       </div>
diff --git a/packages/overlay/tailwind.config.js b/packages/overlay/tailwind.config.js
deleted file mode 100644
index e732397a..00000000
--- a/packages/overlay/tailwind.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const defaultTheme = require('tailwindcss/defaultTheme');
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    extend: {
-      fontFamily: {
-        raleway: ['Raleway', ...defaultTheme.fontFamily.sans],
-      },
-    },
-  },
-  // only exists for demo
-  plugins: [require('@tailwindcss/forms')],
-  // corePlugins: {
-  //   preflight: false,
-  // },
-  // prefix: "sentry-spotlight-",
-};
diff --git a/packages/overlay/tailwind.config.ts b/packages/overlay/tailwind.config.ts
new file mode 100644
index 00000000..3e313f90
--- /dev/null
+++ b/packages/overlay/tailwind.config.ts
@@ -0,0 +1,15 @@
+import type { Config } from 'tailwindcss';
+
+import defaultTheme from 'tailwindcss/defaultTheme';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        raleway: ['Raleway', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+} satisfies Config;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 95da24da..c794630b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: '6.0'
+lockfileVersion: '6.1'
 
 settings:
   autoInstallPeers: true
@@ -162,9 +162,6 @@ importers:
       '@spotlightjs/tsconfig':
         specifier: workspace:*
         version: link:../tsconfig
-      '@tailwindcss/forms':
-        specifier: ^0.5.4
-        version: 0.5.4(tailwindcss@3.3.5)
       '@types/react':
         specifier: ^18.2.37
         version: 18.2.38
@@ -2677,7 +2674,7 @@ packages:
       '@sveltejs/vite-plugin-svelte': 2.5.2(svelte@5.0.0-next.4)(vite@4.5.0)
       debug: 4.3.4
       svelte: 5.0.0-next.4
-      vite: 4.5.0
+      vite: 4.5.0(@types/node@18.0.0)
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -2697,7 +2694,7 @@ packages:
       magic-string: 0.30.5
       svelte: 5.0.0-next.4
       svelte-hmr: 0.15.3(svelte@5.0.0-next.4)
-      vite: 4.5.0
+      vite: 4.5.0(@types/node@18.0.0)
       vitefu: 0.2.5(vite@4.5.0)
     transitivePeerDependencies:
       - supports-color
@@ -2848,16 +2845,6 @@ packages:
       - encoding
     dev: true
 
-  /@tailwindcss/forms@0.5.4(tailwindcss@3.3.5):
-    resolution:
-      { integrity: sha512-YAm12D3R7/9Mh4jFbYSMnsd6jG++8KxogWgqs7hbdo/86aWjjlIEvL7+QYdVELmAI0InXTpZqFIg5e7aDVWI2Q== }
-    peerDependencies:
-      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
-    dependencies:
-      mini-svg-data-uri: 1.4.4
-      tailwindcss: 3.3.5
-    dev: true
-
   /@tailwindcss/typography@0.5.10(tailwindcss@3.3.5):
     resolution:
       { integrity: sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw== }
@@ -3077,7 +3064,6 @@ packages:
   /@types/node@18.0.0:
     resolution:
       { integrity: sha512-cHlGmko4gWLVI27cGJntjs/Sj8th9aYwplmZFwmmgYQQvL5NUsgVJG7OddLvNfLqYS31KFN0s3qlaD9qCaxACA== }
-    dev: true
 
   /@types/node@18.18.8:
     resolution:
@@ -3474,7 +3460,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.23.2)
       '@types/babel__core': 7.20.3
       react-refresh: 0.14.0
-      vite: 4.5.0
+      vite: 4.5.0(@types/node@18.0.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -3490,7 +3476,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.3)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.0
-      vite: 4.5.0
+      vite: 4.5.0(@types/node@18.0.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -3959,7 +3945,7 @@ packages:
       tsconfck: 3.0.0(typescript@5.0.4)
       unist-util-visit: 4.1.2
       vfile: 5.3.7
-      vite: 4.5.0
+      vite: 4.5.0(@types/node@18.0.0)
       vitefu: 0.2.5(vite@4.5.0)
       which-pm: 2.1.1
       yargs-parser: 21.1.1
@@ -4037,7 +4023,7 @@ packages:
       tsconfck: 3.0.0(typescript@5.2.2)
       unist-util-visit: 4.1.2
       vfile: 5.3.7
-      vite: 4.5.0
+      vite: 4.5.0(@types/node@18.0.0)
       vitefu: 0.2.5(vite@4.5.0)
       which-pm: 2.1.1
       yargs-parser: 21.1.1
@@ -4115,7 +4101,7 @@ packages:
       tsconfck: 3.0.0(typescript@5.3.2)
       unist-util-visit: 4.1.2
       vfile: 5.3.7
-      vite: 4.5.0
+      vite: 4.5.0(@types/node@18.0.0)
       vitefu: 0.2.5(vite@4.5.0)
       which-pm: 2.1.1
       yargs-parser: 21.1.1
@@ -7892,12 +7878,6 @@ packages:
     engines: { node: '>=4' }
     dev: true
 
-  /mini-svg-data-uri@1.4.4:
-    resolution:
-      { integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg== }
-    hasBin: true
-    dev: true
-
   /minimatch@3.1.2:
     resolution:
       { integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw== }
@@ -10705,7 +10685,7 @@ packages:
       debug: 4.3.4
       kolorist: 1.8.0
       typescript: 5.3.2
-      vite: 4.5.0
+      vite: 4.5.0(@types/node@18.0.0)
       vue-tsc: 1.8.22(typescript@5.3.2)
     transitivePeerDependencies:
       - '@types/node'
@@ -10732,7 +10712,7 @@ packages:
       open: 9.1.0
       picocolors: 1.0.0
       sirv: 2.0.3
-      vite: 4.5.0
+      vite: 4.5.0(@types/node@18.0.0)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -10747,48 +10727,13 @@ packages:
       '@rollup/pluginutils': 5.0.5
       '@svgr/core': 7.0.0(typescript@5.3.2)
       '@svgr/plugin-jsx': 7.0.0
-      vite: 4.5.0
+      vite: 4.5.0(@types/node@18.0.0)
     transitivePeerDependencies:
       - rollup
       - supports-color
       - typescript
     dev: true
 
-  /vite@4.5.0:
-    resolution:
-      { integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw== }
-    engines: { node: ^14.18.0 || >=16.0.0 }
-    hasBin: true
-    peerDependencies:
-      '@types/node': '>= 14'
-      less: '*'
-      lightningcss: ^1.21.0
-      sass: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      lightningcss:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-    dependencies:
-      esbuild: 0.18.20
-      postcss: 8.4.31
-      rollup: 3.29.4
-    optionalDependencies:
-      fsevents: 2.3.3
-
   /vite@4.5.0(@types/node@18.0.0):
     resolution:
       { integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw== }
@@ -10824,7 +10769,6 @@ packages:
       rollup: 3.29.4
     optionalDependencies:
       fsevents: 2.3.3
-    dev: true
 
   /vite@4.5.0(@types/node@18.18.8):
     resolution:
@@ -10872,7 +10816,7 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 4.5.0
+      vite: 4.5.0(@types/node@18.0.0)
     dev: false
 
   /vitest@0.34.6: