diff --git a/src/BandForm.js b/src/BandForm.js index 54ab1dc..3e16568 100644 --- a/src/BandForm.js +++ b/src/BandForm.js @@ -60,9 +60,36 @@ function BandForm({ band }) {

Total

-

${costToReadable(total)}

+

${costToReadable(total)}

+
+
+ + +
+ +
+ +
+ Payment Details +
+ ); diff --git a/src/index.css b/src/index.css index 8f6f0e6..9d70f0d 100644 --- a/src/index.css +++ b/src/index.css @@ -1,6 +1,10 @@ @import "./reset.css"; @import "./variables.css"; +* { + box-sizing: border-box; +} + html { color: var(--color-text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', @@ -12,6 +16,12 @@ html { font-size: var(--font-base); } +input { + width: 100%; + padding: 1rem; + font-size: var(--font-base); +} + hr { border-color: var(--color-text); border-width: 1px; @@ -91,4 +101,16 @@ h4 { justify-content: space-between; font-size: var(--font-lg); } + + .form-row { + display: flex; + flex-direction: row; + gap: var(--spacing-md); + } + + .information, .payment { + display: flex; + flex-direction: column; + gap: var(--spacing-md); + } }