From 036487dda4323d17c156919bef7e6647b24320b9 Mon Sep 17 00:00:00 2001
From: Paul Miller <paul@paul.lol>
Date: Wed, 26 Apr 2023 15:10:29 -0500
Subject: [PATCH 1/2] fixups for amount editor

---
 src/components/AmountEditable.tsx | 58 ++++++++++++++++++++-----------
 1 file changed, 37 insertions(+), 21 deletions(-)

diff --git a/src/components/AmountEditable.tsx b/src/components/AmountEditable.tsx
index 8ee1701..58f28a2 100644
--- a/src/components/AmountEditable.tsx
+++ b/src/components/AmountEditable.tsx
@@ -1,20 +1,27 @@
-import { For, createMemo, createSignal } from 'solid-js';
+import { For, Show, createMemo, createSignal } from 'solid-js';
 import { Button } from '~/components/layout';
 import { useMegaStore } from '~/state/megaStore';
 import { satsToUsd } from '~/utils/conversions';
 import { Amount } from './Amount';
 import { Dialog } from '@kobalte/core';
+import close from "~/assets/icons/close.svg";
 
 const CHARACTERS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", ".", "0", "DEL"];
 
-function SingleDigitButton(props: { character: string, onClick: (c: string) => void }) {
+const FIXED_AMOUNTS = [{ label: "10k", amount: "10000" }, { label: "100k", amount: "100000" }, { label: "1m", amount: "1000000" }]
+
+function SingleDigitButton(props: { character: string, onClick: (c: string) => void, fiat: boolean }) {
     return (
-        <button
-            class="p-2 rounded-lg hover:bg-white/10 active:bg-m-blue text-white text-4xl font-semi font-mono"
-            onClick={() => props.onClick(props.character)}
-        >
-            {props.character}
-        </button>
+        // Skip the "." if it's fiat
+        <Show when={props.fiat || !(props.character === ".")} fallback={<div />}>
+            <button
+                disabled={props.character === "."}
+                class="disabled:opacity-50 p-2 rounded-lg hover:bg-white/10 active:bg-m-blue text-white text-4xl font-semi font-mono"
+                onClick={() => props.onClick(props.character)}
+            >
+                {props.character}
+            </button>
+        </Show>
     );
 }
 
@@ -124,9 +131,7 @@ export function AmountEditable(props: { initialAmountSats: string, setAmountSats
     }
 
     const DIALOG_POSITIONER = "fixed inset-0 safe-top safe-bottom z-50"
-    const DIALOG_CONTENT = "h-screen-safe p-4 bg-gray/50 backdrop-blur-md bg-black/80"
-
-
+    const DIALOG_CONTENT = "h-screen-safe flex flex-col justify-between p-4 backdrop-blur-md bg-neutral-800/70"
 
     return (
         <Dialog.Root isOpen={isOpen()}>
@@ -136,8 +141,13 @@ export function AmountEditable(props: { initialAmountSats: string, setAmountSats
             <Dialog.Portal>
                 {/* <Dialog.Overlay class={OVERLAY} /> */}
                 <div class={DIALOG_POSITIONER}>
-                    <Dialog.Content class={DIALOG_CONTENT}>
+                    <Dialog.Content class={DIALOG_CONTENT} onEscapeKeyDown={() => setIsOpen(false)}>
                         {/* TODO: figure out how to submit on enter */}
+                        <div class="w-full flex justify-end">
+                            <button tabindex="-1" onClick={() => setIsOpen(false)} class="hover:bg-white/10 rounded-lg active:bg-m-blue">
+                                <img src={close} alt="Close" />
+                            </button>
+                        </div>
                         <form onSubmit={handleSubmit}>
                             <input ref={el => inputRef = el}
                                 autofocus
@@ -148,24 +158,30 @@ export function AmountEditable(props: { initialAmountSats: string, setAmountSats
                                 onInput={(e) => handleHiddenInput(e)}
                             />
                         </form>
-                        <div class="flex flex-col gap-4 max-w-[400px] mx-auto">
-                            <div class="p-4 bg-black rounded-xl flex flex-col gap-4 items-center justify-center">
-                                <h1 class={`font-light text-center transition-transform ease-out duration-300 text-6xl ${scale()}`}>
+                        <div class="flex flex-col flex-1 justify-around gap-4 max-w-[400px] mx-auto w-full">
+                            <div class="w-full p-4 flex flex-col gap-4 items-center justify-center">
+                                <h1 class={`font-light text-center transition-transform ease-out duration-300 text-5xl ${scale()}`}>
                                     {prettyPrint()}&nbsp;<span class='text-xl'>SATS</span>
                                 </h1>
                                 <h2 class="text-xl font-light text-white/70" >
                                     &#8776; {amountInUsd()} <span class="text-sm">USD</span>
                                 </h2>
                             </div>
-                            <div class="grid grid-cols-3 w-full flex-none">
-                                <For each={CHARACTERS}>
-                                    {(character) => (
-                                        <SingleDigitButton character={character} onClick={handleCharacterInput} />
+                            <div class="flex justify-center gap-4 my-2">
+                                <For each={FIXED_AMOUNTS}>
+                                    {(amount) => (
+                                        <button onClick={() => setDisplayAmount(amount.amount)} class="py-2 px-4 rounded-lg bg-white/10">{amount.label}</button>
                                     )}
                                 </For>
                             </div>
-                            {/* TODO: this feels wrong */}
-                            <Button intent="inactive" class="w-full flex-none" onClick={handleSubmit}>
+                            <div class="grid grid-cols-3 w-full flex-none">
+                                <For each={CHARACTERS}>
+                                    {(character) => (
+                                        <SingleDigitButton fiat={false} character={character} onClick={handleCharacterInput} />
+                                    )}
+                                </For>
+                            </div>
+                            <Button intent="blue" class="w-full flex-none" onClick={handleSubmit}>
                                 Set Amount
                             </Button>
                         </div>

From bf8178cce53b9218b1a29e4639d8fb07af0d9ef3 Mon Sep 17 00:00:00 2001
From: Paul Miller <paul@paul.lol>
Date: Wed, 26 Apr 2023 17:08:08 -0500
Subject: [PATCH 2/2] fix tailwind

---
 src/components/layout/Radio.tsx | 1 +
 tailwind.config.cjs             | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/src/components/layout/Radio.tsx b/src/components/layout/Radio.tsx
index af44725..efa7eb8 100644
--- a/src/components/layout/Radio.tsx
+++ b/src/components/layout/Radio.tsx
@@ -6,6 +6,7 @@ type Choices = { value: string, label: string, caption: string }[]
 // TODO: how could would it be if we could just pass the estimated fees in here?
 export function StyledRadioGroup(props: { value: string, choices: Choices, onValueChange: (value: string) => void, small?: boolean, }) {
     return (
+        // TODO: rewrite this with CVA, props are bad for tailwind
         <RadioGroup.Root value={props.value} onValueChange={(e) => props.onValueChange(e)} class={`grid w-full gap-${props.small ? "2" : "4"} grid-cols-${props.choices.length.toString()}`}>
             <For each={props.choices}>
                 {choice =>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 9cd610e..7b03d9e 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -6,6 +6,12 @@ module.exports = {
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
+  safelist: [
+    'grid-cols-1',
+    'grid-cols-2',
+    'gap-2',
+    'gap-4'
+  ],
   variants: {
     extend: {
       borderWidth: ['responsive', 'last', 'hover', 'focus'],