[IMP] account: finetunes new journal wizard design

This commit improves the design of the new journal wizard.

task-4492854

addons/account/static/src/views/account_journal_quick_create/account_journal_quick_create.js

@@ -5,7 +5,7 @@ import { user } from "@web/core/user";
 
 class AccountJournalQuickCreateCard extends Component {
     static template = "account.AccountJournalQuickCreateCard";
-    static props = ["icon", "title", "text", "onClick"];
+    static props = ["icon", "title", "text", "onClick", "image"];
 }
 
 export class AccountJournalQuickCreate extends Component {

addons/account/static/src/views/account_journal_quick_create/account_journal_quick_create.scss

@@ -1,6 +1,29 @@
 .quick-create-card {
-    cursor: pointer;
+    .card-body {
+        background: linear-gradient(to right, $card-bg, rgba($card-bg, .95));
+    }
+
     &:hover {
-        background: linear-gradient(to right, rgba($o-brand-secondary, 0.1), rgba($o-brand-primary, 0.1));
+        background: $o-action;
+    }
+
+    .o_tile {
+        background: url('/account/static/src/img/tile.svg') center no-repeat;
+        background-size: contain;
+        aspect-ratio: 1 / 1;
+        inset: 0;
+
+        img {
+            inset: 0;
+            transform: rotateY(45deg) rotateZ(-22deg) rotateX(-20deg) translate(7%, 8%);
+        }
+    }
+
+    .o_tile_reversed {
+        background-image: url('/account/static/src/img/tile-reversed.svg');
+
+        img {
+            transform: rotateY(45deg) rotateZ(22deg) rotateX(20deg) translate(-7%, 8%);
+        }
     }
 }

addons/account/static/src/views/account_journal_quick_create/account_journal_quick_create.xml

@@ -1,20 +1,45 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates>
     <t t-name="account.AccountJournalQuickCreateCard">
-        <div class="col-md-6 mb-3">
-            <div class="card h-100 quick-create-card" t-on-click="props.onClick">
-                <div class="card-body">
-                    <i t-att-class="'text-primary fa fa-fw ' + props.icon"/>
-                    <h5 class="card-title" t-esc="props.title"/>
-                    <p class="card-text" t-esc="props.text"/>
+        <div class="col">
+            <div class="card h-100 shadow-sm cursor-pointer transition-base quick-create-card" t-on-click="props.onClick">
+                <div class="card-body d-flex justify-content-between align-items-start gap-3">
+                    <div>
+                        <i t-att-class="'fa fa-fw mb-2 text-primary fs-5 ' + props.icon"/>
+                        <h4 class="card-title" t-esc="props.title"/>
+                        <p class="card-text" t-esc="props.text"/>
+                    </div>
+                    <div t-if="props.title === 'Bank' || props.title === 'Card'" class="position-relative flex-shrink-0 w-25 ratio ratio-1x1">
+                        <t t-if="props.title === 'Bank'">
+                            <div class="o_tile w-75 h-auto mt-1">
+                                <!-- TODO: Replace with dynamic image -->
+                                <img class="position-absolute w-50 m-auto object-fit-contain" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSF5k4DRa2BNoE7ZhidVOwr6qmNfhHUos1AVg&amp;s"/>
+                            </div>
+                            <div class="o_tile w-75 h-auto ms-auto mt-auto mb-1 z-1">
+                                <!-- TODO: Replace with dynamic image -->
+                                <img class="position-absolute w-50 m-auto object-fit-contain" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvIMiq7VV0gsMkqAIzGfqUD_N9yHYDyKKnUQ&amp;amp;s"/>
+                            </div>
+                        </t>
+                        <t t-else="">
+                            <div class="o_tile o_tile_reversed w-75 h-auto mt-auto mb-1 z-1">
+                                <!-- TODO: Replace with dynamic image -->
+                                <img class="position-absolute w-50 m-auto object-fit-contain" src="https://logos-world.net/wp-content/uploads/2020/05/Visa-Logo.png"/>
+                            </div>
+                            <div class="o_tile o_tile_reversed w-75 h-auto end-0 ms-auto mt-1">
+                                <!-- TODO: Replace with dynamic image -->
+                                <img class="position-absolute w-50 m-auto object-fit-contain" src="https://logos-world.net/wp-content/uploads/2020/09/Mastercard-Logo.png"/>
+                            </div>
+                        </t>
+                    </div>
+                    <img t-else="" t-att-src="props.image" class="flex-shrink-0 w-25" t-att-alt="props.title"/>
                 </div>
             </div>
         </div>
     </t>
 
     <t t-name="account.AccountJournalQuickCreate">
-        <div class="container mt-4">
-            <div class="row">
+        <div class="container py-4">
+            <div class="row row-cols-1 row-cols-md-2 row-gap-2 row-gap-md-4">
                 <AccountJournalQuickCreateCard
                     icon="'fa-university'"
                     title.translate="Bank"
@@ -27,30 +52,30 @@
                     text.translate="Connect credit and debit cards"
                     onClick.bind="() => this.openAccountWizard('credit_card')"
                 />
-            </div>
-            <div class="row">
                 <AccountJournalQuickCreateCard
                     icon="'fa-money'"
+                    image="'/account/static/src/img/cash.svg'"
                     title.translate="Cash"
                     text.translate="Cash movements"
                     onClick.bind="() => this.createJournal('cash')"
                 />
                 <AccountJournalQuickCreateCard
-                    icon="'fa-ellipsis-h'"
+                    icon="'fa-book'"
+                    image="'/account/static/src/img/misc.svg'"
                     title.translate="Miscellaneous Journal"
                     text.translate="Payroll, depreciation, closing entries, deferred revenues, ...etc"
                     onClick.bind="() => this.createJournal('general')"
                 />
-            </div>
-            <div class="row">
                 <AccountJournalQuickCreateCard
                     icon="'fa-handshake-o'"
+                    image="'/account/static/src/img/sales.svg'"
                     title.translate="Sales Journal"
                     text.translate="Create a separate journal for specific sales activities"
                     onClick.bind="() => this.createJournal('sale')"
                 />
                 <AccountJournalQuickCreateCard
                     icon="'fa-shopping-basket'"
+                    image="'/account/static/src/img/purchases.svg'"
                     title.translate="Purchases Journal"
                     text.translate="Create a separate journal to organize vendor bills"
                     onClick.bind="() => this.createJournal('purchase')"