feat: add new tanstack logo (#113)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: AlemTuzlak

.changeset/moody-geese-mix.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools': patch
+---
+
+add new tantack logo

package.json

@@ -48,7 +48,7 @@
   "size-limit": [
     {
       "path": "packages/devtools/dist/index.js",
-      "limit": "40 KB"
+      "limit": "50 KB"
     },
     {
       "path": "packages/event-bus-client/dist/esm/plugin.js",

packages/devtools/src/components/tanstack-logo.png

@@ -1,8 +1,8 @@
 import { createMemo } from 'solid-js'
 import clsx from 'clsx'
-import { TanStackLogo } from '@tanstack/devtools-ui'
 import { useDevtoolsSettings } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
+import TanStackLogo from './tanstack-logo.png'
 import type { Accessor } from 'solid-js'
 
 export const Trigger = ({
@@ -28,7 +28,7 @@ export const Trigger = ({
       class={buttonStyle()}
       onClick={() => setIsOpen(!isOpen())}
     >
-      <TanStackLogo />
+      <img src={TanStackLogo} alt="TanStack Logo" />
     </button>
   )
 }

packages/devtools/src/components/trigger.tsx

@@ -218,6 +218,14 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       font-size: ${font.size.xs};
       cursor: pointer;
       transition: all 0.25s ease-out;
+      & > img {
+        width: 56px;
+        height: 56px;
+        transition: all 0.3s ease;
+        outline-offset: 2px;
+        border-radius: ${border.radius.full};
+        outline: 2px solid transparent;
+      }
       &:hide-until-hover {
         opacity: 0;
         pointer-events: none;
@@ -228,10 +236,9 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
         pointer-events: auto;
         visibility: visible;
       }
-      &:focus-visible {
-        outline-offset: 2px;
-        border-radius: ${border.radius.full};
-        outline: 2px solid ${t(colors.blue[700], colors.blue[800])};
+      & > img:focus-visible,
+      img:hover {
+        outline: 2px solid ${t(colors.black, colors.black)};
       }
     `,
     mainCloseBtnPosition: (position: TanStackDevtoolsConfig['position']) => {

packages/devtools/src/styles/use-styles.ts

@@ -15,5 +15,10 @@ export default defineConfig(() => {
   const parsed_data = parsePresetOptions(preset_options)
   const tsup_options = generateTsupOptions(parsed_data)
 
-  return tsup_options
+  return tsup_options.map((option) => ({
+    ...option,
+    loader: {
+      '.png': 'dataurl',
+    },
+  }))
 })