Add new glyph

getsentry · Nov 22, 2023 · d55940f · d55940f
1 parent 19e43b4
commit d55940f
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 9 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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 {