From 381721087d52efde52ed4191cc5c5b13e815ca51 Mon Sep 17 00:00:00 2001
From: sofiia koval <kovalsofiia1@gmail.com>
Date: Tue, 12 Nov 2024 14:07:14 +0200
Subject: [PATCH] bugfix: #7768

---
 .../drag-and-drop.component.html              |  2 +-
 .../drag-and-drop.component.scss              |  9 +-
 .../edit-photo-pop-up.component.scss          | 98 +++----------------
 src/assets/i18n/en.json                       | 10 +-
 4 files changed, 20 insertions(+), 99 deletions(-)

diff --git a/src/app/main/component/shared/components/drag-and-drop/drag-and-drop.component.html b/src/app/main/component/shared/components/drag-and-drop/drag-and-drop.component.html
index 493f82f213..30645362b2 100644
--- a/src/app/main/component/shared/components/drag-and-drop/drag-and-drop.component.html
+++ b/src/app/main/component/shared/components/drag-and-drop/drag-and-drop.component.html
@@ -42,7 +42,7 @@
   <div class="dropzone warning-background" appDragAndDrop (files)="filesDropped($event)">
     <div class="text-wrapper">
       <div class="centered">
-        <p class="warning-regular">{{ 'drag-and-drop.not-uploaded-warning' | translate }}</p>
+        <p>{{ 'drag-and-drop.not-uploaded-warning' | translate }}</p>
         <p>
           {{ 'drag-and-drop.picture-description' | translate }}
           <label for="upload">
diff --git a/src/app/main/component/shared/components/drag-and-drop/drag-and-drop.component.scss b/src/app/main/component/shared/components/drag-and-drop/drag-and-drop.component.scss
index cf0685bead..abb075db8d 100644
--- a/src/app/main/component/shared/components/drag-and-drop/drag-and-drop.component.scss
+++ b/src/app/main/component/shared/components/drag-and-drop/drag-and-drop.component.scss
@@ -32,12 +32,7 @@
   font-size: 18px;
   text-align: center;
   width: 250px;
-  font-family: var(---tertiary-font);
-  font-weight: 700;
-
-  .warning-regular {
-    font-weight: normal !important;
-  }
+  font-family: var(--primary-font);
 
   span {
     color: var(--primary-green);
@@ -56,7 +51,7 @@
 }
 
 .warning {
-  font-family: var(--tertiary-font);
+  font-family: var(--primary-font);
   color: var(--freinacht-black);
   font-size: 12px;
   line-height: 16px;
diff --git a/src/app/main/component/shared/components/edit-photo-pop-up/edit-photo-pop-up.component.scss b/src/app/main/component/shared/components/edit-photo-pop-up/edit-photo-pop-up.component.scss
index 3ade100886..ae6aff2262 100644
--- a/src/app/main/component/shared/components/edit-photo-pop-up/edit-photo-pop-up.component.scss
+++ b/src/app/main/component/shared/components/edit-photo-pop-up/edit-photo-pop-up.component.scss
@@ -2,12 +2,10 @@
 
 .main-container {
   position: relative;
-  width: 615px;
-  padding: 72px 0 30px;
+  max-width: 90vw;
+  padding: 72px 80px 30px;
   font-family: var(--tertiary-font);
-  display: flex;
-  justify-content: center;
-  align-items: center;
+
   background: var(--primary-white);
 
   .cancel {
@@ -22,6 +20,11 @@
     }
   }
 
+  ::ng-deep .dropzone {
+    width: 99% !important;
+    margin: 1px;
+  }
+
   .wrapper {
     display: flex;
     flex-direction: column;
@@ -91,80 +94,18 @@
   }
 }
 
-.dropzone-wrapper {
-  display: flex;
-  flex-flow: column wrap;
-  align-items: center;
-
-  .dropzone {
-    height: 231px;
-    width: 100%;
-    display: table;
-    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='1' stroke-dasharray='10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
-    margin-bottom: 8px;
-  }
-
-  .text-wrapper {
-    width: 90%;
-    height: 231px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    input[type='file'] {
-      position: absolute;
-      overflow: hidden;
-      z-index: -1;
-      width: 0.1px;
-      height: 0.1px;
-      opacity: 0;
-    }
-  }
-
-  .centered {
-    font-size: 16px;
-    text-align: center;
-    line-height: 24px;
-    font-weight: 700;
-    font-family: var(--tertiary-font);
-
-    label > [browse] {
-      color: var(--primary-green);
-      text-decoration: underline;
-      cursor: pointer;
-    }
-  }
-
-  .download-info {
-    line-height: 24px;
-    color: var(--quaternary-grey);
-    font-size: 12px;
-  }
-}
-
-.dropzone-error {
-  & .dropzone {
-    border-color: var(--error-red);
-    background-color: var(--error-light-red);
-    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23EB180DFF' stroke-width='1' stroke-dasharray='10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
-  }
-
-  & .download-info {
-    color: var(--error-red);
-  }
-}
-
 @include responsiveRange(sm, md) {
   .main-container {
-    width: 518px;
+    min-width: 518px;
+    padding: 72px 60px 30px;
   }
 }
 
 @include responsivePCFirst(sm) {
   .main-container {
     width: 90vw;
-    height: 90vh;
-    padding: 0 14px;
+    height: 100%;
+    padding: 72px 40px 30px;
     overflow: auto;
 
     .wrapper {
@@ -184,21 +125,6 @@
         }
       }
     }
-
-    .dropzone {
-      margin-bottom: 16px;
-      width: 227px;
-    }
-
-    .download-info {
-      width: 232px;
-      text-align: left;
-    }
-
-    .text-wrapper {
-      width: 90%;
-      height: 259px;
-    }
   }
 }
 
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index c0b84c6e41..62569d9984 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -450,7 +450,7 @@
       "exists": "Already exists",
       "closeTime": "Closing time have to be later than opening time. Please, try again",
       "breakTime": "Invalid break time",
-      "photoUpload": "Upload PNG or JPG only. File size should be less than 10MB"
+      "photoUpload": "Upload only PNG or JPG. File size must be less than 10MB"
     }
   },
   "users": {
@@ -808,9 +808,9 @@
       "location": "Show my location",
       "eco-place": "Show my eco places",
       "to-do-list": "Show my To-do list",
-      "picture-tooltip": "Upload PNG or JPG only. File size should be less than 10MB",
+      "picture-tooltip": "Upload only PNG or JPG. File size must be less than 10MB",
       "change-photo": "Do you want to change your profile picture?",
-      "would-you-like": "Would you like to save changes?",
+      "would-you-like": "Do you want to save changes?",
       "notification": "Are you sure you want to delete the photo?",
       "label-tip": "Link to your social network account",
       "input-validation-required": "This field is required",
@@ -1261,7 +1261,7 @@
   "drag-and-drop": {
     "picture-description": "Drop your image here or",
     "browse": "browse",
-    "picture-tooltip": "Upload PNG or JPG only. File size should be less than 10MB",
+    "picture-tooltip": "Upload only PNG or JPG. File size must be less than 10MB",
     "submit-changes-button": "Submit",
     "cancel-changes-button": "Cancel",
     "not-uploaded-warning": "The image isn't uploaded"
@@ -1378,7 +1378,7 @@
     "enter-link": "Enter link",
     "textarea-title": "Events Description",
     "picture": "Picture",
-    "picture-title": "Upload PNG or JPG only. File size should be less than 10MB",
+    "picture-title": "Upload only PNG or JPG. File size must be less than 10MB",
     "event-theme": "Initiative type",
     "event-type-check": "You should choose at least one type",
     "event-type": "Event type",