Conversation
|
|
Simrayz
added
design
frontend
Simrayz
force-pushed
the
chore/1262-tailwind-v4-upgrade
branch
from
d2899f9 to
5d7240b
Compare
Test results 6 files 828 suites 1m 39s ⏱️ Results for commit 754f81e. ♻️ This comment has been updated with latest results. |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #1723 +/- ##
==========================================
+ Coverage 80.16% 80.75% +0.58%
==========================================
Files 135 132 -3
Lines 6318 6323 +5
==========================================
+ Hits 5065 5106 +41
+ Misses 1253 1217 -36 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Simrayz
force-pushed
the
chore/1262-tailwind-v4-upgrade
branch
from
5d7240b to
8032875
Compare
There was a problem hiding this comment.
It's a draft, this is the easily noticeable problems:
Global header:
- the horizontal lines in the user menu are too long and split into two parts
User preferences:
-
Argus theme is missing from drop down and I get the warning "2026-01-14 14:28:45,660 argus.htmx.themes.utils WARNING Themes in settings are out of sync with themes installed"
Nothing seems to be broken in the styleguide. Nothing else looks weird except the dark theme has even worse contrast than before.
|
Also, it appears that djlint at github-actions differs from the version run by precommit 😮💨 |
Simrayz
force-pushed
the
chore/1262-tailwind-v4-upgrade
branch
from
8032875 to
f829de4
Compare
They're the same length to me, but split in two, which I'll fix 
The tabs and dropdowns should be fixed, as I spent quite some time fixing them: 
Are you using the correct tailwind-cli, generated css and did a hard refresh etc?
I'll look into fixing the broken Argus theme, and do some adjustments to make the dark theme to look as expected again. |
Simrayz
force-pushed
the
chore/1262-tailwind-v4-upgrade
branch
3 times, most recently
from
f45543e to
cd5152c
Compare
Simrayz
force-pushed
the
chore/1262-tailwind-v4-upgrade
branch
from
cd5152c to
9ee9e0e
Compare
|
I have addressed the problems identified in the first quick-pass:
|
|
I see this now... anyone else? 
|
|
The border is so discreet it annoys the eyes. 
In comparison: 
|
Daisy just made their base-colors quite unusable... but I increased it to base-300 instead. Does that work for you? 
|
It only happens when the version number is so long that it does'nt fit, causing the menu to overflow. Shouldn't be an issue in a non-developer environment, but looking into it now 👀 |
| @@ -1,5 +1,5 @@ | |||
| .card-base { | |||
| @apply border border-base-200 bg-base-100; | |||
| @apply border border-base-300 bg-base-100; | |||
| <div class="relative isolate flex justify-center gap-x-4 overflow-hidden bg-red-700 px-4 py-1.5"> | ||
| <div class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl" | ||
| aria-hidden="true"> | ||
| <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-red-100 to-red-950 opacity-30" |
There was a problem hiding this comment.
What's the purpose of this entire div (one of two even)? The banner message seems to be working just fine without it.
There was a problem hiding this comment.
I'm not sure, I just changed the class from bg-gradier-* to bg-linear-* to match the new Tailwind spec
Simrayz
force-pushed
the
chore/1262-tailwind-v4-upgrade
branch
2 times, most recently
from
a2c7bae to
b24d8cc
Compare
Simrayz
force-pushed
the
chore/1262-tailwind-v4-upgrade
branch
from
b24d8cc to
a1971d5
Compare
|
@hmpf I have added fixes for theme generation, and also had to make some minor changes to how the severity colors are handled. The relevant commits are:
|
hmpf
left a comment
hmpf
left a comment
There was a problem hiding this comment.
Looks good, I'll do a manual test with a new theme to check that bit.
There was a problem hiding this comment.
I would mention this file in the docs, for ppl that want to swap out the severity colors.
There was a problem hiding this comment.
.. and that the severity color variables could also be overridden in themes.
There was a problem hiding this comment.
Done 🙂 Also changed documentation regarding tailwind overrides, as Tailwind V4 requires defining these as css variables instead of as config.
|
johannaengland
left a comment
johannaengland
left a comment
There was a problem hiding this comment.
Highlighting which incident we're hovering over disappear in this PR:
Before:
After:
The lines between the footer elements are barely visible:
Before:
After:
Not sure how relevant it is, but the line thickness between the different segments in the user dropdown changes:
Before:
After:
The button color in the user preference page changes (when they are greyed out):
Before:
After:
The line grouping time recurrences on the timeslots page is much less visible:
Before:
After:
| ================== | ||
|
|
||
| How to customize the look: | ||
| How to choose which themes to be made available |
There was a problem hiding this comment.
It is a bit unclear to me what "to be made available" means
| 1. Make sure the browser is in light mode if making a light theme, or dark mode | ||
| if making a dark theme. | ||
| 2. Choose a name that is pure ASCII, and don't reuse any of the names that | ||
| comes pre-configured. Save the generated CSS to some file. |
There was a problem hiding this comment.
| comes pre-configured. Save the generated CSS to some file. | |
| come pre-configured. Save the generated CSS to a file. |
| --noise: 0; | ||
| } | ||
|
|
||
| The stuff starting with ``--`` is css-variables. |
There was a problem hiding this comment.
| The stuff starting with ``--`` is css-variables. | |
| The lines starting with ``--`` are css-variables. |
|
|
||
| The stuff starting with ``--`` is css-variables. | ||
|
|
||
| There are two different methods to install generated themes. |
There was a problem hiding this comment.
| There are two different methods to install generated themes. | |
| There are two different methods to install generated themes: |
| }, | ||
| ] | ||
|
|
||
| Make the above one of the entries in the :setting:`DAISYUI_THEMES` setting and |
There was a problem hiding this comment.
This doesn't really make sense, since the example is a whole DAISYUI_THEMES
| result = get_theme_names() | ||
| self.assertEqual(result, set(theme_names_from_setting)) | ||
|
|
||
| def test_get_theme_names_if_theme_missing_may_raise_exception(self): |
There was a problem hiding this comment.
| def test_get_theme_names_if_theme_missing_may_raise_exception(self): | |
| def test_get_theme_names_if_theme_missing_will_raise_exception(self): |
github-project-automation
bot
moved this to ♻ Changes requested
in Argus development, public
4 participants
Scope and purpose
Resolves #1262
This PR upgrades the frontend styling from Tailwind CSS v3 to v4 and DaisyUI v4 to v5.
NOTE: Most changes are straightforward (class renames, variable syntax). The compatibility CSS in 12-daisy-compat.css restores v4 styling where v5 changed defaults we want to keep
How to test
make upgrade-tailwindandmake tailwind(should already be commited, but just in case)Contributor Checklist
Every pull request should have this checklist filled out, no matter how small it is.
More information about contributing to Argus can be found in the
Development docs.