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 66 additions and 55 deletions
resources/css/buttons.css
.btn-indigo {
@apply px-6 py-3 rounded bg-indigo-700 text-white text-sm font-bold whitespace-no-wrap;
.btn-indigo-500 {
@apply px-6 py-3 rounded bg-indigo-600 text-white text-sm font-bold whitespace-no-wrap;
&:hover, &:focus { @apply bg-orange-500 }
}
......
resources/css/form.css
.form-label {
@apply .mb-2 .block .text-gray-800 .select-none;
@apply .mb-2 .block .text-gray-700 .select-none;
}
.form-input,
.form-textarea,
.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 {
@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 {
@apply .text-gray-600 .opacity-100;
@apply .text-gray-500 .opacity-100;
}
}
......@@ -32,15 +32,15 @@
}
.form-error {
@apply .text-red-500 .mt-2 .text-sm;
@apply .text-red-700 .mt-2 .text-sm;
}
.form-input.error,
.form-textarea.error,
.form-select.error {
@apply .border-red-400;
@apply .border-red-600;
&: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 @@
</div>
<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>
<loading-button :loading="sending" class="btn-indigo-500" type="submit">Login</loading-button>
</div>
</form>
</div>
......
resources/js/Pages/Contacts/Create.vue
......@@ -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" />
</div>
<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>
</form>
</div>
......
resources/js/Pages/Contacts/Edit.vue
......@@ -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" />
</div>
<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>
<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-500 ml-auto" type="submit">Update Contact</loading-button>
</div>
</form>
</div>
......
resources/js/Pages/Contacts/Index.vue
......@@ -3,14 +3,14 @@
<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-gray-800">Trashed:</label>
<label class="block text-gray-700">Trashed:</label>
<select v-model="form.trashed" class="mt-1 w-full form-select">
<option :value="null" />
<option value="with">With Trashed</option>
<option value="only">Only Trashed</option>
</select>
</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 class="hidden md:inline">Contact</span>
</inertia-link>
......@@ -27,7 +27,7 @@
<td class="border-t">
<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-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>
</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-gray" />
<icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
</inertia-link>
</td>
</tr>
......
resources/js/Pages/Dashboard/Index.vue
......@@ -3,8 +3,8 @@
<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>
<div>
<inertia-link class="btn-indigo" href="/500">500 error</inertia-link>
<inertia-link class="btn-indigo" href="/404">404 error</inertia-link>
<inertia-link class="btn-indigo-500" href="/500">500 error</inertia-link>
<inertia-link class="btn-indigo-500" href="/404">404 error</inertia-link>
</div>
</layout>
</template>
......
resources/js/Pages/Organizations/Create.vue
......@@ -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" />
</div>
<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>
</form>
</div>
......
resources/js/Pages/Organizations/Edit.vue
......@@ -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" />
</div>
<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>
<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-500 ml-auto" type="submit">Update Organization</loading-button>
</div>
</form>
</div>
......@@ -42,7 +42,7 @@
<td class="border-t">
<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-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>
</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-gray" />
<icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
</inertia-link>
</td>
</tr>
......
resources/js/Pages/Organizations/Index.vue
......@@ -3,14 +3,14 @@
<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-gray-800">Trashed:</label>
<label class="block text-gray-700">Trashed:</label>
<select v-model="form.trashed" class="mt-1 w-full form-select">
<option :value="null" />
<option value="with">With Trashed</option>
<option value="only">Only Trashed</option>
</select>
</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 class="hidden md:inline">Organization</span>
</inertia-link>
......@@ -26,7 +26,7 @@
<td class="border-t">
<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-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>
</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-gray" />
<icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
</inertia-link>
</td>
</tr>
......
resources/js/Pages/Users/Create.vue
......@@ -17,7 +17,7 @@
</select-input>
</div>
<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>
</form>
</div>
......
resources/js/Pages/Users/Edit.vue
......@@ -21,8 +21,8 @@
</select-input>
</div>
<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>
<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-500 ml-auto" type="submit">Update User</loading-button>
</div>
</form>
</div>
......
resources/js/Pages/Users/Index.vue
......@@ -3,20 +3,20 @@
<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-gray-800">Role:</label>
<label class="block text-gray-700">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-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">
<option :value="null" />
<option value="with">With Trashed</option>
<option value="only">Only Trashed</option>
</select>
</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 class="hidden md:inline">User</span>
</inertia-link>
......@@ -32,7 +32,7 @@
<td class="border-t">
<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-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>
</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-gray" />
<icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
</inertia-link>
</td>
</tr>
......
resources/js/Shared/Layout.vue
......@@ -10,7 +10,7 @@
</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-700 rounded">
<div slot="dropdown" class="mt-2 px-8 py-4 shadow-xl bg-indigo-800 rounded">
<main-menu />
</div>
</dropdown>
......@@ -19,16 +19,16 @@
<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-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 class="hidden md:inline">{{ $page.auth.user.last_name }}</span>
</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 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-600 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('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>
......
resources/js/Shared/MainMenu.vue
......@@ -3,25 +3,25 @@
<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-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>
</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-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>
</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-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>
</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-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>
</div>
</div>
......
resources/js/Shared/Pagination.vue
<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-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>
</template>
</div>
......
resources/js/Shared/SearchFilter.vue
......@@ -3,8 +3,8 @@
<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">
<div class="flex items-baseline">
<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">
<span class="text-gray-700 hidden md:inline">Filter</span>
<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" />
</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-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>
</template>
......
resources/js/Shared/TrashedMessage.vue
<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">
<icon name="trash" class="flex-shrink-0 w-4 h-4 fill-yellow-700 mr-2" />
<div class="text-yellow-700">
<icon name="trash" class="flex-shrink-0 w-4 h-4 fill-yellow-900 mr-2" />
<div class="text-yellow-900">
<slot />
</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>
</template>
......
resources/views/app.blade.php
......@@ -7,7 +7,7 @@
<script src="{{ mix('/js/app.js') }}" defer></script>
@routes
</head>
<body class="font-sans leading-none text-gray-800 antialiased">
<body class="font-sans leading-none text-gray-700 antialiased">
@inertia
......
tailwind.config.js
......@@ -9,6 +9,17 @@ module.exports = {
...defaultTheme.fontFamily.sans,
],
},
colors: {
indigo: {
'900': '#191e38',
'800': '#2f365f',
'600': '#5661b3',
'500': '#6574cd',
'400': '#7886d7',
'300': '#b2b7ff',
'100': '#e6e8ff',
},
},
boxShadow: theme => ({
'outline': '0 0 0 2px ' + theme('colors.indigo.500'),
}),
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!