From d55940f1a078d8d1eeeb82aa60f35e0483e93b33 Mon Sep 17 00:00:00 2001
From: David Cramer <dcramer@gmail.com>
Date: Tue, 21 Nov 2023 17:51:00 -0800
Subject: [PATCH] Add new glyph

---
 packages/core/src/App.tsx                 |  1 +
 packages/core/src/assets/glyph.svg        |  6 ++++++
 packages/core/src/components/Debugger.tsx | 12 ++++++++----
 packages/core/src/components/Trigger.tsx  | 11 ++++++++---
 packages/core/src/index.css               |  4 ++--
 5 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 packages/core/src/assets/glyph.svg

diff --git a/packages/core/src/App.tsx b/packages/core/src/App.tsx
index ce916e42..220cc6b8 100644
--- a/packages/core/src/App.tsx
+++ b/packages/core/src/App.tsx
@@ -13,6 +13,7 @@ type AppProps = {
   integrations?: Integration[];
   sidecar: string;
 };
+
 export default function App({
   eventTarget,
   fullScreen = false,
diff --git a/packages/core/src/assets/glyph.svg b/packages/core/src/assets/glyph.svg
new file mode 100644
index 00000000..30da1b1b
--- /dev/null
+++ b/packages/core/src/assets/glyph.svg
@@ -0,0 +1,6 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="256" height="256" fill="none"/>
+<path d="M121.678 68.6777C140.081 50.2742 169.919 50.2742 188.322 68.6777C206.726 87.0811 206.726 116.919 188.322 135.322C169.919 153.726 140.081 153.726 121.678 135.322C120.734 134.378 119.733 133.525 118.686 132.764C108.865 124.59 94.2507 125.11 85.0381 134.322L57.5381 161.822C47.775 171.585 47.775 187.415 57.5381 197.178C67.3012 206.941 83.1303 206.941 92.8934 197.178L104.862 185.209C142.205 207.751 191.449 202.907 223.678 170.678C261.607 132.748 261.607 71.252 223.678 33.3223C185.748 -4.60732 124.252 -4.60732 86.3223 33.3223C77.5523 42.0923 70.7787 52.1712 66.0472 62.9564C60.5003 75.6003 66.2535 90.3468 78.8974 95.8938C91.5413 101.441 106.288 95.6875 111.835 83.0436C114.109 77.8604 117.374 72.9809 121.678 68.6777Z" fill="currentColor"/>
+<path d="M59 224C59 238.359 47.3594 250 33 250C18.6406 250 7 238.359 7 224C7 209.641 18.6406 198 33 198C47.3594 198 59 209.641 59 224Z" fill="currentColor"/>
+<path d="M155 130C170.464 130 183 117.464 183 102C183 86.536 170.464 74 155 74C139.536 74 127 86.536 127 102C127 117.464 139.536 130 155 130Z" fill="currentColor"/>
+</svg>
diff --git a/packages/core/src/components/Debugger.tsx b/packages/core/src/components/Debugger.tsx
index 331a12c2..b7a20d6a 100644
--- a/packages/core/src/components/Debugger.tsx
+++ b/packages/core/src/components/Debugger.tsx
@@ -1,3 +1,4 @@
+import { ReactComponent as Logo } from '~/assets/glyph.svg';
 import { Integration, IntegrationData } from '~/integrations/integration';
 import classNames from '~/lib/classNames';
 import useKeyPress from '~/lib/useKeyPress';
@@ -34,14 +35,17 @@ 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">
-          <h1 className="font-raleway flex flex-1 items-end gap-x-1 opacity-80">
-            <div className="text-3xl font-light uppercase tracking-widest">Spotlight</div>
+          <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} />
+              <div className="text-3xl font-light uppercase leading-7 tracking-widest">Spotlight</div>
+            </div>
             <div className="flex items-center gap-x-1 text-sm text-indigo-300">
-              by{' '}
+              <span>by</span>
               <a href="https://sentry.io" className="font-semibold hover:underline">
                 Sentry
               </a>
-              <a href="https://github.com/getsentry/spotlight" rel="me" className="sl-flex">
+              <a href="https://github.com/getsentry/spotlight" rel="me" className="sl-flex ml-2">
                 <span className="sr-only">GitHub</span>
                 <svg
                   aria-hidden="true"
diff --git a/packages/core/src/components/Trigger.tsx b/packages/core/src/components/Trigger.tsx
index f868a2d3..bbe6eb68 100644
--- a/packages/core/src/components/Trigger.tsx
+++ b/packages/core/src/components/Trigger.tsx
@@ -1,3 +1,5 @@
+import { ReactComponent as Logo } from '~/assets/glyph.svg';
+import classNames from '~/lib/classNames';
 import { TriggerButtonCount } from '~/types';
 
 export default function Trigger({
@@ -13,14 +15,17 @@ export default function Trigger({
 
   return (
     <div
-      className="sentry-trigger"
+      className={classNames(
+        'sentry-trigger',
+        count.severe === 0 ? 'bg-indigo-300 text-indigo-600' : 'bg-red-500 text-white',
+      )}
       style={{
         display: isOpen ? 'none' : undefined,
       }}
       onClick={() => setOpen(!isOpen)}
     >
-      Spotlight
-      <span className={count.severe === 0 ? 'bg-indigo-300 text-indigo-600' : 'bg-red-500 text-white'}>{countSum}</span>
+      <Logo height={24} width={24} />
+      <span>{countSum}</span>
     </div>
   );
 }
diff --git a/packages/core/src/index.css b/packages/core/src/index.css
index 290ff470..fadd30d3 100644
--- a/packages/core/src/index.css
+++ b/packages/core/src/index.css
@@ -4,14 +4,14 @@
 
 .sentry-trigger {
   @apply fixed bottom-2 right-2 inline-flex items-center justify-center gap-x-2 rounded border px-3 py-2 font-medium opacity-80 hover:opacity-100;
-  @apply font-raleway border-indigo-950 bg-indigo-900 text-sm font-light uppercase tracking-widest text-white;
+  @apply font-raleway border-indigo-950 bg-indigo-900 font-light uppercase tracking-widest text-white;
 
   z-index: 999999;
   cursor: pointer;
 }
 
 .sentry-trigger span {
-  @apply rounded px-1.5 py-0.5 font-sans text-xs font-medium;
+  @apply rounded px-1.5 py-0.5 font-sans font-medium;
 }
 
 .fullscreen-blur {