feat(ui): improve icons and button styling

CHANGELOG.md

@@ -6,15 +6,14 @@ All notable changes to this project will be documented in this file. See [standa
 
 ### Features
 
-* **popup:** add re-enable button when plugin is globally closed ([49567be](https://github.com/thinktwiceco/thinktwice-plugin/commit/49567be192d42955a36434e23d8daa38a098ebc0))
-
+- **popup:** add re-enable button when plugin is globally closed ([49567be](https://github.com/thinktwiceco/thinktwice-plugin/commit/49567be192d42955a36434e23d8daa38a098ebc0))
 
 ### Miscellaneous Chores
 
-* **content:** add agent debug logging ([562cd41](https://github.com/thinktwiceco/thinktwice-plugin/commit/562cd4103764a8bb12aa2433b3ecd45e631a2d23))
-* **docs:** format changelog ([a01fa06](https://github.com/thinktwiceco/thinktwice-plugin/commit/a01fa06c0b78c60c9c43578a02f27b45d81d2a08))
-* **docs:** update documenation ([48fae23](https://github.com/thinktwiceco/thinktwice-plugin/commit/48fae233894225f262cc7c307a394f230328db1f))
-* **tests:** Fix unintended mocking ([ea6e9c6](https://github.com/thinktwiceco/thinktwice-plugin/commit/ea6e9c6059ef8e0bf70dd4a0326594536d68b75f))
+- **content:** add agent debug logging ([562cd41](https://github.com/thinktwiceco/thinktwice-plugin/commit/562cd4103764a8bb12aa2433b3ecd45e631a2d23))
+- **docs:** format changelog ([a01fa06](https://github.com/thinktwiceco/thinktwice-plugin/commit/a01fa06c0b78c60c9c43578a02f27b45d81d2a08))
+- **docs:** update documenation ([48fae23](https://github.com/thinktwiceco/thinktwice-plugin/commit/48fae233894225f262cc7c307a394f230328db1f))
+- **tests:** Fix unintended mocking ([ea6e9c6](https://github.com/thinktwiceco/thinktwice-plugin/commit/ea6e9c6059ef8e0bf70dd4a0326594536d68b75f))
 
 ## [0.1.0](https://github.com/thinktwiceco/thinktwice-plugin/compare/v0.0.4...v0.1.0) (2026-01-29)
 

components/ui/Button.tsx

@@ -1,10 +1,16 @@
-import { commonSpacing, iconSize, spacing, textSize } from "../../design-system"
+import { commonSpacing, spacing, textSize } from "../../design-system"
 
 type ButtonProps = {
   children: React.ReactNode
   onClick?: () => void
-  variant: "primary" | "secondary" | "tertiary" | "disabled"
+  variant:
+    | "primary"
+    | "primaryEmphasized"
+    | "secondary"
+    | "tertiary"
+    | "disabled"
   icon?: string
+  iconSize?: string
   disabled?: boolean
 }
 
@@ -13,6 +19,7 @@ const Button = ({
   onClick,
   variant,
   icon,
+  iconSize: iconSizeProp,
   disabled
 }: ButtonProps) => {
   const getButtonStyle = (variant, isDisabled) => {
@@ -21,6 +28,7 @@ const Button = ({
       border: "none",
       padding: commonSpacing.buttonPadding,
       fontSize: textSize.md,
+      minHeight: "48px",
       cursor: isDisabled ? "not-allowed" : "pointer",
       display: "flex",
       alignItems: "center",
@@ -38,17 +46,27 @@ const Button = ({
           backgroundColor: "var(--primary-button-color)",
           color: "#065F46"
         }
+      case "primaryEmphasized":
+        return {
+          ...baseStyle,
+          backgroundColor: "var(--primary-button-color)",
+          color: "#044d3a",
+          boxShadow: "0 4px 14px rgba(0, 0, 0, 0.22)",
+          padding: `${spacing.md} ${spacing.xxl}`,
+          fontSize: textSize.lg
+        }
       case "secondary":
         return {
           ...baseStyle,
           backgroundColor: "var(--secondary-button-color)",
-          color: "#223573"
+          color: "#36497f"
         }
       case "tertiary":
         return {
           ...baseStyle,
           backgroundColor: "var(--tertiary-button-color)",
-          color: "#7F1D1D"
+          color: "#7F1D1D",
+          whiteSpace: "nowrap"
         }
       case "disabled":
         return {
@@ -75,7 +93,10 @@ const Button = ({
         <img
           src={icon}
           alt="icon"
-          style={{ width: iconSize.medium, height: iconSize.medium }}
+          style={{
+            width: iconSizeProp ?? "24px",
+            height: iconSizeProp ?? "24px"
+          }}
         />
       )}
       {children}

components/ui/PrivacyBadge.tsx

@@ -32,7 +32,20 @@ const PrivacyBadge = () => {
         <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
         <path d="M7 11V7a5 5 0 0 1 10 0v4" />
       </svg>
-      <p style={textStyle}>Private & Local: We don’t share or sell your data</p>
+      <p style={textStyle}>
+        Private & Local: We don’t share or sell your data. Icons by{" "}
+        <a
+          href="https://icons8.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{
+            color: "var(--text-color-light)",
+            textDecoration: "underline"
+          }}>
+          Icons8
+        </a>
+        .
+      </p>
     </div>
   )
 }

package.json

@@ -56,7 +56,11 @@
     "web_accessible_resources": [
       {
         "resources": [
+          "assets/icons/Icons/clock_blue_outline.png",
+          "assets/icons/Icons/hands-clapping-green.png",
+          "assets/icons/Icons/shooting_star_red.png",
           "assets/icons/Icons/Thoughtful.svg",
+          "assets/icons/Icons/lightbulb_solid.png",
           "assets/icons/Icons/Lightbulb.svg",
           "assets/icons/Icons/Clock.svg",
           "assets/icons/Icons/Trophy.svg",

views/ProductView.tsx

@@ -1,22 +1,16 @@
 import { useState } from "react"
-import clockIcon from "url:../assets/icons/Icons/Clock.svg"
-import lightbulbIcon from "url:../assets/icons/Icons/Lightbulb.svg"
-import thoughtfulIcon from "url:../assets/icons/Icons/Thoughtful.svg"
-import trophyIcon from "url:../assets/icons/Icons/Trophy.png"
+import alarmIcon from "url:../assets/icons/Icons/clock_blue_outline.png"
+import handsClappingIcon from "url:../assets/icons/Icons/hands-clapping-green.png"
+import lightbulbIcon from "url:../assets/icons/Icons/lightbulb_solid.png"
+import trophyIcon from "url:../assets/icons/Icons/shooting_star_red.png"
 
 import Nudge from "../components/Nudge"
 import Button from "../components/ui/Button"
 import Card from "../components/ui/Card"
 import Header from "../components/ui/Header"
 import PauseMenu, { type PauseDuration } from "../components/ui/PauseMenu"
 import PrivacyBadge from "../components/ui/PrivacyBadge"
-import {
-  iconSize,
-  layout,
-  spacing,
-  textSize,
-  typography
-} from "../design-system"
+import { layout, spacing, textSize, typography } from "../design-system"
 import { ProductActionManager } from "../managers/ProductActionManager"
 import type { Product } from "../storage"
 import { ProductState, storage } from "../storage"
@@ -232,8 +226,8 @@ const ProductView = ({
         <p style={subtitleStyle}>
           <img
             src={lightbulbIcon}
-            alt="lightbulb"
-            style={{ width: iconSize.small, height: iconSize.small }}
+            alt=""
+            style={{ width: "20px", height: "20px" }}
           />
           {handleIntroSentect(product)}
         </p>
@@ -242,22 +236,23 @@ const ProductView = ({
         <Nudge />
         <div style={actionsStyle}>
           <Button
-            variant="primary"
-            icon={thoughtfulIcon}
+            variant="primaryEmphasized"
+            icon={handsClappingIcon}
             onClick={handleIDontNeedIt}>
             I don&apos;t really need it
           </Button>
 
           <div style={actionsGroupStyle}>
             <Button
               variant="secondary"
-              icon={clockIcon}
+              icon={alarmIcon}
               onClick={handleSleepOnIt}>
               Sleep on it
             </Button>
             <Button
               variant="tertiary"
               icon={trophyIcon}
+              iconSize="26px"
               onClick={handleINeedIt}>
               I need it
             </Button>