Skip to content

GitLab

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

add color theme

parent 753fe1f8
Hide whitespace changes
Inline Side-by-side
app/Http/Livewire/MainContainer.php
View file @ b15a9648
......@@ -6,7 +6,7 @@ use Livewire\Component;
class MainContainer extends Component
{
public $currentContent = 'DeleteMultiPatch';
public $currentContent = 'Patch';
public $loading = false;
public $pagePaginate = 1;
......
app/Http/Livewire/Pages/SendPatch/SendMultiPatchBox.php
View file @ b15a9648
......@@ -43,7 +43,7 @@ class SendMultiPatchBox extends Component
public function updateSelectedPatches($patchId, $allSelectPatchName)
{
if (is_array($patchId)) {
$this->selectedPatches = $patchId;
$this->selectedPatches = $patchId;
$this->selectedPatchName = $allSelectPatchName;
} else {
if (in_array($patchId, $this->selectedPatches)) {
......
resources/css/components/table.css
View file @ b15a9648
table.is-hoverable > tbody > tr:hover > 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 @@
</style>
</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 }}
@yield('content')
</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">
<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">
......@@ -11,7 +11,7 @@
</div>
{{-- end loading --}}
<div wire:loading.remove>
<div wire:loading.remove class="bg-slate-150">
@if ($currentContent === 'Role')
<livewire:pages.role.role-index />
@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="text-xl font-bold text-stone-700"><a href="/">SPN Patch</a></div>
<ul class="flex space-x-4 z-50">
......
resources/views/livewire/pages/patch/patch-index.blade.php
View file @ b15a9648
<div>
<div wire:loading.class="" wire:loading.class.remove="hidden"
<div class="bg-secondary">
<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">
<div class="flex justify-center items-center ">
<div class="items-center h-100vh" style="align-content: center;">
......@@ -25,7 +28,7 @@
</div>
</div>
@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="my-3 flex h-8 items-center justify-between px-4 sm:px-5">
......@@ -37,7 +40,7 @@
</div>
<div class="flex justify-between">
<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>
</div>
<div class="inline-flex flex-initial">
......@@ -58,13 +61,13 @@
</span>
<span class="w-52" x-show="isInputActive === true">
<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)
<option value="{{ $key }}">{{ $by }}</option>
@endforeach
</select>
</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>
</div>
</div>
......@@ -73,43 +76,43 @@
<div class="mx-3 mt-3 px-4">
<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>
<tr>
<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
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
</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
</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
</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
</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
</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
</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
</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
</th>
</tr>
......@@ -122,7 +125,7 @@
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<label class="inline-flex items-center space-x-2">
<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"
value="{{ $patch->id }}" />
</label>
......@@ -140,11 +143,11 @@
<td class="whitespace-nowrap px-1 py-3 sm:px-2">
<div class="flex justify-center space-x-2">
<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>
</a>
<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>
</a>
</div>
......
resources/views/livewire/paginate-custom.blade.php
View file @ b15a9648
......@@ -6,7 +6,7 @@
<span>Show</span>
<label class="block">
<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 )
<option value="{{ $per_page }}">{{ $per_page }}</option>
@endforeach
......@@ -19,7 +19,7 @@
<span class="rounded-l-lg bg-slate-150 dark:bg-navy-500">
@if ($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"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
......@@ -31,7 +31,7 @@
@foreach ($elements as $element)
@if (is_string($element))
<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>
@endif
......@@ -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>
@else
<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
</span>
@endforeach
......@@ -52,7 +52,7 @@
<span class="rounded-r-lg bg-slate-150 dark:bg-navy-500">
@if ($paginator->hasMorePages())
<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"
stroke="currentColor">
<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");
const navyColor = {
50: "#E7E9EF",
100: "#C2C9D6",
200: "#A3ADC2",
300: "#697A9B",
400: "#5C6B8A",
450: "#465675",
500: "#384766",
600: "#313E59",
700: "#26334D",
750: "#222E45",
800: "#202B40",
900: "#192132",
50: "#EBF0F7",
100: "#CBD8E6",
200: "#AEBFD4",
300: "#6F85A5",
400: "#526B91",
450: "#3F5676",
500: "#334564",
600: "#2C3D55",
700: "#233143",
750: "#202C3B",
800: "#1D2734",
900: "#151D27",
};
const customColors = {
navy: navyColor,
"slate-150": "#E9EEF5",
primary: colors.stone["700"],
"primary-focus": colors.stone["800"],
"secondary-light": "#ff57d8",
secondary: "#F000B9",
"secondary-focus": "#BD0090",
"accent-light": colors.stone["400"],
accent: "#5f5af6",
"accent-focus": "#4d47f5",
info: colors.stone["500"],
"info-focus": colors.stone["600"],
success: colors.emerald["500"],
"success-focus": colors.emerald["600"],
warning: "#ff9800",
"warning-focus": "#e68200",
error: colors.red["600"],
"error-focus": colors.red["700"],
"slate-150": "#F8F9FA",
"slate-300": "#E2E6EA",
primary: "#2D6A4F", // สีเขียวเข้ม
"primary-focus": "#1B4332",
"secondary-light": "#C4F1D3", // สีเขียวอ่อน
secondary: "#F8F9FA",
"secondary-focus": "#E2E6EA",
"accent-light": "#FFC107",
accent: "#FFC107",
"accent-focus": "#E0A800",
info: "#1c3334",
"info-focus": "#1c3524",
success: "#28A745",
"success-focus": "#218838",
warning: "#FFC107",
"warning-focus": "#E0A800",
error: "#DC3545",
"error-focus": "#C82333",
"slate-100": "#2D6A4F",
};
module.exports = {
content: [
"./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