Use layout view in both prepare and complete views for imports
MODIFY
resources/views/imports/complete.blade.php
resources/views/imports/complete.blade.php
+@extends('layout')
+
+@section('title', 'Complete ' . __('models.import'))
+
+@section('body')
+ <div class="wrapper my-3">
+ <h2 class="mb-3">Complete {{ __('models.import') }}</h2>
+ <div class="box">
<form method="POST">
{{ csrf_field() }}
- <div style="display: flex;">
- <div>Import</div>
- <div>{{ __('fields.date') }}</div>
- <div>{{ __('fields.description') }}</div>
- <div>{{ __('fields.amount') }}</div>
+ <div class="box__section box__section--header">
+ <div class="row row--gutter">
+ <div class="row__column row__column--compact" style="width: 100px;">Import</div>
+ <div class="row__column">{{ __('fields.date') }}</div>
+ <div class="row__column">{{ __('fields.description') }}</div>
+ <div class="row__column">{{ __('fields.amount') }}</div>
+ </div>
</div>
@foreach ($rows as $index => $row)
- <div style="display: flex;">
- <div>
+ <div class="box__section">
+ <div class="row row--gutter">
+ <div class="row__column row__column--compact" style="width: 100px;">
<input type="checkbox" name="rows[{{ $index }}][import]" />
</div>
- <div>
+ <div class="row__column">
<input type="text" name="rows[{{ $index }}][happened_on]" value="{{ $row['happened_on'] }}" />
{{ $errors->first('rows.' . $index . '.happened_on') }}
</div>
- <div>
+ <div class="row__column">
<input type="text" name="rows[{{ $index }}][description]" value="{{ $row['description'] }}" />
{{ $errors->first('rows.' . $index . '.description') }}
</div>
- <div>
+ <div class="row__column">
<input type="text" name="rows[{{ $index }}][amount]" value="{{ $row['amount'] }}" />
{{ $errors->first('rows.' . $index . '.amount') }}
</div>
</div>
+ </div>
@endforeach
- <button>Submit</button>
+ <div class="box__section box__section--highlight text-right">
+ <button class="button">Submit</button>
+ </div>
</form>
+ </div>
+ </div>
+@endsection

MODIFY
resources/views/imports/prepare.blade.php
resources/views/imports/prepare.blade.php
+@extends('layout')
+
+@section('title', 'Prepare ' . __('models.import'))
+
+@section('body')
+ <div class="wrapper my-3">
+ <h2 class="mb-3">Prepare {{ __('models.import') }}</h2>
+ <div class="box">
<form method="POST">
{{ csrf_field() }}
- <div class="row">
+ <div class="box__section">
+ <div class="row row--gutter">
<div class="row__column">
+ <div class="input mb-0">
<label>{{ __('fields.date') }}</label>
<select name="column_happened_on">
@foreach ($headers as $index => $header)
@endforeach
</select>
</div>
+ </div>
<div class="row__column">
+ <div class="input mb-0">
<label>{{ __('fields.description') }}</label>
<select name="column_description">
@foreach ($headers as $index => $header)
@endforeach
</select>
</div>
+ </div>
<div class="row__column">
+ <div class="input mb-0">
<label>{{ __('fields.amount') }}</label>
<select name="column_amount">
@foreach ($headers as $index => $header)
</select>
</div>
</div>
- <button>Submit</button>
+ </div>
+ </div>
+ <div class="box__section box__section--highlight text-right">
+ <button class="button">Submit</button>
+ </div>
</form>
+ </div>
+ </div>
+@endsection

Use layout view in both prepare and complete views for imports