From 284e9a97674d8fb35c23af0cf9368f1a4e1b545a Mon Sep 17 00:00:00 2001
From: Minzkraut <minzkraut@gmail.com>
Date: Tue, 29 Mar 2022 00:48:52 +0200
Subject: [PATCH] Slightly improved CardDesigner layout

---
 src/components/CardDesigner.vue | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/CardDesigner.vue b/src/components/CardDesigner.vue
index 02994c2..fca3a53 100644
--- a/src/components/CardDesigner.vue
+++ b/src/components/CardDesigner.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Intro header="Card Designer" body="This Tool is currently being built...<br/>Mobile cropper might behave weird. <br/>Known Issues: <br/>- (mobile) Moving cropper to the right changes tabs <br/>- (mobile)Pinch to zoom affects page instead of crop area <br>- Initial crop area doesn't cover the maximum size psossible" />
+    <Intro header="Card Designer" body="This Tool is currently being built...<br/>Mobile cropper might behave weird. <br/>Known Issues: <br/>- (mobile) Moving cropper to the right changes tabs <br/>- (mobile) Pinch to zoom affects page instead of crop area <br>- Initial crop area doesn't cover the maximum size possible" />
     <v-row justify="center" class="pa-10">
       <div class="button-wrapper">
         <input
@@ -10,13 +10,15 @@
           accept="image/*"
           @change="setImage"
         />
-        <v-btn class="button ma-10" @click="showFileChooser()">
+        <v-btn x-large class="button ma-10" @click="showFileChooser()">
           Open Image
+          <v-icon right dark>
+            mdi-cloud-upload
+          </v-icon>
         </v-btn>
       </div>
     </v-row>
     <v-row justify="center">
-     
       <section class="cropper-area">
         <div class="img-cropper">
           <vue-cropper
@@ -35,11 +37,16 @@
           <img id="frame" src="../assets/cards/overlay.png" alt="">
           <div class="custom-preview" />
         </div>
-        <v-btn class="button ma-10" @click="cropImage()">
-          Save Image
-        </v-btn>
       </section>
     </v-row>
+    <v-row justify="center" class="pa-10">
+      <v-btn x-large class="button ma-10" @click="cropImage()">
+        Save Image
+        <v-icon right dark>
+          mdi-cloud-download
+        </v-icon>
+      </v-btn>
+    </v-row>
   </div>
 </template>
 
@@ -123,6 +130,11 @@ export default {
 
 <style scoped lang="scss">
 //FIXME: Outsource styles
+
+.cropper-area {
+  padding-right: 25px;
+}
+
 .img-cropper {
   max-width: 50%;
 }