fix: delete and report button colors & missing modal backgrounds

7w1 · 7w1 · commit f4cc4d51de43 · 2026-02-25T21:19:58.000-06:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Sable Client Changelog
 
+## 1.1.7
+
+- Fix delete and report button colors.
+- Fix modal backgrounds missing in some menus.
+
 ## 1.1.6
 
 - Fix crash if too many emojis present [cinnyapp#2570](https://github.com/cinnyapp/cinny/issues/2570)
diff --git a/src/app/components/message/modals/GlobalModalManager.tsx b/src/app/components/message/modals/GlobalModalManager.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useAtom } from 'jotai';
-import { Overlay, OverlayBackdrop, OverlayCenter, Box } from 'folds';
+import { Overlay, OverlayBackdrop, OverlayCenter, Box, Modal } from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { MessageReportInternal } from './MessageReport';
 import { MessageDeleteInternal } from './MessageDelete';
@@ -28,23 +28,37 @@ export function GlobalModalManager() {
                         escapeDeactivates: stopPropagation,
                     }}
                 >
-                    <Box>
+                    <div>
                         {modal.type === ModalType.Report && (
-                            <MessageReportInternal room={modal.room} mEvent={modal.mEvent} onClose={close} />
+                            <Box>
+                                <MessageReportInternal room={modal.room} mEvent={modal.mEvent} onClose={close} />
+                            </Box>
                         )}
+
                         {modal.type === ModalType.Delete && (
-                            <MessageDeleteInternal room={modal.room} mEvent={modal.mEvent} onClose={close} />
+                            <Box>
+                                <MessageDeleteInternal room={modal.room} mEvent={modal.mEvent} onClose={close} />
+                            </Box>
                         )}
+
                         {modal.type === ModalType.Source && (
-                            <MessageSourceInternal room={modal.room} mEvent={modal.mEvent} onClose={close} />
+                            <Modal variant="Surface" size="300">
+                                <MessageSourceInternal room={modal.room} mEvent={modal.mEvent} onClose={close} />
+                            </Modal>
                         )}
+
                         {modal.type === ModalType.Reactions && (
-                            <MessageAllReactionInternal room={modal.room} relations={modal.relations} onClose={close} />
+                            <Modal variant="Surface" size="300">
+                                <MessageAllReactionInternal room={modal.room} relations={modal.relations} onClose={close} />
+                            </Modal>
                         )}
+
                         {modal.type === ModalType.ReadReceipts && (
-                            <MessageReadReceiptInternal room={modal.room} eventId={modal.eventId} onClose={close} />
+                            <Modal variant="Surface" size="300">
+                                <MessageReadReceiptInternal room={modal.room} eventId={modal.eventId} onClose={close} />
+                            </Modal>
                         )}
-                    </Box>
+                    </div>
                 </FocusTrap>
             </OverlayCenter>
         </Overlay>
diff --git a/src/app/components/message/modals/MessageDelete.tsx b/src/app/components/message/modals/MessageDelete.tsx
@@ -18,6 +18,7 @@ export function MessageDeleteItem({ room, mEvent }: { room: Room; mEvent: Matrix
             size="300"
             after={<Icon size="100" src={Icons.Delete} />}
             radii="300"
+            fill="None"
             variant="Critical"
             onClick={(e: React.MouseEvent) => {
                 e.preventDefault();
diff --git a/src/app/components/message/modals/MessageReport.tsx b/src/app/components/message/modals/MessageReport.tsx
@@ -17,6 +17,7 @@ export function MessageReportItem({ room, mEvent }: { room: Room; mEvent: Matrix
         <MenuItem
             size="300"
             variant="Critical"
+            fill="None"
             after={<Icon size="100" src={Icons.Warning} />}
             radii="300"
             onClick={(e: React.MouseEvent) => {
