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 {