Skip to content

Письменов Дмитрий Иванович / yourroomads

Go to a project
Commit a679df7c by Jonathan Reinink
Options

Tweak colors

1 parent 6c307f8e
Inline Side-by-side
Showing with 67 additions and 57 deletions
resources/css/buttons.css
.btn-indigo { .btn-indigo-500 {
@apply px-6 py-3 rounded bg-indigo-700 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-500 } &:hover, &:focus { @apply bg-orange-500 }
} }
......
resources/css/form.css
.form-label { .form-label {
@apply .mb-2 .block .text-gray-800 .select-none; @apply .mb-2 .block .text-gray-700 .select-none;
} }
.form-input, .form-input,
.form-textarea, .form-textarea,
.form-select { .form-select {
@apply .p-2 .leading-normal .block .w-full .border .text-gray-800 .bg-white .font-sans .rounded .text-left .appearance-none .relative; @apply .p-2 .leading-normal .block .w-full .border .text-gray-700 .bg-white .font-sans .rounded .text-left .appearance-none .relative;
&:focus, &:focus,
&.focus { &.focus {
@apply .border-indigo-500; @apply .border-indigo-500;
box-shadow: 0 0 0 1px theme('colors.indigo.500'); box-shadow: 0 0 0 1px theme('colors.indigo-500');
} }
&::placeholder { &::placeholder {
@apply .text-gray-600 .opacity-100; @apply .text-gray-500 .opacity-100;
} }
} }
...@@ -32,15 +32,15 @@ ...@@ -32,15 +32,15 @@
} }
.form-error { .form-error {
@apply .text-red-500 .mt-2 .text-sm; @apply .text-red-700 .mt-2 .text-sm;
} }
.form-input.error, .form-input.error,
.form-textarea.error, .form-textarea.error,
.form-select.error { .form-select.error {
@apply .border-red-400; @apply .border-red-600;
&:focus { &:focus {
box-shadow: 0 0 0 1px theme('colors.red.500'); box-shadow: 0 0 0 1px theme('colors.red.600');
} }
} }
resources/js/Pages/Auth/Login.vue
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</div> </div>
<div class="px-10 py-4 bg-gray-100 border-t border-gray-200 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> <a class="hover:underline" tabindex="-1" href="#reset-password">Forget password?</a>
<loading-button :loading="sending" class="btn-indigo" type="submit">Login</loading-button> <loading-button :loading="sending" class="btn-indigo-500" type="submit">Login</loading-button>
</div> </div>
</form> </form>
</div> </div>
......
resources/js/Pages/Contacts/Create.vue
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<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" /> <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>
<div class="px-8 py-4 bg-gray-100 border-t border-gray-200 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> <loading-button :loading="sending" class="btn-indigo-500" type="submit">Create Contact</loading-button>
</div> </div>
</form> </form>
</div> </div>
......
resources/js/Pages/Contacts/Edit.vue
...@@ -30,8 +30,8 @@ ...@@ -30,8 +30,8 @@
<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" /> <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>
<div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center"> <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> <button v-if="!contact.deleted_at" class="text-red-700 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> <loading-button :loading="sending" class="btn-indigo-500 ml-auto" type="submit">Update Contact</loading-button>
</div> </div>
</form> </form>
</div> </div>
......
resources/js/Pages/Contacts/Index.vue
...@@ -3,14 +3,14 @@ ...@@ -3,14 +3,14 @@
<h1 class="mb-8 font-bold text-3xl">Contacts</h1> <h1 class="mb-8 font-bold text-3xl">Contacts</h1>
<div class="mb-6 flex justify-between items-center"> <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"> <search-filter v-model="form.search" class="w-full max-w-md mr-4" @reset="reset">
<label class="block text-gray-800">Trashed:</label> <label class="block text-gray-700">Trashed:</label>
<select v-model="form.trashed" class="mt-1 w-full form-select"> <select v-model="form.trashed" class="mt-1 w-full form-select">
<option :value="null" /> <option :value="null" />
<option value="with">With Trashed</option> <option value="with">With Trashed</option>
<option value="only">Only Trashed</option> <option value="only">Only Trashed</option>
</select> </select>
</search-filter> </search-filter>
<inertia-link class="btn-indigo" :href="route('contacts.create')"> <inertia-link class="btn-indigo-500" :href="route('contacts.create')">
<span>Create</span> <span>Create</span>
<span class="hidden md:inline">Contact</span> <span class="hidden md:inline">Contact</span>
</inertia-link> </inertia-link>
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<td class="border-t"> <td class="border-t">
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo-500" :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 }} {{ contact.name }}
<icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray ml-2" /> <icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray-400 ml-2" />
</inertia-link> </inertia-link>
</td> </td>
<td class="border-t"> <td class="border-t">
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
</td> </td>
<td class="border-t w-px"> <td class="border-t w-px">
<inertia-link class="px-4 flex items-center" :href="route('contacts.edit', contact.id)" tabindex="-1"> <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-gray" /> <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
</inertia-link> </inertia-link>
</td> </td>
</tr> </tr>
......
resources/js/Pages/Dashboard/Index.vue
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<h1 class="mb-8 font-bold text-3xl">Dashboard</h1> <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-500 underline hover:text-orange-600" 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> <div>
<inertia-link class="btn-indigo" href="/500">500 error</inertia-link> <inertia-link class="btn-indigo-500" href="/500">500 error</inertia-link>
<inertia-link class="btn-indigo" href="/404">404 error</inertia-link> <inertia-link class="btn-indigo-500" href="/404">404 error</inertia-link>
</div> </div>
</layout> </layout>
</template> </template>
......
resources/js/Pages/Organizations/Create.vue
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<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" /> <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>
<div class="px-8 py-4 bg-gray-100 border-t border-gray-200 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> <loading-button :loading="sending" class="btn-indigo-500" type="submit">Create Organization</loading-button>
</div> </div>
</form> </form>
</div> </div>
......
resources/js/Pages/Organizations/Edit.vue
...@@ -25,8 +25,8 @@ ...@@ -25,8 +25,8 @@
<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" /> <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>
<div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center"> <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> <button v-if="!organization.deleted_at" class="text-red-700 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> <loading-button :loading="sending" class="btn-indigo-500 ml-auto" type="submit">Update Organization</loading-button>
</div> </div>
</form> </form>
</div> </div>
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
<td class="border-t"> <td class="border-t">
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo-500" :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 }} {{ contact.name }}
<icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray ml-2" /> <icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray-400 ml-2" />
</inertia-link> </inertia-link>
</td> </td>
<td class="border-t"> <td class="border-t">
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
</td> </td>
<td class="border-t w-px"> <td class="border-t w-px">
<inertia-link class="px-4 flex items-center" :href="route('contacts.edit', contact.id)" tabindex="-1"> <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-gray" /> <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
</inertia-link> </inertia-link>
</td> </td>
</tr> </tr>
......
resources/js/Pages/Organizations/Index.vue
...@@ -3,14 +3,14 @@ ...@@ -3,14 +3,14 @@
<h1 class="mb-8 font-bold text-3xl">Organizations</h1> <h1 class="mb-8 font-bold text-3xl">Organizations</h1>
<div class="mb-6 flex justify-between items-center"> <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"> <search-filter v-model="form.search" class="w-full max-w-md mr-4" @reset="reset">
<label class="block text-gray-800">Trashed:</label> <label class="block text-gray-700">Trashed:</label>
<select v-model="form.trashed" class="mt-1 w-full form-select"> <select v-model="form.trashed" class="mt-1 w-full form-select">
<option :value="null" /> <option :value="null" />
<option value="with">With Trashed</option> <option value="with">With Trashed</option>
<option value="only">Only Trashed</option> <option value="only">Only Trashed</option>
</select> </select>
</search-filter> </search-filter>
<inertia-link class="btn-indigo" :href="route('organizations.create')"> <inertia-link class="btn-indigo-500" :href="route('organizations.create')">
<span>Create</span> <span>Create</span>
<span class="hidden md:inline">Organization</span> <span class="hidden md:inline">Organization</span>
</inertia-link> </inertia-link>
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<td class="border-t"> <td class="border-t">
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo-500" :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 }} {{ organization.name }}
<icon v-if="organization.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray ml-2" /> <icon v-if="organization.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray-400 ml-2" />
</inertia-link> </inertia-link>
</td> </td>
<td class="border-t"> <td class="border-t">
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
</td> </td>
<td class="border-t w-px"> <td class="border-t w-px">
<inertia-link class="px-4 flex items-center" :href="route('organizations.edit', organization.id)" tabindex="-1"> <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-gray" /> <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
</inertia-link> </inertia-link>
</td> </td>
</tr> </tr>
......
resources/js/Pages/Users/Create.vue
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</select-input> </select-input>
</div> </div>
<div class="px-8 py-4 bg-gray-100 border-t border-gray-200 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> <loading-button :loading="sending" class="btn-indigo-500" type="submit">Create User</loading-button>
</div> </div>
</form> </form>
</div> </div>
......
resources/js/Pages/Users/Edit.vue
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
</select-input> </select-input>
</div> </div>
<div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex items-center"> <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> <button v-if="!user.deleted_at" class="text-red-700 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> <loading-button :loading="sending" class="btn-indigo-500 ml-auto" type="submit">Update User</loading-button>
</div> </div>
</form> </form>
</div> </div>
......
resources/js/Pages/Users/Index.vue
...@@ -3,20 +3,20 @@ ...@@ -3,20 +3,20 @@
<h1 class="mb-8 font-bold text-3xl">Users</h1> <h1 class="mb-8 font-bold text-3xl">Users</h1>
<div class="mb-6 flex justify-between items-center"> <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"> <search-filter v-model="form.search" class="w-full max-w-md mr-4" @reset="reset">
<label class="block text-gray-800">Role:</label> <label class="block text-gray-700">Role:</label>
<select v-model="form.role" class="mt-1 w-full form-select"> <select v-model="form.role" class="mt-1 w-full form-select">
<option :value="null" /> <option :value="null" />
<option value="user">User</option> <option value="user">User</option>
<option value="owner">Owner</option> <option value="owner">Owner</option>
</select> </select>
<label class="mt-4 block text-gray-800">Trashed:</label> <label class="mt-4 block text-gray-700">Trashed:</label>
<select v-model="form.trashed" class="mt-1 w-full form-select"> <select v-model="form.trashed" class="mt-1 w-full form-select">
<option :value="null" /> <option :value="null" />
<option value="with">With Trashed</option> <option value="with">With Trashed</option>
<option value="only">Only Trashed</option> <option value="only">Only Trashed</option>
</select> </select>
</search-filter> </search-filter>
<inertia-link class="btn-indigo" :href="route('users.create')"> <inertia-link class="btn-indigo-500" :href="route('users.create')">
<span>Create</span> <span>Create</span>
<span class="hidden md:inline">User</span> <span class="hidden md:inline">User</span>
</inertia-link> </inertia-link>
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<td class="border-t"> <td class="border-t">
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo-500" :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 }} {{ user.name }}
<icon v-if="user.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray ml-2" /> <icon v-if="user.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray-400 ml-2" />
</inertia-link> </inertia-link>
</td> </td>
<td class="border-t"> <td class="border-t">
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
</td> </td>
<td class="border-t w-px"> <td class="border-t w-px">
<inertia-link class="px-4 flex items-center" :href="route('users.edit', user.id)" tabindex="-1"> <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-gray" /> <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
</inertia-link> </inertia-link>
</td> </td>
</tr> </tr>
......
resources/js/Shared/Layout.vue
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</inertia-link> </inertia-link>
<dropdown class="md:hidden" placement="bottom-end"> <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> <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-700 rounded"> <div slot="dropdown" class="mt-2 px-8 py-4 shadow-xl bg-indigo-800 rounded">
<main-menu /> <main-menu />
</div> </div>
</dropdown> </dropdown>
...@@ -19,16 +19,16 @@ ...@@ -19,16 +19,16 @@
<div class="mt-1 mr-4">{{ $page.auth.user.account.name }}</div> <div class="mt-1 mr-4">{{ $page.auth.user.account.name }}</div>
<dropdown class="mt-1" placement="bottom-end"> <dropdown class="mt-1" placement="bottom-end">
<div class="flex items-center cursor-pointer select-none group"> <div class="flex items-center cursor-pointer select-none group">
<div class="text-gray-800 group-hover:text-indigo-600 focus:text-indigo-600 mr-1 whitespace-no-wrap"> <div class="text-gray-700 group-hover:text-indigo-600 focus:text-indigo-600 mr-1 whitespace-no-wrap">
<span>{{ $page.auth.user.first_name }}</span> <span>{{ $page.auth.user.first_name }}</span>
<span class="hidden md:inline">{{ $page.auth.user.last_name }}</span> <span class="hidden md:inline">{{ $page.auth.user.last_name }}</span>
</div> </div>
<icon class="w-5 h-5 group-hover:fill-indigo-600 fill-gray-800 focus:fill-indigo-600" name="cheveron-down" /> <icon class="w-5 h-5 group-hover:fill-indigo-600 fill-gray-700 focus:fill-indigo-600" name="cheveron-down" />
</div> </div>
<div slot="dropdown" class="mt-2 py-2 shadow-xl bg-white rounded text-sm"> <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-600 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.edit', $page.auth.user.id)">My Profile</inertia-link>
<inertia-link class="block px-6 py-2 hover:bg-indigo-600 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('users')">Manage Users</inertia-link>
<inertia-link class="block px-6 py-2 hover:bg-indigo-600 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('logout')" method="post">Logout</inertia-link>
</div> </div>
</dropdown> </dropdown>
</div> </div>
......
resources/js/Shared/MainMenu.vue
...@@ -3,25 +3,25 @@ ...@@ -3,25 +3,25 @@
<div class="mb-4"> <div class="mb-4">
<inertia-link class="flex items-center group py-3" :href="route('dashboard')"> <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-400 group-hover:fill-white'" /> <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> <div :class="isUrl('') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Dashboard</div>
</inertia-link> </inertia-link>
</div> </div>
<div class="mb-4"> <div class="mb-4">
<inertia-link class="flex items-center group py-3" :href="route('organizations')"> <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-400 group-hover:fill-white'" /> <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> <div :class="isUrl('organizations') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Organizations</div>
</inertia-link> </inertia-link>
</div> </div>
<div class="mb-4"> <div class="mb-4">
<inertia-link class="flex items-center group py-3" :href="route('contacts')"> <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-400 group-hover:fill-white'" /> <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> <div :class="isUrl('contacts') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Contacts</div>
</inertia-link> </inertia-link>
</div> </div>
<div class="mb-4"> <div class="mb-4">
<inertia-link class="flex items-center group py-3" :href="route('reports')"> <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-400 group-hover:fill-white'" /> <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> <div :class="isUrl('reports') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Reports</div>
</inertia-link> </inertia-link>
</div> </div>
</div> </div>
......
resources/js/Shared/Pagination.vue
<template> <template>
<div class="mt-6 -mb-1 flex flex-wrap"> <div class="mt-6 -mb-1 flex flex-wrap">
<template v-for="(link, key) in links"> <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-gray" :class="{ 'ml-auto': link.label === 'Next' }">{{ link.label }}</div> <div v-if="link.url === null" :key="key" class="mr-1 mb-1 px-4 py-3 text-sm border rounded text-gray-400" :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> <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> </template>
</div> </div>
......
resources/js/Shared/SearchFilter.vue
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<div class="flex w-full bg-white shadow rounded"> <div class="flex w-full bg-white shadow rounded">
<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"> <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"> <div class="flex items-baseline">
<span class="text-gray-800 hidden md:inline">Filter</span> <span class="text-gray-700 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"> <svg class="w-2 h-2 fill-gray-600 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" /> <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> </svg>
</div> </div>
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</dropdown> </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)"> <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> </div>
<button class="ml-3 text-sm text-gray-600 hover:text-gray-700 focus:text-indigo-500" type="button" @click="$emit('reset')">Reset</button> <button class="ml-3 text-sm text-gray-500 hover:text-gray-600 focus:text-indigo-500" type="button" @click="$emit('reset')">Reset</button>
</div> </div>
</template> </template>
......
resources/js/Shared/TrashedMessage.vue
<template> <template>
<div class="p-4 bg-yellow-400 rounded border border-yellow-600 flex items-center justify-between"> <div class="p-4 bg-yellow-400 rounded flex items-center justify-between max-w-3xl">
<div class="flex items-center"> <div class="flex items-center">
<icon name="trash" class="flex-shrink-0 w-4 h-4 fill-yellow-700 mr-2" /> <icon name="trash" class="flex-shrink-0 w-4 h-4 fill-yellow-900 mr-2" />
<div class="text-yellow-700"> <div class="text-yellow-900">
<slot /> <slot />
</div> </div>
</div> </div>
<button class="text-yellow-700 hover:underline" tabindex="-1" type="button" @click="$emit('restore')">Restore</button> <button class="text-yellow-900 hover:underline" tabindex="-1" type="button" @click="$emit('restore')">Restore</button>
</div> </div>
</template> </template>
......
resources/views/app.blade.php
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<script src="{{ mix('/js/app.js') }}" defer></script> <script src="{{ mix('/js/app.js') }}" defer></script>
@routes @routes
</head> </head>
<body class="font-sans leading-none text-gray-800 antialiased"> <body class="font-sans leading-none text-gray-700 antialiased">
@inertia @inertia
......
tailwind.config.js
...@@ -9,6 +9,17 @@ module.exports = { ...@@ -9,6 +9,17 @@ module.exports = {
...defaultTheme.fontFamily.sans, ...defaultTheme.fontFamily.sans,
], ],
}, },
colors: {
indigo: {
'900': '#191e38',
'800': '#2f365f',
'600': '#5661b3',
'500': '#6574cd',
'400': '#7886d7',
'300': '#b2b7ff',
'100': '#e6e8ff',
},
},
boxShadow: theme => ({ boxShadow: theme => ({
'outline': '0 0 0 2px ' + theme('colors.indigo.500'), 'outline': '0 0 0 2px ' + theme('colors.indigo.500'),
}), }),
...@@ -21,4 +32,4 @@ module.exports = { ...@@ -21,4 +32,4 @@ module.exports = {
zIndex: ['responsive', 'focus'], zIndex: ['responsive', 'focus'],
}, },
plugins: [], plugins: [],
} }
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!