Add styling for multiple inputs grouped together in forms
MODIFY
resources/assets/sass/components/input.scss
resources/assets/sass/components/input.scss
@import '../variables/colors';
+.input {
+ margin-bottom: 20px;
+
+ label {
+ margin-bottom: 10px;
+ display: block;
+ }
+
+ &.input--small {
+ max-width: 400px;
+ }
+}
+
input, button {
font: inherit;
border-radius: 5px;

MODIFY
resources/views/login.blade.php
resources/views/login.blade.php
<div class="section">
<form method="POST">
{{ csrf_field() }}
+ <div class="input">
<label>E-mail</label>
<input type="email" name="email" />
+ </div>
+ <div class="input">
<label>Password</label>
<input type="password" name="password" />
+ </div>
<button>Log in</button>
</form>
</div>

MODIFY
resources/views/register.blade.php
resources/views/register.blade.php
<div class="section">
<form method="POST">
{{ csrf_field() }}
+ <div class="input">
<label>Name</label>
<input type="text" name="name" />
@include('partials.validation_error', ['payload' => 'name'])
+ </div>
+ <div class="input">
<label>E-mail</label>
<input type="email" name="email" />
@include('partials.validation_error', ['payload' => 'email'])
+ </div>
+ <div class="input">
<label>Password</label>
<input type="password" name="password" />
@include('partials.validation_error', ['payload' => 'password'])
+ </div>
+ <div class="input">
<label>Verify Password</label>
<input type="password" name="password_confirmation" />
@include('partials.validation_error', ['payload' => 'password_confirmation'])
+ </div>
+ <div class="input">
<label>Currency</label>
<select name="currency">
@foreach ($currencies as $currency)
@endforeach
</select>
@include('partials.validation_error', ['payload' => 'currency'])
+ </div>
<button>Register</button>
</form>
</div>

MODIFY
resources/views/settings.blade.php
resources/views/settings.blade.php
<div class="section">
<form method="POST">
{{ csrf_field() }}
+ <div class="input input--small">
<label>Name</label>
<input type="text" name="name" value="{{ Auth::user()->name }}" />
+ </div>
+ <div class="input input--small">
<label>E-mail</label>
<input type="text" name="email" value="{{ Auth::user()->email }}" />
+ </div>
+ <div class="input input--small">
<label>Language</label>
<select name="language">
@foreach ($languages as $language)
<option value="{{ $language }}" @if (Auth::user()->language === $language) selected @endif>{{ $language }}</option>
@endforeach
</select>
+ </div>
<button>Update</button>
</form>
</div>

Add styling for multiple inputs grouped together in forms