atasistro
/
pingcrm
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Upgrade to Tailwind v1.0 - switch to default colors

This commit is contained in:
gzhihao 2019-05-18 23:11:22 -04:00
parent 8ca4465261
commit 541f61e19b
20 changed files with 83 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/css/buttons.css vendored
View File

@ -1,7 +1,7 @@
.btn-indigo {
@apply px-6 py-3 rounded bg-indigo-dark text-white text-sm font-bold whitespace-no-wrap;
@apply px-6 py-3 rounded bg-indigo-600 text-white text-sm font-bold whitespace-no-wrap;
&:hover, &:focus { @apply bg-orange }
&:hover, &:focus { @apply bg-orange-500 }
}
.btn-spinner,

16
resources/css/form.css vendored
View File

@ -1,20 +1,20 @@
.form-label {
@apply .mb-2 .block .text-grey-darkest .select-none;
@apply .mb-2 .block .text-gray-800 .select-none;
}
.form-input,
.form-textarea,
.form-select {
@apply .p-2 .leading-normal .block .w-full .border .text-grey-darkest .bg-white .font-sans .rounded .text-left .appearance-none .relative;
@apply .p-2 .leading-normal .block .w-full .border .text-gray-800 .bg-white .font-sans .rounded .text-left .appearance-none .relative;
&:focus,
&.focus {
@apply .border-indigo;
box-shadow: 0 0 0 1px theme('colors.indigo');
@apply .border-indigo-500;
box-shadow: 0 0 0 1px theme('colors.indigo.500');
}
&::placeholder {
@apply .text-grey-dark .opacity-100;
@apply .text-gray-600 .opacity-100;
}
}
@ -32,15 +32,15 @@
}
.form-error {
@apply .text-red .mt-2 .text-sm;
@apply .text-red-500 .mt-2 .text-sm;
}
.form-input.error,
.form-textarea.error,
.form-select.error {
@apply .border-red-light;
@apply .border-red-400;
&:focus {
box-shadow: 0 0 0 1px theme('colors.red');
box-shadow: 0 0 0 1px theme('colors.red.500');
}
}

4
resources/js/Pages/Auth/Login.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="p-6 bg-indigo-darker min-h-screen flex justify-center items-center">
<div class="p-6 bg-indigo-700 min-h-screen flex justify-center items-center">
<div class="w-full max-w-md">
<logo class="block mx-auto w-full max-w-xs fill-white" height="50" />
<form class="mt-8 bg-white rounded-lg shadow-xl overflow-hidden" @submit.prevent="submit">
@ -13,7 +13,7 @@
<span class="text-sm">Remember Me</span>
</label>
</div>
<div class="px-10 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-between items-center">
<div class="px-10 py-4 bg-gray-100 border-t border-gray-200 flex justify-between items-center">
<a class="hover:underline" tabindex="-1" href="#reset-password">Forget password?</a>
<loading-button :loading="sending" class="btn-indigo" type="submit">Login</loading-button>
</div>

6
resources/js/Pages/Contacts/Create.vue
View File

@ -1,8 +1,8 @@
<template>
<layout title="Create Contact">
<h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('contacts')">Contacts</inertia-link>
<span class="text-indigo-light font-medium">/</span> Create
<inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('contacts')">Contacts</inertia-link>
<span class="text-indigo-400 font-medium">/</span> Create
</h1>
<div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<form @submit.prevent="submit">
@ -25,7 +25,7 @@
</select-input>
<text-input v-model="form.postal_code" :errors="errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
</div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-end items-center">
<div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
<loading-button :loading="sending" class="btn-indigo" type="submit">Create Contact</loading-button>
</div>
</form>

8
resources/js/Pages/Contacts/Edit.vue
View File

@ -1,8 +1,8 @@
<template>
<layout :title="`${form.first_name} ${form.last_name}`">
<h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('contacts')">Contacts</inertia-link>
<span class="text-indigo-light font-medium">/</span>
<inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('contacts')">Contacts</inertia-link>
<span class="text-indigo-400 font-medium">/</span>
{{ form.first_name }} {{ form.last_name }}
</h1>
<trashed-message v-if="contact.deleted_at" class="mb-6" @restore="restore">
@ -29,8 +29,8 @@
</select-input>
<text-input v-model="form.postal_code" :errors="errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
</div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex items-center">
<button v-if="!contact.deleted_at" class="text-red hover:underline" tabindex="-1" type="button" @click="destroy">Delete Contact</button>
<div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center">
<button v-if="!contact.deleted_at" class="text-red-500 hover:underline" tabindex="-1" type="button" @click="destroy">Delete Contact</button>
<loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update Contact</loading-button>
</div>
</form>

10
resources/js/Pages/Contacts/Index.vue
View File

@ -3,7 +3,7 @@
<h1 class="mb-8 font-bold text-3xl">Contacts</h1>
<div class="mb-6 flex justify-between items-center">
<search-filter v-model="form.search" class="w-full max-w-md mr-4" @reset="reset">
<label class="block text-grey-darkest">Trashed:</label>
<label class="block text-gray-800">Trashed:</label>
<select v-model="form.trashed" class="mt-1 w-full form-select">
<option :value="null" />
<option value="with">With Trashed</option>
@ -23,11 +23,11 @@
<th class="px-6 pt-6 pb-4">City</th>
<th class="px-6 pt-6 pb-4" colspan="2">Phone</th>
</tr>
<tr v-for="contact in contacts.data" :key="contact.id" class="hover:bg-grey-lightest focus-within:bg-grey-lightest">
<tr v-for="contact in contacts.data" :key="contact.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
<td class="border-t">
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('contacts.edit', contact.id)">
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo-500" :href="route('contacts.edit', contact.id)">
{{ contact.name }}
<icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-grey ml-2" />
<icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray ml-2" />
</inertia-link>
</td>
<td class="border-t">
@ -49,7 +49,7 @@
</td>
<td class="border-t w-px">
<inertia-link class="px-4 flex items-center" :href="route('contacts.edit', contact.id)" tabindex="-1">
<icon name="cheveron-right" class="block w-6 h-6 fill-grey" />
<icon name="cheveron-right" class="block w-6 h-6 fill-gray" />
</inertia-link>
</td>
</tr>

2
resources/js/Pages/Dashboard/Index.vue
View File

@ -1,7 +1,7 @@
<template>
<layout title="Dashboard">
<h1 class="mb-8 font-bold text-3xl">Dashboard</h1>
<p class="mb-12 leading-normal">Hey there! Welcome to Ping CRM, a demo app designed to help illustrate how <a class="text-indigo underline hover:text-orange-dark" href="https://github.com/inertiajs">Inertia.js</a> works.</p>
<p class="mb-12 leading-normal">Hey there! Welcome to Ping CRM, a demo app designed to help illustrate how <a class="text-indigo-500 underline hover:text-orange-600" href="https://github.com/inertiajs">Inertia.js</a> works.</p>
<div>
<inertia-link class="btn-indigo" href="/500">500 error</inertia-link>
<inertia-link class="btn-indigo" href="/404">404 error</inertia-link>

6
resources/js/Pages/Organizations/Create.vue
View File

@ -1,8 +1,8 @@
<template>
<layout title="Create Organization">
<h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('organizations')">Organizations</inertia-link>
<span class="text-indigo-light font-medium">/</span> Create
<inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('organizations')">Organizations</inertia-link>
<span class="text-indigo-400 font-medium">/</span> Create
</h1>
<div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<form @submit.prevent="submit">
@ -20,7 +20,7 @@
</select-input>
<text-input v-model="form.postal_code" :errors="errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
</div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-end items-center">
<div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
<loading-button :loading="sending" class="btn-indigo" type="submit">Create Organization</loading-button>
</div>
</form>

16
resources/js/Pages/Organizations/Edit.vue
View File

@ -1,8 +1,8 @@
<template>
<layout :title="form.name">
<h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('organizations')">Organizations</inertia-link>
<span class="text-indigo-light font-medium">/</span>
<inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('organizations')">Organizations</inertia-link>
<span class="text-indigo-400 font-medium">/</span>
{{ form.name }}
</h1>
<trashed-message v-if="organization.deleted_at" class="mb-6" @restore="restore">
@ -24,8 +24,8 @@
</select-input>
<text-input v-model="form.postal_code" :errors="errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
</div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex items-center">
<button v-if="!organization.deleted_at" class="text-red hover:underline" tabindex="-1" type="button" @click="destroy">Delete Organization</button>
<div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center">
<button v-if="!organization.deleted_at" class="text-red-500 hover:underline" tabindex="-1" type="button" @click="destroy">Delete Organization</button>
<loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update Organization</loading-button>
</div>
</form>
@ -38,11 +38,11 @@
<th class="px-6 pt-6 pb-4">City</th>
<th class="px-6 pt-6 pb-4" colspan="2">Phone</th>
</tr>
<tr v-for="contact in organization.contacts" :key="contact.id" class="hover:bg-grey-lightest focus-within:bg-grey-lightest">
<tr v-for="contact in organization.contacts" :key="contact.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
<td class="border-t">
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('contacts.edit', contact.id)">
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo-500" :href="route('contacts.edit', contact.id)">
{{ contact.name }}
<icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-grey ml-2" />
<icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray ml-2" />
</inertia-link>
</td>
<td class="border-t">
@ -57,7 +57,7 @@
</td>
<td class="border-t w-px">
<inertia-link class="px-4 flex items-center" :href="route('contacts.edit', contact.id)" tabindex="-1">
<icon name="cheveron-right" class="block w-6 h-6 fill-grey" />
<icon name="cheveron-right" class="block w-6 h-6 fill-gray" />
</inertia-link>
</td>
</tr>

10
resources/js/Pages/Organizations/Index.vue
View File

@ -3,7 +3,7 @@
<h1 class="mb-8 font-bold text-3xl">Organizations</h1>
<div class="mb-6 flex justify-between items-center">
<search-filter v-model="form.search" class="w-full max-w-md mr-4" @reset="reset">
<label class="block text-grey-darkest">Trashed:</label>
<label class="block text-gray-800">Trashed:</label>
<select v-model="form.trashed" class="mt-1 w-full form-select">
<option :value="null" />
<option value="with">With Trashed</option>
@ -22,11 +22,11 @@
<th class="px-6 pt-6 pb-4">City</th>
<th class="px-6 pt-6 pb-4" colspan="2">Phone</th>
</tr>
<tr v-for="organization in organizations.data" :key="organization.id" class="hover:bg-grey-lightest focus-within:bg-grey-lightest">
<tr v-for="organization in organizations.data" :key="organization.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
<td class="border-t">
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('organizations.edit', organization.id)">
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo-500" :href="route('organizations.edit', organization.id)">
{{ organization.name }}
<icon v-if="organization.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-grey ml-2" />
<icon v-if="organization.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray ml-2" />
</inertia-link>
</td>
<td class="border-t">
@ -41,7 +41,7 @@
</td>
<td class="border-t w-px">
<inertia-link class="px-4 flex items-center" :href="route('organizations.edit', organization.id)" tabindex="-1">
<icon name="cheveron-right" class="block w-6 h-6 fill-grey" />
<icon name="cheveron-right" class="block w-6 h-6 fill-gray" />
</inertia-link>
</td>
</tr>

6
resources/js/Pages/Users/Create.vue
View File

@ -1,8 +1,8 @@
<template>
<layout title="Create User">
<h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('users')">Users</inertia-link>
<span class="text-indigo-light font-medium">/</span> Create
<inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('users')">Users</inertia-link>
<span class="text-indigo-400 font-medium">/</span> Create
</h1>
<div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<form @submit.prevent="submit">
@ -16,7 +16,7 @@
<option :value="false">No</option>
</select-input>
</div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex justify-end items-center">
<div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
<loading-button :loading="sending" class="btn-indigo" type="submit">Create User</loading-button>
</div>
</form>

8
resources/js/Pages/Users/Edit.vue
View File

@ -1,8 +1,8 @@
<template>
<layout :title="`${form.first_name} ${form.last_name}`">
<h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('users')">Users</inertia-link>
<span class="text-indigo-light font-medium">/</span>
<inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('users')">Users</inertia-link>
<span class="text-indigo-400 font-medium">/</span>
{{ form.first_name }} {{ form.last_name }}
</h1>
<trashed-message v-if="user.deleted_at" class="mb-6" @restore="restore">
@ -20,8 +20,8 @@
<option :value="false">No</option>
</select-input>
</div>
<div class="px-8 py-4 bg-grey-lightest border-t border-grey-lighter flex items-center">
<button v-if="!user.deleted_at" class="text-red hover:underline" tabindex="-1" type="button" @click="destroy">Delete User</button>
<div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center">
<button v-if="!user.deleted_at" class="text-red-500 hover:underline" tabindex="-1" type="button" @click="destroy">Delete User</button>
<loading-button :loading="sending" class="btn-indigo ml-auto" type="submit">Update User</loading-button>
</div>
</form>

12
resources/js/Pages/Users/Index.vue
View File

@ -3,13 +3,13 @@
<h1 class="mb-8 font-bold text-3xl">Users</h1>
<div class="mb-6 flex justify-between items-center">
<search-filter v-model="form.search" class="w-full max-w-md mr-4" @reset="reset">
<label class="block text-grey-darkest">Role:</label>
<label class="block text-gray-800">Role:</label>
<select v-model="form.role" class="mt-1 w-full form-select">
<option :value="null" />
<option value="user">User</option>
<option value="owner">Owner</option>
</select>
<label class="mt-4 block text-grey-darkest">Trashed:</label>
<label class="mt-4 block text-gray-800">Trashed:</label>
<select v-model="form.trashed" class="mt-1 w-full form-select">
<option :value="null" />
<option value="with">With Trashed</option>
@ -28,11 +28,11 @@
<th class="px-6 pt-6 pb-4">Email</th>
<th class="px-6 pt-6 pb-4" colspan="2">Role</th>
</tr>
<tr v-for="user in users" :key="user.id" class="hover:bg-grey-lightest focus-within:bg-grey-lightest">
<tr v-for="user in users" :key="user.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
<td class="border-t">
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('users.edit', user.id)">
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo-500" :href="route('users.edit', user.id)">
{{ user.name }}
<icon v-if="user.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-grey ml-2" />
<icon v-if="user.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray ml-2" />
</inertia-link>
</td>
<td class="border-t">
@ -47,7 +47,7 @@
</td>
<td class="border-t w-px">
<inertia-link class="px-4 flex items-center" :href="route('users.edit', user.id)" tabindex="-1">
<icon name="cheveron-right" class="block w-6 h-6 fill-grey" />
<icon name="cheveron-right" class="block w-6 h-6 fill-gray" />
</inertia-link>
</td>
</tr>

16
resources/js/Shared/Layout.vue
View File

@ -4,13 +4,13 @@
<div class="flex flex-col">
<div class="min-h-screen flex flex-col" @click="hideDropdownMenus">
<div class="md:flex">
<div class="bg-indigo-darkest md:flex-shrink-0 md:w-56 px-6 py-4 flex items-center justify-between md:justify-center">
<div class="bg-indigo-800 md:flex-shrink-0 md:w-56 px-6 py-4 flex items-center justify-between md:justify-center">
<inertia-link class="mt-1" href="/">
<logo class="fill-white" width="120" height="28" />
</inertia-link>
<dropdown class="md:hidden" placement="bottom-end">
<svg class="fill-white w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /></svg>
<div slot="dropdown" class="mt-2 px-8 py-4 shadow-xl bg-indigo-darker rounded">
<div slot="dropdown" class="mt-2 px-8 py-4 shadow-xl bg-indigo-700 rounded">
<main-menu />
</div>
</dropdown>
@ -19,22 +19,22 @@
<div class="mt-1 mr-4">{{ $page.auth.user.account.name }}</div>
<dropdown class="mt-1" placement="bottom-end">
<div class="flex items-center cursor-pointer select-none group">
<div class="text-grey-darkest group-hover:text-indigo-dark focus:text-indigo-dark mr-1 whitespace-no-wrap">
<div class="text-gray-800 group-hover:text-indigo-600 focus:text-indigo-600 mr-1 whitespace-no-wrap">
<span>{{ $page.auth.user.first_name }}</span>
<span class="hidden md:inline">{{ $page.auth.user.last_name }}</span>
</div>
<icon class="w-5 h-5 group-hover:fill-indigo-dark fill-grey-darkest focus:fill-indigo-dark" name="cheveron-down" />
<icon class="w-5 h-5 group-hover:fill-indigo-600 fill-gray-800 focus:fill-indigo-600" name="cheveron-down" />
</div>
<div slot="dropdown" class="mt-2 py-2 shadow-xl bg-white rounded text-sm">
<inertia-link class="block px-6 py-2 hover:bg-indigo hover:text-white" :href="route('users.edit', $page.auth.user.id)">My Profile</inertia-link>
<inertia-link class="block px-6 py-2 hover:bg-indigo hover:text-white" :href="route('users')">Manage Users</inertia-link>
<inertia-link class="block px-6 py-2 hover:bg-indigo hover:text-white" :href="route('logout')" method="post">Logout</inertia-link>
<inertia-link class="block px-6 py-2 hover:bg-indigo-500 hover:text-white" :href="route('users.edit', $page.auth.user.id)">My Profile</inertia-link>
<inertia-link class="block px-6 py-2 hover:bg-indigo-500 hover:text-white" :href="route('users')">Manage Users</inertia-link>
<inertia-link class="block px-6 py-2 hover:bg-indigo-500 hover:text-white" :href="route('logout')" method="post">Logout</inertia-link>
</div>
</dropdown>
</div>
</div>
<div class="flex flex-grow">
<div class="bg-indigo-darker flex-shrink-0 w-56 p-12 hidden md:block">
<div class="bg-indigo-700 flex-shrink-0 w-56 p-12 hidden md:block">
<main-menu />
</div>
<div class="w-full overflow-hidden px-4 py-8 md:p-12">

16
resources/js/Shared/MainMenu.vue
View File

@ -2,26 +2,26 @@
<div>
<div class="mb-4">
<inertia-link class="flex items-center group py-3" :href="route('dashboard')">
<icon name="dashboard" class="w-4 h-4 mr-2" :class="isUrl('') ? 'fill-white' : 'fill-indigo-light group-hover:fill-white'" />
<div :class="isUrl('') ? 'text-white' : 'text-indigo-lighter group-hover:text-white'">Dashboard</div>
<icon name="dashboard" class="w-4 h-4 mr-2" :class="isUrl('') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
<div :class="isUrl('') ? 'text-white' : 'text-indigo-200 group-hover:text-white'">Dashboard</div>
</inertia-link>
</div>
<div class="mb-4">
<inertia-link class="flex items-center group py-3" :href="route('organizations')">
<icon name="office" class="w-4 h-4 mr-2" :class="isUrl('organizations') ? 'fill-white' : 'fill-indigo-light group-hover:fill-white'" />
<div :class="isUrl('organizations') ? 'text-white' : 'text-indigo-lighter group-hover:text-white'">Organizations</div>
<icon name="office" class="w-4 h-4 mr-2" :class="isUrl('organizations') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
<div :class="isUrl('organizations') ? 'text-white' : 'text-indigo-200 group-hover:text-white'">Organizations</div>
</inertia-link>
</div>
<div class="mb-4">
<inertia-link class="flex items-center group py-3" :href="route('contacts')">
<icon name="users" class="w-4 h-4 mr-2" :class="isUrl('contacts') ? 'fill-white' : 'fill-indigo-light group-hover:fill-white'" />
<div :class="isUrl('contacts') ? 'text-white' : 'text-indigo-lighter group-hover:text-white'">Contacts</div>
<icon name="users" class="w-4 h-4 mr-2" :class="isUrl('contacts') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
<div :class="isUrl('contacts') ? 'text-white' : 'text-indigo-200 group-hover:text-white'">Contacts</div>
</inertia-link>
</div>
<div class="mb-4">
<inertia-link class="flex items-center group py-3" :href="route('reports')">
<icon name="printer" class="w-4 h-4 mr-2" :class="isUrl('reports') ? 'fill-white' : 'fill-indigo-light group-hover:fill-white'" />
<div :class="isUrl('reports') ? 'text-white' : 'text-indigo-lighter group-hover:text-white'">Reports</div>
<icon name="printer" class="w-4 h-4 mr-2" :class="isUrl('reports') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
<div :class="isUrl('reports') ? 'text-white' : 'text-indigo-200 group-hover:text-white'">Reports</div>
</inertia-link>
</div>
</div>

4
resources/js/Shared/Pagination.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="mt-6 -mb-1 flex flex-wrap">
<template v-for="(link, key) in links">
<div v-if="link.url === null" :key="key" class="mr-1 mb-1 px-4 py-3 text-sm border rounded text-grey" :class="{ 'ml-auto': link.label === 'Next' }">{{ link.label }}</div>
<inertia-link v-else :key="key" class="mr-1 mb-1 px-4 py-3 text-sm border rounded hover:bg-white focus:border-indigo focus:text-indigo" :class="{ 'bg-white': link.active, 'ml-auto': link.label === 'Next' }" :href="link.url">{{ link.label }}</inertia-link>
<div v-if="link.url === null" :key="key" class="mr-1 mb-1 px-4 py-3 text-sm border rounded text-gray" :class="{ 'ml-auto': link.label === 'Next' }">{{ link.label }}</div>
<inertia-link v-else :key="key" class="mr-1 mb-1 px-4 py-3 text-sm border rounded hover:bg-white focus:border-indigo-500 focus:text-indigo-500" :class="{ 'bg-white': link.active, 'ml-auto': link.label === 'Next' }" :href="link.url">{{ link.label }}</inertia-link>
</template>
</div>
</template>

8
resources/js/Shared/SearchFilter.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="flex items-center">
<div class="flex w-full bg-white shadow rounded">
<dropdown class="px-4 md:px-6 rounded-l border-r hover:bg-grey-lightest focus:border-white focus:shadow-outline focus:z-10" placement="bottom-start">
<dropdown class="px-4 md:px-6 rounded-l border-r hover:bg-gray-100 focus:border-white focus:shadow-outline focus:z-10" placement="bottom-start">
<div class="flex items-baseline">
<span class="text-grey-darkest hidden md:inline">Filter</span>
<svg class="w-2 h-2 fill-grey-darker md:ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 961.243 599.998">
<span class="text-gray-800 hidden md:inline">Filter</span>
<svg class="w-2 h-2 fill-gray-700 md:ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 961.243 599.998">
<path d="M239.998 239.999L0 0h961.243L721.246 240c-131.999 132-240.28 240-240.624 239.999-.345-.001-108.625-108.001-240.624-240z" />
</svg>
</div>
@ -14,7 +14,7 @@
</dropdown>
<input class="relative w-full px-6 py-3 rounded-r focus:shadow-outline" autocomplete="off" type="text" name="search" placeholder="Search…" :value="value" @input="$emit('input', $event.target.value)">
</div>
<button class="ml-3 text-sm text-grey-dark hover:text-grey-darker focus:text-indigo" type="button" @click="$emit('reset')">Reset</button>
<button class="ml-3 text-sm text-gray-600 hover:text-gray-700 focus:text-indigo-500" type="button" @click="$emit('reset')">Reset</button>
</div>
</template>

8
resources/js/Shared/TrashedMessage.vue
View File

@ -1,12 +1,12 @@
<template>
<div class="p-4 bg-yellow-light rounded border border-yellow-dark flex items-center justify-between">
<div class="p-4 bg-yellow-400 rounded border border-yellow-600 flex items-center justify-between">
<div class="flex items-center">
<icon name="trash" class="flex-shrink-0 w-4 h-4 fill-yellow-darker mr-2" />
<div class="text-yellow-darker">
<icon name="trash" class="flex-shrink-0 w-4 h-4 fill-yellow-700 mr-2" />
<div class="text-yellow-700">
<slot />
</div>
</div>
<button class="text-yellow-darker hover:underline" tabindex="-1" type="button" @click="$emit('restore')">Restore</button>
<button class="text-yellow-700 hover:underline" tabindex="-1" type="button" @click="$emit('restore')">Restore</button>
</div>
</template>

4
resources/views/app.blade.php
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html class="h-full bg-grey-lighter">
<html class="h-full bg-gray-200">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
@ -7,7 +7,7 @@
<script src="{{ mix('/js/app.js') }}" defer></script>
@routes
</head>
<body class="font-sans leading-none text-grey-darkest antialiased">
<body class="font-sans leading-none text-gray-800 antialiased">
@inertia

87
tailwind.config.js vendored
View File

@ -9,93 +9,8 @@ module.exports = {
...defaultTheme.fontFamily.sans,
],
},
colors: {
'transparent': 'transparent',
'black': '#22292f',
'grey-darkest': '#3d4852',
'grey-darker': '#606f7b',
'grey-dark': '#8795a1',
'grey': '#b8c2cc',
'grey-light': '#dae1e7',
'grey-lighter': '#f1f5f8',
'grey-lightest': '#f8fafc',
'white': '#ffffff',
'red-darkest': '#3b0d0c',
'red-darker': '#621b18',
'red-dark': '#cc1f1a',
'red': '#e3342f',
'red-light': '#ef5753',
'red-lighter': '#f9acaa',
'red-lightest': '#fcebea',
'orange-darkest': '#462a16',
'orange-darker': '#613b1f',
'orange-dark': '#de751f',
'orange': '#f6993f',
'orange-light': '#faad63',
'orange-lighter': '#fcd9b6',
'orange-lightest': '#fff5eb',
'yellow-darkest': '#453411',
'yellow-darker': '#684f1d',
'yellow-dark': '#f2d024',
'yellow': '#ffed4a',
'yellow-light': '#fff382',
'yellow-lighter': '#fff9c2',
'yellow-lightest': '#fcfbeb',
'green-darkest': '#0f2f21',
'green-darker': '#1a4731',
'green-dark': '#1f9d55',
'green': '#38c172',
'green-light': '#51d88a',
'green-lighter': '#a2f5bf',
'green-lightest': '#e3fcec',
'teal-darkest': '#0d3331',
'teal-darker': '#20504f',
'teal-dark': '#38a89d',
'teal': '#4dc0b5',
'teal-light': '#64d5ca',
'teal-lighter': '#a0f0ed',
'teal-lightest': '#e8fffe',
'blue-darkest': '#12283a',
'blue-darker': '#1c3d5a',
'blue-dark': '#2779bd',
'blue': '#3490dc',
'blue-light': '#6cb2eb',
'blue-lighter': '#bcdefa',
'blue-lightest': '#eff8ff',
'indigo-darkest': '#191e38',
'indigo-darker': '#2f365f',
'indigo-dark': '#5661b3',
'indigo': '#6574cd',
'indigo-light': '#7886d7',
'indigo-lighter': '#b2b7ff',
'indigo-lightest': '#e6e8ff',
'purple-darkest': '#21183c',
'purple-darker': '#382b5f',
'purple-dark': '#794acf',
'purple': '#9561e2',
'purple-light': '#a779e9',
'purple-lighter': '#d6bbfc',
'purple-lightest': '#f3ebff',
'pink-darkest': '#451225',
'pink-darker': '#6f213f',
'pink-dark': '#eb5286',
'pink': '#f66d9b',
'pink-light': '#fa7ea8',
'pink-lighter': '#ffbbca',
'pink-lightest': '#ffebef',
},
boxShadow: theme => ({
'outline': '0 0 0 2px ' + theme('colors.indigo'),
'outline': '0 0 0 2px ' + theme('colors.indigo.500'),
}),
fill: theme => theme('colors'),
},