yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(ui): pin stepper buttons to the bottom

Browse Source 
Closes #4968
This commit is contained in:
Brian McGee
2025-08-26 12:02:10 +01:00
parent 78abc36cd3
commit 0ebb1f0c66
4 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pkgs/clan-app/ui/src/components/Modal/Modal.module.css
View File

@@ -25,7 +25,7 @@
.modal_body {
overflow-y: auto;
@apply rounded-b-md p-6 pt-4 bg-def-1 flex-grow;
@apply rounded-b-md p-4 pt-4 bg-def-1 flex-grow;
&[data-no-padding] {
@apply p-0;

6
pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx
View File

@@ -24,8 +24,8 @@ import cx from "classnames";
const Prose = () => (
<StepLayout
body={
<>
<div class="flex h-36 w-full flex-col justify-center gap-3 rounded-md px-4 py-6 text-fg-inv-1 outline-2 outline-bg-def-acc-3 bg-inv-4">
<div class="flex flex-col gap-4">
<div class="flex h-36 w-full flex-col justify-center gap-3 rounded-md p-4 text-fg-inv-1 outline-2 outline-bg-def-acc-3 bg-inv-4">
<div class="flex flex-col gap-3">
<Typography
hierarchy="label"
@@ -74,7 +74,7 @@ const Prose = () => (
</Typography>
</div>
</div>
</>
</div>
}
footer={<StepFooter nextText="start" />}
/>

7
pkgs/clan-app/ui/src/workflows/Steps.module.css Normal file
View File

@@ -0,0 +1,7 @@
.step {
@apply relative flex size-full flex-col justify-between gap-8;
.footer {
@apply flex justify-between;
}
}

5
pkgs/clan-app/ui/src/workflows/Steps.tsx
View File

@@ -2,6 +2,7 @@ import { JSX } from "solid-js";
import { useStepper } from "../hooks/stepper";
import { Button, ButtonProps } from "../components/Button/Button";
import { InstallSteps } from "./Install/install";
import styles from "./Steps.module.css";
interface StepLayoutProps {
body: JSX.Element;
@@ -9,7 +10,7 @@ interface StepLayoutProps {
}
export const StepLayout = (props: StepLayoutProps) => {
return (
<div class="flex size-full grow flex-col justify-between gap-6">
<div class={styles.step}>
{props.body}
{props.footer}
</div>
@@ -63,7 +64,7 @@ interface StepFooterProps {
export const StepFooter = (props: StepFooterProps) => {
const stepper = useStepper<InstallSteps>();
return (
<div class="flex justify-between py-4">
<div class={styles.footer}>
<BackButton />
<NextButton type="button" onClick={() => stepper.next()}>
{props.nextText || undefined}