feat: update project logo and branding across extension pages and content script

codedpills · codedpills · commit cea27f9aec2b · 2026-02-19T20:47:36.000+01:00
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Review Format Kit (RFK)
+# <img src="public/assets/icons/icon.svg" width="48" height="48" align="center"> Review Format Kit (RFK)
 
 **Review Format Kit (RFK)** is a browser extension designed to help developers standardize their code review comments using proven conventions like [Conventional Comments](https://conventionalcomments.org/) and [Netlify Feedback Ladders](https://www.netlify.com/blog/2020/03/05/feedback-ladders-how-we-encode-code-reviews-at-netlify/).
 
diff --git a/public/assets/icons/icon.svg b/public/assets/icons/icon.svg
diff --git a/public/assets/icons/logo.png b/public/assets/icons/logo.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -41,6 +41,11 @@
       "128": "assets/icons/icon.svg"
     }
   },
-  "options_page": "src/options/options.html"
-
+  "options_page": "src/options/options.html",
+  "web_accessible_resources": [
+    {
+      "resources": ["assets/icons/icon.svg"],
+      "matches": ["*://github.com/*"]
+    }
+  ]
 }
diff --git a/src/content/icon-injector.ts b/src/content/icon-injector.ts
@@ -133,28 +133,19 @@ function createIconElement(textareaId: string): HTMLElement {
   button.setAttribute('aria-label', 'Insert convention comment');
   button.title = 'Insert convention comment (Cmd+Shift+/)';
 
-  // SVG icon (speech bubble with "CC")
+  // New branded SVG icon loaded from extension assets
   const svgNamespace = 'http://www.w3.org/2000/svg';
   const svg = document.createElementNS(svgNamespace, 'svg');
-  svg.setAttribute('width', '16');
-  svg.setAttribute('height', '16');
-  svg.setAttribute('viewBox', '0 0 16 16');
-  svg.setAttribute('fill', 'currentColor');
-
-  const path = document.createElementNS(svgNamespace, 'path');
-  path.setAttribute('d', 'M2 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H5l-3 3V4z');
-  path.setAttribute('opacity', '0.6');
-
-  const text = document.createElementNS(svgNamespace, 'text');
-  text.setAttribute('x', '4');
-  text.setAttribute('y', '10');
-  text.setAttribute('font-size', '6');
-  text.setAttribute('font-weight', 'bold');
-  text.setAttribute('fill', 'currentColor');
-  text.textContent = 'CC';
-
-  svg.appendChild(path);
-  svg.appendChild(text);
+  svg.setAttribute('width', '18');
+  svg.setAttribute('height', '18');
+  svg.setAttribute('viewBox', '0 0 251 251');
+
+  const image = document.createElementNS(svgNamespace, 'image');
+  image.setAttribute('href', chrome.runtime.getURL('assets/icons/icon.svg'));
+  image.setAttribute('width', '251');
+  image.setAttribute('height', '251');
+
+  svg.appendChild(image);
   button.appendChild(svg);
 
   container.appendChild(button);
diff --git a/src/options/options.css b/src/options/options.css
@@ -37,6 +37,17 @@ header h1 {
   color: #24292f;
 }
 
+.logo-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.header-logo {
+  width: 32px;
+  height: 32px;
+}
+
 /* Tabs */
 .tabs {
   display: flex;
diff --git a/src/options/options.html b/src/options/options.html
@@ -11,7 +11,10 @@
 <body>
     <div class="settings-container">
         <header>
-            <h1>Review Format Kit (RFK) - Settings</h1>
+            <div class="logo-container">
+                <img src="/assets/icons/icon.svg" alt="RFK Logo" class="header-logo">
+                <h1>Review Format Kit (RFK) - Settings</h1>
+            </div>
         </header>
 
         <nav class="tabs">
diff --git a/src/popup/popup.css b/src/popup/popup.css
@@ -29,6 +29,9 @@ header {
   margin-bottom: 16px;
   padding-bottom: 12px;
   border-bottom: 1px solid #d0d7de;
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
 header h1 {
@@ -37,6 +40,11 @@ header h1 {
   color: #24292f;
 }
 
+.header-logo {
+  width: 24px;
+  height: 24px;
+}
+
 /* Active Group Section */
 .active-group {
   margin-bottom: 16px;
diff --git a/src/popup/popup.html b/src/popup/popup.html
@@ -11,6 +11,7 @@
 <body>
     <div class="popup-container">
         <header>
+            <img src="/assets/icons/icon.svg" alt="RFK Logo" class="header-logo">
             <h1>Review Format Kit (RFK)</h1>
         </header>
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-# Review Format Kit (RFK)`
	`1`	`+# <img src="public/assets/icons/icon.svg" width="48" height="48" align="center"> Review Format Kit (RFK)`
`2`	`2`
`3`	`3`	`Review Format Kit (RFK) is a browser extension designed to help developers standardize their code review comments using proven conventions like [Conventional Comments](https://conventionalcomments.org/) and [Netlify Feedback Ladders](https://www.netlify.com/blog/2020/03/05/feedback-ladders-how-we-encode-code-reviews-at-netlify/).`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,11 @@`
`41`	`41`	`"128": "assets/icons/icon.svg"`
`42`	`42`	`}`
`43`	`43`	`},`
`44`		`- "options_page": "src/options/options.html"`
`45`		`-`
	`44`	`+ "options_page": "src/options/options.html",`
	`45`	`+ "web_accessible_resources": [`
	`46`	`+ {`
	`47`	`+ "resources": ["assets/icons/icon.svg"],`
	`48`	`+ "matches": ["://github.com/"]`
	`49`	`+ }`
	`50`	`+ ]`
`46`	`51`	`}`