Skip to content

fix: update icon styles and adjust tertiary text color in light mode #173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
yasha-meursault wants to merge 2 commits into
base: dev
Choose a base branch
from
Draft

fix: update icon styles and adjust tertiary text color in light mode #173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
299a5b2
fix: update icon styles and adjust tertiary text color in light mode
yasha-meursault Jun 26, 2026
d0e5cc6
small fix
yasha-meursault Jul 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions apps/app/components/Sidebar/AppSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ const SidebarLoginStatus: FC = () => {
onClick={() => { if (isReady) openAuthDialog() }}
>
<div className="flex aspect-square size-6 items-center justify-center rounded-full bg-secondary-400 shrink-0">
<LockIcon className="size-3.5 text-secondary-text transition-colors group-hover/menu-button:text-primary-text" />
<LockIcon className="size-3.5" />
</div>
<div className="grid flex-1 text-left leading-tight min-w-0 group-data-[collapsible=icon]:hidden">
<span className="truncate text-sm font-semibold text-secondary-text transition-colors group-hover/menu-button:text-primary-text">Log in</span>
Expand Down Expand Up @@ -155,7 +155,7 @@ const SidebarLoginStatus: FC = () => {
{label && <span className="truncate text-sm font-semibold text-secondary-text transition-colors group-hover/menu-button:text-primary-text">{label}</span>}
{idShortWithTooltip}
</div>
<ChevronsUpDown className="ml-auto size-4 text-secondary-text shrink-0 transition-colors group-hover/menu-button:text-primary-text group-data-[collapsible=icon]:hidden" />
<ChevronsUpDown className="ml-auto size-4 shrink-0 group-data-[collapsible=icon]:hidden" />
</SidebarMenuButton>
</PopoverTrigger>
<PopoverContent
Expand Down Expand Up @@ -289,7 +289,7 @@ const MoreMenu: FC = () => {
target="_blank"
className="group flex items-center gap-2 rounded-md px-3 py-2 text-sm text-secondary-text hover:text-primary-text hover:bg-secondary-500 transition-colors"
>
<item.icon className="h-4 w-4" />
<item.icon className="h-4 w-4 text-primary-text" />
<span className="truncate">{item.name}</span>
<ArrowUpRight className="ml-auto h-4 w-4 opacity-60 transition-[opacity,transform] duration-200 ease-out group-hover:opacity-100 group-hover:scale-110" />
</Link>
Expand Down
4 changes: 2 additions & 2 deletions apps/app/components/Sidebar/SidebarIcons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export const LockIcon: FC<{ className?: string }> = ({ className }) => (

export const ScanFingerprintIcon: FC<{ className?: string }> = ({ className }) => (
<span className="relative inline-flex">
<Fingerprint strokeWidth={2} className={`${className ?? ""} text-secondary-text`} />
<Fingerprint strokeWidth={2} aria-hidden className={`${className ?? ""} absolute left-0 top-0 text-primary-text [clip-path:inset(100%_0_0_0)] transition-[clip-path] duration-[600ms] ease-out group-hover/menu-button:[clip-path:inset(0%_0_0_0)]`} />
<Fingerprint strokeWidth={2} className={className} />
<Fingerprint strokeWidth={2} aria-hidden className={`${className ?? ""} absolute left-0 top-0 text-primary-400! [clip-path:inset(100%_0_0_0)] transition-[clip-path] duration-[600ms] ease-out group-hover/menu-button:[clip-path:inset(0%_0_0_0)]`} />
</span>
)
2 changes: 1 addition & 1 deletion apps/app/components/shadcn/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -434,7 +434,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
)
}

const SIDEBAR_MENU_BUTTON_BASE = "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm text-secondary-text ring-sidebar-ring outline-hidden group-has-data-[sidebar=menu-action]/menu-item:pr-8 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:animate-press-down-weak active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate"
const SIDEBAR_MENU_BUTTON_BASE = "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm text-secondary-text ring-sidebar-ring outline-hidden group-has-data-[sidebar=menu-action]/menu-item:pr-8 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:animate-press-down-weak active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-sidebar-foreground [&>span:last-child]:truncate"

const SIDEBAR_MENU_BUTTON_VARIANTS: Record<string, string> = {
outline: "bg-sidebar ring-1 ring-sidebar-border hover:ring-1 hover:ring-sidebar-border",
Expand Down
2 changes: 1 addition & 1 deletion apps/app/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@
--ls-colors-primary-800: 25, 90, 165;
--ls-colors-primary-900: 20, 70, 135;
--ls-colors-primary-text: 9, 11, 12;
--ls-colors-text-tertiary: 103, 120, 124;
--ls-colors-text-tertiary: 150, 165, 168;
--ls-colors-buttonTextColor: 255, 255, 255;
--ls-colors-actionButtonColor: 39, 142, 246;
--ls-colors-logo: 9, 11, 12;
Expand Down