components/CropPopup.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="crop-popup">
-    <img ref="image" :src="imageSrc" style="min-height: 500px;">
+    <div class="crop-container">
+      <img ref="image" :src="imageSrc" alt="Picture">
+    </div>
+    <div class="image-preview"></div>
     <Button text="Crop" :callback="cropImage"></Button>
     <Button text="Cancel" :callback="closePopup"></Button>
   </div>
@@ -22,23 +25,18 @@ const cropper = ref<Cropper | null>(null);
 watch(image, (newValue) => {
   if (newValue) {
     cropper.value = new Cropper(newValue)
-    const cropperCanvas = cropper.value.getCropperCanvas()
+    const selection = cropper.value.getCropperSelection()
-    const cropperSelection = cropper.value.getCropperSelection()
+    if (selection) {
-    
+      selection.precise = true
-    if (cropperCanvas) {
+      selection.aspectRatio = 1
-      cropperCanvas.background = false
+      selection.initialCoverage = 1
-    }
-
-    if (cropperSelection) {
-      cropperSelection.precise = true
-      cropperSelection.aspectRatio = 1
-      cropperSelection.initialCoverage = 1
     }
   }
 });
 
 async function cropImage() {
   if (cropper) {
+    cropper.value?.element
     const selection = cropper.value?.getCropperSelection();
     if (selection) {
       const canvas = await selection.$toCanvas({width: 256, height: 256})
@@ -60,12 +58,4 @@ function closePopup() {
 </script>
 
 <style scoped>
-.crop-popup, #image-preview{
-  min-width: 20dvw;
-  min-height: 20dvh;
-}
-
-cropper-canvas {
-  min-height: 500px;
-}
 </style>

components/Settings/UserSettings/Profile.vue

@@ -22,15 +22,16 @@
 
       <UserPopup v-if="user" :user="user" id="profile-popup"></UserPopup>
 
+      <CropPopup 
+        v-if="isCropPopupVisible" 
+        :imageSrc="cropImageSrc" 
+        :onCrop="handleCrop" 
+        :onClose="closeCropPopup" 
+      />
     </div>
   </div>
-  <div v-if="isCropPopupVisible" id="crop-popup-container">
+
-    <CropPopup
+  <div id="crop-container">
-      :imageSrc="cropImageSrc"
-      :onCrop="handleCrop"
-      :onClose="closeCropPopup"
-      id="crop-popup-preview"
-    />
   </div>
 </template>
 
@@ -100,6 +101,8 @@ async function changeAvatar() {
       const file = input.files[0];
       if (!file) return;
 
+      newPfpFile = file
+      
       const reader = new FileReader();
       reader.addEventListener("load", () => {
         if (reader.result && typeof reader.result === 'string') {
@@ -168,21 +171,4 @@ function closeCropPopup() {
 #profile-popup {
   margin-left: 2dvw;
 }
-
-#crop-popup-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-  background: rgba(0,0,0,0.5);
-}
-
-#crop-popup-preview {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
 </style>

components/UserPopup.vue

@@ -59,14 +59,12 @@ const props = defineProps<{
   width: 96px;
   height: 96px;
   border: 5px solid #4b3018;
-  background-color: var(--secondary-color);
   border-radius: 100%;
   position: absolute;
   left: 16px;
   top: 16px;
 }
 
-
 #display-name {
   margin-top: 60px;
   margin-bottom: 0;