feat: apply logo to default trigger

Author: nayounsang

packages/example/src/App.tsx

@@ -1,6 +1,5 @@
 import "./App.css";
 import { MSWDevTool } from "@msw-dev-tool/react";
-import "@msw-dev-tool/react/msw-dev-tool.css";
 import { useMsw } from "./hooks/useMsw";
 import { UserList } from "./components/UserList";
 import { UserInfo } from "./components/UserInfo";

packages/react/src/style/trigger.css

@@ -1,19 +1,30 @@
 .msw-dt-default-trigger {
-  background-color: rgb(234 88 12);
-  border-radius: 0.5rem;
-  padding: 0.5rem;
-  color: white;
-  margin: 1rem;
   position: fixed;
-  bottom: 0;
-  left: 0;
+  bottom: 1.5rem;
+  left: 1.5rem;
   z-index: 9999;
   cursor: pointer;
   display: flex;
-  gap: 0.5rem;
+  justify-content: center;
   align-items: center;
+  padding: 0;
+  border:none;
+  background-color: transparent;
+  outline: none;
+  box-shadow: none;
+  margin: 0;
+  appearance: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
 }
 
-.msw-dt-default-trigger:hover {
-  background-color: rgb(249 115 22);
+.msw-dt-default-trigger svg {
+  border: 1px solid #c7c7c7;
+  border-radius: 1rem;
+  color: #101010;
 }
+
+.msw-dt-default-trigger svg:hover {
+  color: #202020;
+}
+

packages/react/src/ui/Components/Logo.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+export const MSWDevToolLogo = ({
+  size = "28",
+  backgroundColor = "#101010",
+  color = "#FF6600",
+  className,
+}: {
+  size?: string | number;
+  backgroundColor?: string;
+  color?: string;
+  className?: string;
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 28 28"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <rect
+        width="28"
+        height="28"
+        rx="5"
+        fill={backgroundColor}
+      />
+      <rect
+        width="24"
+        height="24"
+        transform="translate(2 2)"
+        fill={backgroundColor}
+      />
+      <path
+        d="M24 10C24 13.3135 21.3135 16 18 16C16.9865 16 16.032 15.7485 15.195 15.305L6.5 24L4 21.5L12.695 12.805C12.2373 11.941 11.9987 10.9778 12 10C12 6.6865 14.6865 4 18 4C19.0135 4 19.968 4.251 20.805 4.695L17 8.5L19.5 11L23.305 7.195C23.7627 8.05905 24.0013 9.02222 24 10Z"
+        fill={color}
+        stroke={color}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

packages/react/src/ui/Trigger.tsx

@@ -1,16 +1,15 @@
 import React, { ComponentProps, forwardRef } from "react";
-import { CodeIcon } from "@radix-ui/react-icons";
 import styles from "../style/trigger.css";
+import { MSWDevToolLogo } from "./Components/Logo";
 
 export const DefaultDevToolTrigger = forwardRef<
   HTMLButtonElement,
   ComponentProps<"button">
 >((props, ref) => {
   return (
     <>
-      <button ref={ref} className="msw-dt-default-trigger" {...props}>
-        <CodeIcon width={"1rem"} height={"1rem"} />
-        msw
+      <button ref={ref} className="msw-dt-default-trigger" name="msw-dev-tool trigger" {...props}>
+        <MSWDevToolLogo size={"3rem"} backgroundColor="currentColor" />
       </button>
       <style type="text/css">{styles}</style>
     </>