diff --git a/packages/app/src/Element/Button/CloseButton.tsx b/packages/app/src/Element/Button/CloseButton.tsx
new file mode 100644
index 00000000..ff769e33
--- /dev/null
+++ b/packages/app/src/Element/Button/CloseButton.tsx
@@ -0,0 +1,15 @@
+import Icon from "@/Icons/Icon";
+import classNames from "classnames";
+
+export default function CloseButton({ onClick, className }: { onClick?: () => void; className?: string }) {
+ return (
+
+
+
+ );
+}
diff --git a/packages/app/src/Element/Event/Create/NoteCreator.tsx b/packages/app/src/Element/Event/Create/NoteCreator.tsx
index 6670cf51..0b030cbd 100644
--- a/packages/app/src/Element/Event/Create/NoteCreator.tsx
+++ b/packages/app/src/Element/Event/Create/NoteCreator.tsx
@@ -27,6 +27,7 @@ import { sendEventToRelays } from "@/Element/Event/Create/util";
import { TrendingHashTagsLine } from "@/Element/Event/Create/TrendingHashTagsLine";
import { Toastore } from "@/Toaster";
import { OkResponseRow } from "./OkResponseRow";
+import CloseButton from "@/Element/Button/CloseButton";
export function NoteCreator() {
const { formatMessage } = useIntl();
@@ -310,7 +311,7 @@ export function NoteCreator() {
changePollOption(i, e.target.value)} />
- {i > 1 &&
removePollOption(i)}>
}
+ {i > 1 &&
removePollOption(i)} />}
))}
diff --git a/packages/app/src/Element/Event/Reactions.tsx b/packages/app/src/Element/Event/Reactions.tsx
index 797721bf..435e9f96 100644
--- a/packages/app/src/Element/Event/Reactions.tsx
+++ b/packages/app/src/Element/Event/Reactions.tsx
@@ -12,6 +12,7 @@ import Tabs from "@/Element/Tabs";
import Modal from "@/Element/Modal";
import messages from "../messages";
+import CloseButton from "@/Element/Button/CloseButton";
interface ReactionsProps {
show: boolean;
@@ -73,7 +74,7 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio
return show ? (
-
+
diff --git a/packages/app/src/Element/SendSats.tsx b/packages/app/src/Element/SendSats.tsx
index f6acb8a0..c19c4aae 100644
--- a/packages/app/src/Element/SendSats.tsx
+++ b/packages/app/src/Element/SendSats.tsx
@@ -19,6 +19,7 @@ import AsyncButton from "@/Element/Button/AsyncButton";
import { ZapTarget, ZapTargetResult, Zapper } from "@/Zapper";
import messages from "./messages";
+import CloseButton from "@/Element/Button/CloseButton";
enum ZapType {
PublicZap = 1,
@@ -182,7 +183,7 @@ export default function SendSats(props: SendSatsProps) {
{props.title || title()}
-
+
{zapper && !invoice && (
setShowModal(false)}>
-
setShowModal(false)}>
+
setShowModal(false)} />
diff --git a/packages/app/src/Pages/Layout/index.tsx b/packages/app/src/Pages/Layout/index.tsx
index 13d2edb9..e506951f 100644
--- a/packages/app/src/Pages/Layout/index.tsx
+++ b/packages/app/src/Pages/Layout/index.tsx
@@ -16,6 +16,7 @@ import useLoginFeed from "@/Feed/LoginFeed";
import ErrorBoundary from "@/Element/ErrorBoundary";
import Footer from "@/Pages/Layout/Footer";
import { Header } from "@/Pages/Layout/Header";
+import CloseButton from "@/Element/Button/CloseButton";
export default function Index() {
const location = useLocation();
@@ -65,7 +66,7 @@ export default function Index() {
function StalkerModal({ id }) {
return (
LoginStore.removeSession(id)}>
-
+
);
}
diff --git a/packages/app/src/Tasks/TaskList.tsx b/packages/app/src/Tasks/TaskList.tsx
index ab4b1418..32dfc85f 100644
--- a/packages/app/src/Tasks/TaskList.tsx
+++ b/packages/app/src/Tasks/TaskList.tsx
@@ -11,6 +11,7 @@ import { RenewSubTask } from "./RenewSubscription";
import { NoticeZapPoolDefault } from "./NoticeZapPool";
import { BackupKeyTask } from "./BackupKey";
import { ExternalStore } from "@snort/shared";
+import CloseButton from "@/Element/Button/CloseButton";
class TaskStore extends ExternalStore> {
#tasks: Array;
@@ -59,7 +60,7 @@ export const TaskList = () => {
-
muteTask(a)}>
+
muteTask(a)} />
{a.render()}
diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index 3313ee4f..d9380897 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -954,34 +954,6 @@ svg.repeat {
display: none;
}
-/* Basic styling for the close button */
-.close-button {
- position: relative;
- width: 30px;
- height: 30px;
- border-radius: 50%;
- background: rgba(255, 255, 255, 0.1); /* 10% opacity white background */
- cursor: pointer;
- overflow: hidden;
- transition: background 0.3s ease;
-}
-
-/* Styling for the X icon */
-.close-button::before {
- content: "x";
- color: #fff;
- font-size: 16px;
- line-height: 30px; /* Adjust to the height of the container */
- position: absolute;
- top: 47%;
- left: 50%;
- transform: translate(-50%, -50%);
-}
-
-/* Hover effect */
-.close-button:hover {
- background: rgba(255, 255, 255, 0.15); /* 15% opacity white background on hover */
-}
@media (min-width: 768px) {
.rt-border {
border-right-width: 1px;