Get rid of hard-coded styling in TransactionWizard component and adjust styling for button groups based on selected theme
MODIFY
resources/assets/js/components/TransactionWizard.vue
resources/assets/js/components/TransactionWizard.vue
</div>
<div class="input">
<label>Date</label>
- <input type="text" v-model="date" style="background: #FFF;" />
+ <input type="text" v-model="date" />
<div class="hint mt-05">YYYY-MM-DD</div>
<validation-error v-if="errors.date" :message="errors.date"></validation-error>
</div>
<div class="input">
<label>Description</label>
- <input type="text" v-model="description" placeholder="Birthday Present Angela" style="background: #FFF;" />
+ <input type="text" v-model="description" placeholder="Birthday Present Angela" />
<validation-error v-if="errors.description" :message="errors.description"></validation-error>
</div>
<div class="input">
<label>Amount</label>
- <input type="text" v-model="amount" style="background: #FFF;" />
+ <input type="text" v-model="amount" />
<validation-error v-if="errors.amount" :message="errors.amount"></validation-error>
</div>
<div v-if="type == 'spending'">
</div>
<div class="row__column">
<label>Until</label>
- <input type="text" style="background: #FFF;" />
+ <input type="text" />
<div class="hint mt-05">YYYY-MM-DD</div>
</div>
</div>

MODIFY
resources/assets/sass/app.scss
resources/assets/sass/app.scss
@@ -34,7 +34,7 @@ canvas {
padding: 10px 20px;
font: inherit;
font-size: 14px;
- border: 1px solid $colors-light-border;
+ border: 1px solid red;
border-left: 0;
border-right: 0;
@@ -45,13 +45,13 @@ canvas {
&:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
- border-left: 1px solid $colors-light-border;
+ border-left: 1px solid red;
}
&:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
- border-right: 1px solid $colors-light-border;
+ border-right: 1px solid red;
}
&:hover, &.bg__button--active {
@@ -62,6 +62,23 @@ canvas {
}
}
+.theme-light .bg button.bg__button {
+ border-color: $colors-light-border;
+
+ &:not(.bg__button--active):not(:hover) {
+ background: $colors-light-background;
+ }
+}
+
+.theme-dark .bg button.bg__button {
+ color: #FFF;
+ border-color: $colors-dark-border;
+
+ &:not(.bg__button--active):not(:hover) {
+ background: $colors-dark-body;
+ }
+}
+
.validation_error {
color: red;
font-size: 14px;

Get rid of hard-coded styling in TransactionWizard component and adjust styling for button groups based on selected theme