107 lines
4.5 KiB
TypeScript
107 lines
4.5 KiB
TypeScript
import { useEffect, useState } from "react"
|
|
import * as environment from "../environment"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
interface Props {
|
|
isOptions?: boolean
|
|
show: boolean
|
|
}
|
|
|
|
const openInNewTab = (url: string): void => {
|
|
const newWindow = window.open(url, "_blank", "noopener,noreferrer")
|
|
if (newWindow) newWindow.opener = null
|
|
}
|
|
|
|
export const BraveModal = ({ show, isOptions }: Props) => {
|
|
const [showModal, setShowModal] = useState<boolean>(show)
|
|
|
|
useEffect(() => {
|
|
setShowModal(show)
|
|
}, [show])
|
|
|
|
return (
|
|
<div
|
|
id="defaultModal"
|
|
className={`${isOptions ? "absolute " : ""} ${
|
|
showModal ? "" : "hidden "
|
|
}overflow-y-auto overflow-x-hidden fixed bottom-0 right-0 left-0 z-50 w-full h-modal`}
|
|
>
|
|
<div className="relative w-full h-full md:h-auto">
|
|
<div className={"border-2 border-solid relative bg-muted shadow rounded-t-lg"}>
|
|
<div className="flex justify-between items-center py-2 px-4 rounded-t">
|
|
<h5 className="text-base font-semibold text-accent">
|
|
Attention Brave Users
|
|
</h5>
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
type="button"
|
|
onClick={() => setShowModal(false)}
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
className="w-3 h-3"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
clipRule="evenodd"
|
|
></path>
|
|
</svg>
|
|
<span className="sr-only">Close modal</span>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="py-2 px-4 space-y-2">
|
|
<p className="text-xs leading-relaxed text-primary">
|
|
Due to a{" "}
|
|
<a
|
|
rel="noreferrer"
|
|
target="_blank"
|
|
className="font-bold underline hover:text-accent"
|
|
href="https://github.com/brave/brave-browser/issues/19990"
|
|
>
|
|
recent Brave update (1.36.109)
|
|
</a>
|
|
, some results may not display correctly. Disabling, in Brave
|
|
settings, the{" "}
|
|
<span className="font-bold"> Restrict Websocket Pool </span>flag
|
|
and restart browser will help.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className={`${
|
|
isOptions ? "justify-start" : "justify-between"
|
|
}" flex pt-2 pb-4 px-4 space-x-2 border-gray-200 dark:border-gray-600"`}
|
|
>
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
type="button"
|
|
onClick={() => {
|
|
// TODO: this should produce a react-style event instead of setting the value directly
|
|
setShowModal(false)
|
|
environment.set({ type: "braveSetting" }, true)
|
|
}}
|
|
>
|
|
Dismiss
|
|
</Button>
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
onClick={() => openInNewTab("https://github.com/brave/brave-browser/issues/19990")}
|
|
type="button"
|
|
>
|
|
Learn More
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|