Skip to content

[1.x] Add dark mode to views #66

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 6, 2025
Merged

[1.x] Add dark mode to views #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
203c90f
add `dark_mode` config
milwad-dev Sep 6, 2025
6af6acc
Update master.blade.php
milwad-dev Sep 6, 2025
082ede5
wip
milwad-dev Sep 6, 2025
91c9515
Update LaravelUserMonitoringServiceProvider.php
milwad-dev Sep 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions config/user-monitoring.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@
*/
'file_path' => 'routes/user-monitoring.php',
],

/*
* Enable or disable dark mode for the views.
*/
'dark_mode' => false,
],

/*
Expand Down
4 changes: 2 additions & 2 deletions resources/views/actions-monitoring/index.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@extends('LaravelUserMonitoring::layouts.master')

@section('title', 'Action Monitoring')
@section('title', 'Actions Monitoring')

@section('content')
<div class="mt-7 overflow-x-auto">
Expand Down Expand Up @@ -65,7 +65,7 @@
@csrf
@method('DELETE')

<button class="focus:ring-2 focus:ring-offset-2 focus:ring-red-300 text-sm leading-none text-red-600 py-3 px-5 bg-red-100 rounded hover:bg-red-200 focus:outline-none" type="submit">
<button class="delete-btn focus:ring-2 focus:ring-offset-2 focus:ring-red-300 text-sm leading-none text-red-600 py-3 px-5 bg-red-100 rounded hover:bg-red-200 focus:outline-none" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
</svg>
Expand Down
4 changes: 2 additions & 2 deletions resources/views/authentications-monitoring/index.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@extends('LaravelUserMonitoring::layouts.master')

@section('title', 'Authentication Monitoring')
@section('title', 'Authentications Monitoring')

@section('content')
<div class="mt-7 overflow-x-auto">
Expand Down Expand Up @@ -58,7 +58,7 @@
@csrf
@method('DELETE')

<button class="focus:ring-2 focus:ring-offset-2 focus:ring-red-300 text-sm leading-none text-red-600 py-3 px-5 bg-red-100 rounded hover:bg-red-200 focus:outline-none" type="submit">
<button class="delete-btn focus:ring-2 focus:ring-offset-2 focus:ring-red-300 text-sm leading-none text-red-600 py-3 px-5 bg-red-100 rounded hover:bg-red-200 focus:outline-none" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
</svg>
Expand Down
61 changes: 48 additions & 13 deletions resources/views/layouts/master.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,47 +12,80 @@
.checkbox:checked + .check-icon {
display: flex;
}

/* Dark Mode */
body.dark-mode {
background-color: #222831;
}

body.dark-mode .title-bar {
color: #fff;
}

body.dark-mode .tab-box {
background-color: #222831;
}

body.dark-mode .tab-title {
color: #fff;
}

body.dark-mode .tab-title:hover {
color: #4338ca;
}

body.dark-mode :is(a, p, path) {
color: #fff;
}

body.dark-mode .delete-btn {
background-color: rgb(234, 56, 56);
}

body.dark-mode .bg-indigo-100 p {
color: #000;
}
</style>
</head>
<body>
<body @class(['dark-mode' => config('user-monitoring.config.dark_mode', false)])>
<div class="sm:px-6 w-full">
<div class="px-4 md:px-10 py-4 md:py-7">
<div class="flex items-center justify-between">
<p class="focus:outline-none text-base sm:text-lg md:text-xl lg:text-2xl font-bold leading-normal text-gray-800" tabindex="0">
<p class="focus:outline-none text-base sm:text-lg md:text-xl lg:text-2xl font-bold leading-normal text-gray-800 title-bar" tabindex="0">
Laravel User Monitoring 📈
</p>
</div>
</div>
<div class="bg-white py-4 md:py-7 px-4 md:px-8 xl:px-10">
<div class="bg-white py-4 md:py-7 px-4 md:px-8 xl:px-10 tab-box">
<div class="sm:flex items-center justify-between">
<div class="flex items-center">
<a class="rounded-full focus:outline-none focus:ring-2 focus:bg-indigo-50 focus:ring-indigo-800"
href="{{ route('user-monitoring.visits-monitoring') }}">
<div class="py-2 px-8 text-indigo-700 rounded-full hover:text-indigo-700 hover:bg-indigo-100
{{ request()->routeIs('user-monitoring.visits-monitoring') ? 'bg-indigo-100' : '' }}">
<p>Visit Monitoring</p>
{{ request()->routeIs('user-monitoring.visits-monitoring') ? 'bg-indigo-100' : '' }}">
<p class="tab-title">Visit Monitoring</p>
</div>
</a>
<a class="rounded-full focus:outline-none focus:ring-2 focus:bg-indigo-50 focus:ring-indigo-800 ml-4 sm:ml-8"
href="{{ route('user-monitoring.actions-monitoring') }}">
<div class="py-2 px-8 text-indigo-700 rounded-full hover:text-indigo-700 hover:bg-indigo-100
{{ request()->routeIs('user-monitoring.actions-monitoring') ? 'bg-indigo-100' : '' }}">
<p>Action Monitoring</p>
{{ request()->routeIs('user-monitoring.actions-monitoring') ? 'bg-indigo-100' : '' }}">
<p class="tab-title">Action Monitoring</p>
</div>
</a>
<a class="rounded-full focus:outline-none focus:ring-2 focus:bg-indigo-50 focus:ring-indigo-800 ml-4 sm:ml-8"
href="{{ route('user-monitoring.authentications-monitoring') }}">
<div class="py-2 px-8 text-indigo-700 rounded-full hover:text-indigo-700 hover:bg-indigo-100
{{ request()->routeIs('user-monitoring.authentications-monitoring') ? 'bg-indigo-100' : '' }}">
<p>Authentication Monitoring</p>
{{ request()->routeIs('user-monitoring.authentications-monitoring') ? 'bg-indigo-100' : '' }}">
<p class="tab-title">Authentication Monitoring</p>
</div>
</a>
</div>
<div>
<a href="https://github.com/binafy/laravel-user-monitoring"
class="focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600 mt-4 sm:mt-0
inline-flex items-start justify-start px-6 py-3 bg-indigo-700 hover:bg-indigo-600
focus:outline-none rounded items-center">
inline-flex items-start justify-start px-6 py-3 bg-indigo-700 hover:bg-indigo-600
focus:outline-none rounded items-center">
<p class="text-sm font-medium leading-none text-white mr-2">
GitHub
</p>
Expand All @@ -63,9 +96,11 @@ class="focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600 mt-4 sm:mt-0
</div>
</div>

@if(session()->has('message'))
@if (session()->has('message'))
<div class="flex items-center bg-blue-500 text-white text-sm font-bold px-4 py-3" role="alert">
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/>
</svg>
<p>{{ session()->get('message') }}</p>
</div>
@endif
Expand Down
4 changes: 2 additions & 2 deletions resources/views/visits-monitoring/index.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@extends('LaravelUserMonitoring::layouts.master')

@section('title', 'Visit Monitoring')
@section('title', 'Visits Monitoring')

@section('content')
<div class="mt-7 overflow-x-auto">
Expand Down Expand Up @@ -75,7 +75,7 @@
@csrf
@method('DELETE')

<button class="focus:ring-2 focus:ring-offset-2 focus:ring-red-300 text-sm leading-none text-red-600 py-3 px-5 bg-red-100 rounded hover:bg-red-200 focus:outline-none" type="submit">
<button class="delete-btn focus:ring-2 focus:ring-offset-2 focus:ring-red-300 text-sm leading-none text-red-600 py-3 px-5 bg-red-100 rounded hover:bg-red-200 focus:outline-none" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
</svg>
Expand Down
2 changes: 1 addition & 1 deletion src/Providers/LaravelUserMonitoringServiceProvider.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ private function publishMigrations()
private function publishViews()
{
$this->publishes([
__DIR__ . '/../../resources/views' => resource_path('views/laravel-user-monitoring'),
__DIR__ . '/../../resources/views' => resource_path('views/vendor/LaravelUserMonitoring'),
], 'laravel-user-monitoring-views');
}

Expand Down