new close buttons

closes https://github.com/v0l/snort/pull/577

packages/app/src/Element/Event/Create/NoteCreator.tsx

@@ -311,9 +311,7 @@ export function NoteCreator() {
               <div>
                 <input type="text" value={a} onChange={e => changePollOption(i, e.target.value)} />
                 {i > 1 && (
-                  <button onClick={() => removePollOption(i)} className="ml5">
-                    <Icon name="close" size={14} />
-                  </button>
+                  <div className="close-button ml5" onClick={() => removePollOption(i)}></div>
                 )}
               </div>
             </div>

packages/app/src/Element/Event/Reactions.tsx

@@ -73,9 +73,8 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio
 
   return show ? (
     <Modal id="reactions" className="reactions-modal" onClose={onClose}>
-      <div className="close" onClick={onClose}>
-        <Icon name="close" />
-      </div>
+      <div className="close-button close" onClick={onClose}></div>
+
       <div className="reactions-header">
         <h2>
           <FormattedMessage {...messages.ReactionsCount} values={{ n: total }} />

packages/app/src/Element/SendSats.tsx

@@ -182,9 +182,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 onClick={onClose}>
-            <Icon name="close" />
-          </div>
+          <div className="close-button" onClick={onClose}></div>
         </div>
         {zapper && !invoice && (
           <SendSatsInput

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

@@ -6,7 +6,6 @@ import { FormattedMessage } from "react-intl";
 import { TaggedNostrEvent } from "@snort/system";
 
 import { ProxyImg } from "@/Element/ProxyImg";
-import Icon from "@/Icons/Icon";
 import Modal from "@/Element/Modal";
 import Username from "@/Element/User/Username";
 import { findTag } from "@/SnortUtils";
@@ -37,9 +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" onClick={() => setShowModal(false)}>
-              <Icon name="close" />
-            </div>
+          <div className="close-button close" onClick={() => setShowModal(false)}></div>
             <div className="reactions-header">
               <h2>
                 <FormattedMessage defaultMessage="Badges" id="h8XMJL" />

packages/app/src/Pages/Layout/index.tsx

@@ -2,7 +2,6 @@ import "./Layout.css";
 import { useCallback } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 
-import Icon from "@/Icons/Icon";
 import useLogin from "@/Hooks/useLogin";
 import { isFormElement } from "@/SnortUtils";
 import Toaster from "@/Toaster";
@@ -66,9 +65,7 @@ export default function Index() {
 function StalkerModal({ id }) {
   return (
     <div className="stalker" onClick={() => LoginStore.removeSession(id)}>
-      <button type="button" className="circle flex items-center">
-        <Icon name="close" />
-      </button>
+      <div className="close-button circle flex items-center"></div>
     </div>
   );
 }

packages/app/src/Tasks/TaskList.tsx

@@ -59,9 +59,7 @@ export const TaskList = () => {
               <div key={a.id} className="card">
                 <div className="header">
                   <Icon name="lightbulb" />
-                  <div className="close" onClick={() => muteTask(a)}>
-                    <Icon name="close" size={14} />
-                  </div>
+                  <div className="close-button close" onClick={() => muteTask(a)}></div>
                 </div>
                 {a.render()}
               </div>

packages/app/src/index.css

@@ -953,3 +953,32 @@ svg.repeat {
 .icon-solid {
   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 */
+}