Update archiving status styling

[Shrinks99]

User description

Changes

• Adds all material design colour palette variables
• Adds icons to archiving status card
• Adjust padding, spacing, and styling of the archiving status card elements
• Changes the accent colour to orange!

Screenshots

---

PR Type

Enhancement

---

Description

• Added Material Design color palette

• Improved archiving status card with icons

• Enhanced UI styling and spacing

• Changed accent color to orange

---

Changes walkthrough 📝

	Relevant files
Enhancement	sidepanel.ts Enhance status card UI with icons and layout improvements src/sidepanel.ts Added icons to status states (check_circle, folder_off) Improved status container layout with flex and proper spacing Renamed CSS classes for better semantics (status-page-title → status-content) Updated status messages for better clarity +52/-36
Configuration changes	sidepanel.html Add Material Design color system variables                              static/sidepanel.html Added complete Material Design color palette variables Changed primary color scheme to orange Added icon size variable (--md-icon-size) Added surface container and other color variables +50/-0

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[pr-agent-monadical]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Inconsistent Styling The search container has lost its background color (previously #ece7f8) but no replacement color is defined, which may affect visibility and user experience. .search-container { margin: 16px 12px; height: 32px; border-radius: 9999px; display: flex; align-items: center; overflow: hidden; Commented Code There are commented CSS variables that might cause confusion about which values are actually being used, particularly for surface and surface-container properties. /* --md-sys-color-surface: rgb(255 248 245); */ --md-sys-color-on-surface: rgb(36 25 19); --md-sys-color-surface-variant: rgb(252 220 204); --md-sys-color-on-surface-variant: rgb(87 66 55); --md-sys-color-outline: rgb(139 114 101); --md-sys-color-outline-variant: rgb(222 192 177); --md-sys-color-shadow: rgb(0 0 0); --md-sys-color-scrim: rgb(0 0 0); --md-sys-color-inverse-surface: rgb(59 46 39); --md-sys-color-inverse-on-surface: rgb(255 237 229); --md-sys-color-inverse-primary: rgb(255 182 140); --md-sys-color-primary-fixed: rgb(255 219 201); --md-sys-color-on-primary-fixed: rgb(50 18 0); --md-sys-color-primary-fixed-dim: rgb(255 182 140); --md-sys-color-on-primary-fixed-variant: rgb(117 52 0); --md-sys-color-secondary-fixed: rgb(255 219 201); --md-sys-color-on-secondary-fixed: rgb(50 18 0); --md-sys-color-secondary-fixed-dim: rgb(255 182 140); --md-sys-color-on-secondary-fixed-variant: rgb(108 57 24); --md-sys-color-tertiary-fixed: rgb(234 232 100); --md-sys-color-on-tertiary-fixed: rgb(29 29 0); --md-sys-color-tertiary-fixed-dim: rgb(205 204 75); --md-sys-color-on-tertiary-fixed-variant: rgb(74 73 0); --md-sys-color-surface-dim: rgb(235 214 203); --md-sys-color-surface-bright: rgb(255 248 245); --md-sys-color-surface-container-lowest: rgb(255 255 255); --md-sys-color-surface-container-low: rgb(255 241 235); /* --md-sys-color-surface-container: rgb(255 234 223); */