Skip to content

Commit

Permalink
Merge pull request #284 from ploi/darkmode-updates
Browse files Browse the repository at this point in the history 
Darkmode fine-tuning
  • Loading branch information
@Cannonb4ll
Cannonb4ll authored Sep 23, 2024
2 parents 2366006 + 5664251 commit 5cf33ec
Show file tree
Hide file tree
Showing 8 changed files with 82 additions and 64 deletions.
97 changes: 50 additions & 47 deletions app/Filament/Pages/Colors.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
namespace App\Filament\Pages;

use App\Enums\UserRole;
use Filament\Forms\Components\Toggle;
use Filament\Forms\Form;
use App\Settings\ColorSettings;
use Filament\Pages\SettingsPage;
Expand Down Expand Up @@ -53,55 +54,57 @@ public function form(Form $form): Form
{
return $form->schema(
[
Section::make()
->schema(
[
FileUpload::make('logo')
->label(trans('theme.logo'))
->image()
->helperText(trans('theme.logo-helper-text'))
->disk('public')
// ->imageResizeTargetHeight('64')
->maxSize(1024)
->getUploadedFileNameForStorageUsing(
function (TemporaryUploadedFile $file): string {
return (string) str($file->getClientOriginalName())->prepend('logo-');
}
)
->getUploadedFileNameForStorageUsing(
function ($record) {
return storage_path('app/public/'.app(ColorSettings::class)->logo);
}
),
FileUpload::make('favicon')
->label(trans('theme.favicon'))
->image()
->disk('public')
// ->imageResizeTargetHeight('64')
// ->imageResizeTargetWidth('64')
->maxSize(1024)
->getUploadedFileNameForStorageUsing(
function ($record) {
return storage_path('app/public/favicon.png');
}
)
->getUploadedFileNameForStorageUsing(
function (TemporaryUploadedFile $file): string {
return (string)'favicon.png';
}
),
TextInput::make('fontFamily')
->label(trans('theme.font-family'))
->placeholder('e.g. Roboto')
->required()
->helperText(new HtmlString(trans('theme.font-family-helper-text'))),
Section::make()
->schema(
[
FileUpload::make('logo')
->label(trans('theme.logo'))
->image()
->helperText(trans('theme.logo-helper-text'))
->disk('public')
// ->imageResizeTargetHeight('64')
->maxSize(1024)
->getUploadedFileNameForStorageUsing(
function (TemporaryUploadedFile $file): string {
return (string)str($file->getClientOriginalName())->prepend('logo-');
}
)
->getUploadedFileNameForStorageUsing(
function ($record) {
return storage_path('app/public/' . app(ColorSettings::class)->logo);
}
),
FileUpload::make('favicon')
->label(trans('theme.favicon'))
->image()
->disk('public')
// ->imageResizeTargetHeight('64')
// ->imageResizeTargetWidth('64')
->maxSize(1024)
->getUploadedFileNameForStorageUsing(
function ($record) {
return storage_path('app/public/favicon.png');
}
)
->getUploadedFileNameForStorageUsing(
function (TemporaryUploadedFile $file): string {
return (string)'favicon.png';
}
),
TextInput::make('fontFamily')
->label(trans('theme.font-family'))
->placeholder('e.g. Roboto')
->required()
->helperText(new HtmlString(trans('theme.font-family-helper-text'))),

ColorPicker::make('primary')
->label(trans('theme.primary-color'))
->default('#2563EB'),
ColorPicker::make('primary')
->label(trans('theme.primary-color'))
->default('#2563EB'),

]
)->columns(),
Toggle::make('darkmode')
->helperText('Allow darkmode on the frontend')
]
)->columns(),
]
);
}
Expand Down
1 change: 1 addition & 0 deletions app/Settings/ColorSettings.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ class ColorSettings extends Settings
public string|null $favicon;
public string|null $logo;
public string|null $fontFamily;
public bool $darkmode;

public static function group(): string
{
Expand Down
11 changes: 11 additions & 0 deletions database/settings/2024_09_23_062400_add_darkmode.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<?php

use Spatie\LaravelSettings\Migrations\SettingsMigration;

return new class extends SettingsMigration
{
public function up(): void
{
$this->migrator->add('colors.darkmode', true);
}
};
2 changes: 1 addition & 1 deletion resources/views/components/app.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ function updateTheme() {

<main class="flex-1 h-full col-span-6 lg:col-span-5 lg:border-l lg:pl-5 dark:lg:border-white/10">
<div class="pb-4">
<ul class="flex items-center space-x-0.5 text-sm font-medium text-gray-600">
<ul class="flex items-center space-x-0.5 text-sm font-medium text-gray-600 dark:text-gray-500">
@foreach(array_filter($breadcrumbs) as $breadcrumb)
@if(!$loop->first)
<li>
Expand Down
4 changes: 2 additions & 2 deletions resources/views/item.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ class="float-right inline-flex items-center justify-center h-8 px-3 pt-1.5 pr-8

<div class="border-t dark:border-white/10"></div>

<div class="p-4 prose break-words dark:text-gray-600">
<div class="p-4 prose break-words dark:text-gray-400">
{!! str($item->content)->markdown()->sanitizeHtml() !!}
</div>
</x-card>
Expand Down Expand Up @@ -144,7 +144,7 @@ class="text-gray-500 fill-gray-500 float-right">
@foreach($activities as $activity)
<li class="flex space-x-3">
<div
class="relative flex items-center justify-center flex-shrink-0 w-8 h-8 text-gray-400 border border-gray-200 rounded-full bg-gray-50">
class="relative flex items-center justify-center flex-shrink-0 w-8 h-8 text-gray-400 border border-gray-200 dark:border-gray-600 rounded-full bg-gray-50 dark:bg-gray-800">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5"
Expand Down
17 changes: 10 additions & 7 deletions resources/views/livewire/header.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
<a class="text-2xl font-semibold tracking-tight"
href="{{ route('home') }}">
@if(!is_null($logo) && file_exists($logoFile = storage_path('app/public/'.$logo)))
<img src="{{ asset('storage/'.$logo) }}?v={{ md5_file($logoFile) }}" alt="{{ config('app.name') }}" class="h-8"/>
<img src="{{ asset('storage/'.$logo) }}?v={{ md5_file($logoFile) }}" alt="{{ config('app.name') }}"
class="h-8"/>
@else
{{ config('app.name') }}
@endif
Expand Down Expand Up @@ -58,17 +59,19 @@
{{ $this->submitItemAction }}
</li>

<li>
<x-theme-toggle />
</li>
@if(app(\App\Settings\ColorSettings::class)->darkmode)
<li>
<x-theme-toggle/>
</li>
@endif
</ul>

<!-- Hamburger -->
<div class="lg:hidden">
<button
class="text-white flex items-center justify-center w-10 h-10 -mr-2 transition rounded-full focus:outline-none"
x-on:click="open = !open"
type="button">
class="text-white flex items-center justify-center w-10 h-10 -mr-2 transition rounded-full focus:outline-none"
x-on:click="open = !open"
type="button">
<svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M4.75 5.75H19.25"/>
Expand Down
12 changes: 6 additions & 6 deletions resources/views/partials/navbar.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<a
@class([
'flex items-center h-10 px-2 space-x-2 transition rounded-lg',
'text-white bg-brand-500 dark:bg-white/5 dark:hover:bg-white/5 dark:text-brand-500' => request()->is('/'),
'text-white bg-brand-500 dark:bg-white/5 dark:hover:bg-white/5 dark:text-brand-400' => request()->is('/'),
'hover:bg-gray-500/5 focus:bg-brand-500/10 focus:text-brand-600 focus:outline-none dark:hover:bg-white/5 dark:text-brand-500' => !request()->is('/')
])
href="{{ route('home') }}">
Expand All @@ -22,7 +22,7 @@ class="font-normal {{ !request()->is('/') ? 'text-gray-900 dark:text-gray-200' :
<a
@class([
'flex items-center h-10 px-2 space-x-2 transition rounded-lg',
'text-white bg-brand-500 dark:bg-white/5 dark:hover:bg-white/5 dark:text-brand-500' => request()->is('my'),
'text-white bg-brand-500 dark:bg-white/5 dark:hover:bg-white/5 dark:text-brand-400' => request()->is('my'),
'hover:bg-gray-500/5 focus:bg-brand-500/10 focus:text-brand-600 focus:outline-none dark:hover:bg-white/5 dark:focus:text-gray-200 dark:text-gray-200' => !request()->is('my')
])
href="{{ route('my') }}">
Expand All @@ -36,7 +36,7 @@ class="font-normal {{ !request()->is('/') ? 'text-gray-900 dark:text-gray-200' :
<a
@class([
'flex items-center h-10 px-2 space-x-2 transition rounded-lg',
'text-white bg-brand-500 dark:bg-white/5 dark:hover:bg-white/5 dark:text-brand-500' => request()->is('profile'),
'text-white bg-brand-500 dark:bg-white/5 dark:hover:bg-white/5 dark:text-brand-400' => request()->is('profile'),
'hover:bg-gray-500/5 focus:bg-brand-500/10 focus:text-brand-600 focus:outline-none dark:hover:bg-white/5 dark:focus:text-gray-200 dark:text-gray-200' => !request()->is('profile')
])
href="{{ route('profile') }}">
Expand All @@ -51,7 +51,7 @@ class="font-normal {{ !request()->is('/') ? 'text-gray-900 dark:text-gray-200' :
<a
@class([
'flex items-center h-10 px-2 space-x-2 transition rounded-lg',
'text-white bg-brand-500 dark:bg-white/5 dark:hover:bg-white/5 dark:text-brand-500' => request()->is('changelog*'),
'text-white bg-brand-500 dark:bg-white/5 dark:hover:bg-white/5 dark:text-brand-400' => request()->is('changelog*'),
'hover:bg-gray-500/5 focus:bg-brand-500/10 focus:text-brand-600 focus:outline-none dark:hover:bg-white/5 dark:focus:text-gray-200 dark:text-gray-200' => !request()->is('changelog*')
])
href="{{ route('changelog') }}">
Expand Down Expand Up @@ -85,7 +85,7 @@ class="flex items-center h-2 px-2 space-x-2 transition rounded-lg mt-5"
title="{{ $project->title }}"
@class([
'flex items-center h-10 px-2 space-x-2 transition rounded-lg',
'text-white bg-brand-500 dark:bg-white/5 dark:hover:bg-white/5 dark:text-brand-500' => request()->segment(2) === $project->slug,
'text-white bg-brand-500 dark:bg-white/5 dark:hover:bg-white/5 dark:text-brand-400' => request()->segment(2) === $project->slug,
'hover:bg-gray-500/5 focus:bg-brand-500/10 focus:text-brand-600 focus:outline-none dark:hover:bg-white/5 dark:focus:text-gray-200 dark:text-gray-200' => request()->segment(2) !== $project->slug
])
href="{{ route('projects.show', $project) }}">
Expand Down Expand Up @@ -113,7 +113,7 @@ class="w-4 h-4 {{ request()->segment(2) == $project->slug ? '' : 'text-primary'
</div>

<div id="dropdown-cta" class="p-4 mt-6 bg-gray-100 rounded-lg dark:bg-white/5" role="alert">
<p class="text-sm text-gray-500">
<p class="text-sm text-gray-500 dark:text-gray-400">
<a href="https://github.com/ploi/roadmap" target="_blank"
class="font-semibold border-b border-dotted">Open-source</a>
roadmapping software by
Expand Down
2 changes: 1 addition & 1 deletion resources/views/welcome.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<x-app>
@if($text = app(\App\Settings\GeneralSettings::class)->welcome_text)
<div class="prose mb-4 dark:text-gray-600">{!! $text !!}</div>
<div class="prose mb-4 dark:text-gray-500">{!! $text !!}</div>
@endif
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
@foreach(app(\App\Settings\GeneralSettings::class)->dashboard_items as $item)
Expand Down

0 comments on commit 5cf33ec

Please sign in to comment.