From 684fb49aad3742208d8d2cd22c4cc321d41b3bc5 Mon Sep 17 00:00:00 2001
From: renovate <renovatebot@kolaente.de>
Date: Fri, 5 Feb 2021 18:51:06 +0000
Subject: [PATCH] Update dependency vue-advanced-cropper to v1 (#393)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/393
Co-authored-by: renovate <renovatebot@kolaente.de>
Co-committed-by: renovate <renovatebot@kolaente.de>
---
 package.json                              |  2 +-
 src/components/user/avatar-settings.vue   | 19 +++++++++++++++++--
 src/styles/theme/variables/variables.scss |  1 +
 yarn.lock                                 |  8 ++++----
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index d7594e1c79..2b7b1f0e9e 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "snake-case": "3.0.4",
     "verte": "0.0.12",
     "vue": "2.6.12",
-    "vue-advanced-cropper": "0.20.1",
+    "vue-advanced-cropper": "1.2.5",
     "vue-drag-resize": "1.4.2",
     "vue-easymde": "1.3.2",
     "vue-shortkey": "3.1.7",
diff --git a/src/components/user/avatar-settings.vue b/src/components/user/avatar-settings.vue
index 8c8169931e..319da32004 100644
--- a/src/components/user/avatar-settings.vue
+++ b/src/components/user/avatar-settings.vue
@@ -38,8 +38,9 @@
 					:src="avatarToCrop"
 					:stencil-props="{aspectRatio: 1}"
 					@ready="() => loading = false"
-					class="mb-4"
-					ref="cropper"/>
+					class="mb-4 cropper"
+					ref="cropper"
+				/>
 				<x-button
 					:loading="avatarService.loading || loading"
 					@click="uploadAvatar"
@@ -63,6 +64,7 @@
 
 <script>
 import {Cropper} from 'vue-advanced-cropper'
+import 'vue-advanced-cropper/dist/style.css'
 
 import AvatarService from '../../services/avatar'
 import AvatarModel from '../../models/avatar'
@@ -142,3 +144,16 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss">
+@import '../../styles/theme/variables/all';
+
+.cropper {
+	height: 80vh;
+	background: transparent;
+}
+
+.vue-advanced-cropper__background {
+	background: $white;
+}
+</style>
diff --git a/src/styles/theme/variables/variables.scss b/src/styles/theme/variables/variables.scss
index c97323c340..0436459028 100644
--- a/src/styles/theme/variables/variables.scss
+++ b/src/styles/theme/variables/variables.scss
@@ -1,5 +1,6 @@
 @import 'colors';
 
+$white: #fff;
 $black: hsl(0, 0%, 4%) !default;
 $orange: #ff851b;
 $green: #00db60;
diff --git a/yarn.lock b/yarn.lock
index 04c2acea80..be381ec5aa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15080,10 +15080,10 @@ vscode-uri@^1.0.6:
   resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-1.0.8.tgz#9769aaececae4026fb6e22359cb38946580ded59"
   integrity sha512-obtSWTlbJ+a+TFRYGaUumtVwb+InIUVI0Lu0VBUAPmj2cU5JutEXg3xUE0c2J5Tcy7h2DEKVJBFi+Y9ZSFzzPQ==
 
-vue-advanced-cropper@0.20.1:
-  version "0.20.1"
-  resolved "https://registry.yarnpkg.com/vue-advanced-cropper/-/vue-advanced-cropper-0.20.1.tgz#bf77f8c650d4e2f1b8d73152e4cdbb227eac8942"
-  integrity sha512-G/RloEFoAIMd8hK9xczcu9muUNq0GzHupcnuFQuiyk9+4W+JkT4Ypnrr0CLDrtuFwd1BFabiX9bdpk+Z/XP2EQ==
+vue-advanced-cropper@1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/vue-advanced-cropper/-/vue-advanced-cropper-1.2.5.tgz#b51d7f3ef0a3e3693f00334ae2954256b11129d2"
+  integrity sha512-KByumoh4Nfgi+y+wH5NCO2LkVcrJ/ySNCwxY41wtBtv/uOKO7wmkGUoetBX2HVPoVfRqxbDsGhM324nRVwdLrQ==
   dependencies:
     classnames "^2.2.6"
     debounce "^1.2.0"