Apply new design
MODIFY
public/style.css
public/style.css
+/* Reset */
+
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
+/* Typography */
+
+* {
+ -webkit-font-smoothing: antialiased;
+}
+
body {
- font-family: Nunito;
- background: #F5F7FA;
+ font-family: Nunito Sans;
+}
+
+body, a {
+ color: #8B93A6;
}
a {
text-decoration: none;
}
+a:hover {
+ color: #4880FE;
+}
+
+body, h1, h2 {
+ font-weight: 400;
+}
+
+h1, h2 {
+ color: #18223C;
+}
+
h1 {
- margin-bottom: 48px;
+ font-size: 28px;
}
-.spacing-bottom-large {
- margin-bottom: 48px;
+h2 {
+ font-size: 24px;
}
-.spacing-bottom-small {
- margin-bottom: 16px;
+/* Foundation */
+
+body {
+ background: #F5F6FA;
}
-.row {
- display: flex;
+.navigation, .box {
+ border: 1px solid #E5E9F2;
+ background: #FFF;
}
-.row .row__column {
- flex: 1;
- padding: 0 24px;
+.navigation {
+ border-top: none;
+ border-left: none;
+ border-right: none;
+ display: flex;
+ justify-content: space-between;
}
-.row .row__column:first-child {
- padding: 0 24px 0 0;
+.navigation ul {
+ padding: 0 16px;
+ list-style: none;
+ display: flex;
}
-.row .row__column:last-child {
- padding: 0 0 0 24px;
+.navigation li {
+ padding: 28px 16px;
}
.box {
- background: #FFF;
- border: 1px solid #EBEDF0;
- border-radius: 4px;
+ border-radius: 8px;
}
-.box .box__section {
- padding: 24px;
- border-bottom: 1px solid #EBEDF0;
+.box.spacing-large {
+ padding: 40px;
}
-.box .box__section:last-child {
- border: none;
+.box.spacing-small {
+ padding: 32px;
}
-.box .box__section.box__section--align-center {
- text-align: center;
+.body {
+ margin: 48px auto;
+ width: 90%;
+ max-width: 1280px;
}
-.box table.box__section {
- width: 100%;
-}
+/* Grid */
-.box table.box__section td {
- padding-top: 24px;
+.row {
+ margin: 0 -16px;
+ display: flex;
}
-.box table.box__section tr:first-child td {
- padding: 0;
+.row .column {
+ padding: 0 16px;
+ flex: 1;
}
+/* Form */
+
label, input {
display: block;
}
@@ -82,50 +114,76 @@ label {
}
input {
+ display: block;
font: inherit;
+ border-radius: 4px;
}
input[type=text], input[type=email], input[type=password] {
- margin-bottom: 24px;
+ margin-bottom: 32px;
padding: 12px;
width: 100%;
- border: 1px solid #EBEDF0;
- border-radius: 4px;
+ border: 1px solid #E5E9F2;
}
-.navigation {
- display: flex;
- justify-content: space-between;
- background: #FFF;
- border-bottom: 1px solid #EBEDF0;
+input[type=text]:focus, input[type=email]:focus, input[type=password]:focus {
+ outline: 0;
}
-.navigation ul {
- list-style: none;
- display: flex;
+input[type=submit] {
+ padding: 12px 24px;
+ background: #4880FE;
+ color: #FFF;
+ border: none;
}
-.navigation ul a {
- color: #000;
- margin: 24px 12px;
- display: block;
+input[type=submit]:hover {
+ cursor: pointer;
+}
+
+/* Spacing */
+
+.spacing-top-small {
+ margin-top: 16px;
}
-.navigation ul li:first-child a {
- margin-left: 24px;
+.spacing-top-large {
+ margin-top: 48px;
}
-.navigation ul li:last-child a {
- margin-right: 24px;
+.spacing-bottom-small {
+ margin-bottom: 16px;
}
-.navigation ul a:hover {
- color: #4980FF;
+.spacing-bottom-medium {
+ margin-bottom: 32px;
}
-.body {
- margin: 0 auto;
- padding: 48px 0;
- width: 90%;
- max-width: 960px;
+.spacing-bottom-large {
+ margin-bottom: 48px;
+}
+
+/* Colors */
+
+.color-green {
+ color: #A9D16F;
+}
+
+.color-red {
+ color: #F96480;
+}
+
+.color-blue {
+ color: #4A85FC;
+}
+
+/* Table */
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+table td {
+ padding: 32px;
}

MODIFY
resources/views/dashboard/index.blade.php
resources/views/dashboard/index.blade.php
@section('body')
<h1>Dashboard</h1>
- <div class="box spacing-bottom-large">
- <div class="box__section">
- <span style="font-size: 18px;">Earnings</span>
- </div>
- <table class="box__section">
+ <h2 class="spacing-top-large spacing-bottom-medium">Earnings</h2>
+ <div class="box">
+ <table>
<tbody>
@foreach (Auth::user()->earnings as $earning)
<tr>
</tbody>
</table>
</div>
+ <h2 class="spacing-top-large spacing-bottom-medium">Spendings</h2>
<div class="box">
- <div class="box__section">
- <span style="font-size: 18px;">Spendings</span>
- </div>
- <table class="box__section">
+ <table>
<tbody>
@foreach (Auth::user()->spendings as $spending)
<tr>

MODIFY
resources/views/earnings/create.blade.php
resources/views/earnings/create.blade.php
@extends('layout')
@section('body')
- <h1>Create earning</h1>
- <div class="box">
- <div class="box__section">
+ <h1 class="spacing-bottom-large">Create earning</h1>
+ <div class="box spacing-small">
<form method="POST" action="/earnings">
{{ csrf_field() }}
<label>Date</label>
<input type="submit" value="Create earning" />
</form>
</div>
- </div>
@endsection

MODIFY
resources/views/login/index.blade.php
resources/views/login/index.blade.php
@extends('layout')
@section('body')
- <h1>Log in</h1>
- <div class="box">
- <div class="box__section">
+ <h1 class="spacing-bottom-large">Log in</h1>
+ <div class="box spacing-small">
<form method="POST">
{{ csrf_field() }}
<label>E-mail</label>
<input type="submit" value="Log in" />
</form>
</div>
- </div>
@endsection

MODIFY
resources/views/reports/index.blade.php
resources/views/reports/index.blade.php
@extends('layout')
@section('body')
- <h1>Reports</h1>
+ <h1 class="spacing-bottom-large">Reports</h1>
<div class="box">
- <table class="box__section">
+ <table>
<tbody>
@foreach ($budgets as $budget)
<tr>

MODIFY
resources/views/reports/show.blade.php
resources/views/reports/show.blade.php
@extends('layout')
@section('body')
- <h1>Report for @lang('months.' . $month), {{ $year }}</h1>
- <div class="row spacing-bottom-large">
- <div class="row__column">
- <div class="box">
- <div class="box__section box__section--align-center">
- <h2 class="spacing-bottom-small">{{ $currency }} {{ $earnings }}</h2>
- <p>Earned</p>
- </div>
+ <h1 class="spacing-bottom-large">Report for @lang('months.' . $month), {{ $year }}</h1>
+ <div class="row">
+ <div class="column">
+ <div class="box spacing-large">
+ <h1 class="color-green spacing-bottom-small">{{ $currency }} {{ $earnings }}</h1>
+ <p>Earnings</p>
</div>
</div>
- <div class="row__column">
- <div class="box">
- <div class="box__section box__section--align-center">
- <h2 class="spacing-bottom-small">{{ $currency }} {{ $spendings }}</h2>
- <p>Spent</p>
+ <div class="column">
+ <div class="box spacing-large">
+ <h1 class="color-red spacing-bottom-small">{{ $currency }} {{ $spendings }}</h1>
+ <p>Spendings</p>
</div>
</div>
- </div>
- <div class="row__column">
- <div class="box">
- <div class="box__section box__section--align-center">
- <h2 class="spacing-bottom-small">{{ $currency }} {{ $earnings - $spendings }}</h2>
- <p>Net</p>
- </div>
+ <div class="column">
+ <div class="box spacing-large">
+ <h1 class="color-blue spacing-bottom-small">{{ $currency }} {{ $earnings - $spendings }}</h1>
+ <p>Balance</p>
</div>
</div>
</div>
+ <h2 class="spacing-top-large spacing-bottom-medium">Budgets</h2>
<div class="box">
- <div class="box__section">
- <p>Budgets</p>
- </div>
- <table class="box__section">
+ <table>
<tbody>
@foreach ($budgets as $budget)
<tr>

MODIFY
resources/views/settings/index.blade.php
resources/views/settings/index.blade.php
@extends('layout')
@section('body')
- <h1>Settings</h1>
- <div class="box">
- <div class="box__section">
+ <h1 class="spacing-bottom-large">Settings</h1>
+ <div class="box spacing-small">
<form method="POST">
{{ csrf_field() }}
+ <div class="row">
+ <div class="column">
<label>Name</label>
<input type="text" name="name" value="{{ Auth::user()->name }}" />
+ </div>
+ <div class="column">
<label>E-mail</label>
<input type="email" name="email" value="{{ Auth::user()->email }}" />
+ </div>
+ </div>
<input type="submit" value="Update" />
</form>
</div>
- </div>
@endsection

MODIFY
resources/views/spendings/create.blade.php
resources/views/spendings/create.blade.php
@extends('layout')
@section('body')
- <h1>Create spending</h1>
- <div class="box">
- <div class="box__section">
+ <h1 class="spacing-bottom-large">Create spending</h1>
+ <div class="box spacing-small">
<form method="POST" action="/spendings">
{{ csrf_field() }}
<label>Tag</label>
<input type="submit" value="Create spending" />
</form>
</div>
- </div>
@endsection

Apply new design