dominik/homepage-plus
1
0
Fork 0
mirror of https://github.com/DI0IK/homepage-plus.git synced 2025-07-14 00:40:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Chore: upgrade to tailwind v4 (#4863)

Browse source
This commit is contained in:
shamoon 2025-03-02 08:42:57 -08:00 • committed by GitHub
parent fdf405fe0a
commit d55a5e5efe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
28 changed files with 945 additions and 1165 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/bookmarks/group.jsx
View file

@ -34,7 +34,7 @@ export default function BookmarksGroup({
{layout?.header !== false && (
<Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group">
{layout?.icon && (
<div className="flex-shrink-0 mr-2 w-7 h-7 bookmark-group-icon">
<div className="shrink-0 mr-2 w-7 h-7 bookmark-group-icon">
<ResolvedIcon icon={layout.icon} />
</div>
)}
@ -52,7 +52,7 @@ export default function BookmarksGroup({
)}
<Transition
// Otherwise the transition group does display: none and cancels animation
className="!block"
className="block!"
unmount={false}
beforeLeave={() => {
panel.current.style.height = `${panel.current.scrollHeight}px`;

9
src/components/bookmarks/item.jsx
View file

@ -20,9 +20,10 @@ export default function Item({ bookmark, iconOnly = false }) {
rel="noreferrer"
target={bookmark.target ?? settings.target ?? "_blank"}
className={classNames(
settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
settings.cardBlur !== undefined &&
`backdrop-blur-sm${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
"text-left cursor-pointer transition-all rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10",
iconOnly ? "h-[60px] w-[60px] grid" : "block w-full h-15 mb-3",
iconOnly ? "h-[60px] w-[60px] grid" : "block w-full h-8 mb-3",
)}
>
{iconOnly ? (
@ -36,9 +37,9 @@ export default function Item({ bookmark, iconOnly = false }) {
</div>
) : (
<div className="flex">
<div className="flex-shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 hover:text-theme-700 dark:text-theme-200 text-sm font-medium rounded-l-md bookmark-icon">
<div className="shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 hover:text-theme-700 dark:text-theme-200 text-sm font-medium rounded-l-md bookmark-icon">
{bookmark.icon && (
<div className="flex-shrink-0 w-5 h-5">
<div className="shrink-0 w-5 h-5">
<ResolvedIcon icon={bookmark.icon} alt={bookmark.abbr} />
</div>
)}

4
src/components/quicklaunch.jsx
View file

@ -254,10 +254,10 @@ export default function QuickLaunch({ servicesAndBookmarks, searchString, setSea
role="dialog"
aria-modal="true"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-50" />
<div className="fixed inset-0 bg-gray-500 opacity-50" />
<div className="fixed inset-0 z-20 overflow-y-auto">
<div className="flex min-h-full min-w-full items-start justify-center text-center">
<dialog className="mt-[10%] min-w-[90%] max-w-[90%] md:min-w-[40%] md:max-w-[40%] rounded-md p-0 block font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-50 dark:bg-theme-800">
<dialog className="mt-[10%] mx-auto min-w-[90%] max-w-[90%] md:min-w-[40%] md:max-w-[40%] rounded-md p-0 block font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-50 dark:bg-theme-800">
<input
placeholder="Search"
className={classNames(

6
src/components/services/dropdown.jsx
View file

@ -7,7 +7,7 @@ export default function Dropdown({ options, value, setValue }) {
return (
<Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button className="text-xs inline-flex w-full items-center rounded bg-theme-200/50 dark:bg-theme-900/20 px-3 py-1.5">
<Menu.Button className="text-xs inline-flex w-full items-center rounded-sm bg-theme-200/50 dark:bg-theme-900/20 px-3 py-1.5">
{options.find((option) => option.value === value).label}
<BiCog className="-mr-1 ml-2 h-4 w-4" aria-hidden="true" />
</Menu.Button>
@ -22,7 +22,7 @@ export default function Dropdown({ options, value, setValue }) {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-theme-200/50 dark:bg-theme-900/50 backdrop-blur shadow-md focus:outline-none text-theme-700 dark:text-theme-200">
<Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-theme-200/50 dark:bg-theme-900/50 backdrop-blur-sm shadow-md focus:outline-hidden text-theme-700 dark:text-theme-200">
<div className="py-1">
{options.map((option) => (
<Menu.Item key={option.value} as={Fragment}>
@ -33,7 +33,7 @@ export default function Dropdown({ options, value, setValue }) {
type="button"
className={classNames(
value === option.value ? "bg-theme-300/40 dark:bg-theme-900/40" : "",
"w-full block px-3 py-1.5 text-sm hover:bg-theme-300/70 hover:dark:bg-theme-900/70 text-left",
"w-full block px-3 py-1.5 text-sm hover:bg-theme-300/70 dark:hover:bg-theme-900/70 text-left",
)}
>
{option.label}

4
src/components/services/group.jsx
View file

@ -42,7 +42,7 @@ export default function ServicesGroup({
{layout?.header !== false && (
<Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group">
{layout?.icon && (
<div className="flex-shrink-0 mr-2 w-7 h-7 service-group-icon">
<div className="shrink-0 mr-2 w-7 h-7 service-group-icon">
<ResolvedIcon icon={layout.icon} />
</div>
)}
@ -60,7 +60,7 @@ export default function ServicesGroup({
)}
<Transition
// Otherwise the transition group does display: none and cancels animation
className="!block"
className="block!"
unmount={false}
beforeLeave={() => {
panel.current.style.height = `${panel.current.scrollHeight}px`;

19
src/components/services/item.jsx
View file

@ -34,7 +34,8 @@ export default function Item({ service, groupName, useEqualHeights }) {
<li key={service.name} id={service.id} className="service" data-name={service.name || ""}>
<div
className={classNames(
settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
settings.cardBlur !== undefined &&
`backdrop-blur-sm${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
useEqualHeights && "h-[calc(100%-0.5rem)]",
"transition-all mb-2 p-1 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10 relative overflow-clip service-card",
)}
@ -46,13 +47,13 @@ export default function Item({ service, groupName, useEqualHeights }) {
href={service.href}
target={service.target ?? settings.target ?? "_blank"}
rel="noreferrer"
className="flex-shrink-0 flex items-center justify-center w-12 service-icon z-10"
className="shrink-0 flex items-center justify-center w-12 service-icon z-10"
aria-label={service.icon}
>
<ResolvedIcon icon={service.icon} />
</a>
) : (
<div className="flex-shrink-0 flex items-center justify-center w-12 service-icon z-10">
<div className="shrink-0 flex items-center justify-center w-12 service-icon z-10">
<ResolvedIcon icon={service.icon} />
</div>
))}
@ -88,14 +89,14 @@ export default function Item({ service, groupName, useEqualHeights }) {
} z-10 service-tags`}
>
{service.ping && (
<div className="flex-shrink-0 flex items-center justify-center service-tag service-ping">
<div className="shrink-0 flex items-center justify-center service-tag service-ping">
<Ping groupName={groupName} serviceName={service.name} style={statusStyle} />
<span className="sr-only">Ping status</span>
</div>
)}
{service.siteMonitor && (
<div className="flex-shrink-0 flex items-center justify-center service-tag service-site-monitor">
<div className="shrink-0 flex items-center justify-center service-tag service-site-monitor">
<SiteMonitor groupName={groupName} serviceName={service.name} style={statusStyle} />
<span className="sr-only">Site monitor status</span>
</div>
@ -105,7 +106,7 @@ export default function Item({ service, groupName, useEqualHeights }) {
<button
type="button"
onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
className="flex-shrink-0 flex items-center justify-center cursor-pointer service-tag service-container-stats"
className="shrink-0 flex items-center justify-center cursor-pointer service-tag service-container-stats"
>
<Status service={service} style={statusStyle} />
<span className="sr-only">View container stats</span>
@ -115,7 +116,7 @@ export default function Item({ service, groupName, useEqualHeights }) {
<button
type="button"
onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
className="flex-shrink-0 flex items-center justify-center cursor-pointer service-tag service-app"
className="shrink-0 flex items-center justify-center cursor-pointer service-tag service-app"
>
<KubernetesStatus service={service} style={statusStyle} />
<span className="sr-only">View container stats</span>
@ -127,7 +128,7 @@ export default function Item({ service, groupName, useEqualHeights }) {
{service.container && service.server && (
<div
className={classNames(
showStats || (statsOpen && !statsClosing) ? "max-h-[110px] opacity-100" : " max-h-[0] opacity-0",
showStats || (statsOpen && !statsClosing) ? "max-h-[110px] opacity-100" : " max-h-0 opacity-0",
"w-full overflow-hidden transition-all duration-300 ease-in-out service-stats",
)}
>
@ -139,7 +140,7 @@ export default function Item({ service, groupName, useEqualHeights }) {
{service.app && (
<div
className={classNames(
showStats || (statsOpen && !statsClosing) ? "max-h-[55px] opacity-100" : " max-h-[0] opacity-0",
showStats || (statsOpen && !statsClosing) ? "max-h-[55px] opacity-100" : " max-h-0 opacity-0",
"w-full overflow-hidden transition-all duration-300 ease-in-out service-stats",
)}
>

2
src/components/services/widget.jsx
View file

@ -19,7 +19,7 @@ export default function Widget({ widget, service }) {
}
return (
<div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1 service-missing">
<div className="bg-theme-200/50 dark:bg-theme-900/20 rounded-sm m-1 flex-1 flex flex-col items-center justify-center p-1 service-missing">
<div className="font-thin text-sm">{t("widget.missing_type", { type: widget.type })}</div>
</div>
);

2
src/components/services/widget/block.jsx
View file

@ -7,7 +7,7 @@ export default function Block({ value, label }) {
return (
<div
className={classNames(
"bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center text-center p-1",
"bg-theme-200/50 dark:bg-theme-900/20 rounded-sm m-1 flex-1 flex flex-col items-center justify-center text-center p-1",
value === undefined ? "animate-pulse" : "",
"service-block",
)}

4
src/components/services/widget/error.jsx
View file

@ -22,13 +22,13 @@ export default function Error({ error }) {
return (
<details className="px-1 pb-1">
<summary className="block text-center mt-1 mb-0 mx-auto p-3 rounded bg-rose-900/80 hover:bg-rose-900/95 text-theme-900 cursor-pointer">
<summary className="block text-center mt-1 mb-0 mx-auto p-3 rounded-sm bg-rose-900/80 hover:bg-rose-900/95 text-theme-900 cursor-pointer">
<div className="flex items-center justify-center text-xs font-bold">
<IoAlertCircle className="mr-1 w-5 h-5" />
{t("widget.api_error")} {error.message && t("widget.information")}
</div>
</summary>
<div className="bg-white dark:bg-theme-200/50 mt-2 rounded text-rose-900 text-xs font-mono whitespace-pre-wrap break-all">
<div className="bg-white dark:bg-theme-200/50 mt-2 rounded-sm text-rose-900 text-xs font-mono whitespace-pre-wrap break-all">
<ul className="p-4">
{error.message && (
<li>

2
src/components/toggles/color.jsx
View file

@ -39,7 +39,7 @@ export default function ColorToggle() {
return (
<div id="color" className="w-full self-center">
<Popover className="relative flex items-center">
<Popover.Button className="outline-none">
<Popover.Button className="outline-hidden">
<IoColorPalette
className="h-5 w-5 text-theme-800 dark:text-theme-200 transition duration-150 ease-in-out"
aria-hidden="true"

4
src/components/widgets/search/search.jsx
View file

@ -191,7 +191,7 @@ export default function Search({ options }) {
<div>
<Listbox.Button
className="
absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 border-1
absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2
text-white font-medium text-sm
bg-theme-600/40 dark:bg-white/10
focus:ring-theme-500 dark:focus:ring-white/50"
@ -212,7 +212,7 @@ export default function Search({ options }) {
<Listbox.Options
className="absolute right-0 z-10 mt-1 origin-top-right rounded-md
bg-theme-100 dark:bg-theme-600 shadow-lg
ring-1 ring-black ring-opacity-5 focus:outline-none"
ring-1 ring-black ring-opacity-5 focus:outline-hidden"
>
<div className="flex flex-col">
{availableProviderIds.map((providerId) => {

4
src/components/widgets/stocks/stocks.jsx
View file

@ -40,7 +40,7 @@ export default function Widget({ options }) {
<button
type="button"
onClick={() => setViewingPercentChange(!viewingPercentChange)}
className="flex items-center w-full h-full hover:outline-none focus:outline-none"
className="flex items-center w-full h-full hover:outline-hidden focus:outline-hidden"
>
<FaChartLine className="flex-none w-5 h-5 text-theme-800 dark:text-theme-200 mr-2" />
<div className="flex flex-wrap items-center gap-0.5">
@ -49,7 +49,7 @@ export default function Widget({ options }) {
stock && (
<div
key={stock.ticker}
className="rounded h-full text-xs px-1 w-[4.75rem] flex flex-col items-center justify-center"
className="rounded-sm h-full text-xs px-1 w-[4.75rem] flex flex-col items-center justify-center"
>
<span className="text-theme-800 dark:text-theme-200 text-xs">
{stock.ticker.split(":").pop()}

2
src/components/widgets/widget/container.jsx
View file

@ -13,7 +13,7 @@ export function getAllClasses(options, additionalClassNames = "") {
// eslint-disable-next-line no-param-reassign
additionalClassNames = [
additionalClassNames,
`backdrop-blur${options.style.cardBlur.length ? "-" : ""}${options.style.cardBlur}`,
`backdrop-blur-sm${options.style.cardBlur.length ? "-" : ""}${options.style.cardBlur}`,
].join(" ");
}