web/DonateShareCard: change action button id and class names

some adblock lists block everything named "share-button(s)"
This commit is contained in:
wukko 2024-08-09 14:47:54 +06:00
parent 077471d799
commit e4ec468f60
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2

View file

@ -34,56 +34,56 @@
<div id="share-qr"> <div id="share-qr">
<CobaltQr /> <CobaltQr />
</div> </div>
<div id="share-buttons"> <div id="action-buttons">
<button <button
id="share-button-copy" id="action-button-copy"
class="share-button" class="action-button"
on:click={async () => { on:click={async () => {
copyURL(cobaltUrl); copyURL(cobaltUrl);
copied = true; copied = true;
}} }}
aria-label={copied ? $t("button.copied") : ""} aria-label={copied ? $t("button.copied") : ""}
> >
<div class="share-button-icon"> <div class="action-button-icon">
<CopyIcon check={copied} /> <CopyIcon check={copied} />
</div> </div>
copy copy
</button> </button>
<button <button
id="share-button-share" id="action-button-share"
class="share-button" class="action-button"
on:click={async () => shareURL(cobaltUrl)} on:click={async () => shareURL(cobaltUrl)}
> >
<div class="share-button-icon"> <div class="action-button-icon">
<IconShare2 /> <IconShare2 />
</div> </div>
{$t("button.share")} {$t("button.share")}
</button> </button>
<button <button
id="share-button-github" id="action-button-github"
class="share-button" class="action-button"
on:click={async () => { on:click={async () => {
openURL(contacts.github); openURL(contacts.github);
copied = true; copied = true;
}} }}
> >
<div class="share-button-icon"> <div class="action-button-icon">
<IconBrandGithub /> <IconBrandGithub />
</div> </div>
{$t("button.star")} {$t("button.star")}
</button> </button>
<button <button
id="share-button-twitter" id="action-button-twitter"
class="share-button" class="action-button"
on:click={async () => { on:click={async () => {
openURL(contacts.twitter); openURL(contacts.twitter);
copied = true; copied = true;
}} }}
> >
<div class="share-button-icon"> <div class="action-button-icon">
<IconBrandTwitter /> <IconBrandTwitter />
</div> </div>
{$t("button.follow")} {$t("button.follow")}
@ -129,14 +129,14 @@
border-radius: 12px; border-radius: 12px;
} }
#share-buttons { #action-buttons {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
width: 100%; width: 100%;
gap: 6px; gap: 6px;
} }
.share-button { .action-button {
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: 0 10px; padding: 0 10px;
@ -144,13 +144,13 @@
gap: 2px; gap: 2px;
} }
.share-button-icon { .action-button-icon {
width: 21px; width: 21px;
height: 21px; height: 21px;
display: flex; display: flex;
} }
.share-button-icon :global(svg) { .action-button-icon :global(svg) {
width: 21px; width: 21px;
height: 21px; height: 21px;
stroke-width: 1.8px; stroke-width: 1.8px;