1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-06 22:35:23 +02:00

feat(ui): Rebranding - r8s-374 (#840)

This commit is contained in:
James Player 2025-07-01 12:58:31 +12:00 committed by GitHub
parent cf5990ccba
commit c6ee9a5a52
41 changed files with 821 additions and 342 deletions

View file

@ -59,7 +59,7 @@ export function SidebarItem({
return (
<SidebarTooltip
content={
<div className="rounded bg-blue-8 be:bg-gray-8 th-highcontrast:border th-highcontrast:border-solid th-highcontrast:border-white th-highcontrast:bg-black th-dark:bg-gray-true-8">
<div className="rounded th-highcontrast:border th-highcontrast:border-solid th-highcontrast:border-white th-highcontrast:bg-black">
<Wrapper label={label}>
<ItemAnchor
href={anchorProps.href}
@ -106,7 +106,7 @@ function ItemAnchor({
className,
'text-inherit no-underline hover:text-inherit hover:no-underline focus:text-inherit focus:no-underline',
'flex h-8 w-full flex-1 items-center space-x-4 rounded-md text-sm',
'transition-colors duration-200 hover:bg-blue-5/20 be:hover:bg-gray-5/20 th-dark:hover:bg-gray-true-5/20',
'transition-colors duration-200 hover:bg-graphite-500',
{
// submenu items are always expanded (in a tooltip or in the sidebar)
'w-full justify-start px-3': isOpen || isSubMenu,

View file

@ -50,7 +50,7 @@ export function SidebarParent({
<Wrapper className="flex flex-col">
<div
className={clsx(
'w-full h-8 items-center ease-in-out transition-colors flex duration-200 hover:bg-blue-5/20 be:hover:bg-gray-5/20 th-dark:hover:bg-gray-true-5/20 rounded-md',
'w-full h-8 items-center ease-in-out transition-colors flex duration-200 hover:bg-graphite-500 rounded-md',
isSidebarOpen && 'pl-3',
// only highlight the parent when the sidebar is closed/contracted and a child item is selected
(!isSidebarOpen || !isExpanded) && anchorProps.className
@ -117,7 +117,7 @@ export function SidebarParent({
<li className="flex items-center space-x-2 text-sm mb-1">
<span>{title}</span>
</li>
<div className="bg-blue-8 be:bg-gray-8 th-dark:bg-gray-true-8 th-highcontrast:bg-black th-highcontrast:border th-highcontrast:border-solid th-highcontrast:border-white rounded">
<div className="th-highcontrast:bg-black th-highcontrast:border th-highcontrast:border-solid th-highcontrast:border-white rounded">
{children}
</div>
</ul>

View file

@ -8,7 +8,7 @@ type Props = {
export function SidebarTooltip({ children, content }: Props) {
return (
<Tippy
className="sidebar !rounded-md bg-blue-9 p-3 !opacity-100 be:bg-gray-9 th-dark:bg-gray-true-9 th-highcontrast:bg-black th-highcontrast:border th-highcontrast:border-solid th-highcontrast:border-white"
className="sidebar !rounded-md bg-graphite-600 p-3 !opacity-100 th-highcontrast:bg-black th-highcontrast:border th-highcontrast:border-solid th-highcontrast:border-white"
content={content}
delay={[0, 0]}
duration={[0, 0]}

View file

@ -22,7 +22,7 @@ export type PathOptions = {
export function useSidebarSrefActive(
to: string,
// default values are the classes used in the sidebar for an active item
activeClassName: string = 'bg-blue-5/25 be:bg-gray-5/25 th-dark:bg-gray-true-5/25',
activeClassName: string = 'bg-graphite-500',
params: Partial<Record<string, string>> = {},
options: TransitionOptions = {},
pathOptions: PathOptions = {