[#2253] Improved modals after PR feedback

src/open_inwoner/js/components/modal/index.js

@@ -67,27 +67,39 @@ export default class Modal {
     // Whether the modal-buttons should have icons or not
     if (modalIcons) {
       this.node.classList.add('show-modal-icons')
+    } else {
+      // Remove lingering elements if user did not close other modals
+      this.node.classList.remove('show-modal-icons')
     }
   }
 
   setConfirmButtonVisibility(confirmVisibility) {
     // Accessibility: whether the modal should have a confirm button or not
     if (confirmVisibility) {
       this.node.classList.add('show-confirm-button')
+    } else {
+      // Remove lingering elements if user did not close other modals
+      this.node.classList.remove('show-confirm-button')
     }
   }
 
   setCancelButtonVisibility(cancelVisibility) {
     // Accessibility: whether the modal should have a cancel button or not
     if (cancelVisibility) {
       this.node.classList.add('show-cancel-button')
+    } else {
+      // Remove lingering elements if user did not close other modals
+      this.node.classList.remove('show-cancel-button')
     }
   }
 
   setButtonIconCloseVisibility(buttonIconCloseVisibility) {
     // Whether the modal should have a top-right close button or not
     if (buttonIconCloseVisibility) {
       this.node.classList.add('show-button-icon-close')
+    } else {
+      // Remove lingering elements if user did not close other modals
+      this.node.classList.remove('show-button-icon-close')
     }
   }
 

src/open_inwoner/scss/components/modal/_modal.scss

@@ -74,6 +74,14 @@
     @media (min-width: 768px) {
       min-width: 150px;
     }
+
+    &:focus {
+      transform: none;
+    }
+
+    &:hover:focus {
+      transform: translateY(-1px);
+    }
   }
 
   &__actions {
@@ -111,6 +119,10 @@
         margin: calc(-1 * var(--spacing-extra-large))
           calc(-1 * var(--spacing-extra-large)) 0 0;
       }
+
+      &:hover {
+        transform: none;
+      }
     }
   }