fix(modal): fix x button position (#341)

* fix(modal): fix x button position * fix(modal): fixup! fix x button position
widefix · Jan 4, 2024 · 1a04ee2 · 1a04ee2
1 parent 646f23e
commit 1a04ee2
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 16 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -318,12 +318,6 @@ button.is-grey:hover {
   }
 }
 
-.top-right-button {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-}
-
 .top-right-shared-account-button {
   position: absolute;
   top: 60px;

diff --git a/app/views/spends/_modal.html.slim b/app/views/spends/_modal.html.slim
@@ -2,13 +2,13 @@
 #modal-spend-form.modal
   .modal-background
   .modal-card
-    .button.is-white.is-round.top-right-button.close-button
-      figure.image.is-20x20
-        = image_tag('cross.svg', alt: 'X')
-    .modal-card-body.mx-3
+    .modal-card-body.mx-3.pt-2
       = form_with url:false, method: :post, id: 'spend-form-with' do |f|
-        .field.mt-2
+        .field.is-flex.is-align-items-flex-end.is-justify-content-space-between
           = f.label :amount, "Amount to be deducted"
+          .button.is-white.is-round.close-button.p-0
+            figure.image.is-20x20
+              = image_tag('cross.svg', alt: 'X')
         .field.is-relative
           = f.text_field :amount, autofocus: true, type: 'number', step: 0.1, min: 0.1, class: 'input amount', required: true
           = link_to 'All Balance', '#', class: 'button is-small is-light all-balance-button'

diff --git a/app/views/topups/_modal.html.slim b/app/views/topups/_modal.html.slim
@@ -1,13 +1,13 @@
 #modal-topup-form.modal
   .modal-background
   .modal-card
-    .button.is-white.is-round.top-right-button.close-button
-      figure.image.is-20x20
-        = image_tag('cross.svg', alt: 'X')
-    .modal-card-body.mx-3
+    .modal-card-body.mx-3.pt-2
       = form_with url:false, method: :post, id: 'topup-form-with' do |f|
-        .field.mt-2
+        .field.is-flex.is-align-items-flex-end.is-justify-content-space-between
           = f.label :amount, "Amount to be added"
+          .button.is-white.is-round.close-button.p-0
+            figure.image.is-20x20
+              = image_tag('cross.svg', alt: 'X')
         .field
           = f.text_field :amount, autofocus: true, type: 'number', step: 0.1, min: 0.1, class: "input", required: true
         .field