Make view for creating transactions narrower and more readable by adding contrast
MODIFY
resources/assets/js/components/TransactionWizard.vue
resources/assets/js/components/TransactionWizard.vue
:class="{ 'bg__button--active': type == 'spending' }"
@click="switchType('spending')">Spending</button>
</div>
- <div class="input input--small">
+ <div class="input">
<label>Date</label>
- <input type="text" v-model="date" />
+ <input type="text" v-model="date" style="background: #FFF;" />
<validation-error v-if="errors.date" :message="errors.date"></validation-error>
</div>
- <div class="input input--small">
+ <div class="input">
<label>Description</label>
- <input type="text" v-model="description" />
+ <input type="text" v-model="description" style="background: #FFF;" />
<validation-error v-if="errors.description" :message="errors.description"></validation-error>
</div>
- <div class="input input--small">
+ <div class="input">
<label>Amount</label>
- <input type="text" v-model="amount" />
+ <input type="text" v-model="amount" style="background: #FFF;" />
<validation-error v-if="errors.amount" :message="errors.amount"></validation-error>
</div>
<button

MODIFY
resources/assets/sass/components/helpers.scss
resources/assets/sass/components/helpers.scss
}
}
+.mw {
+ &-400 {
+ max-width: 400px;
+ }
+}
+
// Colors
.theme-light .color-dark {
color: #000;

MODIFY
resources/views/transactions/create.blade.php
resources/views/transactions/create.blade.php
@section('title', __('actions.create') . ' Transaction')
@section('body')
- <div class="wrapper my-3">
+ <div class="wrapper mw-400 my-3">
<h2 class="mb-3">{{ __('actions.create') }} Transaction</h2>
<transaction-wizard></transaction-wizard>
</div>

Make view for creating transactions narrower and more readable by adding contrast