Removes box shadows from titlebar and navigation, and replaces them with a 1px
border controlled by a new color variable.
Part of #8250.
Signed-off-by: Tim deBoer <git@tdeboer.ca>
* chore: font sizes and consistency
Stevan and I spent some time yesterday walking through the UI and trying to
address a few related issues:
- The base (default) font size is too big.
- As a result just about everything has a text-sm or -xs, or even a hardcoded
font size instead of fixing the core problem.
- Many pages have 3, 4, or even 5 font sizes, and then several variations of
font weight from light to bold.
- We've been through at least 4 design iterations, and it shows. Need to
clean up and make more of the UI consistent, and
Unfortunately, the only way to address 1+2 is to reset the default font size,
which means *everything* will need a minor font change. So, here we go! The
core philosophy of this change is:
- Regular controls like Buttons, Inputs, and text descriptions should all be
at the base (default) font size.
- The default size should be reduced from 16px to 12px. (but this would at
least be configurable now)
- Most other text (see below) should only be -lg or -sm, with only a couple
variations of weight.
This first commit changes the font sizes in Tailwind config, applies the new
default in index.html, and fixes the core components. Next commits will each
cover a different area:
Nav/form/settings pages
- Titles in text-lg, font-bold
- Breadcrumbs in text-sm but keep close button text-lg so it's clickable
- Align things between settings nav and settings pages
Tables:
- Header should be text-sm and font-semibold
- Column font regular size, except secondary lines should be text-sm and not
highlighted
- Labels text-sm
Forms:
- Field labels in font-bold
- Everything justified
- Later: bottom button bar right justified like in dialogs
Signed-off-by: Tim deBoer <git@tdeboer.ca>
* chore: apply font changes to settings
Signed-off-by: Tim deBoer <git@tdeboer.ca>
* chore: apply font changes to tables
Signed-off-by: Tim deBoer <git@tdeboer.ca>
* chore: apply font changes to forms
Signed-off-by: Tim deBoer <git@tdeboer.ca>
* chore: tests & linting
Signed-off-by: Tim deBoer <git@tdeboer.ca>
* chore: messagebox, dashboard, and accounts nav
Signed-off-by: Tim deBoer <git@tdeboer.ca>
* chore: respond to pr feedback
- Fix extensions/catalog pages.
- Increase text-sm to 11px (a little more readable and helps status bar) and
text-xs to 10px (so not too small).
- Improve status bar - refactored so selection is full height, everything is
centered correctly.
- Fix tooltip font size.
Signed-off-by: Tim deBoer <git@tdeboer.ca>
---------
Signed-off-by: Tim deBoer <git@tdeboer.ca>
Moves status colors to the color registry.
Most of this is just porting; the one addition I had to make is
StatusIcon was using a hard-coded color for things that aren't
running - which is *not* the same color as stopped/exited, etc.
To avoid changing colors elsewhere, for now I've just defined a
new 'not-running' status color, which we may want to revisit
with UX later.
Fixes#7581.
Signed-off-by: Tim deBoer <git@tdeboer.ca>
We have hard-coded colors for 'connections' in a few different places:
- Kubernetes resources - text in green-500 when connected.
- Kubernetes connection badge on list pages - green-600 for connected vs
gray-900 for disconnected.
- Authentication - green-500 for signed in vs gray-500 for signed out.
This adds two new status colors and switches these places to use them.
- 'connected': green-600
- 'disconnected': gray-500
Although 'signed in' is a slightly different thing than connected I didn't
think it merited having different names or using different colors. The
choice of green-600 and gray-500 was taking a balance of what was there +
what looks better in light mode.
Signed-off-by: Tim deBoer <git@tdeboer.ca>
Now that we've reduced the height of the main navbar items and the icons
themselves, the bar itself and item selection area look abnormally wide.
This just reduces the width by 6px, which IMHO is just enough to counteract
the effect of the changes.
Related to #6774, from comment in #6777.
Signed-off-by: Tim deBoer <git@tdeboer.ca>
Changes three things in the Input styling to reduce the changes from 1.7:
- Changes the bottom border/focus outline (stroke color) from purple to
charcoal. (one suggestion was to remove it, but that's both a bigger
change and IMHO this still provides some nice minor styling)
- Added a new input-field-bg variable so that you can customize the
regular background of the input, and set it to charcoal-800.
- The mouse-over effect was identical to focus (rounded, full border, dark
background) and was distracting if you moved the mouse over multiple
Inputs. This removes the background change by making the hover effect
transparent. This required moving transparent color to our new color
palette, and adding a not() so that the hover affect doesn't effect
focussed inputs.
Signed-off-by: Tim deBoer <git@tdeboer.ca>
There are status colors in the palette, but prior code is referring
to the color values directly. This is just cleanup to make everything
use the status color.
Adds one 'missing' status color for starting, and there is one slight
color change (degraded will go from amber-600 to the now official
amber-700), but this is not a noticeable change. I did a scan for
other references and didn't find any.
Fixes#4740.
Signed-off-by: Tim deBoer <git@tdeboer.ca>
Indigo is one of the historic colors in our palette that we're not
supposed to use, and it is finally out of the codebase. Removing
from the palette so that it doesn't get accidentally used.
Signed-off-by: Tim deBoer <git@tdeboer.ca>
I had to look at the palette for another PR and noticed that three of the old
legacy colors are no longer in use just due to natural evolution. Removing
these so they don't accidentally get used again.
Signed-off-by: Tim deBoer <git@tdeboer.ca>
there is a new setting which is hidden as if light mode is asked
it will be still displayed with dark theme
But it toggles on or off the dark theme support then we can use
dark: prefix in the codebase to make the style being specific
for the dark theme
related to https://github.com/containers/podman-desktop/issues/576
Signed-off-by: Florent Benoit <fbenoit@redhat.com>
* feat: add status dots for pods
### What does this PR do?
* Adds dots for the containers when listing a pod (podman or kubernetes)
* Hover to see the tooltip of the container name as well as the running
status
* Dots will change when the container status has changed.
* Fixes a small redirection error bug when clicking a kubernetes pod
### Screenshot/screencast of this PR
<!-- Please include a screenshot or a screencast
explaining what is doing this PR -->
### What issues does this PR fix or reference?
<!-- Include any related issues from Podman Desktop
repository (or from another issue tracker). -->
Closes https://github.com/containers/podman-desktop/issues/3925
Closes https://github.com/containers/podman-desktop/issues/4612
### How to test this PR?
<!-- Please explain steps to reproduce -->
Signed-off-by: Charlie Drage <charlie@charliedrage.com>
* update based on review
Signed-off-by: Charlie Drage <charlie@charliedrage.com>
* add outline dots
Signed-off-by: Charlie Drage <charlie@charliedrage.com>
---------
Signed-off-by: Charlie Drage <charlie@charliedrage.com>
For historical/legacy reasons we still have Tailwind blue-500 in our palette.
There are only a few references to this color and all should be replaced by
purple-500, which is in our palette and specified by the design for outlines
like these. Replacing and removing from the palette to avoid future use.
Signed-off-by: Tim deBoer <git@tdeboer.ca>
Neutral-900 was in our palette for legacy reasons, and despite a friendly
comment to not use it :), copy/paste wins and we added a new use lately. This
just replaces all uses with charcoal-900, which is almost indistinguishable
but matches other UI slightly better, and removes the color from the palette.
Signed-off-by: Tim deBoer <git@tdeboer.ca>
Two of the legacy zinc variant colors in our palette have identical rgb values in charcoal. This removes these two zinc variant colors from the palette and replaces all of the references to the identical charcoal.
- zinc-800 -> charcoal-600 (#27272a)
- zinc-900 -> charcoal-800 (#18181b)
Signed-off-by: Tim deBoer <git@tdeboer.ca>
* Updating palette + adding drop shadows
- Adding highlight shadow below titlebar
- Adding dropshadow to right of main nav
- Updating color palette to latest mockups
Signed-off-by: Máirín Duffy <duffy@redhat.com>
* Adding dropshadow to settings nav
- adding drop shadow between main nav and settings nav panel
Signed-off-by: Máirín Duffy <duffy@redhat.com>
* Adding custom dropshadows to theme & using
- Drop shadows had been using arbitrary inline shadows
- Shadows have been moved to the tailwind config js / theme
- Arbitrary shadows inline updated to use new theme shadows
Signed-off-by: Máirín Duffy <duffy@redhat.com>
---------
Signed-off-by: Máirín Duffy <duffy@redhat.com>
Co-authored-by: Máirín Duffy <mairin@users.noreply.github.com>
Discussed with Mairin when we needed a warning color elsewhere - this removes the legacy yellow color and adds the full Tailwind amber color to our palette.
Signed-off-by: Tim deBoer <git@tdeboer.ca>
Some regressions are pretty black and white. I didn't notice that Tailwind has these by default, and we use them in a few places, e.g. white text and fading out the background (black with opacity) for dialogs.
Signed-off-by: Tim deBoer <git@tdeboer.ca>
Add transparent color (missed it before).
Switch all legacy colors to be clear that they are still picking up the Tailwind color value and not defining our own.
Signed-off-by: Tim deBoer <git@tdeboer.ca>
In a previous PR #1363 we replaced 6 colors in the default Tailwind palette with our own palette [1]. There are 2 other colors that we didn't override at the time (gray and purple) because we use them a lot and the color values at each level have changed slightly.
This PR:
- Updates the palette to include the last of our official colors, gray and purple.
- Maps all existing use of these two colors to the 'closest color' variant from the new set to minimize color shift in the UI. I wrote a small script to confirm which variants should change - see mapping below. e.g. the old and new purple-200 are close so didn't need to change, but the old purple-300 is closest to the new purple-200.
- Adds all additional colors we're currently using into tailwind.config.cfg. Over time these will need to be moved 'up' into our official palette, or we stop using them and clean up the palette.
- Moves this palette from extending Tailwind's palette to replacing it. This will force us to stick with the defined palette and can't accidentally use other colors.
Purple
300 -> 200
600 -> 500
700 -> 600
800 -> 700
900 -> 800
950 -> 900
Gray
200 -> 300
300 -> 400
400 -> 700
500 -> 900
600 -> 900
700 -> 900
800 -> 900
Major step towards issue #1384.
[1] 66ae813487/gistfile1.txt
Signed-off-by: Tim deBoer <git@tdeboer.ca>
