Move UUID to QR code sharing and style up

frontend/src/components/budget-display.ts

@@ -33,17 +33,7 @@ class BudgetDisplayComponent extends LitElement {
 
       h3 {
         font-size: 150%;
-        margin: 0;
-      }
-
-      h4 {
-        font-size: 80%;
-        font-weight: 200;
-        margin: 0;
-      }
-
-      h4:before {
-        content: "ID: ";
+        margin: 10px 0 0 0;
       }
 
       h5 {
@@ -60,7 +50,7 @@ class BudgetDisplayComponent extends LitElement {
         column-gap: 10px;
         grid-template: 'now curr' 'of init' / auto 66%;
 
-        margin-top: 20px;
+        margin-top: 10px;
       }
 
       .money-left {
@@ -171,7 +161,6 @@ class BudgetDisplayComponent extends LitElement {
 
     return html`
       <h3>${this.budget.name != '' ? this.budget.name : 'Unnamed budget'}</h3>
-      <h4>${this.budget.uuid}</h4>
 
       <div
         class="amounts"
@@ -204,7 +193,7 @@ class BudgetDisplayComponent extends LitElement {
           <fa-icon name="edit" alt="Rename"></fa-icon>
         </fa-button>
         <fa-button @click=${this.toggleShare}>
-          <fa-icon name="qrcode" alt="Share with QR code"></fa-icon>
+          <fa-icon name="share-alt" alt="Share"></fa-icon>
         </fa-button>
         <fa-button @click=${this.onRemove}>
           <fa-icon name="trash" alt="Remove"></fa-icon>

frontend/src/components/budget-qr.ts

@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit-element'
+import { LitElement, html, css } from 'lit-element'
 import * as QRCode from 'qrcode'
 
 class BudgetQRComponent extends LitElement {
@@ -12,6 +12,16 @@ class BudgetQRComponent extends LitElement {
     }
   }
 
+  static get styles() {
+    return css`
+      p {
+        font-size: 80%;
+        font-weight: 200;
+        margin: 10px 0;
+      }
+    `
+  }
+
   constructor() {
     super()
 
@@ -28,10 +38,11 @@ class BudgetQRComponent extends LitElement {
 
   render() {
     if (this.error) {
-      return html`<p>There was an error rendering the QR code.</p>`
+      return html`<p role="alert">There was an error rendering the QR code.</p>`
     }
 
     return html`
+      <p role="alert" aria-label="Share this secret with another user:">${this.uuid}</p>
       <canvas id="${this.uuid}-qr-canvas"></canvas>
     `
   }

frontend/src/components/icon.ts

@@ -43,7 +43,8 @@ const ICONS = [
   ['trash', '\\f1f8'],
   ['plus', '\\f067'],
   ['arrow-left', '\\f060'],
-  ['user-friends', '\\f500']
+  ['user-friends', '\\f500'],
+  ['share-alt', '\\f1e0']
 ]
 
 function icon2css(name: string, code: string) {