Added Confirmation Message for deleting profile (Minor change) (#56)

* added delete confirmation * Profile Edit icon styling * Profile Edit icon styling
rootCircle · Dec 7, 2024 · 4c056f0 · 4c056f0
1 parent f796ba8
commit 4c056f0
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 12 deletions.
diff --git a/public/src/options/options.css b/public/src/options/options.css
@@ -541,29 +541,54 @@ input[disabled] {
   right: 10px;
   width: 24px;
   height: 24px;
+  border-radius: 50%;
+  background-color: #007bff;
+  border: 2px solid #007bff;
+  display: flex;
+  font-size: 14px;
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
+  transition: all 0.2s ease;
+  color: white;
   opacity: 0;
-  transition: opacity 0.3s ease;
-  transform: scale(1.2);
 }
+
 .edit-mark-selected {
   position: absolute;
-  top: 0px;
-  right: 4px;
+  top: 10px;
+  right: 40px;
   width: 24px;
   height: 24px;
+  border-radius: 50%;
+  background-color: #007bff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  z-index: 1;
   cursor: pointer;
-  opacity: 1;
-  color: black;
-  transform: translateX(-30px) translateY(12px) scale(1.3);
+  transition: all 0.2s ease;
+  color: white;
 }
 
-.profile-card:hover .edit-mark:not(.hidden) {
+.edit-mark:hover {
+  background-color: #0056b3;
+  border-color: #0056b3;
+  transform: scale(1.1);
   opacity: 1;
 }
 
-.edit-mark:hover {
-  color: #007bff;
+.edit-mark-selected:hover {
+  background-color: #0056b3;
+  border-color: #0056b3;
+  transform: scale(1.1);
+  color: white;
+}
+
+.profile-card:hover .edit-mark:not(.hidden) {
+  opacity: 1;
 }
 
 .delete-mark {

diff --git a/src/options/optionProfileHandler.ts b/src/options/optionProfileHandler.ts
@@ -143,8 +143,10 @@ async function createProfileCards() {
         e.stopPropagation();
         (async () => {
           try {
-            await deleteProfile(profileKey);
-            await createProfileCards();
+            if (confirm('Are you sure you want to delete this profile?')) {
+              await deleteProfile(profileKey);
+              await createProfileCards();
+            }
           } catch (error) {
             handleError('Failed to delete profile:', error);
           }