Skip to content

GitLab

Commit b15a9648 authored by Sarun Mungthanya's avatar Sarun Mungthanya
Browse files

add color theme

parent 753fe1f8
Show whitespace changes
Inline Side-by-side
app/Http/Livewire/MainContainer.php
View file @ b15a9648
...@@ -6,7 +6,7 @@ use Livewire\Component; ...@@ -6,7 +6,7 @@ use Livewire\Component;
class MainContainer extends Component class MainContainer extends Component
{ {
public $currentContent = 'DeleteMultiPatch'; public $currentContent = 'Patch';
public $loading = false; public $loading = false;
public $pagePaginate = 1; public $pagePaginate = 1;
......
resources/css/components/table.css
View file @ b15a9648
table.is-hoverable > tbody > tr:hover > td, table.is-hoverable > tbody > tr:hover > td,
table.is-zebra > tbody > tr:nth-child(even) > td { table.is-zebra > tbody > tr:nth-child(even) > td {
@apply bg-slate-100 dark:bg-navy-600; @apply bg-slate-100 dark:bg-navy-600 text-white;
} }
resources/views/components/app-layout.blade.php
View file @ b15a9648
...@@ -54,9 +54,9 @@ ...@@ -54,9 +54,9 @@
</style> </style>
</head> </head>
<body class="h-full"> <body class="h-full bg-slate-150">
<main class="flex-grow overflow-auto"> <main class="flex-grow overflow-auto bg-slate-150">
{{ $slot }} {{ $slot }}
@yield('content') @yield('content')
</main> </main>
......
resources/views/livewire/main-container.blade.php
View file @ b15a9648
<div class="card mx-4 my-4 z-0 "> <div class="card mx-4 my-4 z-0 bg-slate-150">
<link href="{{ asset('css/pages/patch.css') }}" rel="stylesheet"> <link href="{{ asset('css/pages/patch.css') }}" rel="stylesheet">
<div wire:loading.class="" wire:loading.class.remove="hidden" <div wire:loading.class="" wire:loading.class.remove="hidden"
class="absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden"> class="absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
</div> </div>
{{-- end loading --}} {{-- end loading --}}
<div wire:loading.remove> <div wire:loading.remove class="bg-slate-150">
@if ($currentContent === 'Role') @if ($currentContent === 'Role')
<livewire:pages.role.role-index /> <livewire:pages.role.role-index />
@elseif ($currentContent === 'User') @elseif ($currentContent === 'User')
......
resources/views/livewire/navbar.blade.php
View file @ b15a9648
<nav class="bg-white shadow p-4 z-100"> <nav class="shadow p-4 z-100 bg-secondary ">
<div class="container mx-auto flex justify-between items-center"> <div class="container mx-auto flex justify-between items-center">
<div class="text-xl font-bold text-stone-700"><a href="/">SPN Patch</a></div> <div class="text-xl font-bold text-stone-700"><a href="/">SPN Patch</a></div>
<ul class="flex space-x-4 z-50"> <ul class="flex space-x-4 z-50">
......
resources/views/livewire/pages/patch/patch-index.blade.php
View file @ b15a9648
<div> <div class="bg-secondary">
<div wire:loading.class="" wire:loading.class.remove="hidden" <style>
</style>
` <div wire:loading.class="" wire:loading.class.remove="hidden"
class="absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden"> class="absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
<div class="flex justify-center items-center "> <div class="flex justify-center items-center ">
<div class="items-center h-100vh" style="align-content: center;"> <div class="items-center h-100vh" style="align-content: center;">
...@@ -25,7 +28,7 @@ ...@@ -25,7 +28,7 @@
</div> </div>
</div> </div>
@endif @endif
<div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6 "> <div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6 bg-secondary">
<div class="pb-4"> <div class="pb-4">
<div class="my-3 flex h-8 items-center justify-between px-4 sm:px-5"> <div class="my-3 flex h-8 items-center justify-between px-4 sm:px-5">
...@@ -37,7 +40,7 @@ ...@@ -37,7 +40,7 @@
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<div class="px-2 ml-4"> <div class="px-2 ml-4">
<button type="button" class="py-2 px-3 bg-stone-700 rounded-lg text-white" <button type="button" class="py-2 px-3 bg-primary rounded-lg text-white"
wire:click="showpatchAddForm">Add</button> wire:click="showpatchAddForm">Add</button>
</div> </div>
<div class="inline-flex flex-initial"> <div class="inline-flex flex-initial">
...@@ -58,13 +61,13 @@ ...@@ -58,13 +61,13 @@
</span> </span>
<span class="w-52" x-show="isInputActive === true"> <span class="w-52" x-show="isInputActive === true">
<select wire:model.defer="searchSelected" <select wire:model.defer="searchSelected"
class="form-select h-9 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"> class="form-select h-9 w-full rounded-lg border border-slate-300 bg-slate-300 px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
@foreach ($searchBy as $key => $by) @foreach ($searchBy as $key => $by)
<option value="{{ $key }}">{{ $by }}</option> <option value="{{ $key }}">{{ $by }}</option>
@endforeach @endforeach
</select> </select>
</span> </span>
<button type="button" class="bg-stone-700 text-white px-4 py-2 rounded" <button type="button" class="bg-primary text-white px-4 py-2 rounded"
wire:click="search">Search</button> wire:click="search">Search</button>
</div> </div>
</div> </div>
...@@ -73,43 +76,43 @@ ...@@ -73,43 +76,43 @@
<div class="mx-3 mt-3 px-4"> <div class="mx-3 mt-3 px-4">
<div class="is-scrollbar-hidden min-w-full table-responsive" x-data="pages.tables.initExample1"> <div class="is-scrollbar-hidden min-w-full table-responsive" x-data="pages.tables.initExample1">
<table class="is-hoverable table w-full text-left"> <table class="is-hoverable table w-full text-left border-b" >
<thead> <thead>
<tr> <tr>
<th <th
class="whitespace-nowrap rounded-tl-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"> class="whitespace-nowrap rounded-tl-lg bg-slate-300 px-4 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-5">
# #
</th> </th>
<th <th
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2"> class="whitespace-nowrap bg-slate-300 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Patch ID Patch ID
</th> </th>
<th <th
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2"> class="whitespace-nowrap bg-slate-300 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Patch Name Patch Name
</th> </th>
<th <th
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2"> class="whitespace-nowrap bg-slate-300 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Patch Date Patch Date
</th> </th>
<th <th
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2"> class="whitespace-nowrap bg-slate-300 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Patch Level Patch Level
</th> </th>
<th <th
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2"> class="whitespace-nowrap bg-slate-300 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Major Version Major Version
</th> </th>
<th <th
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2"> class="whitespace-nowrap bg-slate-300 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Description Description
</th> </th>
<th <th
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2"> class="whitespace-nowrap bg-slate-300 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Remark Remark
</th> </th>
<th <th
class="whitespace-nowrap rounded-tr-lg bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2"> class="whitespace-nowrap rounded-tr-lg bg-slate-300 px-2 py-3 font-semibold uppercase text-black dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Action Action
</th> </th>
</tr> </tr>
...@@ -122,7 +125,7 @@ ...@@ -122,7 +125,7 @@
<td class="whitespace-nowrap px-4 py-3 sm:px-5"> <td class="whitespace-nowrap px-4 py-3 sm:px-5">
<label class="inline-flex items-center space-x-2"> <label class="inline-flex items-center space-x-2">
<input <input
class="form-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent" class="form-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type="checkbox" wire:model.defer="selectedPatch" type="checkbox" wire:model.defer="selectedPatch"
value="{{ $patch->id }}" /> value="{{ $patch->id }}" />
</label> </label>
...@@ -140,11 +143,11 @@ ...@@ -140,11 +143,11 @@
<td class="whitespace-nowrap px-1 py-3 sm:px-2"> <td class="whitespace-nowrap px-1 py-3 sm:px-2">
<div class="flex justify-center space-x-2"> <div class="flex justify-center space-x-2">
<a wire:click="showpatchEditForm({{ $patch->PID }})" <a wire:click="showpatchEditForm({{ $patch->PID }})"
class="btn h-8 w-8 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"> class="btn h-8 w-8 p-0 text-info hover:primary-focus focus:primary-focus active:bg-info/25">
<i class="fa fa-edit"></i> <i class="fa fa-edit"></i>
</a> </a>
<a wire:click="showDeleteModal({{ $patch->PID }})" <a wire:click="showDeleteModal({{ $patch->PID }})"
class="btn h-8 w-8 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"> class="btn h-8 w-8 p-0 text-info hover:primary-focus focus:primary-focus active:bg-info/25">
<i class="fa fa-trash"></i> <i class="fa fa-trash"></i>
</a> </a>
</div> </div>
......
resources/views/livewire/paginate-custom.blade.php
View file @ b15a9648
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<span>Show</span> <span>Show</span>
<label class="block"> <label class="block">
<select wire:model="perPage" <select wire:model="perPage"
class="form-select rounded-full border border-slate-300 bg-white px-2 py-1 pr-6 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"> class="form-select rounded-full border border-slate-300 px-2 py-1 pr-6 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
@foreach ( $paginate_master as $per_page ) @foreach ( $paginate_master as $per_page )
<option value="{{ $per_page }}">{{ $per_page }}</option> <option value="{{ $per_page }}">{{ $per_page }}</option>
@endforeach @endforeach
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<span class="rounded-l-lg bg-slate-150 dark:bg-navy-500"> <span class="rounded-l-lg bg-slate-150 dark:bg-navy-500">
@if ($paginator->currentPage() > 1) @if ($paginator->currentPage() > 1)
<a href="#" wire:click="gotoPage({{ $paginator->currentPage() - 1 }})" <a href="#" wire:click="gotoPage({{ $paginator->currentPage() - 1 }})"
class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"> class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 hover:text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor"> stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
@foreach ($elements as $element) @foreach ($elements as $element)
@if (is_string($element)) @if (is_string($element))
<span class="bg-slate-150 dark:bg-navy-500 list-none"> <span class="bg-slate-150 dark:bg-navy-500 list-none">
<a href="#" class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">{{ $element }}</a> <a href="#" class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">{{ $element }}</a>
</span> </span>
@endif @endif
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
<span class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-primary px-3 leading-tight text-white">{{ $page }}</span> <span class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-primary px-3 leading-tight text-white">{{ $page }}</span>
@else @else
<a href="#" wire:click="gotoPage({{ $page }})" <a href="#" wire:click="gotoPage({{ $page }})"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">{{ $page }}</a> class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">{{ $page }}</a>
@endif @endif
</span> </span>
@endforeach @endforeach
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
<span class="rounded-r-lg bg-slate-150 dark:bg-navy-500"> <span class="rounded-r-lg bg-slate-150 dark:bg-navy-500">
@if ($paginator->hasMorePages()) @if ($paginator->hasMorePages())
<a href="#" wire:click="gotoPage({{ $paginator->currentPage() + 1 }})" <a href="#" wire:click="gotoPage({{ $paginator->currentPage() + 1 }})"
class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"> class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 hover:text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor"> stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
......
tailwind.config.js
View file @ b15a9648
...@@ -3,41 +3,43 @@ const defaultTheme = require("tailwindcss/defaultTheme"); ...@@ -3,41 +3,43 @@ const defaultTheme = require("tailwindcss/defaultTheme");
const navyColor = { const navyColor = {
50: "#E7E9EF", 50: "#EBF0F7",
100: "#C2C9D6", 100: "#CBD8E6",
200: "#A3ADC2", 200: "#AEBFD4",
300: "#697A9B", 300: "#6F85A5",
400: "#5C6B8A", 400: "#526B91",
450: "#465675", 450: "#3F5676",
500: "#384766", 500: "#334564",
600: "#313E59", 600: "#2C3D55",
700: "#26334D", 700: "#233143",
750: "#222E45", 750: "#202C3B",
800: "#202B40", 800: "#1D2734",
900: "#192132", 900: "#151D27",
}; };
const customColors = { const customColors = {
navy: navyColor, navy: navyColor,
"slate-150": "#E9EEF5", "slate-150": "#F8F9FA",
primary: colors.stone["700"], "slate-300": "#E2E6EA",
"primary-focus": colors.stone["800"], primary: "#2D6A4F", // สีเขียวเข้ม
"secondary-light": "#ff57d8", "primary-focus": "#1B4332",
secondary: "#F000B9", "secondary-light": "#C4F1D3", // สีเขียวอ่อน
"secondary-focus": "#BD0090", secondary: "#F8F9FA",
"accent-light": colors.stone["400"], "secondary-focus": "#E2E6EA",
accent: "#5f5af6", "accent-light": "#FFC107",
"accent-focus": "#4d47f5", accent: "#FFC107",
info: colors.stone["500"], "accent-focus": "#E0A800",
"info-focus": colors.stone["600"], info: "#1c3334",
success: colors.emerald["500"], "info-focus": "#1c3524",
"success-focus": colors.emerald["600"], success: "#28A745",
warning: "#ff9800", "success-focus": "#218838",
"warning-focus": "#e68200", warning: "#FFC107",
error: colors.red["600"], "warning-focus": "#E0A800",
"error-focus": colors.red["700"], error: "#DC3545",
"error-focus": "#C82333",
"slate-100": "#2D6A4F",
}; };
module.exports = { module.exports = {
content: [ content: [
"./src/**/*.{php,html,js,jsx,ts,tsx,vue}", "./src/**/*.{php,html,js,jsx,ts,tsx,vue}",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment