oiupoyt/OneLauncher-Cracked
1
1
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity

🐛 fix: lint unocss

Browse source 
Signed-off-by: Pauline <git@ethanlibs.co>
This commit is contained in:
Pauline 2024-08-11 19:04:20 +02:00
parent 020a74c843
commit d8cfb11ed8
No known key found for this signature in database
GPG key ID: 722BB181973296AE
35 changed files with 151 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/frontend/src/ui/App.tsx
View file

@ -18,16 +18,16 @@ function App(props: ParentProps) {
return (
<GlobalContexts>
<main class="flex flex-col bg-primary w-full min-h-screen overflow-hidden h-screen max-h-screen text-fg-primary">
<main class="h-screen max-h-screen min-h-screen w-full flex flex-col overflow-hidden bg-primary text-fg-primary">
<WindowFrame />
<div class="flex flex-col px-8">
<Navbar />
</div>
<div class="relative h-full w-full overflow-hidden">
<div class="absolute top-0 left-0 flex flex-col h-full w-full overflow-x-hidden">
<div class="absolute left-0 top-0 h-full w-full flex flex-col overflow-x-hidden">
<ErrorBoundary>
<OverlayScrollbarsComponent class="os-hide-horizontal-scrollbar absolute top-0 left-0 flex flex-col h-full w-full overflow-x-hidden overflow-y-auto px-8 pb-8">
<OverlayScrollbarsComponent class="os-hide-horizontal-scrollbar absolute left-0 top-0 h-full w-full flex flex-col overflow-x-hidden overflow-y-auto px-8 pb-8">
<AnimatedRoutes>
{props.children}
</AnimatedRoutes>

12
apps/frontend/src/ui/components/Navbar.tsx
View file

@ -20,7 +20,7 @@ function NavbarLink(props: NavbarLinkProps) {
return (
<A
href={props.path}
class="text-lg px-4 py-2 hover:bg-component-bg-hover rounded-lg hover:text-fg-primary-hover"
class="rounded-lg px-4 py-2 text-lg hover:bg-component-bg-hover hover:text-fg-primary-hover"
inactiveClass="text-fg-secondary"
activeClass="text-fg-primary"
end
@ -41,9 +41,9 @@ function Navbar() {
let notificationButton!: HTMLButtonElement;
return (
<div class="flex flex-row *:flex-1 items-center min-h-[60px] h-15">
<div class="h-15 min-h-[60px] flex flex-row items-center *:flex-1">
<div>
<div onClick={() => open(WEBSITE)} class="flex items-center justify-center active:scale-90 transition-transform w-min">
<div onClick={() => open(WEBSITE)} class="w-min flex items-center justify-center transition-transform active:scale-90">
<PolyfrostFull />
</div>
</div>
@ -52,7 +52,7 @@ function Navbar() {
<NavbarLink path="/browser" label="Browser" />
<NavbarLink path="/updates" label="Updates" />
</div>
<div class="flex flex-row justify-end items-center gap-x-2 relative">
<div class="relative flex flex-row items-center justify-end gap-x-2">
<Button buttonStyle="icon">
<TerminalBrowserIcon />
</Button>
@ -65,7 +65,7 @@ function Navbar() {
<Button
buttonStyle="icon"
ref={notificationButton}
class="[&>div]:absolute relative"
class="relative [&>div]:absolute"
onClick={() => setNotificationMenuOpen(!notificationMenuOpen())}
>
<Bell01Icon />
@ -82,7 +82,7 @@ function Navbar() {
onClick={() => setProfileMenuOpen(!profileMenuOpen())}
class="hover:opacity-70"
>
<PlayerHead class="min-w-8 min-h-8 w-8 h-8 max-w-8 max-h-8 rounded-md" uuid={controller.defaultAccount()?.id} />
<PlayerHead class="h-8 max-h-8 max-w-8 min-h-8 min-w-8 w-8 rounded-md" uuid={controller.defaultAccount()?.id} />
</button>
</div>

4
apps/frontend/src/ui/components/ScrollableContainer.tsx
View file

@ -3,9 +3,9 @@ import type { ParentProps } from 'solid-js';
function ScrollableContainer(props: ParentProps) {
return (
<div class="flex flex-col flex-1 overflow-hidden w-[calc(100%+14px)]">
<div class="w-[calc(100%+14px)] flex flex-1 flex-col overflow-hidden">
<OverlayScrollbarsComponent class="os-hide-horizontal-scrollbar relative flex-1">
<div class="flex flex-col absolute w-[calc(100%-14px)] h-full gap-1">
<div class="absolute h-full w-[calc(100%-14px)] flex flex-col gap-1">
{props.children}
</div>
</OverlayScrollbarsComponent>

8
apps/frontend/src/ui/components/SettingsRow.tsx
View file

@ -10,22 +10,22 @@ export type SettingsRowProps = ParentProps & {
function SettingsRow(props: SettingsRowProps) {
return (
<div
class="flex flex-row bg-component-bg rounded-xl gap-3.5 p-4 items-center"
class="flex flex-row items-center gap-3.5 rounded-xl bg-component-bg p-4"
classList={{
'bg-component-bg-disabled': props.disabled,
'text-fg-primary-disabled': props.disabled,
}}
>
<div class="flex justify-center items-center h-8 w-8">
<div class="h-8 w-8 flex items-center justify-center">
{props.icon}
</div>
<div class="flex flex-col gap-2 flex-1">
<div class="flex flex-1 flex-col gap-2">
<h3 class="text-lg">{props.title}</h3>
<p class="text-wrap text-sm">{props.description}</p>
</div>
<div class="flex h-9 flex-row justify-center items-center gap-2">
<div class="h-9 flex flex-row items-center justify-center gap-2">
{props.children}
</div>
</div>

4
apps/frontend/src/ui/components/Sidebar.tsx
View file

@ -31,12 +31,12 @@ function Sidebar(props: SidebarProps) {
}
return (
<div class="flex flex-col w-52">
<div class="w-52 flex flex-col">
<For each={Object.keys(props.links)}>
{section => (
<div class="flex flex-col gap-y-2">
<div>
<h3 class="text-fg-secondary text-xs font-medium m-1.5 mt-5">{section.toUpperCase()}</h3>
<h3 class="m-1.5 mt-5 text-xs text-fg-secondary font-medium">{section.toUpperCase()}</h3>
<div class="flex flex-col gap-y-1 fill-fg-primary text-fg-primary font-medium">
<For each={props.links[section]}>
{(link) => {

6
apps/frontend/src/ui/components/WindowFrame.tsx
View file

@ -14,8 +14,8 @@ interface TitlebarButtonProps {
function TitlebarButton(props: TitlebarButtonProps) {
return (
<button class="flex items-center justify-center w-8 h-8 group" onClick={e => props.onClick(e)}>
<div class="rounded-lg group-hover:bg-primary p-1">
<button class="group h-8 w-8 flex items-center justify-center" onClick={e => props.onClick(e)}>
<div class="rounded-lg p-1 group-hover:bg-primary">
<props.icon class={`w-[18px] h-[18px] stroke-slate ${props.danger ? 'group-hover:stroke-danger' : 'group-hover:stroke-white'}`} />
</div>
</button>
@ -51,7 +51,7 @@ function WindowFrame() {
});
return (
<div data-tauri-drag-region class="z-[99999] flex flex-row justify-between items-center w-screen h-8 bg-secondary gap-0.5 pr-0.5">
<div data-tauri-drag-region class="z-[99999] h-8 w-screen flex flex-row items-center justify-between gap-0.5 bg-secondary pr-0.5">
<div class="flex flex-row items-center">
<TitlebarButton icon={ChevronLeftIcon} onClick={() => history.back()} />
</div>

4
apps/frontend/src/ui/components/base/Dropdown.tsx
View file

@ -50,7 +50,7 @@ function Dropdown(props: DropdownProps) {
iconRight={<ChevronDownIcon />}
>
<div
class="flex-1 flex flex-row items-center text-nowrap gap-1 h-full overflow-hidden"
class="h-full flex flex-1 flex-row items-center gap-1 overflow-hidden text-nowrap"
>
<span>{split.text}</span>
{items()[selected()]}
@ -79,7 +79,7 @@ function Dropdown(props: DropdownProps) {
<Index each={items()}>
{(item, index) => (
<div onClick={() => select(index)}>
<div class="hover:bg-gray-05 p-2 rounded-lg flex flex-row gap-2 justify-between items-center">
<div class="flex flex-row items-center justify-between gap-2 rounded-lg p-2 hover:bg-gray-05">
{item()}
<div class={styles.selected! + (selected() === index ? ` ${styles.visible}` : '')} />
</div>

4
apps/frontend/src/ui/components/content/FormattedLog.tsx
View file

@ -10,8 +10,8 @@ function FormattedLog(props: FormattedLogProps) {
const lines = createMemo(() => props.log.split('\n'));
return (
<div class="bg-component-bg flex flex-1 h-full font-mono font-medium overflow-auto p-2 rounded-md mt-2">
<OverlayScrollbarsComponent class="flex-1 h-full relative">
<div class="mt-2 h-full flex flex-1 overflow-auto rounded-md bg-component-bg p-2 font-medium font-mono">
<OverlayScrollbarsComponent class="relative h-full flex-1">
<code class={styles.log}>
<For each={lines()}>
{line => <Line line={line} />}

20
apps/frontend/src/ui/components/content/ModCard.tsx
View file

@ -23,15 +23,15 @@ function ModCard(props: ManagedPackage) {
}
return (
<div onClick={redirect} class="flex flex-col overflow-hidden rounded-lg bg-component-bg max-w-53 min-w-53 w-full max-h-68 min-h-68 h-full">
<div class="relative h-28 overflow-hidden flex justify-center items-center">
<img class="absolute filter-blur-xl z-0 max-w-none w-7/6" src={props.icon_url || ''} alt={`Icon for ${props.title}`} />
<img class="relative w-2/5 aspect-ratio-square z-1 rounded-md image-render-auto" src={props.icon_url || ''} alt={`Icon for ${props.title}`} />
<div onClick={redirect} class="h-full max-h-68 max-w-53 min-h-68 min-w-53 w-full flex flex-col overflow-hidden rounded-lg bg-component-bg">
<div class="relative h-28 flex items-center justify-center overflow-hidden">
<img class="absolute z-0 max-w-none w-7/6 filter-blur-xl" src={props.icon_url || ''} alt={`Icon for ${props.title}`} />
<img class="relative z-1 aspect-ratio-square w-2/5 rounded-md image-render-auto" src={props.icon_url || ''} alt={`Icon for ${props.title}`} />
</div>
<div class="flex flex-col flex-1 p-3 gap-4">
<div class="flex flex-1 flex-col gap-4 p-3">
<div class="flex flex-col gap-2">
<h5 class="font-medium text-fg-primary">{props.title}</h5>
<p class="text-fg-secondary text-xs">
<h5 class="text-fg-primary font-medium">{props.title}</h5>
<p class="text-xs text-fg-secondary">
By
{' '}
<span class="text-fg-primary">Author TODO</span>
@ -42,16 +42,16 @@ function ModCard(props: ManagedPackage) {
</p>
</div>
<p class="text-fg-secondary text-sm flex-1 max-h-13 overflow-hidden line-height-snug">{props.description}</p>
<p class="max-h-13 flex-1 overflow-hidden text-sm text-fg-secondary line-height-snug">{props.description}</p>
<div class="flex flex-row gap-4 text-xs">
<div class="flex flex-row items-center gap-2">
<Download01Icon class="w-4 h-4" />
<Download01Icon class="h-4 w-4" />
{abbreviateNumber(props.downloads)}
</div>
<div class="flex flex-row items-center gap-2">
<HeartIcon class="w-4 h-4" />
<HeartIcon class="h-4 w-4" />
{abbreviateNumber(props.followers)}
</div>
</div>

6
apps/frontend/src/ui/components/overlay/ContextMenu.tsx
View file

@ -36,7 +36,7 @@ function ContextMenu(props: ContextMenuProps) {
visible={props.visible}
setVisible={props.setVisible}
>
<div ref={setRef} class="bg-secondary rounded-xl border border-gray-05 p-1 shadow-md shadow-black/30">
<div ref={setRef} class="border border-gray-05 rounded-xl bg-secondary p-1 shadow-black/30 shadow-md">
<div class="flex flex-col gap-y-1 text-fg-primary">
{props.children}
</div>
@ -46,7 +46,7 @@ function ContextMenu(props: ContextMenuProps) {
}
ContextMenu.Seperator = function () {
return <div class="border-b mx-1 border-gray-05" />;
return <div class="mx-1 border-b border-gray-05" />;
};
interface ContextMenuRowProps {
@ -59,7 +59,7 @@ ContextMenu.Row = function (props: ContextMenuRowProps) {
return (
<div
onClick={e => props.onClick?.(e)}
class="flex items-center gap-x-2 m-px px-1.5 py-0.5 rounded-lg hover:bg-gray-05 active:bg-gray-10 [&>svg]:w-[18px]"
class="m-px flex items-center gap-x-2 rounded-lg px-1.5 py-0.5 [&>svg]:w-[18px] active:bg-gray-10 hover:bg-gray-05"
>
{props.icon}
{props.text}

2
apps/frontend/src/ui/components/overlay/FullscreenOverlay.tsx
View file

@ -26,7 +26,7 @@ function FullscreenOverlay(props: FullscreenOverlayProps) {
class={`fixed top-0 left-0 w-screen h-screen bg-black/60 backdrop-blur-sm backdrop-grayscale transition-opacity ${props.visible() ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}
>
<div class="absolute top-0 left-0 w-screen h-screen flex justify-center items-center" onClick={onBackdropClick}>
<div class="absolute left-0 top-0 h-screen w-screen flex items-center justify-center" onClick={onBackdropClick}>
{props.children}
</div>

12
apps/frontend/src/ui/components/overlay/Modal.tsx
View file

@ -104,7 +104,7 @@ export type ModalProps = {
function Modal(props: ModalProps) {
return (
<div ref={mergeRefs(props.ref)} class="bg-primary border border-white/5 p-4 rounded-lg text-center flex flex-col gap-y-2 min-w-xs">
<div ref={mergeRefs(props.ref)} class="min-w-xs flex flex-col gap-y-2 border border-white/5 rounded-lg bg-primary p-4 text-center">
{props.children}
</div>
);
@ -130,7 +130,7 @@ Modal.Simple = function (props: ModalSimpleProps) {
<div class="flex flex-col">
{split.children}
</div>
<div class="flex flex-row gap-x-4 [&>*]:flex-1 mt-2">
<div class="mt-2 flex flex-row gap-x-4 [&>*]:flex-1">
<For each={split.buttons}>
{button => (
<ModalButton props={button} />
@ -220,19 +220,19 @@ Modal.Delete = function (props: ModalDeleteProps) {
>
{split.children || (
<>
<div class="flex flex-col justify-center items-center gap-y-3">
<div class="flex flex-col items-center justify-center gap-y-3">
<p>Are you sure you want to delete this item?</p>
<p class="text-danger uppercase w-82 line-height-normal">
<p class="w-82 text-danger line-height-normal uppercase">
Doing this will
{' '}
<span class="underline font-bold">delete</span>
<span class="font-bold underline">delete</span>
{' '}
your entire
{' '}
<br />
data
{' '}
<span class="underline font-bold">FOREVER</span>
<span class="font-bold underline">FOREVER</span>
.
</p>
</div>

10
apps/frontend/src/ui/components/overlay/account/AccountsPopup.tsx
View file

@ -29,11 +29,11 @@ function AccountComponent(props: AccountComponentProps) {
onClick={login}
class={`flex flex-row justify-between p-2 rounded-lg ${props.loggedIn !== true && 'hover:bg-gray-05 active:bg-gray-10 hover:text-fg-primary-hover'}`}
>
<div class="flex flex-row justify-start flex-1 gap-x-3">
<PlayerHead class="w-8 h-8 rounded-md" uuid={props.account!.id} />
<div class="flex flex-1 flex-row justify-start gap-x-3">
<PlayerHead class="h-8 w-8 rounded-md" uuid={props.account!.id} />
<div class="flex flex-col items-center justify-center">
<div class="flex flex-col items-start justify-between">
<p class="font-semibold h-[18px]">{props.account!.username}</p>
<p class="h-[18px] font-semibold">{props.account!.username}</p>
{props.loggedIn && <p class="text-xs">Logged in</p>}
</div>
</div>
@ -60,7 +60,7 @@ function AccountPopup(props: Popup.PopupProps) {
return (
<Popup {...props}>
<div class="bg-secondary rounded-xl border border-gray-10 w-72 p-2 shadow-md shadow-black/30">
<div class="w-72 border border-gray-10 rounded-xl bg-secondary p-2 shadow-black/30 shadow-md">
<div class="flex flex-col gap-y-2 text-fg-primary">
<Show when={controller.defaultAccount() !== null || controller.defaultAccount() !== undefined}>
<AccountComponent
@ -76,7 +76,7 @@ function AccountPopup(props: Popup.PopupProps) {
)}
</For>
</Show>
<div class="w-full h-px bg-gray-05 rounded-md" />
<div class="h-px w-full rounded-md bg-gray-05" />
<div class="flex flex-row justify-between">
<div>

2
apps/frontend/src/ui/components/overlay/account/AddAccountModal.tsx
View file

@ -122,7 +122,7 @@ function AddAccountModal(p: AddAccountModalProps) {
/>,
]}
>
<div class="flex flex-col gap-y-3 max-w-120 line-height-normal">
<div class="max-w-120 flex flex-col gap-y-3 line-height-normal">
<Switch>
<Match when={stage() !== ModalStage.LoggingIn}>
<p>

12
apps/frontend/src/ui/components/overlay/cluster/ClusterCreationModal.tsx
View file

@ -172,15 +172,15 @@ function ClusterCreationModal(props: { controller: ClusterModalContextFunc }) {
}
return (
<div class="bg-primary rounded-lg text-center flex flex-col min-w-sm">
<div class="flex relative h-25">
<div class="absolute top-0 left-0 w-full h-full">
<div class="min-w-sm flex flex-col rounded-lg bg-primary text-center">
<div class="relative h-25 flex">
<div class="absolute left-0 top-0 h-full w-full">
<img class="h-full w-full rounded-t-lg" src={HeaderImage} alt="Header Image" />
</div>
<div
class="absolute top-0 left-0 px-10 h-full flex flex-row justify-start items-center gap-x-4 bg-[radial-gradient(at_center,#00000077,transparent)]"
class="absolute left-0 top-0 h-full flex flex-row items-center justify-start gap-x-4 bg-[radial-gradient(at_center,#00000077,transparent)] px-10"
>
<Server01Icon class="w-8 h-8" />
<Server01Icon class="h-8 w-8" />
<div class="flex flex-col items-start justify-center">
{/** weird positioning?? */}
<h1 class="h-10 -mt-2">New Cluster</h1>
@ -193,7 +193,7 @@ function ClusterCreationModal(props: { controller: ClusterModalContextFunc }) {
<Step step={props.controller.step()} />
</div>
<div class="flex flex-row gap-x-2 justify-end pt-0 p-3">
<div class="flex flex-row justify-end gap-x-2 p-3 pt-0">
<Switch>
<Match when={props.controller.step() === 0}>
<Button

2
apps/frontend/src/ui/components/overlay/cluster/ClusterStepOne.tsx
View file

@ -64,7 +64,7 @@ function ProviderCard(props: ProviderCardProps) {
onClick={() => props.setSelected()}
class={`flex flex-col justify-center items-center gap-y-2 py-2 px-4 hover:bg-component-bg-hover active:bg-component-bg-pressed rounded-lg ${props.selected ? 'bg-component-bg' : ''}`}
>
<div class="[&>svg]:(w-8 h-8)">
<div class="[&>svg]:(h-8 w-8)">
{props.icon}
</div>
<span>{props.name}</span>

8
apps/frontend/src/ui/components/overlay/cluster/ClusterStepTwo.tsx
View file

@ -79,7 +79,7 @@ export function ClusterStepTwo(props: ClusterStepProps) {
{loader => (
<Dropdown.Row>
<div class="flex flex-row gap-x-2">
<div class="w-4 h-4">
<div class="h-4 w-4">
<loader.icon />
</div>
{loader.name}
@ -149,7 +149,7 @@ function VersionSelector(props: { setVersion: (version: string) => any }) {
});
return (
<div class="flex flex-row flex-1 gap-2">
<div class="flex flex-1 flex-row gap-2">
<SelectList
class="max-h-40 min-w-3/5"
onChange={setVersion}
@ -163,7 +163,7 @@ function VersionSelector(props: { setVersion: (version: string) => any }) {
</Show>
</SelectList>
<div class="bg-component-bg rounded-lg overflow-hidden border border-gray-05 flex-1 p-2 flex flex-col gap-y-2">
<div class="flex flex-1 flex-col gap-y-2 overflow-hidden border border-gray-05 rounded-lg bg-component-bg p-2">
<For each={Object.keys(filters())}>
{name => (
<Checkbox
@ -188,7 +188,7 @@ function Option(props: OptionProps) {
return (
<div {...rest} class={`flex flex-col gap-y-2 items-stretch ${split.class || ''}`}>
<h3 class="text-md font-semibold uppercase text-fg-secondary text-left">{props.header}</h3>
<h3 class="text-left text-md text-fg-secondary font-semibold uppercase">{props.header}</h3>
{/* <div class="max-h-8"> */}
{props.children}
{/* </div> */}

18
apps/frontend/src/ui/components/overlay/notifications/NotificationComponent.tsx
View file

@ -122,12 +122,12 @@ function NotificationOverlayComponent(props: NotificationComponentProps) {
</div>
<Show when={disappearing() === true && props.progress === undefined}>
<div class="w-full h-1.5 bg-brand-disabled">
<div class="h-1.5 w-full bg-brand-disabled">
<div
style={{
width: `${(secondsLeft() / TOTAL_SECONDS) * 100}%`,
}}
class="transition-width h-1.5 bg-brand rounded-lg"
class="h-1.5 rounded-lg bg-brand transition-width"
/>
</div>
</Show>
@ -139,31 +139,31 @@ function NotificationOverlayComponent(props: NotificationComponentProps) {
function NotificationPopupComponent(props: NotificationComponentProps) {
return (
<div class="p-2 flex flex-col gap-y-1">
<div class="min-h-10 grid place-items-center grid-cols-[24px_1fr_auto] gap-3">
<div class="flex flex-col gap-y-1 p-2">
<div class="grid grid-cols-[24px_1fr_auto] min-h-10 place-items-center gap-3">
{IconFromNotificationType(props.notification_type)({
class: `w-6 h-6 ${ColorFromNotificationType(props.notification_type)}`,
})}
<div class="flex flex-col w-full">
<div class="w-full flex flex-col">
<span class={`font-medium ${ColorFromNotificationType(props.notification_type)}`}>{props.title}</span>
<span class="text-sm text-white/60">{props.message}</span>
</div>
<Show when={props.overlay !== true}>
<div class="flex flex-row justify-end items-center gap-1">
<div class="flex flex-row items-center justify-end gap-1">
<span class="text-sm text-white/40">
<TimeAgo timestamp={props.created_at * 1000} />
</span>
<span class="w-1.5 h-1.5 rounded-full bg-brand" />
<span class="h-1.5 w-1.5 rounded-full bg-brand" />
</div>
</Show>
</div>
<Show when={props.progress !== undefined}>
<div class="rounded-full overflow-hidden h-1.5 bg-brand-disabled w-full">
<div class="h-1.5 w-full overflow-hidden rounded-full bg-brand-disabled">
<div
class="rounded-full h-full min-w-0 max-w-full bg-brand transition-width"
class="h-full max-w-full min-w-0 rounded-full bg-brand transition-width"
style={{
width: `${Math.floor(props.progress! * 100)}%`,
}}

16
apps/frontend/src/ui/components/overlay/notifications/NotificationPopup.tsx
View file

@ -35,19 +35,19 @@ function NotificationPopup(props: Popup.PopupProps) {
return (
<Popup {...props}>
<div class="bg-secondary rounded-xl border border-gray-10 w-96 p-2 shadow-md shadow-black/30">
<div class="w-96 border border-gray-10 rounded-xl bg-secondary p-2 shadow-black/30 shadow-md">
<div class="overflow-hidden transition-height" ref={parent}>
<div class="flex flex-col justify-start items-stretch text-start gap-2" ref={inner}>
<p class="text-2lg px-2 pt-1">Notifications</p>
<div class="flex flex-col items-stretch justify-start gap-2 text-start" ref={inner}>
<p class="px-2 pt-1 text-2lg">Notifications</p>
<Switch>
<Match when={notifications().length > 0}>
<OverlayScrollbarsComponent class="max-h-[min(500px,60vh)] overflow-auto">
<div class="flex flex-col-reverse justify-center items-stretch ">
<div class="flex flex-col-reverse items-stretch justify-center">
<For each={notifications()}>
{noti => (
<div class="flex flex-col w-full">
<div class="w-full flex flex-col">
<NotificationComponent {...noti} overlay={false} />
<span class="bg-gray-05 h-px w-full" />
<span class="h-px w-full bg-gray-05" />
</div>
)}
</For>
@ -56,11 +56,11 @@ function NotificationPopup(props: Popup.PopupProps) {
</Match>
<Match when={notifications().length === 0}>
<span class="px-2">You have no notifications</span>
<span class="bg-gray-05 h-px" />
<span class="h-px bg-gray-05" />
</Match>
</Switch>
<div class="flex flex-row justify-between items-end">
<div class="flex flex-row items-end justify-between">
<Button onClick={() => {}} buttonStyle="ghost" iconLeft={<Trash01Icon />}>
Clear Notifications
</Button>

36
apps/frontend/src/ui/pages/Home.tsx
View file

@ -101,17 +101,17 @@ function HomePage() {
// };
return (
<div class="flex flex-col h-full gap-y-4 text-fg-primary">
<div class="h-full flex flex-col gap-y-4 text-fg-primary">
<Banner clusters={clusters()} />
<div class="flex flex-row justify-between items-center">
<div class="flex flex-row items-center justify-between">
<div>
<TextField iconLeft={<SearchMdIcon />} placeholder="Search for clusters..." />
</div>
<div class="flex flex-row gap-x-4">
<Button
buttonStyle="primary"
iconLeft={<PlusIcon class="!w-5 stroke-[2.2]" />}
iconLeft={<PlusIcon class="stroke-[2.2] !w-5" />}
children="New Cluster"
onClick={newCluster}
/>
@ -138,8 +138,8 @@ function HomePage() {
// </DragDropProvider>
)}
fallback={(
<div class="flex flex-col flex-1 gap-y-4 max-h-64 justify-center items-center">
<span class="text-lg font-bold uppercase text-fg-secondary">No clusters were found.</span>
<div class="max-h-64 flex flex-1 flex-col items-center justify-center gap-y-4">
<span class="text-lg text-fg-secondary font-bold uppercase">No clusters were found.</span>
<span class="text-xl font-bold">Create one now with the New Cluster button.</span>
</div>
)}
@ -217,9 +217,9 @@ function Banner(props: BannerProps) {
});
return (
<div class="relative w-full h-52 min-h-52 overflow-hidden rounded-xl">
<div class="relative h-52 min-h-52 w-full overflow-hidden rounded-xl">
<ClusterCover
class="absolute rounded-xl w-full h-52 object-cover"
class="absolute h-52 w-full rounded-xl object-cover"
linearBlur={{
degrees: 270,
blur: 30,
@ -229,7 +229,7 @@ function Banner(props: BannerProps) {
fallback={BannerBackground}
/>
<div class="relative z-10 h-full px-8 py-6 text-fg-primary flex flex-col justify-between items-start">
<div class="relative z-10 h-full flex flex-col items-start justify-between px-8 py-6 text-fg-primary">
<div class="flex flex-col gap-y-2">
<h1>{cluster()?.meta.name || 'Create a cluster'}</h1>
<Show when={cluster() !== undefined}>
@ -249,7 +249,7 @@ function Banner(props: BannerProps) {
</p>
</Show>
</div>
<div class="flex w-full flex-row justify-between items-end">
<div class="w-full flex flex-row items-end justify-between">
<div class="flex flex-row items-center gap-x-4">
<Show
when={cluster() !== undefined}
@ -299,22 +299,22 @@ function ClusterCard(props: Cluster) {
ref,
// sortable
)}
class="relative h-[152px] group flex flex-col rounded-xl bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed border border-gray-05"
class="group relative h-[152px] flex flex-col border border-gray-05 rounded-xl bg-component-bg active:bg-component-bg-pressed hover:bg-component-bg-hover"
>
<div class="flex-1 relative overflow-hidden rounded-t-xl">
<div class="relative flex-1 overflow-hidden rounded-t-xl">
<div
class="absolute h-full w-full group-hover:!scale-110 transition-transform"
class="absolute h-full w-full transition-transform group-hover:!scale-110"
style={{ '-webkit-transform': 'translateZ(0)' }}
>
<ClusterCover
cluster={props}
class="object-cover h-full w-full"
class="h-full w-full object-cover"
/>
</div>
</div>
<div class="z-10 p-3 flex flex-row gap-x-3 items-center justify-between">
<div class="flex flex-col gap-1.5 overflow-hidden h-8">
<p class="h-4 font-medium text-ellipsis whitespace-nowrap">{props.meta.name}</p>
<div class="z-10 flex flex-row items-center justify-between gap-x-3 p-3">
<div class="h-8 flex flex-col gap-1.5 overflow-hidden">
<p class="h-4 text-ellipsis whitespace-nowrap font-medium">{props.meta.name}</p>
<p class="h-4 text-xs">
{upperFirst(props.meta.loader)}
{' '}
@ -331,7 +331,7 @@ function ClusterCard(props: Cluster) {
ClusterRoot.launch(navigate, props.uuid);
}}
>
<PlayIcon class="w-4! h-4!" />
<PlayIcon class="h-4! w-4!" />
</Button>
</div>
</div>
@ -354,7 +354,7 @@ function ClusterGroup(props: ClusterGroupProps) {
class="flex flex-col gap-y-4"
>
<h4>{props.title}</h4>
<div class="grid grid-cols-4 2xl:grid-cols-6 gap-4 min-h-38">
<div class="grid grid-cols-4 min-h-38 gap-4 2xl:grid-cols-6">
{/* <SortableProvider ids={ids()}> */}
<For each={props.clusters}>{item => <ClusterCard {...item} />}</For>
{/* </SortableProvider> */}

16
apps/frontend/src/ui/pages/browser/BrowserMain.tsx
View file

@ -65,9 +65,9 @@ function BrowserMain() {
});
return (
<div class="flex flex-col flex-1 h-full gap-2 relative">
<div class="flex flex-row justify-between sticky top-0 z-10 bg-primary">
<div class="flex flex-row gap-2 h-8">
<div class="relative h-full flex flex-1 flex-col gap-2">
<div class="sticky top-0 z-10 flex flex-row justify-between bg-primary">
<div class="h-8 flex flex-row gap-2">
<TextField
iconLeft={<SearchMdIcon />}
@ -86,7 +86,7 @@ function BrowserMain() {
</Dropdown.Minimal>
</div>
<div class="flex flex-row gap-2 justify-end">
<div class="flex flex-row justify-end gap-2">
<Button
iconLeft={<Download01Icon />}
children="From URL"
@ -119,13 +119,13 @@ interface ModsRowProps {
function ModsRow(props: ModsRowProps) {
return (
<div class="flex flex-col flex-1 gap-3">
<div class="flex flex-row flex-1 justify-between">
<div class="flex flex-1 flex-col gap-3">
<div class="flex flex-1 flex-row justify-between">
<h4>{props.header}</h4>
<A class="text-fg-secondary hover:text-fg-secondary-hover active:text-fg-secondary-pressed" href={`category?category=${props.category}`}>See all</A>
<A class="text-fg-secondary active:text-fg-secondary-pressed hover:text-fg-secondary-hover" href={`category?category=${props.category}`}>See all</A>
</div>
<div class="flex flex-row gap-2 max-w-full flex-wrap">
<div class="max-w-full flex flex-row flex-wrap gap-2">
<For each={props.packages}>
{mod => <ModCard {...mod} />}
</For>

4
apps/frontend/src/ui/pages/browser/BrowserMod.tsx
View file

@ -44,8 +44,8 @@ function BrowserMod() {
<>
<div class="flex flex-row gap-x-12">
<ModCard {...pkg()!} />
<div class="flex flex-1 flex-col justify-between items-start bg-component-bg rounded-lg p-4 px-6">
<div class="flex w-full flex-row justify-between items-center">
<div class="flex flex-1 flex-col items-start justify-between rounded-lg bg-component-bg p-4 px-6">
<div class="w-full flex flex-row items-center justify-between">
<h1>{pkg()?.title}</h1>
<Button
buttonStyle="primary"

6
apps/frontend/src/ui/pages/cluster/ClusterLogs.tsx
View file

@ -64,9 +64,9 @@ function ClusterLogs() {
});
return (
<div class="flex flex-col flex-1">
<div class="flex flex-col flex-1 gap-y-2">
<div class="flex flex-row justify-between items-center gap-x-1 h-10">
<div class="flex flex-1 flex-col">
<div class="flex flex-1 flex-col gap-y-2">
<div class="h-10 flex flex-row items-center justify-between gap-x-1">
<h1>Logs</h1>
<div class="flex flex-row gap-x-2">
<Button

16
apps/frontend/src/ui/pages/cluster/ClusterMods.tsx
View file

@ -83,9 +83,9 @@ function ClusterMods() {
return (
<Sidebar.Page>
<div class="flex flex-row justify-between w-full">
<div class="w-full flex flex-row justify-between">
<h1>Mods</h1>
<div class="flex flex-row justify-end items-center gap-x-2">
<div class="flex flex-row items-center justify-end gap-x-2">
<Button
buttonStyle="secondary"
iconLeft={sortingAtoZ() ? <ChevronUpIcon /> : <ChevronDownIcon />}
@ -108,7 +108,7 @@ function ClusterMods() {
</Match>
<Match when={displayedMods().length === 0}>
<p class="text-2lg text-center my-4">No mods were found</p>
<p class="my-4 text-center text-2lg">No mods were found</p>
</Match>
</Switch>
</ScrollableContainer>
@ -131,16 +131,16 @@ interface ModEntryProps {
function ModEntry(props: ModEntryProps) {
return (
<div class="bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed p-3 gap-3 rounded-xl flex flex-row items-center">
<div class="flex flex-row items-center gap-3 rounded-xl bg-component-bg p-3 active:bg-component-bg-pressed hover:bg-component-bg-hover">
<div>
<img src={props.thumbnail} alt={props.name} class="aspect-ratio-square h-10 rounded-lg" />
</div>
<div class="flex flex-col flex-1">
<div class="flex flex-row justify-between items-center">
<div class="flex flex-1 flex-col">
<div class="flex flex-row items-center justify-between">
<div class="flex flex-col items-start justify-center">
<div class="flex flex-col items-start justify-center gap-y-2">
<h4>{props.name}</h4>
<span class="h-2 flex flex-row items-center justify-start text-xs font-600 text-fg-secondary/50">
<span class="h-2 flex flex-row items-center justify-start text-xs text-fg-secondary/50 font-600">
{props.version}
{/* TODO: Add version checker */}
{/* <Show when={props.version.includes()}> */}
@ -151,7 +151,7 @@ function ModEntry(props: ModEntryProps) {
</div>
</div>
<div class="flex flex-row gap-2 items-end justify-center">
<div class="flex flex-row items-end justify-center gap-2">
<Button buttonStyle="iconSecondary">
<Edit02Icon />
</Button>

14
apps/frontend/src/ui/pages/cluster/ClusterOverview.tsx
View file

@ -263,26 +263,26 @@ function Banner(props: BannerProps) {
}
return (
<div class="flex flex-row bg-component-bg rounded-xl p-2.5 gap-x-2.5 h-37">
<div class="rounded-lg overflow-hidden border border-gray-10 relative h-full w-57 min-w-57 aspect-ratio-video">
<div class="h-37 flex flex-row gap-x-2.5 rounded-xl bg-component-bg p-2.5">
<div class="relative aspect-ratio-video h-full min-w-57 w-57 overflow-hidden border border-gray-10 rounded-lg">
<Show when={props.editMode()}>
<div
onClick={launchFilePicker}
class="bg-black/50 opacity-50 hover:opacity-100 w-full h-full absolute flex justify-center items-center"
class="absolute h-full w-full flex items-center justify-center bg-black/50 opacity-50 hover:opacity-100"
>
<ImagePlusIcon class="w-12 h-12" />
<ImagePlusIcon class="h-12 w-12" />
</div>
</Show>
<ClusterCover override={props.newCover()} cluster={props.cluster} class="h-full w-full object-cover" />
</div>
<div class="flex flex-col w-full overflow-hidden gap-y-.5 justify-between text-fg-primary">
<div class="w-full flex flex-col justify-between gap-y-.5 overflow-hidden text-fg-primary">
<div>
<Show
when={props.editMode()}
fallback={
<h2 class="text-2xl break-words text-wrap">{props.cluster.meta.name}</h2>
<h2 class="break-words text-wrap text-2xl">{props.cluster.meta.name}</h2>
}
>
<TextField
@ -296,7 +296,7 @@ function Banner(props: BannerProps) {
<div class="flex flex-1 flex-row">
<div
class="flex flex-1 flex-col justify-between items-start"
class="flex flex-1 flex-col items-start justify-between"
classList={{
'text-fg-primary-disabled': props.editMode(),
}}

4
apps/frontend/src/ui/pages/cluster/ClusterRoot.tsx
View file

@ -37,12 +37,12 @@ function ClusterRoot(props: ParentProps) {
return (
<ClusterProvider uuid={searchParams.id}>
<div class="flex flex-row flex-1 h-full gap-x-7">
<div class="h-full flex flex-1 flex-row gap-x-7">
<div class="mt-8">
<ClusterSidebar />
</div>
<div class="flex flex-col w-full h-full">
<div class="h-full w-full flex flex-col">
<AnimatedRoutes>
<ErrorBoundary>
{props.children}

6
apps/frontend/src/ui/pages/cluster/ClusterScreenshots.tsx
View file

@ -28,7 +28,7 @@ function ClusterScreenshots() {
fallback={<div class="text-gray-400">No screenshots found. Press F2 in game to take a screenshot!</div>}
when={list() !== undefined && list()!.length > 0}
>
<div class="grid grid-cols-[repeat(auto-fill,minmax(350px,1fr))] w-full gap-2 transform-gpu">
<div class="grid grid-cols-[repeat(auto-fill,minmax(350px,1fr))] w-full transform-gpu gap-2">
<For each={list()!}>
{screenshot => (
<ScreenshotEntry path={screenshot} cluster_path={cluster()?.path || ''} />
@ -38,7 +38,7 @@ function ClusterScreenshots() {
</Show>
</ScrollableContainer>
<div class="flex flex-row justify-end items-end mt-2">
<div class="mt-2 flex flex-row items-end justify-end">
<Button
buttonStyle="primary"
iconLeft={<LinkExternal01Icon />}
@ -65,7 +65,7 @@ function ScreenshotEntry(props: { path: string; cluster_path: string }) {
return (
<div
class="bg-component-bg hover:bg-component-bg-hover hover:opacity-80 active:bg-component-bg-pressed p-3 gap-3 rounded-xl flex flex-col items-center"
class="flex flex-col items-center gap-3 rounded-xl bg-component-bg p-3 active:bg-component-bg-pressed hover:bg-component-bg-hover hover:opacity-80"
onClick={onClick}
>
<img src={pathSrc()} alt={props.path} class="aspect-ratio-video w-full rounded-lg" />

8
apps/frontend/src/ui/pages/cluster/ClusterWorlds.tsx
View file

@ -39,7 +39,7 @@ function ClusterWorlds() {
</Show>
</ScrollableContainer>
<div class="flex flex-row justify-end items-end mt-2">
<div class="mt-2 flex flex-row items-end justify-end">
<Button
buttonStyle="primary"
iconLeft={<LinkExternal01Icon />}
@ -83,18 +83,18 @@ function WorldEntry(props: { name: string; cluster_path: string }) {
return (
<div
class="bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed p-3 gap-3 rounded-xl flex flex-row justify-between items-center"
class="flex flex-row items-center justify-between gap-3 rounded-xl bg-component-bg p-3 active:bg-component-bg-pressed hover:bg-component-bg-hover"
onClick={onClick}
>
<div class="flex flex-row items-center gap-x-3">
<WorldIcon cluster_name={props.cluster_path} world_name={props.name} class="w-16 h-16 aspect-ratio-square" />
<WorldIcon cluster_name={props.cluster_path} world_name={props.name} class="aspect-ratio-square h-16 w-16" />
<div class="flex flex-col gap-y-2">
<h3>{props.name}</h3>
<p>Todo</p>
</div>
</div>
<div class="flex flex-row justify-end items-center gap-x-3">
<div class="flex flex-row items-center justify-end gap-x-3">
<Button
buttonStyle="iconDanger"
children={<Trash01Icon />}

8
apps/frontend/src/ui/pages/settings/SettingsRoot.tsx
View file

@ -36,7 +36,7 @@ function SettingsRoutes() {
function SettingsRoot(props: ParentProps) {
return (
<div class="flex flex-row flex-1 h-full gap-x-7">
<div class="h-full flex flex-1 flex-row gap-x-7">
<div class="mt-8 flex flex-col justify-between">
<Sidebar
base="/settings"
@ -61,7 +61,7 @@ function SettingsRoot(props: ParentProps) {
<Info />
</div>
<div class="flex flex-col w-full h-full">
<div class="h-full w-full flex flex-col">
<AnimatedRoutes>
<ErrorBoundary>
{props.children}
@ -76,10 +76,10 @@ function Info() {
const [copied, setCopied] = createSignal(false);
return (
<div class="mx-1 my-2 flex flex-col justify-center items-center relative">
<div class="relative mx-1 my-2 flex flex-col items-center justify-center">
<Tooltip text={copied() ? 'Copied to clipboard!' : 'Copy to clipboard'}>
<div
class="whitespace-pre-line line-height-normal text-sm text-fg-secondary"
class="whitespace-pre-line text-sm text-fg-secondary line-height-normal"
onClick={(e) => {
const info = e.target.innerHTML;
writeText(info)

2
apps/frontend/src/ui/pages/settings/about/SettingsChangelog.tsx
View file

@ -17,7 +17,7 @@ function SettingsChangelog() {
// TODO: Implement markdown support?
function UpdatePost() {
return (
<div class="bg-component-bg p-4 rounded-xl flex-1 flex flex-col gap-2 line-height-relaxed whitespace-pre-line">
<div class="flex flex-1 flex-col gap-2 whitespace-pre-line rounded-xl bg-component-bg p-4 line-height-relaxed">
<h2>New Feature</h2>
<p class="">
{`

12
apps/frontend/src/ui/pages/settings/game/SettingsAccounts.tsx
View file

@ -29,8 +29,8 @@ function SettingsAccounts() {
<ScrollableContainer>
<Switch>
<Match when={controller.accounts()?.length === 0}>
<div class="flex flex-col h-full gap-y-4 max-h-64 justify-center items-center">
<span class="text-lg font-bold uppercase text-fg-secondary">No accounts added.</span>
<div class="h-full max-h-64 flex flex-col items-center justify-center gap-y-4">
<span class="text-lg text-fg-secondary font-bold uppercase">No accounts added.</span>
<span class="text-xl font-bold">Add one with the Add Account button.</span>
</div>
</Match>
@ -50,7 +50,7 @@ function SettingsAccounts() {
</Switch>
</ScrollableContainer>
<div class="flex flex-row justify-end items-end mt-2">
<div class="mt-2 flex flex-row items-end justify-end">
<Button
buttonStyle="primary"
iconLeft={<UserPlus02Icon />}
@ -79,9 +79,9 @@ function AccountRow(props: AccountRowProps) {
onClick={() => props.onClick(props.uuid)}
class={`flex flex-row bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed rounded-xl gap-3.5 p-4 items-center box-border border ${defaultProps.current ? 'border-brand' : 'border-transparent'}`}
>
<div class="flex justify-center items-center h-12 w-12">
<div class="h-12 w-12 flex items-center justify-center">
<PlayerHead
class="w-12 h-12 rounded-md"
class="h-12 w-12 rounded-md"
uuid={props.uuid}
onError={() => setErrored(true)}
/>
@ -94,7 +94,7 @@ function AccountRow(props: AccountRowProps) {
<Tooltip
text="Could not fetch this account's game profile"
>
<InfoCircleIcon class="w-4 h-4" />
<InfoCircleIcon class="h-4 w-4" />
</Tooltip>
</Show>
</div>

8
apps/frontend/src/ui/pages/settings/game/SettingsMinecraft.tsx
View file

@ -89,7 +89,7 @@ function SettingsRow(props: SettingsRowProps & {
<BaseSettingsRow {...rest}>
<Show when={split.isGlobal() === false}>
<div
class="px-2 py-1 text-xs text-white bg-brand hover:bg-brand-hover active:bg-brand-pressed rounded-md font-italic font-medium"
class="rounded-md bg-brand px-2 py-1 text-xs text-white font-medium font-italic active:bg-brand-pressed hover:bg-brand-hover"
onClick={() => split.reset()}
>
Reset
@ -130,7 +130,7 @@ export function GameSettings(props: {
isGlobal={props.resolution.isGlobal}
reset={props.resolution.resetToFallback}
>
<div class="grid grid-justify-center grid-items-center gap-2 grid-cols-[70px_16px_70px]">
<div class="grid grid-cols-[70px_16px_70px] gap-2 grid-justify-center grid-items-center">
<TextField.Number
class="text-center"
value={props.resolution.get()[0]}
@ -138,7 +138,7 @@ export function GameSettings(props: {
props.resolution.set([Number.parseInt(value), props.resolution.get()[1]]);
}}
/>
<XIcon class="w-4 h-4" />
<XIcon class="h-4 w-4" />
<TextField.Number
class="text-center"
value={props.resolution.get()[1]}
@ -156,7 +156,7 @@ export function GameSettings(props: {
isGlobal={props.memory.isGlobal}
reset={props.memory.resetToFallback}
>
<div class="flex flex-justify-center items-center gap-x-4">
<div class="flex items-center gap-x-4 flex-justify-center">
<div class="flex flex-row items-center gap-x-2">
<span>Min:</span>
<TextField.Number

2
eslint.config.ts
View file

@ -3,7 +3,7 @@ import { defineConfig } from '@flowr/eslint-config';
export default defineConfig({
typescript: true,
solid: true,
unocss: false,
unocss: true,
toml: true,
gitignore: true,
ignores: [

1
package.json
View file

@ -54,6 +54,7 @@
"devDependencies": {
"@flowr/eslint-config": "^3.11.3",
"@types/node": "^22.2.0",
"@unocss/eslint-plugin": "^0.61.9",
"@vitest/ui": "^2.0.5",
"bumpp": "^9.4.2",
"eslint": "^9.9.0",

1
uno.config.ts Normal file
View file

@ -0,0 +1 @@
export { default } from './apps/frontend/uno.config';