🍕 chore(icons): replace placeholder S logo with Clay icon everywhere

src/options/Options.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import clayIconUrl from '@/assets/clay-icon.png?inline';
 import { loadPreferences, savePreferences } from '@/lib/storage';
 import { clearRecents } from '@/lib/recents';
 import { emptyMapping } from '@/lib/site-host';
@@ -83,7 +84,7 @@ export function Options() {
   return (
     <div className="options">
       <header className="options-header">
-        <div className="options-logo">S</div>
+        <img className="options-logo" src={clayIconUrl} alt="" aria-hidden="true" />
         <h1>Clay Slip Settings</h1>
         {saved && <span className="options-saved">Saved</span>}
       </header>

src/options/options.css

@@ -48,15 +48,10 @@ body {
 }
 
 .options-logo {
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  background: var(--accent);
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
+  width: 32px;
+  height: 32px;
+  display: block;
+  object-fit: contain;
 }
 
 .options-saved {

src/popup/Popup.tsx

@@ -1,7 +1,9 @@
+import clayIconUrl from '@/assets/clay-icon.png?inline';
+
 export function Popup() {
   return (
     <div className="popup">
-      <div className="popup-logo">S</div>
+      <img className="popup-logo" src={clayIconUrl} alt="" aria-hidden="true" />
       <h1 className="popup-title">No Clay components found</h1>
       <p className="popup-body">
         This page does not appear to be powered by Clay. Open a Clay page and click the toolbar icon

src/popup/popup.css

@@ -24,17 +24,11 @@ body {
 }
 
 .popup-logo {
-  width: 36px;
-  height: 36px;
+  width: 40px;
+  height: 40px;
   margin: 0 auto 12px;
-  border-radius: 8px;
-  background: #e22c2c;
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 18px;
+  display: block;
+  object-fit: contain;
 }
 
 .popup-title {