Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-25 00:09:40 +02:00
Code Issues Releases Activity

feat(sidebar): add dark theme colors [EE-3666] (#7414)

Browse source
This commit is contained in:
Chaim Lev-Ari 2022-08-10 07:12:20 +03:00 • committed by GitHub
parent fb3a31a4fd
commit c3ce4d8b53
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
83 changed files with 1738 additions and 1200 deletions
Download patch file Download diff file Expand all files Collapse all files

57
app/react/components/buttons/Button.stories.tsx
View file

@ -9,6 +9,63 @@ export default {
title: 'Components/Buttons/Button',
} as Meta;
export function DifferentTheme() {
const colors = [
'primary',
'secondary',
'success',
'danger',
'dangerlight',
'warning',
'light',
'link',
] as const;
const themes = ['light', 'dark', 'highcontrast'] as const;
const states = ['', 'disabled'] as const;
return (
<table>
<thead>
<tr>
<th>Color/Theme</th>
{themes.map((theme) => (
<th key={theme} className="text-center">
{theme}
</th>
))}
</tr>
</thead>
<tbody>
{colors.map((color) => (
<tr key={color}>
<td>{color}</td>
{themes.map((theme) => (
<td
key={theme}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
theme={theme}
className="p-5"
style={{ background: 'var(--bg-body-color)' }}
>
{states.map((state) => (
<Button
color={color}
key={state}
disabled={state === 'disabled'}
>
{state} {color} button
</Button>
))}
</td>
))}
</tr>
))}
</tbody>
</table>
);
}
function Template({
onClick,
color,

9
app/react/components/buttons/Button.tsx
View file

@ -58,14 +58,7 @@ export function Button({
/* eslint-disable-next-line react/button-has-type */
type={type}
disabled={disabled}
className={clsx(
{
'opacity-60': disabled,
},
`btn btn-${color}`,
sizeClass(size),
className
)}
className={clsx(`btn btn-${color}`, sizeClass(size), className)}
onClick={onClick}
title={title}
// eslint-disable-next-line react/jsx-props-no-spreading