feat(account balance bottons): update the appearance (#104)

* feat(account balance bottons): update the appearance * feat(my account page): update the appearance with the plus and minus accounts, the elements location
widefix · Sep 17, 2023 · e832719 · e832719
1 parent 5ef7584
commit e832719
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 12 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -25,6 +25,7 @@ $footer-background-color: white;
 
 // pocket-money variables
 $primary-pocket-money-color: hsl(270, 50%, 40%);
+$primary-pocket-money-background-color: hsl(270, 95%, 98%);
 
 .navbar {
   background-color: white;
@@ -63,6 +64,24 @@ $primary-pocket-money-color: hsl(270, 50%, 40%);
   color: $text-light !important ;
 }
 
+.is-plus-color {
+  color: hsl(120, 50%, 48%);
+}
+
+.is-plus-color:hover {
+  color: hsl(120, 65%, 48%);
+  background-color: $primary-pocket-money-background-color !important ;
+}
+
+.is-minus-color {
+  color: hsl(0, 50%, 48%);
+}
+
+.is-minus-color:hover {
+  color: hsl(0, 65%, 48%);
+  background-color: $primary-pocket-money-background-color !important ;
+}
+
 html,
 body {
   height: 100vh;

diff --git a/app/views/accounts/show.html.slim b/app/views/accounts/show.html.slim
@@ -17,8 +17,8 @@ h2.title.is-4
               p.heading Balance
               p.title #{account.balance}
       .card-footer
-        = link_to '+Add', new_account_topup_path(account), class: 'card-footer-item'
-        = link_to '-Spend', new_account_spend_path(account), class: 'card-footer-item'
+        = link_to '<i class="fa fa-plus-circle fa-2x"></i>'.html_safe, new_account_topup_path(account), class: 'card-footer-item is-plus-color'
+        = link_to '<i class="fa fa-minus-circle fa-2x"></i>'.html_safe, new_account_spend_path(account), class: 'card-footer-item is-minus-color'
 .columns
   .column
     .card

diff --git a/app/views/my_accounts/show.html.slim b/app/views/my_accounts/show.html.slim
@@ -7,27 +7,44 @@
   - account.children.each do |child|
     .card.box
       .card-content
-        .media
-          .media-content
+        .columns
+          .column
             p.title.is-4= link_to child.name, account_path(child)
-            p.subtitle.is-6= child.balance
+          .column
+            nav.level
+              .level-item.has-text-centered
+                div
+                  p.heading Balance
+                  p.title #{child.balance}
+          .column
+
       footer.card-footer
-        = link_to '+ Add', new_account_topup_path(child), class: 'card-footer-item'
-        = link_to '- Spend', new_account_spend_path(child), class: 'card-footer-item'
+        = link_to '<i class="fa fa-plus-circle fa-2x"></i>'.html_safe, new_account_topup_path(child), class: 'card-footer-item is-plus-color'
+        = link_to '<i class="fa fa-minus-circle fa-2x"></i>'.html_safe, new_account_spend_path(child), class: 'card-footer-item is-minus-color'
+
   br
   - if shared_accounts.present?
     | Shared accounts
     - shared_accounts.each do |shared_account|
       .card.box
         .card-content
-          .media
-            .media-content
+          .columns
+            .column
               p.title.is-6 Owner: #{shared_account.parent.email}
               p.title.is-4= link_to shared_account.name, account_path(shared_account)
-              p.subtitle.is-6= shared_account.balance
+            .column
+              nav.level
+                .level-item.has-text-centered
+                  div
+                    p.heading Balance
+                    p.title #{shared_account.balance}
+            .column
+
+
+
         footer.card-footer
-          = link_to '+ Add', new_account_topup_path(shared_account), class: 'card-footer-item'
-          = link_to '- Spend', new_account_spend_path(shared_account), class: 'card-footer-item'
+          = link_to '<i class="fa fa-plus-circle fa-2x"></i>'.html_safe, new_account_topup_path(shared_account), class: 'card-footer-item is-plus-color'
+          = link_to '<i class="fa fa-minus-circle fa-2x"></i>'.html_safe, new_account_spend_path(shared_account), class: 'card-footer-item is-minus-color'
   br
   - if unaccepted_shares.present?
     h2.title