Move labels to input fields, beautify create form

frontend/src/components/budget-create.ts

@@ -1,6 +1,7 @@
-import { LitElement, html } from 'lit-element'
+import { LitElement, html, css } from 'lit-element'
 import { InputField } from './input'
 import './input'
+import { MOB_BP } from './styles';
 
 export class CreateBudgetEvent extends CustomEvent<{
   amount: number,
@@ -9,7 +10,7 @@ export class CreateBudgetEvent extends CustomEvent<{
 }> { }
 
 class BudgetCreateComponent extends LitElement {
-  hasError: boolean
+  hasError: boolean = false
 
   static get properties() {
     return {
@@ -17,12 +18,28 @@ class BudgetCreateComponent extends LitElement {
     }
   }
 
+  static get styles() {
+    return css`
+      :host {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        column-gap: 10px;
+      }
+
+      ${MOB_BP} {
+        :host {
+          grid-template-columns: auto;
+        }
+      }
+    `
+  }
+
   onCreate(e: Event) {
     e.preventDefault()
     const root = this.shadowRoot
-    const amountInputEl = <InputField>root.getElementById('create-budget-amount')
-    const currencyInputEl = <InputField>root.getElementById('create-budget-currency')
-    const nameInputEl = <InputField>root.getElementById('create-budget-name')
+    const amountInputEl = <InputField>root.getElementById('amount')
+    const currencyInputEl = <InputField>root.getElementById('currency')
+    const nameInputEl = <InputField>root.getElementById('name')
 
     const name = nameInputEl.getValue().trim()
     const amount = parseInt(amountInputEl.getValue())
@@ -43,21 +60,21 @@ class BudgetCreateComponent extends LitElement {
 
   render() {
     return html`
-      <label for="create-budget-name-field">Name (optional)</label>
       <input-field
-        id="create-budget-name"
+        id="name"
         type="text"
+        label="Name (optional)"
       ></input-field>
-      <label for="create-budget-amount-field">Amount</label>
       <input-field
-        id="create-budget-amount"
+        id="amount"
         type="number"
+        label="Amount"
         required
       ></input-field>
-      <label for="create-budget-currency-field">Currency (3 chars)</label>
       <input-field
-        id="create-budget-currency"
+        id="currency"
         type="text"
+        label="Currency (3 chars)"
         pattern="[A-Z]{3}"
         maxlength="3"
         required

frontend/src/components/budget-join.ts

@@ -5,8 +5,8 @@ import { QRReadEvent } from './budget-qr-reader';
 export class JoinBudgetEvent extends CustomEvent<{ uuid: string }> { }
 
 class BudgetJoinComponent extends LitElement {
-  hasError: boolean
-  showQRReader: boolean
+  hasError: boolean = false
+  showQRReader: boolean = false
 
   static get properties() {
     return {
@@ -46,6 +46,7 @@ class BudgetJoinComponent extends LitElement {
       <input-field
         id="join-budget-uuid"
         type="text"
+        label="Budget secret"
         placeholder="aaaaaaaa-bbbb-4ccc-9ddd-ffffffffffff"
         maxlength="36"
         pattern="[0-9A-Fa-f]{8}-[0-9A-Fa-f]{4}-4[0-9A-Fa-f]{3}-[89ABab][0-9A-Fa-f]{3}-[0-9A-Fa-f]{12}"

frontend/src/components/input.ts

@@ -7,6 +7,7 @@ export class InputField extends LitElement {
   maxlength: number
   pattern: string
   required: boolean
+  label: string
 
   static get properties() {
     return {
@@ -15,12 +16,24 @@ export class InputField extends LitElement {
       placeholder: { type: String },
       maxlength: { type: Number },
       pattern: { type: String },
-      required: { type: Boolean }
+      required: { type: Boolean },
+      label: { type: String }
     }
   }
 
   static get styles() {
     return css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        margin: 10px 0;
+      }
+
+      label {
+        margin-bottom: 5px;
+      }
+
       input {
         border: 3px solid var(--dark-accent);
         border-radius: 5px;
@@ -45,6 +58,7 @@ export class InputField extends LitElement {
 
   render() {
     return html`
+      <label for="${this.inputId}">${this.label}</label>
       <input
         id=${this.inputId}
         type=${this.type}