Update dependency vue-advanced-cropper to v1.3.0 (#404)

Reviewed-on: vikunja/frontend#404
Co-authored-by: renovate <renovatebot@kolaente.de>
Co-committed-by: renovate <renovatebot@kolaente.de>

package.json

@@ -16,7 +16,7 @@
     "bulma": "0.9.2",
     "camel-case": "4.1.2",
     "copy-to-clipboard": "3.3.1",
-    "date-fns": "2.16.1",
+    "date-fns": "2.17.0",
     "dompurify": "2.2.6",
     "highlight.js": "10.5.0",
     "lodash": "4.17.20",
@@ -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.3.0",
     "vue-drag-resize": "1.4.2",
     "vue-easymde": "1.3.2",
     "vue-shortkey": "3.1.7",

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>

src/styles/theme/variables/variables.scss

@@ -1,5 +1,6 @@
 @import 'colors';
 
+$white: #fff;
 $black: hsl(0, 0%, 4%) !default;
 $orange: #ff851b;
 $green: #00db60;

yarn.lock

@@ -6042,10 +6042,10 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-date-fns@2.16.1:
-  version "2.16.1"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.16.1.tgz#05775792c3f3331da812af253e1a935851d3834b"
-  integrity sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==
+date-fns@2.17.0:
+  version "2.17.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.17.0.tgz#afa55daea539239db0a64e236ce716ef3d681ba1"
+  integrity sha512-ZEhqxUtEZeGgg9eHNSOAJ8O9xqSgiJdrL0lzSSfMF54x6KXWJiOH/xntSJ9YomJPrYH/p08t6gWjGWq1SDJlSA==
 
 date-fns@^1.27.2:
   version "1.30.1"
@@ -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.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/vue-advanced-cropper/-/vue-advanced-cropper-1.3.0.tgz#15d81b96cb894fa5f66ddeb37f70850432639b0c"
+  integrity sha512-KALBnQVfiIr98uNqhbpJq5yOGxANOuTC0wsJx9SCvw6k1MAp8Nv8b4Qi8rJ8AXqS5OQ4451XDyLsr0jemYjWkw==
   dependencies:
     classnames "^2.2.6"
     debounce "^1.2.0"