Review
Scope kiln-hold CTAs with CSS modules composes
KilnShare still ships hold-slot CTAs from a global buttons.css, so .primary undercuts every other primary on the member portal. Move the shared surface into Button.module.css, reuse it with composes for primary/ghost variants (no :global), and wire ConfirmHold to the hashed class map so nothing leaks into the rest of the app.
CSS ModulesTier 1css-modulescomposesscoping
Click a line to flag it, pick one or more labels, then submit. If the change looks correct, approve it.
src/holds/Button.module.css+11-4
| 1 | - | /* was global: src/styles/buttons.css */ | |
| 2 | - | .btn { | |
| 1 | + | /* local-only base — hashed; composes shares it without a second DOM class string */ | |
| 2 | + | .base { | |
| 3 | 3 | display: inline-flex; | |
| 4 | 4 | align-items: center; | |
| 5 | 5 | justify-content: center; | |
| 6 | 6 | gap: 0.5rem; | |
| 7 | 7 | min-height: 2.5rem; | |
| 8 | 8 | padding: 0.5rem 1rem; | |
| 9 | 9 | border-radius: 0.5rem; | |
| 10 | 10 | font: 600 0.875rem/1.2 var(--sans); | |
| 11 | 11 | cursor: pointer; | |
| 12 | 12 | } | |
| 13 | 13 | ||
| 14 | - | .btn.primary { | |
| 14 | + | .primary { | |
| 15 | + | composes: base; | |
| 15 | 16 | border: 1px solid var(--clay-700); | |
| 16 | 17 | background: var(--clay-600); | |
| 17 | 18 | color: var(--paper); | |
| 18 | 19 | } | |
| 19 | 20 | ||
| 20 | - | .btn.ghost { | |
| 21 | + | .ghost { | |
| 22 | + | composes: base; | |
| 21 | 23 | border: 1px solid var(--ink-200); | |
| 22 | 24 | background: transparent; | |
| 23 | 25 | color: var(--ink-800); | |
| 24 | 26 | } | |
| 25 | 27 | ||
| 28 | + | .primary:disabled, | |
| 29 | + | .ghost:disabled { | |
| 30 | + | opacity: 0.5; | |
| 31 | + | cursor: not-allowed; | |
| 32 | + | } |