From d9344d9c285e0433b8449a110ab87f7268569e57 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Sun, 5 Jan 2020 21:07:49 +0100
Subject: [PATCH] qrcode button with icon

---
 resources/js/app.js           |  2 ++
 resources/js/views/Create.vue | 25 ++++++++++---------------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/resources/js/app.js b/resources/js/app.js
index aaf751fa..65e4847a 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -12,9 +12,11 @@ import Edit         from './views/Edit'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'
+import { faQrcode } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 library.add(faPlusCircle);
+library.add(faQrcode);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 
diff --git a/resources/js/views/Create.vue b/resources/js/views/Create.vue
index a4b8043e..9c761fbc 100644
--- a/resources/js/views/Create.vue
+++ b/resources/js/views/Create.vue
@@ -9,22 +9,17 @@
                             <form @submit.prevent="createAccount">
                                 <h1 class="subtitle is-2">New account</h1>
                                 <div class="field">
-                                    <label class="label">qr code</label>
-                                    <div class="control">
-                                        
-                                    </div>
-                                </div>
-                                <div class="file has-name is-fullwidth">
-                                    <label class="file-label">
-                                        <input type="file" class="file-input" accept="image/*" v-on:change="uploadQrcode" ref="fileInput">
-                                        <span class="file-cta">
-                                            <span class="file-icon">
-                                                <i class="fas fa-qrcode"></i>
+                                    <div class="file is-dark is-boxed">
+                                        <label class="file-label">
+                                            <input class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="fileInput">
+                                            <span class="file-cta">
+                                                <span class="file-icon">
+                                                    <font-awesome-icon :icon="['fas', 'qrcode']" />
+                                                </span>
+                                                <span class="file-label">Upload a qrcode</span>
                                             </span>
-                                            <span class="file-label">Use a QR Code</span>
-                                        </span>
-                                        <span class="file-name">Screen Shot 2017-07-29 at 15.54.25.png</span>
-                                    </label>
+                                        </label>
+                                    </div>
                                 </div>
                                 <div class="field">
                                     <label class="label">Service</label>