Use Tailwind in login and register views
MODIFY
resources/views/layout.blade.php
resources/views/layout.blade.php
<link rel="stylesheet" href="/twemoji-flags.css" />
<script defer src="https://pro.fontawesome.com/releases/v5.10.0/js/all.js" integrity="sha384-G/ZR3ntz68JZrH4pfPJyRbjW+c0+ojii5f+GYiYwldYU69A+Ejat6yIfLSxljXxD" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Muli:400,400i,600,600i" />
+ @if (View::hasSection('tailwind') && View::getSection('tailwind') == true)
+ <link rel="stylesheet" href="/css/tailwind.css" />
+ @else
<link rel="stylesheet" href="/css/app.css" />
+ @endif
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" />
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
</style>
@livewireStyles
</head>
- <body class="theme-{{ Auth::check() ? Auth::user()->theme : 'light' }}">
+ <body class="bg-gray-50 theme-{{ Auth::check() ? Auth::user()->theme : 'light' }}">
<div id="app">
@if (Auth::check())
<div class="navigation">

MODIFY
resources/views/login.blade.php
resources/views/login.blade.php
@extends('layout')
+@section('tailwind', true)
+
+@section('title', 'Log in')
+
@section('body')
- <div class="wrapper wrapper--narrow my-3">
- <div class="text-center">
- <img src="/logo.svg" style="width: 100%; max-height: 50px;" />
- <h2 class="mt-2 mb-3">Log in</h2>
- </div>
+ <div class="max-w-sm mx-auto my-12">
+ <img class="h-12 mx-auto mb-8" src="/logo.svg" />
@if (session('alert_type') && session('alert_message'))
- @include('partials.alerts.' . session('alert_type'), ['payload' => ['classes' => 'mb-2', 'message' => session('alert_message')]])
+ @include('partials.alerts.' . session('alert_type'), ['payload' => ['classes' => 'mb-4', 'message' => session('alert_message')]])
@endif
- <div class="box">
- <div class="box__section">
+ <div class="p-5 bg-white border rounded-md">
<form method="POST">
{{ csrf_field() }}
- <div class="input">
- <label>E-mail</label>
- <input type="email" name="email" value="{{ old('email') }}" class="shadow" autofocus />
+ <div class="mb-5">
+ <label class="block mb-1 text-sm text-gray-700">E-mail</label>
+ <input class="w-full px-3 py-2 text-sm border rounded-md" type="email" name="email" value="{{ old('email') }}" autofocus />
</div>
- <div class="input">
- <label>Password</label>
- <input type="password" name="password" class="shadow" />
+ <div class="mb-5">
+ <label class="block mb-1 text-sm text-gray-700">Password</label>
+ <input class="w-full px-3 py-2 text-sm border rounded-md" type="password" name="password" />
<div class="mt-1 text-right">
- <a href="/reset_password" class="fs-sm">Forgot your password?</a>
+ <a href="/reset_password" class="text-sm transition text-primary-regular hover:text-primary-dark">Forgot your password?</a>
</div>
</div>
- <button class="button button--wide">Log in</button>
+ <button class="w-full py-2.5 hover:bg-primary-dark transition text-sm bg-primary-regular text-white rounded-md">Log in</button>
</form>
</div>
- </div>
- <div class="text-center mt-2">
- <a class="fs-sm" href="/register">New to Budget?</a>
+ <div class="mt-4 text-center">
+ <a class="text-sm transition text-primary-regular hover:text-primary-dark" href="/register">First time here? Register.</a>
</div>
</div>
@endsection

MODIFY
resources/views/partials/alerts/danger.blade.php
resources/views/partials/alerts/danger.blade.php
-<div class="row {{ $payload['classes'] }}" style="
- padding: 15px;
- color: #FFF;
- background: #F86380;
- border-radius: 5px;
-">
- <div class="row__column row__column--compact">
- <i class="fas fa-times"></i>
- </div>
- <div class="row__column text-center" style="font-weight: 600;">{{ $payload['message'] }}</div>
+<div class="bg-red-50 border border-red-100 text-red-700 flex py-2 px-4 items-center rounded-md {{ $payload['classes'] }}">
+ <i class="far fa-times fa-sm"></i>
+ <div class="flex-1 text-sm font-medium text-center">{{ $payload['message'] }}</div>
</div>

MODIFY
resources/views/partials/validation_error.blade.php
resources/views/partials/validation_error.blade.php
@foreach ($errors->get($payload) as $error)
- <div style="font-size: 14px; color: red; margin-bottom: 20px;">{{ $error }}</div>
+ <div class="text-red-500 text-sm mt-1">{{ $error }}</div>
@endforeach

MODIFY
resources/views/register.blade.php
resources/views/register.blade.php
@extends('layout')
+@section('tailwind', true)
+
@section('title', 'Register')
@section('body')
- <div class="wrapper wrapper--narrow my-3">
- <div class="text-center">
- <img src="/logo.svg" style="width: 100%; max-height: 50px;" />
- <h2 class="mt-2 mb-3">Register</h2>
- </div>
- <div class="box">
- <div class="box__section">
+ <div class="max-w-sm mx-auto my-12">
+ <img class="h-12 mx-auto mb-8" src="/logo.svg" />
+ <div class="p-5 bg-white border rounded-md">
<form method="POST">
{{ csrf_field() }}
- <div class="input">
- <label>Name</label>
- <input type="text" name="name" value="{{ old('name') }}" class="shadow" />
+ <div class="mb-5">
+ <label class="block mb-1 text-sm text-gray-700">Name</label>
+ <input class="w-full px-3 py-2 text-sm border rounded-md" type="text" name="name" value="{{ old('name') }}" />
@include('partials.validation_error', ['payload' => 'name'])
</div>
- <div class="input">
- <label>E-mail</label>
- <input type="email" name="email" value="{{ old('email') }}" class="shadow" />
+ <div class="mb-5">
+ <label class="block mb-1 text-sm text-gray-700">E-mail</label>
+ <input class="w-full px-3 py-2 text-sm border rounded-md" type="email" name="email" value="{{ old('email') }}" />
@include('partials.validation_error', ['payload' => 'email'])
</div>
- <div class="input">
- <label>Password</label>
- <input type="password" name="password" class="shadow" />
+ <div class="mb-5">
+ <label class="block mb-1 text-sm text-gray-700">Password</label>
+ <input class="w-full px-3 py-2 text-sm border rounded-md" type="password" name="password" />
@include('partials.validation_error', ['payload' => 'password'])
</div>
- <div class="input">
- <label>Verify Password</label>
- <input type="password" name="password_confirmation" class="shadow" />
+ <div class="mb-5">
+ <label class="block mb-1 text-sm text-gray-700">Verify password</label>
+ <input class="w-full px-3 py-2 text-sm border rounded-md" type="password" name="password_confirmation" />
@include('partials.validation_error', ['payload' => 'password_confirmation'])
</div>
- <div class="input">
- <label>Currency</label>
- <select name="currency" class="shadow">
+ <div class="mb-5">
+ <label class="block mb-1 text-sm text-gray-700">Currency</label>
+ <select class="w-full px-3 py-2 text-sm border rounded-md appearance-none" name="currency">
@foreach ($currencies as $currency)
<option value="{{ $currency->id }}">{{ $currency->name }} ({!! $currency->symbol !!})</option>
@endforeach
</select>
@include('partials.validation_error', ['payload' => 'currency'])
</div>
- <button class="button button--wide">Register</button>
+ <button class="w-full py-2.5 hover:bg-primary-dark transition text-sm bg-primary-regular text-white rounded-md">Register</button>
</form>
</div>
- </div>
- <div class="text-center mt-2">
- <a class="fs-sm" href="/login">Already on Budget?</a>
+ <div class="mt-4 text-center">
+ <a class="text-sm transition text-primary-regular hover:text-primary-dark" href="/login">Already using Budget? Log in.</a>
</div>
</div>
@endsection

Use Tailwind in login and register views