aljaz/mutiny-web
1
0
Fork 0
mirror of https://github.com/aljazceru/mutiny-web.git synced 2026-01-06 07:44:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

option to remember invoice type choice

Browse Source
This commit is contained in:
Paul Miller
2023-09-22 17:41:49 -05:00
parent 8555f3a1f3
commit c0d540518f
7 changed files with 73 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/layout/Misc.tsx
View File

@@ -328,11 +328,11 @@ export function ModalCloseButton() {
);
}
export const SIMPLE_OVERLAY = "fixed inset-0 z-50 bg-black/20 backdrop-blur-md";
export const SIMPLE_OVERLAY = "fixed inset-0 z-50 bg-black/50 backdrop-blur-lg";
export const SIMPLE_DIALOG_POSITIONER =
"fixed inset-0 z-50 flex items-center justify-center";
export const SIMPLE_DIALOG_CONTENT =
"max-w-[500px] w-[90vw] max-h-[100dvh] overflow-y-scroll disable-scrollbars mx-4 p-4 bg-neutral-800/80 backdrop-blur-md shadow-xl rounded-xl border border-white/10";
"max-w-[500px] w-[90vw] max-h-[100dvh] overflow-y-scroll disable-scrollbars mx-4 p-4 bg-neutral-800/90 rounded-xl border border-white/10";
export const SimpleDialog: ParentComponent<{
title: string;

48
src/components/layout/Radio.tsx
View File

@@ -1,5 +1,7 @@
import { RadioGroup } from "@kobalte/core";
import { For, Show } from "solid-js";
import { createSignal, For, Show } from "solid-js";
import { timeout } from "~/utils";
type Choices = {
value: string;
@@ -10,18 +12,31 @@ type Choices = {
// TODO: how could would it be if we could just pass the estimated fees in here?
export function StyledRadioGroup(props: {
value: string;
initialValue: string;
choices: Choices;
onValueChange: (value: string) => void;
small?: boolean;
accent?: "red" | "white";
vertical?: boolean;
delayOnChange?: boolean;
}) {
const [value, setValue] = createSignal(props.initialValue);
async function onChange(value: string) {
setValue(value);
// This is so if the modal is going to be closed after value change, it will show the choice briefly first
if (props.delayOnChange) {
await timeout(200);
props.onValueChange(value);
} else {
props.onValueChange(value);
}
}
return (
// TODO: rewrite this with CVA, props are bad for tailwind
<RadioGroup.Root
value={props.value}
onChange={props.onValueChange}
value={value()}
onChange={onChange}
class={"w-full gap-4"}
classList={{
"flex flex-col": props.vertical,
@@ -36,7 +51,7 @@ export function StyledRadioGroup(props: {
{(choice) => (
<RadioGroup.Item
value={choice.value}
class={`rounded bg-white/10 outline outline-black/50 ui-checked:bg-neutral-950 ui-checked:outline-2 ui-checked:outline-m-blue`}
class={`rounded-lg bg-m-grey-700 ui-checked:outline`}
classList={{
"ui-checked:outline-m-red": props.accent === "red",
"ui-checked:outline-white":
@@ -45,19 +60,28 @@ export function StyledRadioGroup(props: {
}}
disabled={choice.disabled}
>
<div class={props.small ? "px-2 py-2" : "px-4 py-3"}>
<div
class={"flex items-center gap-2 p-4"}
classList={{ "px-2 py-2": props.small }}
>
<RadioGroup.ItemInput />
<RadioGroup.ItemControl>
<RadioGroup.ItemIndicator />
<RadioGroup.ItemControl
class="flex aspect-square h-6 w-6 items-center justify-center rounded-full border"
classList={{
hidden: !props.vertical
}}
>
<RadioGroup.ItemIndicator class="h-3 w-3 rounded-full bg-white" />
</RadioGroup.ItemControl>
<RadioGroup.ItemLabel class="text-neutral-400 ui-checked:text-white">
<RadioGroup.ItemLabel>
<div class="block">
<div
class={"font-semibold"}
classList={{
"text-base": props.small,
"text-lg": !props.small
"text-md": !props.small,
"text-sm": !props.vertical
}}
class={`font-semibold max-sm:text-sm`}
>
{choice.label}
</div>