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:
parent
cf5990ccba
commit
c6ee9a5a52
41 changed files with 821 additions and 342 deletions
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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]}
|
||||
|
|
|
@ -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 = {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue