tailwind close btn that works on light theme
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
parent
39549dbe96
commit
1389bfe1ed
15
packages/app/src/Element/Button/CloseButton.tsx
Normal file
15
packages/app/src/Element/Button/CloseButton.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
@ -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>
|
||||
))}
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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" />
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user