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 { TrendingHashTagsLine } from "@/Element/Event/Create/TrendingHashTagsLine";
|
||||||
import { Toastore } from "@/Toaster";
|
import { Toastore } from "@/Toaster";
|
||||||
import { OkResponseRow } from "./OkResponseRow";
|
import { OkResponseRow } from "./OkResponseRow";
|
||||||
|
import CloseButton from "@/Element/Button/CloseButton";
|
||||||
|
|
||||||
export function NoteCreator() {
|
export function NoteCreator() {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage } = useIntl();
|
||||||
@ -310,7 +311,7 @@ export function NoteCreator() {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<input type="text" value={a} onChange={e => changePollOption(i, e.target.value)} />
|
<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>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
@ -12,6 +12,7 @@ import Tabs from "@/Element/Tabs";
|
|||||||
import Modal from "@/Element/Modal";
|
import Modal from "@/Element/Modal";
|
||||||
|
|
||||||
import messages from "../messages";
|
import messages from "../messages";
|
||||||
|
import CloseButton from "@/Element/Button/CloseButton";
|
||||||
|
|
||||||
interface ReactionsProps {
|
interface ReactionsProps {
|
||||||
show: boolean;
|
show: boolean;
|
||||||
@ -73,7 +74,7 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio
|
|||||||
|
|
||||||
return show ? (
|
return show ? (
|
||||||
<Modal id="reactions" className="reactions-modal" onClose={onClose}>
|
<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">
|
<div className="reactions-header">
|
||||||
<h2>
|
<h2>
|
||||||
|
@ -19,6 +19,7 @@ import AsyncButton from "@/Element/Button/AsyncButton";
|
|||||||
import { ZapTarget, ZapTargetResult, Zapper } from "@/Zapper";
|
import { ZapTarget, ZapTargetResult, Zapper } from "@/Zapper";
|
||||||
|
|
||||||
import messages from "./messages";
|
import messages from "./messages";
|
||||||
|
import CloseButton from "@/Element/Button/CloseButton";
|
||||||
|
|
||||||
enum ZapType {
|
enum ZapType {
|
||||||
PublicZap = 1,
|
PublicZap = 1,
|
||||||
@ -182,7 +183,7 @@ export default function SendSats(props: SendSatsProps) {
|
|||||||
<div className="p flex flex-col g12">
|
<div className="p flex flex-col g12">
|
||||||
<div className="flex g12">
|
<div className="flex g12">
|
||||||
<div className="flex items-center grow">{props.title || title()}</div>
|
<div className="flex items-center grow">{props.title || title()}</div>
|
||||||
<div className="close-button" onClick={onClose}></div>
|
<CloseButton onClick={onClose} />
|
||||||
</div>
|
</div>
|
||||||
{zapper && !invoice && (
|
{zapper && !invoice && (
|
||||||
<SendSatsInput
|
<SendSatsInput
|
||||||
|
@ -36,7 +36,7 @@ export default function BadgeList({ badges }: { badges: TaggedNostrEvent[] }) {
|
|||||||
{showModal && (
|
{showModal && (
|
||||||
<Modal id="badges" className="reactions-modal" onClose={() => setShowModal(false)}>
|
<Modal id="badges" className="reactions-modal" onClose={() => setShowModal(false)}>
|
||||||
<div className="reactions-view">
|
<div className="reactions-view">
|
||||||
<div className="close-button close" onClick={() => setShowModal(false)}></div>
|
<CloseButton onClick={() => setShowModal(false)} />
|
||||||
<div className="reactions-header">
|
<div className="reactions-header">
|
||||||
<h2>
|
<h2>
|
||||||
<FormattedMessage defaultMessage="Badges" id="h8XMJL" />
|
<FormattedMessage defaultMessage="Badges" id="h8XMJL" />
|
||||||
|
@ -16,6 +16,7 @@ import useLoginFeed from "@/Feed/LoginFeed";
|
|||||||
import ErrorBoundary from "@/Element/ErrorBoundary";
|
import ErrorBoundary from "@/Element/ErrorBoundary";
|
||||||
import Footer from "@/Pages/Layout/Footer";
|
import Footer from "@/Pages/Layout/Footer";
|
||||||
import { Header } from "@/Pages/Layout/Header";
|
import { Header } from "@/Pages/Layout/Header";
|
||||||
|
import CloseButton from "@/Element/Button/CloseButton";
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
@ -65,7 +66,7 @@ export default function Index() {
|
|||||||
function StalkerModal({ id }) {
|
function StalkerModal({ id }) {
|
||||||
return (
|
return (
|
||||||
<div className="stalker" onClick={() => LoginStore.removeSession(id)}>
|
<div className="stalker" onClick={() => LoginStore.removeSession(id)}>
|
||||||
<div className="close-button circle flex items-center"></div>
|
<CloseButton />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -11,6 +11,7 @@ import { RenewSubTask } from "./RenewSubscription";
|
|||||||
import { NoticeZapPoolDefault } from "./NoticeZapPool";
|
import { NoticeZapPoolDefault } from "./NoticeZapPool";
|
||||||
import { BackupKeyTask } from "./BackupKey";
|
import { BackupKeyTask } from "./BackupKey";
|
||||||
import { ExternalStore } from "@snort/shared";
|
import { ExternalStore } from "@snort/shared";
|
||||||
|
import CloseButton from "@/Element/Button/CloseButton";
|
||||||
|
|
||||||
class TaskStore extends ExternalStore<Array<UITask>> {
|
class TaskStore extends ExternalStore<Array<UITask>> {
|
||||||
#tasks: Array<UITask>;
|
#tasks: Array<UITask>;
|
||||||
@ -59,7 +60,7 @@ export const TaskList = () => {
|
|||||||
<div key={a.id} className="card">
|
<div key={a.id} className="card">
|
||||||
<div className="header">
|
<div className="header">
|
||||||
<Icon name="lightbulb" />
|
<Icon name="lightbulb" />
|
||||||
<div className="close-button close" onClick={() => muteTask(a)}></div>
|
<CloseButton onClick={() => muteTask(a)} />
|
||||||
</div>
|
</div>
|
||||||
{a.render()}
|
{a.render()}
|
||||||
</div>
|
</div>
|
||||||
|
@ -954,34 +954,6 @@ svg.repeat {
|
|||||||
display: none;
|
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) {
|
@media (min-width: 768px) {
|
||||||
.rt-border {
|
.rt-border {
|
||||||
border-right-width: 1px;
|
border-right-width: 1px;
|
||||||
|
Loading…
Reference in New Issue
Block a user