feat(ui): improve sleep flow copy and add button icons

eslint.config.mts

@@ -5,7 +5,7 @@ import tseslint from "typescript-eslint"
 
 export default tseslint.config(
   {
-    ignores: ["build/**", ".plasmo/**", "node_modules/**"]
+    ignores: ["build/**", ".plasmo/**", "node_modules/**", "test-results/**"]
   },
   {
     files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],

views/BackToAnOldFlame.tsx

@@ -13,6 +13,9 @@
  */
 
 import { useEffect, useState } from "react"
+import clockIcon from "url:../assets/icons/Icons/clock_blue_outline.png"
+import handsClappingIcon from "url:../assets/icons/Icons/hands-clapping-green.png"
+import trophyIcon from "url:../assets/icons/Icons/shooting_star_red.png"
 import thoughtfulIcon from "url:../assets/icons/Icons/Thoughtful.svg"
 
 import Button from "../components/ui/Button"
@@ -176,16 +179,26 @@ const BackToAnOldFlame = ({
       </p>
 
       <div style={actionsStyle}>
-        <Button variant="primary" onClick={handleINeedIt} disabled={processing}>
+        <Button
+          variant="primary"
+          icon={trophyIcon}
+          iconSize="26px"
+          onClick={handleINeedIt}
+          disabled={processing}>
           Yes, I want it
         </Button>
         <Button
           variant="secondary"
+          icon={handsClappingIcon}
           onClick={handleDontNeedIt}
           disabled={processing}>
           I don&apos;t need it
         </Button>
-        <Button variant="tertiary" onClick={onClose} disabled={processing}>
+        <Button
+          variant="tertiary"
+          icon={clockIcon}
+          onClick={onClose}
+          disabled={processing}>
           I&apos;m still not sure
         </Button>
       </div>

views/EarlyReturnFromSleep.tsx

@@ -13,7 +13,10 @@
  */
 
 import { useEffect, useState } from "react"
+import alarmIcon from "url:../assets/icons/Icons/clock_blue_outline.png"
 import clockIcon from "url:../assets/icons/Icons/Clock.svg"
+import handsClappingIcon from "url:../assets/icons/Icons/hands-clapping-green.png"
+import trophyIcon from "url:../assets/icons/Icons/shooting_star_red.png"
 
 import Button from "../components/ui/Button"
 import Card from "../components/ui/Card"
@@ -167,20 +170,27 @@ const EarlyReturnFromSleep = ({
       <p style={subtitleStyle}>Have you made a decision?</p>
 
       <div style={actionsStyle}>
-        <Button variant="primary" onClick={handleINeedIt} disabled={processing}>
-          I need this now
+        <Button
+          variant="primaryEmphasized"
+          icon={handsClappingIcon}
+          onClick={handleIDontNeedIt}
+          disabled={processing}>
+          I don&apos;t need it
         </Button>
         <Button
           variant="secondary"
+          icon={alarmIcon}
           onClick={handleKeepWaiting}
           disabled={processing}>
-          I&apos;ll wait
+          Sleep on it
         </Button>
         <Button
           variant="tertiary"
-          onClick={handleIDontNeedIt}
+          icon={trophyIcon}
+          iconSize="26px"
+          onClick={handleINeedIt}
           disabled={processing}>
-          I don&apos;t need it
+          I need this now
         </Button>
       </div>
     </Card>

views/SleepOnIt.tsx

@@ -151,14 +151,17 @@ const SleepOnIt = ({
         }
       />
       <h1 style={titleStyle}>Brilliant choice!</h1>
-      <p style={subtitleStyle}>
-        Taking time to think is a superpower. How long would you like to wait?
-      </p>
-
       {!saved ? (
         <>
-          <p style={{ ...subtitleStyle, marginBottom: spacing.md }}>
-            For how long you would like to think about this purchase?
+          <p
+            style={{
+              ...subtitleStyle,
+              marginBottom: spacing.md,
+              lineHeight: 1.2
+            }}>
+            Taking time to think is a superpower.
+            <br />
+            How long would you like to wait?
           </p>
           <div style={durationOptionsStyle}>
             {durationOptions.map((option) => (
@@ -182,11 +185,20 @@ const SleepOnIt = ({
           </Button>
         </>
       ) : (
-        <p style={successStyle}>
-          {countdown !== null && countdown > 0
-            ? `Closing tab in ${countdown}`
-            : "✓ Reminder saved!"}
-        </p>
+        <>
+          <p style={{ ...successStyle, marginBottom: spacing.md }}>
+            ✓ Reminder saved
+          </p>
+          <p style={{ ...subtitleStyle, marginBottom: spacing.md }}>
+            You have committed to waiting{" "}
+            {durationOptions.find((o) => o.value === selectedDuration)?.label ??
+              "this duration"}
+            . You can do it!
+          </p>
+          {countdown !== null && countdown > 0 && (
+            <p style={successStyle}>Closing tab in {countdown}</p>
+          )}
+        </>
       )}
     </Card>
   )