mirror of
https://github.com/portainer/portainer.git
synced 2025-08-09 15:55:23 +02:00
feat(sidebar): add dark theme colors [EE-3666] (#7414)
This commit is contained in:
Chaim Lev-Ari
GitHub
parent
fb3a31a4fd
commit
c3ce4d8b53
83 changed files with 1738 additions and 1200 deletions
|
|
@ -1,8 +0,0 @@
|
|||
.selected .mask-icon {
|
||||
color: var(--selected-item-color);
|
||||
}
|
||||
|
||||
.mask-icon {
|
||||
color: var(--bg-boxselector-color);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import clsx from 'clsx';
|
||||
|
||||
import styles from './KaaSIcon.module.css';
|
||||
|
||||
export interface Props {
|
||||
selected?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function KaaSIcon({ selected, className }: Props) {
|
||||
return (
|
||||
<span
|
||||
className={clsx('fa-stack fa-1x', styles.root, className, {
|
||||
[styles.selected]: selected,
|
||||
})}
|
||||
>
|
||||
<i className="fas fa-cloud fa-stack-2x" />
|
||||
<i className={clsx('fas fa-dharmachakra fa-stack-1x', styles.maskIcon)} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,34 +1,29 @@
|
|||
import { FeatureId } from '@/portainer/feature-flags/enums';
|
||||
|
||||
import { KaaSIcon, Props as KaaSIconProps } from './KaaSIcon';
|
||||
import KaaSIcon from './kaas-icon.svg?c';
|
||||
|
||||
interface WizardEnvironmentOption {
|
||||
id: string;
|
||||
title: string;
|
||||
icon: string | { ({ selected, className }: KaaSIconProps): JSX.Element };
|
||||
description: string;
|
||||
featureId?: FeatureId;
|
||||
}
|
||||
|
||||
export const environmentTypes: WizardEnvironmentOption[] = [
|
||||
export const environmentTypes = [
|
||||
{
|
||||
id: 'docker',
|
||||
title: 'Docker',
|
||||
icon: 'fab fa-docker',
|
||||
description:
|
||||
'Connect to Docker Standalone / Swarm via URL/IP, API or Socket',
|
||||
featureId: undefined,
|
||||
},
|
||||
{
|
||||
id: 'kubernetes',
|
||||
title: 'Kubernetes',
|
||||
icon: 'fas fa-dharmachakra',
|
||||
description: 'Connect to a kubernetes environment via URL/IP',
|
||||
featureId: undefined,
|
||||
},
|
||||
{
|
||||
id: 'aci',
|
||||
title: 'ACI',
|
||||
description: 'Connect to ACI environment via API',
|
||||
icon: 'fab fa-microsoft',
|
||||
featureId: undefined,
|
||||
},
|
||||
{
|
||||
id: 'nomad',
|
||||
|
|
@ -44,4 +39,4 @@ export const environmentTypes: WizardEnvironmentOption[] = [
|
|||
icon: KaaSIcon,
|
||||
featureId: FeatureId.KAAS_PROVISIONING,
|
||||
},
|
||||
];
|
||||
] as const;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="auto" height="auto" viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M11 0C6.78119 0 3.3251 3.26563 3.02165 7.40697C1.24457 8.17346 0 9.9404 0 12C0 14.7614 2.23858 17 5 17H16.5C19.5376 17 22 14.5376 22 11.5C22 9.30813 20.7183 7.41775 18.8658 6.53369C18.1766 2.81531 14.9177 0 11 0ZM11.4999 4.40625C11.4999 4.13011 11.276 3.90625 10.9999 3.90625C10.7237 3.90625 10.4999 4.13011 10.4999 4.40625V4.70044C9.67915 4.79483 8.92827 5.11878 8.31307 5.60645L8.1049 5.39828C7.90964 5.20302 7.59306 5.20302 7.39779 5.39828C7.20253 5.59354 7.20253 5.91013 7.39779 6.10539L7.60597 6.31356C7.11829 6.92876 6.79434 7.67964 6.69995 8.50036H6.40576C6.12962 8.50036 5.90576 8.72422 5.90576 9.00036C5.90576 9.2765 6.12962 9.50036 6.40576 9.50036H6.69996C6.79437 10.3211 7.11834 11.0719 7.60602 11.6871L7.39779 11.8953C7.20253 12.0906 7.20253 12.4072 7.39779 12.6024C7.59306 12.7977 7.90964 12.7977 8.1049 12.6024L8.31314 12.3942C8.92832 12.8819 9.67918 13.2058 10.4999 13.3002V13.5945C10.4999 13.8706 10.7237 14.0945 10.9999 14.0945C11.276 14.0945 11.4999 13.8706 11.4999 13.5945V13.3002C12.3206 13.2057 13.0714 12.8818 13.6866 12.3942L13.8948 12.6024C14.0901 12.7977 14.4067 12.7977 14.602 12.6024C14.7972 12.4072 14.7972 12.0906 14.602 11.8953L14.3937 11.687C14.8813 11.0719 15.2053 10.321 15.2997 9.50036H15.594C15.8701 9.50036 16.094 9.2765 16.094 9.00036C16.094 8.72422 15.8701 8.50036 15.594 8.50036H15.2997C15.2053 7.67966 14.8814 6.92881 14.3937 6.31363L14.602 6.10539C14.7972 5.91013 14.7972 5.59354 14.602 5.39828C14.4067 5.20302 14.0901 5.20302 13.8948 5.39828L13.6866 5.60651C13.0714 5.11883 12.3206 4.79486 11.4999 4.70045V4.40625ZM10.4999 5.70917C9.95399 5.7914 9.45154 6.00621 9.02637 6.31975L10.4999 7.79326V5.70917ZM8.31926 7.02685C8.00572 7.45203 7.79091 7.95448 7.70868 8.50036H9.79277L8.31926 7.02685ZM7.7087 9.50036C7.79095 10.0462 8.00576 10.5487 8.31931 10.9738L9.79277 9.50036H7.7087ZM9.02643 11.6809C9.4516 11.9944 9.95402 12.2092 10.4999 12.2914V10.2075L9.02643 11.6809ZM11.4999 12.2914C12.0457 12.2092 12.5481 11.9944 12.9733 11.6809L11.4999 10.2075V12.2914ZM13.6804 10.9738C13.9939 10.5486 14.2087 10.0462 14.2909 9.50036H12.207L13.6804 10.9738ZM14.2909 8.50036C14.2087 7.95451 13.9939 7.45208 13.6804 7.02692L12.207 8.50036H14.2909ZM12.9733 6.3198L11.4999 7.79326V5.70919C12.0457 5.79144 12.5482 6.00625 12.9733 6.3198Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -1,27 +1,32 @@
|
|||
.optionTile {
|
||||
.root {
|
||||
--selected-item-color: var(--blue-2);
|
||||
@apply border border-solid;
|
||||
@apply bg-gray-2 border-gray-5 text-black;
|
||||
@apply th-dark:bg-gray-iron-10 th-dark:border-gray-neutral-8 th-dark:text-white;
|
||||
|
||||
display: block;
|
||||
width: 200px;
|
||||
|
||||
min-height: 300px;
|
||||
|
||||
border-radius: 5px;
|
||||
padding: 25px 20px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 3px 10px -2px rgb(161 170 166 / 60%);
|
||||
box-shadow: var(--shadow-boxselector-color);
|
||||
|
||||
margin: 0;
|
||||
display: block;
|
||||
width: 200px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.feature {
|
||||
--selected-item-color: var(--blue-2);
|
||||
border: 1px solid rgb(163, 163, 163);
|
||||
}
|
||||
|
||||
.feature:hover {
|
||||
box-shadow: 0 3px 10px -2px rgb(161 170 166 / 80%);
|
||||
border: 1px solid var(--blue-2);
|
||||
border-color: var(--blue-2);
|
||||
color: #337ab7;
|
||||
box-shadow: 0 3px 10px -2px rgb(161 170 166 / 80%);
|
||||
}
|
||||
|
||||
.teaser {
|
||||
border: 2px solid var(--BE-only) !important;
|
||||
@apply border-2;
|
||||
border-color: var(--BE-only);
|
||||
color: var(--text-muted-color);
|
||||
}
|
||||
|
||||
|
|
@ -29,14 +34,10 @@
|
|||
box-shadow: 0 3px 10px -2px rgb(161 170 166 / 80%);
|
||||
}
|
||||
|
||||
.active:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #337ab7;
|
||||
color: #fff;
|
||||
border: 1px solid var(--blue-2);
|
||||
@apply bg-blue-3 border-blue-6;
|
||||
@apply th-dark:bg-blue-10 th-dark:border-blue-7;
|
||||
|
||||
box-shadow: 0 3px 10px -2px rgb(161 170 166 / 80%);
|
||||
}
|
||||
|
||||
|
|
@ -45,5 +46,5 @@
|
|||
}
|
||||
|
||||
.icon-component {
|
||||
font-size: 40px;
|
||||
font-size: 80px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export function Option({
|
|||
return (
|
||||
<button
|
||||
className={clsx(
|
||||
styles.optionTile,
|
||||
styles.root,
|
||||
isLimited ? styles.teaser : styles.feature,
|
||||
'border-0',
|
||||
{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue