mirror of
https://github.com/podman-desktop/podman-desktop
synced 2026-04-21 17:47:22 +00:00
bd6bea68f7
* 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>
85 lines
2.5 KiB
JavaScript
85 lines
2.5 KiB
JavaScript
/**********************************************************************
|
|
* Copyright (C) 2022-2024 Red Hat, Inc.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
***********************************************************************/
|
|
|
|
const tailwindColors = require('tailwindcss/colors')
|
|
|
|
import colorPalette from './tailwind-color-palette.json';
|
|
|
|
module.exports = {
|
|
content: [
|
|
'packages/renderer/index.html',
|
|
'packages/renderer/src/**/*.{svelte,ts,css}',
|
|
'packages/ui/src/**/*.{svelte,ts,css}',
|
|
],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
boxShadow: {
|
|
"titlebar": 'inset 0px -1px 0px 0 rgb(54 54 61 / 0.6)', // highlight for bottom of titlebar
|
|
"pageheader": 'inset 0 0px 10px 0 rgb(0 0 0 / 0.4)',
|
|
"nav": 'inset 7px -4px 6px 0 rgb(0 0 0 / 0.15)',
|
|
},
|
|
transitionProperty: {
|
|
width: 'width',
|
|
},
|
|
width: {
|
|
'leftnavbar': '48px',
|
|
'leftsidebar': '225px',
|
|
},
|
|
minWidth: {
|
|
'leftnavbar': '48px',
|
|
'leftsidebar': '225px',
|
|
},
|
|
},
|
|
fontSize: {
|
|
'xs': '10px',
|
|
'sm': '11px',
|
|
'base': '12px',
|
|
'lg': '14px',
|
|
'xl': '16px',
|
|
'2xl': '18px',
|
|
'3xl': '20px',
|
|
'4xl': '24px',
|
|
'5xl': '30px',
|
|
'6xl': '36px',
|
|
},
|
|
colors: {
|
|
// import colors from the color palette
|
|
...colorPalette,
|
|
|
|
// The remaining colors below are not part of our palette and are only here
|
|
// to maintain existing code. No new use.
|
|
'zinc': {
|
|
100: tailwindColors.zinc[100],
|
|
200: tailwindColors.zinc[200],
|
|
300: tailwindColors.zinc[300],
|
|
400: tailwindColors.zinc[400],
|
|
600: tailwindColors.zinc[600],
|
|
700: tailwindColors.zinc[700],
|
|
},
|
|
'violet': {
|
|
50: tailwindColors.violet[50],
|
|
400: tailwindColors.violet[400],
|
|
500: tailwindColors.violet[500],
|
|
600: tailwindColors.violet[600],
|
|
700: tailwindColors.violet[700],
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|