style(TreasuryPage): enhance dialog layout and responsiveness

src/components/layout/LeftMenuLayout.vue

@@ -104,7 +104,11 @@
                   >
                     <template #header>
                       <q-item-section avatar>
-                        <q-icon :name="item.icon" style="font-size: 20px" />
+                        <q-icon
+                          :name="item.icon"
+                          style="font-size: 20px"
+                          color="secondary"
+                        />
                       </q-item-section>
                       <q-item-section>{{ $t(item.title) }}</q-item-section>
                     </template>
@@ -143,7 +147,11 @@
                     }"
                   >
                     <q-item-section avatar>
-                      <q-icon :name="item.icon" style="font-size: 20px" />
+                      <q-icon
+                        :name="item.icon"
+                        style="font-size: 20px"
+                        color="secondary"
+                      />
                     </q-item-section>
                     <q-item-section>{{ $t(item.title) }}</q-item-section>
                     <q-tooltip

src/pages/financial/TreasuryPage.vue

@@ -104,35 +104,50 @@
 
     <!-- Diálogo conta -->
     <q-dialog v-model="accountDialog">
-      <q-card style="min-width: 360px; max-width: 480px">
+      <q-card class="treasury-dialog-card">
         <DefaultDialogHeader
           :title="editingAccount ? 'Editar conta' : 'Nova conta'"
           @close="accountDialog = false"
         />
         <q-form ref="accountFormRef">
-          <q-card-section class="q-gutter-sm">
+          <q-card-section class="row q-col-gutter-md q-px-lg q-pt-md q-pb-sm">
             <DefaultInput
               v-model="accountForm.name"
               label="Nome (ex.: Banco do Brasil, Caixa Loja)"
+              class="col-12"
               outlined
               :rules="[(v) => !!v || 'Informe o nome']"
             />
-            <div class="row q-col-gutter-sm">
-              <DefaultInput v-model="accountForm.bank_name" label="Banco" class="col-6" outlined />
-              <DefaultInput v-model="accountForm.bank_agency" label="Agência" class="col-6" outlined />
-              <DefaultInput v-model="accountForm.bank_account" label="Conta" class="col-6" outlined />
-              <DefaultSelect
-                v-model="accountForm.bank_type_account"
-                label="Tipo"
-                :options="accountTypeOptions"
-                class="col-6"
-                outlined
-                emit-value
-                map-options
-              />
-            </div>
+
+            <DefaultInput
+              v-model="accountForm.bank_name"
+              label="Banco"
+              class="col-12 col-sm-6"
+              outlined
+            />
+            <DefaultInput
+              v-model="accountForm.bank_agency"
+              label="Agência"
+              class="col-12 col-sm-6"
+              outlined
+            />
+            <DefaultInput
+              v-model="accountForm.bank_account"
+              label="Conta"
+              class="col-12 col-sm-6"
+              outlined
+            />
+            <DefaultSelect
+              v-model="accountForm.bank_type_account"
+              label="Tipo"
+              :options="accountTypeOptions"
+              class="col-12 col-sm-6"
+              outlined
+              emit-value
+              map-options
+            />
           </q-card-section>
-          <q-card-actions align="right" class="q-pa-md">
+          <q-card-actions align="right" class="q-px-lg q-pt-md q-pb-lg q-gutter-sm">
             <q-btn flat label="Cancelar" color="grey-7" @click="accountDialog = false" />
             <q-btn color="primary" label="Salvar" :loading="savingAccount" @click="saveAccount" />
           </q-card-actions>
@@ -142,14 +157,15 @@
 
     <!-- Diálogo movimentação -->
     <q-dialog v-model="launchDialog">
-      <q-card style="min-width: 360px; max-width: 460px">
+      <q-card class="treasury-dialog-card treasury-dialog-card--compact">
         <DefaultDialogHeader title="Nova movimentação" @close="launchDialog = false" />
         <q-form ref="launchFormRef">
-          <q-card-section class="q-gutter-sm">
+          <q-card-section class="row q-col-gutter-md q-px-lg q-pt-md q-pb-sm">
             <DefaultSelect
               v-model="launchForm.transaction_type"
               label="Tipo"
               :options="transactionTypeOptions"
+              class="col-12"
               outlined
               emit-value
               map-options
@@ -157,24 +173,23 @@
             <DefaultInput
               v-model="launchForm.description"
               label="Descrição"
+              class="col-12"
               outlined
               :rules="[(v) => !!v || 'Informe a descrição']"
             />
-            <div class="row q-col-gutter-sm">
-              <DefaultCurrencyInput
-                v-model="launchForm.amount"
-                label="Valor"
-                class="col-6"
-                outlined
-              />
-              <DefaultInputDatePicker
-                v-model="launchForm.launch_date"
-                label="Data"
-                class="col-6"
-              />
-            </div>
+            <DefaultCurrencyInput
+              v-model="launchForm.amount"
+              label="Valor"
+              class="col-12 col-sm-6"
+              outlined
+            />
+            <DefaultInputDatePicker
+              v-model="launchForm.launch_date"
+              label="Data"
+              class="col-12 col-sm-6"
+            />
           </q-card-section>
-          <q-card-actions align="right" class="q-pa-md">
+          <q-card-actions align="right" class="q-px-lg q-pt-md q-pb-lg q-gutter-sm">
             <q-btn flat label="Cancelar" color="grey-7" @click="launchDialog = false" />
             <q-btn color="primary-2" label="Salvar" :loading="savingLaunch" @click="saveLaunch" />
           </q-card-actions>
@@ -364,4 +379,13 @@ onMounted(loadAccounts);
   border-color: var(--q-primary);
   border-width: 2px;
 }
+
+.treasury-dialog-card {
+  width: 520px;
+  max-width: calc(100vw - 32px);
+}
+
+.treasury-dialog-card--compact {
+  width: 480px;
+}
 </style>