From 65dae511e5c2f29b8b943a26d26951a52eb8547b Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 27 Sep 2025 12:14:16 +0300 Subject: [PATCH] feat(website): add icons for donate buttons --- .../assets/boxicons/bx-buy-me-a-coffee.svg | 1 + .../website/src/assets/boxicons/bx-github.svg | 1 + .../website/src/assets/boxicons/bx-paypal.svg | 1 + apps/website/src/components/Button.css | 9 +++++ apps/website/src/components/Button.tsx | 23 +++++++++++++ apps/website/src/components/Icon.tsx | 9 +++++ apps/website/src/pages/Donate/Donate.css | 10 ------ apps/website/src/pages/Donate/Donate.tsx | 33 +++++++++++++++++-- apps/website/src/style.css | 11 +++++++ 9 files changed, 85 insertions(+), 13 deletions(-) create mode 100644 apps/website/src/assets/boxicons/bx-buy-me-a-coffee.svg create mode 100644 apps/website/src/assets/boxicons/bx-github.svg create mode 100644 apps/website/src/assets/boxicons/bx-paypal.svg create mode 100644 apps/website/src/components/Button.css create mode 100644 apps/website/src/components/Button.tsx create mode 100644 apps/website/src/components/Icon.tsx diff --git a/apps/website/src/assets/boxicons/bx-buy-me-a-coffee.svg b/apps/website/src/assets/boxicons/bx-buy-me-a-coffee.svg new file mode 100644 index 000000000..5e105e2f7 --- /dev/null +++ b/apps/website/src/assets/boxicons/bx-buy-me-a-coffee.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/website/src/assets/boxicons/bx-github.svg b/apps/website/src/assets/boxicons/bx-github.svg new file mode 100644 index 000000000..d027cc0db --- /dev/null +++ b/apps/website/src/assets/boxicons/bx-github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/website/src/assets/boxicons/bx-paypal.svg b/apps/website/src/assets/boxicons/bx-paypal.svg new file mode 100644 index 000000000..e4f3db18c --- /dev/null +++ b/apps/website/src/assets/boxicons/bx-paypal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/website/src/components/Button.css b/apps/website/src/components/Button.css new file mode 100644 index 000000000..8c3355fcf --- /dev/null +++ b/apps/website/src/components/Button.css @@ -0,0 +1,9 @@ +a.button { + display: block; + background: var(--brand-1); + padding: 0.5em 1em; + border-radius: 6px; + color: var(--brand-foreground-color); + text-decoration: none; + text-align: center; +} \ No newline at end of file diff --git a/apps/website/src/components/Button.tsx b/apps/website/src/components/Button.tsx new file mode 100644 index 000000000..9874e8aee --- /dev/null +++ b/apps/website/src/components/Button.tsx @@ -0,0 +1,23 @@ +import { ComponentChildren } from "preact"; +import Icon from "./Icon"; +import "./Button.css"; + +interface ButtonProps { + href?: string; + iconSvg?: string; + text: ComponentChildren; + openExternally?: boolean; +} + +export default function Button({ href, iconSvg, openExternally, text }: ButtonProps) { + return ( + + {iconSvg && <>{" "}} + {text} + + ) +} diff --git a/apps/website/src/components/Icon.tsx b/apps/website/src/components/Icon.tsx new file mode 100644 index 000000000..72f4597dd --- /dev/null +++ b/apps/website/src/components/Icon.tsx @@ -0,0 +1,9 @@ +interface IconProps { + svg: string; +} + +export default function Icon({ svg }: IconProps) { + return ( + + ) +} diff --git a/apps/website/src/pages/Donate/Donate.css b/apps/website/src/pages/Donate/Donate.css index c0de48c9e..748cefa97 100644 --- a/apps/website/src/pages/Donate/Donate.css +++ b/apps/website/src/pages/Donate/Donate.css @@ -16,13 +16,3 @@ section.donate ul { flex-direction: row; } } - -section.donate ul a { - display: block; - background: var(--brand-1); - padding: 0.5em 1em; - border-radius: 6px; - color: var(--brand-foreground-color); - text-decoration: none; - text-align: center; -} \ No newline at end of file diff --git a/apps/website/src/pages/Donate/Donate.tsx b/apps/website/src/pages/Donate/Donate.tsx index a8e2fd4c6..d028fce06 100644 --- a/apps/website/src/pages/Donate/Donate.tsx +++ b/apps/website/src/pages/Donate/Donate.tsx @@ -1,5 +1,9 @@ import Section from "../../components/Section"; import "./Donate.css"; +import githubIcon from "../../assets/boxicons/bx-github.svg?raw"; +import paypalIcon from "../../assets/boxicons/bx-paypal.svg?raw"; +import buyMeACoffeeIcon from "../../assets/boxicons/bx-buy-me-a-coffee.svg?raw"; +import Button from "../../components/Button"; export default function Donate() { return ( @@ -10,9 +14,32 @@ export default function Donate() {

Consider supporting the main developer of the application via:

diff --git a/apps/website/src/style.css b/apps/website/src/style.css index d4ebcca1a..5e4e15970 100644 --- a/apps/website/src/style.css +++ b/apps/website/src/style.css @@ -101,6 +101,17 @@ img { object-fit: cover; } +.bx { + display: inline-block; + width: 24px; + height: 24px; + vertical-align: middle; +} + +.bx svg { + fill: currentColor; +} + @media (max-width: 719px) { .grid-3-cols > *,