Dangerous alerts.

GitOrigin-RevId: f65ac1d4877d1a6e2d403662b8c6d831314ffa41
nkzw-tech · Dec 3, 2024 · e7eef78 · e7eef78
1 parent dcd0f7a
commit e7eef78
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/hera/ui/MapDetails.tsx b/hera/ui/MapDetails.tsx
@@ -53,7 +53,7 @@ export type MapDetailsProps = Readonly<{
   timer?: number | null;
 }>;
 
-export const SpecialUsers = new Set(['User-1']);
+export const SpecialUsers = new Set(['User-1', 'User-2876']);
 
 export default function MapDetails({
   buttons,

diff --git a/ui/hooks/useAlert.tsx b/ui/hooks/useAlert.tsx
@@ -16,6 +16,7 @@ import useBlockInput from '../controls/useBlockInput.tsx';
 import useHorizontalMenuNavigation from '../controls/useHorizontalMenuNavigation.tsx';
 import useInput from '../controls/useInput.tsx';
 import { applyVar } from '../cssVar.tsx';
+import getColor from '../getColor.tsx';
 import pixelBorder from '../pixelBorder.tsx';
 import Portal from '../Portal.tsx';
 import { PulseStyle } from '../PulseStyle.tsx';
@@ -57,13 +58,17 @@ export default function useAlert() {
 
 const Alert = ({
   acceptText = <fbt desc="Button to accept a dialog">Ok</fbt>,
+  buttonColor,
+  disableAccept,
   onAccept,
   onCancel,
   preventCancel,
   text,
   title,
 }: {
   acceptText?: ReactNode;
+  buttonColor?: 'red';
+  disableAccept?: boolean;
   onAccept?: () => void;
   onCancel?: () => void;
   preventCancel?: true;
@@ -107,7 +112,7 @@ const Alert = ({
   );
 
   useBlockInput('top');
-  useInput('accept', accept, 'top');
+  useInput('accept', disableAccept ? () => {} : accept, 'top');
   useInput('cancel', cancel, 'top');
   useInput('menu', (event) => event.preventDefault(), 'top');
 
@@ -156,7 +161,9 @@ const Alert = ({
                 <button
                   className={cx(
                     acceptStyle,
-                    selected === (showCancel ? 1 : 0) &&
+                    buttonColor === 'red' && redStyle,
+                    !disableAccept &&
+                      selected === (showCancel ? 1 : 0) &&
                       cx('focus', PulseStyle),
                   )}
                   onClick={accept}
@@ -205,3 +212,14 @@ const acceptStyle = css`
   ${pixelBorder(applyVar('highlight-color'), 2)}
   color: ${applyVar('highlight-color')};
 `;
+
+const redStyle = css`
+  &,
+  &:hover,
+  &:focus,
+  &:active {
+    ${pixelBorder(getColor('red'), 2)}
+
+    color: ${getColor('red')};
+  }
+`;