Change style of bouquet to me more consistent with Lunaria and NFT Sender

app/css/index.css

@@ -1,6 +1,15 @@
-/*
-! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
-*/
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+input[type='number'] {
+	-moz-appearance: textfield;
+	/* Firefox */
+}
+
+/* ! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com */
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -535,10 +544,18 @@ video {
 	margin-bottom: 0.5rem;
 }
 
+.ml-2 {
+	margin-left: 0.5rem;
+}
+
 .mt-4 {
 	margin-top: 1rem;
 }
 
+.mt-auto {
+	margin-top: auto;
+}
+
 .block {
 	display: block;
 }
@@ -551,12 +568,20 @@ video {
 	display: flex;
 }
 
-.h-4 {
-	height: 1rem;
+.hidden {
+	display: none;
+}
+
+.h-12 {
+	height: 3rem;
+}
+
+.h-16 {
+	height: 4rem;
 }
 
-.h-6 {
-	height: 1.5rem;
+.h-4 {
+	height: 1rem;
 }
 
 .h-8 {
@@ -613,14 +638,27 @@ video {
 	width: max-content;
 }
 
-.max-w-screen-lg {
-	max-width: 1024px;
+.w-min {
+	width: -moz-min-content;
+	width: min-content;
+}
+
+.w-screen {
+	width: 100vw;
+}
+
+.max-w-full {
+	max-width: 100%;
 }
 
 .max-w-screen-sm {
 	max-width: 640px;
 }
 
+.max-w-screen-xl {
+	max-width: 1280px;
+}
+
 @keyframes spin {
 	to {
 		transform: rotate(360deg);
@@ -643,6 +681,10 @@ video {
 	flex-direction: column-reverse;
 }
 
+.items-end {
+	align-items: flex-end;
+}
+
 .items-center {
 	align-items: center;
 }
@@ -655,6 +697,10 @@ video {
 	justify-content: space-between;
 }
 
+.justify-around {
+	justify-content: space-around;
+}
+
 .gap-1 {
 	gap: 0.25rem;
 }
@@ -675,6 +721,16 @@ video {
 	gap: 2rem;
 }
 
+.overflow-hidden {
+	overflow: hidden;
+}
+
+.truncate {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 .break-all {
 	word-break: break-all;
 }
@@ -704,10 +760,6 @@ video {
 	border-width: 2px;
 }
 
-.border-b {
-	border-bottom-width: 1px;
-}
-
 .border-r-2 {
 	border-right-width: 2px;
 }
@@ -730,16 +782,20 @@ video {
 	border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
-.bg-accent {
-	--tw-bg-opacity: 1;
-	background-color: rgb(108 207 246 / var(--tw-bg-opacity));
+.border-white\/50 {
+	border-color: rgb(255 255 255 / 0.5);
 }
 
 .bg-background {
 	--tw-bg-opacity: 1;
 	background-color: rgb(22 22 29 / var(--tw-bg-opacity));
 }
 
+.bg-black {
+	--tw-bg-opacity: 1;
+	background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 .bg-black\/50 {
 	background-color: rgb(0 0 0 / 0.5);
 }
@@ -757,11 +813,23 @@ video {
 	background-color: rgb(152 206 0 / 0.1);
 }
 
+.bg-transparent {
+	background-color: transparent;
+}
+
 .bg-white {
 	--tw-bg-opacity: 1;
 	background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-white\/10 {
+	background-color: rgb(255 255 255 / 0.1);
+}
+
+.bg-white\/20 {
+	background-color: rgb(255 255 255 / 0.2);
+}
+
 .p-2 {
 	padding: 0.5rem;
 }
@@ -770,6 +838,10 @@ video {
 	padding: 1rem;
 }
 
+.p-6 {
+	padding: 1.5rem;
+}
+
 .px-2 {
 	padding-left: 0.5rem;
 	padding-right: 0.5rem;
@@ -780,19 +852,19 @@ video {
 	padding-right: 1rem;
 }
 
-.px-6 {
-	padding-left: 1.5rem;
-	padding-right: 1.5rem;
+.px-8 {
+	padding-left: 2rem;
+	padding-right: 2rem;
 }
 
 .py-1 {
 	padding-top: 0.25rem;
 	padding-bottom: 0.25rem;
 }
 
-.py-2 {
-	padding-top: 0.5rem;
-	padding-bottom: 0.5rem;
+.py-4 {
+	padding-top: 1rem;
+	padding-bottom: 1rem;
 }
 
 .py-8 {
@@ -872,6 +944,11 @@ video {
 	color: rgb(219 84 97 / var(--tw-text-opacity));
 }
 
+.text-gray-400 {
+	--tw-text-opacity: 1;
+	color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 .text-primary {
 	--tw-text-opacity: 1;
 	color: rgb(255 255 252 / var(--tw-text-opacity));
@@ -887,6 +964,10 @@ video {
 	color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-white\/50 {
+	color: rgb(255 255 255 / 0.5);
+}
+
 .underline {
 	text-decoration-line: underline;
 }
@@ -899,6 +980,11 @@ video {
 	opacity: 0.75;
 }
 
+.outline-none {
+	outline: 2px solid transparent;
+	outline-offset: 2px;
+}
+
 .filter {
 	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -907,39 +993,75 @@ video {
 	transition-duration: 200ms;
 }
 
+.placeholder\:text-gray-600::-moz-placeholder {
+	--tw-text-opacity: 1;
+	color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.placeholder\:text-gray-600::placeholder {
+	--tw-text-opacity: 1;
+	color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.focus-within\:border-white\/80:focus-within {
+	border-color: rgb(255 255 255 / 0.8);
+}
+
+.focus-within\:bg-white\/5:focus-within {
+	background-color: rgb(255 255 255 / 0.05);
+}
+
 .hover\:rotate-45:hover {
 	--tw-rotate: 45deg;
 	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.hover\:bg-accent\/80:hover {
-	background-color: rgb(108 207 246 / 0.8);
+.hover\:underline:hover {
+	text-decoration-line: underline;
 }
 
-.hover\:bg-white\/80:hover {
-	background-color: rgb(255 255 255 / 0.8);
+.focus\:border-white\/90:focus {
+	border-color: rgb(255 255 255 / 0.9);
 }
 
-.active\:text-background\/70:active {
-	color: rgb(22 22 29 / 0.7);
+.focus\:bg-white\/20:focus {
+	background-color: rgb(255 255 255 / 0.2);
 }
 
-.disabled\:cursor-not-allowed:disabled {
-	cursor: not-allowed;
+.active\:text-background\/70:active {
+	color: rgb(22 22 29 / 0.7);
 }
 
-.disabled\:bg-slate-600:disabled {
-	--tw-bg-opacity: 1;
-	background-color: rgb(71 85 105 / var(--tw-bg-opacity));
+.disabled\:opacity-50:disabled {
+	opacity: 0.5;
 }
 
 @media (min-width: 640px) {
+	.sm\:block {
+		display: block;
+	}
+
 	.sm\:flex-row {
 		flex-direction: row;
 	}
 
-	.sm\:px-6 {
-		padding-left: 1.5rem;
-		padding-right: 1.5rem;
+	.sm\:p-4 {
+		padding: 1rem;
+	}
+
+	.sm\:px-0 {
+		padding-left: 0px;
+		padding-right: 0px;
+	}
+
+	.sm\:py-6 {
+		padding-top: 1.5rem;
+		padding-bottom: 1.5rem;
+	}
+}
+
+@media (min-width: 768px) {
+	.md\:pt-24 {
+		padding-top: 6rem;
 	}
 }

app/index.html

@@ -8,7 +8,7 @@
 		<link rel="stylesheet" href="./css/index.css" />
 	</head>
 
-	<body>
+	<body class="w-full bg-black flex justify-center">
 		<script type="importmap">
 			{
 				"imports": {

app/ts/components/App.tsx

@@ -6,13 +6,13 @@ import { Transactions } from './Transactions.js'
 import { connectBrowserProvider } from '../library/provider.js'
 import { Navbar } from './Navbar.js'
 import { createGlobalState } from '../stores.js'
+import { Footer } from './Footer.js'
 
 export function App() {
 	const state = createGlobalState()
 
 	return (
-		<main class='bg-background text-primary w-full min-h-screen sm:px-6 font-serif flex flex-col items-center'>
-			<article className='p-4 max-w-screen-lg w-full'>
+		<main class='bg-black text-primary w-screen max-w-screen overflow-hidden min-h-screen sm:p-4 p-6 gap-4 font-serif flex flex-col items-center max-w-screen-xl'>
 				<Navbar {...state} />
 				<div className='p-4 mt-4 flex flex-col gap-8'>
 					{!state.provider.value && state.bundle.value ? (
@@ -33,7 +33,7 @@ export function App() {
 						</>
 					)}
 				</div>
-			</article>
+			<Footer />
 		</main>
 	)
 }