tailwind close btn that works on light theme

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 (
+    <div
+      onClick={onClick}
+      className={classNames(
+        "self-center circle flex flex-shrink-0 flex-grow-0 items-center justify-center hover:opacity-80 bg-dark p-2 cursor-pointer",
+        className,
+      )}>
+      <Icon name="close" size={12} />
+    </div>
+  );
+}

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() {
               </div>
               <div>
                 <input type="text" value={a} onChange={e => changePollOption(i, e.target.value)} />
-                {i > 1 && <div className="close-button ml5" onClick={() => removePollOption(i)}></div>}
+                {i > 1 && <CloseButton className="ml5" onClick={() => removePollOption(i)} />}
               </div>
             </div>
           ))}

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 ? (
     <Modal id="reactions" className="reactions-modal" onClose={onClose}>
-      <div className="close-button close" onClick={onClose}></div>
+      <CloseButton onClick={onClose} className="absolute right-4 top-3" />
 
       <div className="reactions-header">
         <h2>

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) {
       <div className="p flex flex-col g12">
         <div className="flex g12">
           <div className="flex items-center grow">{props.title || title()}</div>
-          <div className="close-button" onClick={onClose}></div>
+          <CloseButton onClick={onClose} />
         </div>
         {zapper && !invoice && (
           <SendSatsInput

packages/app/src/Element/User/BadgeList.tsx

@@ -36,7 +36,7 @@ export default function BadgeList({ badges }: { badges: TaggedNostrEvent[] }) {
       {showModal && (
         <Modal id="badges" className="reactions-modal" onClose={() => setShowModal(false)}>
           <div className="reactions-view">
-            <div className="close-button close" onClick={() => setShowModal(false)}></div>
+            <CloseButton onClick={() => setShowModal(false)} />
             <div className="reactions-header">
               <h2>
                 <FormattedMessage defaultMessage="Badges" id="h8XMJL" />

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 (
     <div className="stalker" onClick={() => LoginStore.removeSession(id)}>
-      <div className="close-button circle flex items-center"></div>
+      <CloseButton />
     </div>
   );
 }

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<Array<UITask>> {
   #tasks: Array<UITask>;
@@ -59,7 +60,7 @@ export const TaskList = () => {
               <div key={a.id} className="card">
                 <div className="header">
                   <Icon name="lightbulb" />
-                  <div className="close-button close" onClick={() => muteTask(a)}></div>
+                  <CloseButton onClick={() => muteTask(a)} />
                 </div>
                 {a.render()}
               </div>

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;