1.1.00

packages/shared/src/components/channel/DeleteConfirmationModal.module.css

@@ -0,0 +1,99 @@
+/* ── Delete confirmation modal ────────────────────────────────────
+   Shown before `api.messageActions.remove` actually runs. Parallels
+   PinConfirmationModal: description + static PinnedMessageRow
+   preview + Cancel / Delete actions. Two differences from the pin
+   dialog: the action row is horizontal (Cancel left, Delete right)
+   and the primary button is always the danger variant. */
+
+.body {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 0;
+}
+
+.headerFlush {
+	border-bottom: none;
+}
+
+.description {
+	font-size: 0.9375rem;
+	line-height: 1.4;
+	color: var(--text-secondary);
+	margin: 0;
+}
+
+.previewWrap {
+	margin: 0 -12px;
+}
+
+.actions {
+	display: flex;
+	flex-direction: row;
+	gap: 8px;
+	margin-top: 4px;
+}
+
+.primaryButton,
+.secondaryButton {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 12px 16px;
+	border: none;
+	border-radius: 0.75rem;
+	font: inherit;
+	font-size: 0.9375rem;
+	font-weight: 700;
+	cursor: pointer;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.primaryButton {
+	background-color: var(--brand-primary);
+	color: #fff;
+	transition: filter 0.15s;
+}
+
+.primaryButton:active:not(:disabled) {
+	filter: brightness(0.92);
+}
+
+.primaryButton:disabled {
+	opacity: 0.55;
+	cursor: default;
+}
+
+/* Danger variant — Delete is always destructive so this is always on. */
+.primaryButtonDanger {
+	background-color: var(--button-danger-fill);
+}
+
+.primaryButtonDanger:hover:not(:disabled) {
+	filter: brightness(1.05);
+}
+
+.primaryButtonDanger:active:not(:disabled) {
+	background-color: var(--button-danger-active-fill);
+	filter: none;
+}
+
+.secondaryButton {
+	background-color: var(--background-secondary-alt);
+	color: var(--text-primary);
+	transition: background-color 0.15s;
+}
+
+.secondaryButton:hover,
+.secondaryButton:active {
+	background-color: var(--background-modifier-hover);
+}
+
+.error {
+	padding: 10px 14px;
+	background-color: hsl(0, calc(60% * var(--saturation-factor)), 22%);
+	color: hsl(0, calc(80% * var(--saturation-factor)), 85%);
+	border-radius: 0.5rem;
+	font-size: 0.8125rem;
+}