iarv/vscode-front-matter
1
0
Fork 1
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-03-28 17:42:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

#635 - Fix navigation theming issues

Browse Source
This commit is contained in:
Elio Struyf
2023-08-25 13:23:58 +02:00
parent 16762a5fa5
commit 4c7d5bacea
3 changed files with 9 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/dashboardWebView/components/Header/Navigation.tsx
View File

@@ -28,14 +28,8 @@ const NavigationItem: React.FunctionComponent<INavigationItemProps> = ({
<button
className={`${isCrntTab
?
getColors(
'border-teal-900 dark:border-teal-300 text-teal-900 dark:text-teal-300',
'border-[var(--vscode-textLink-foreground)] text-[var(--vscode-textLink-foreground)]'
) :
getColors(
`border-transparent text-gray-500 dark:text-whisper-600 hover:text-gray-700 dark:hover:text-whisper-700 hover:border-gray-300 dark:hover:border-whisper-500`,
`border-transparent text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-textLink-activeForeground)] hover:border-[var(--vscode-textLink-activeForeground)]`
)
`border-[var(--vscode-textLink-foreground)] text-[var(--vscode-textLink-foreground)]` :
`border-transparent text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-textLink-activeForeground)] hover:border-[var(--vscode-textLink-activeForeground)]`
} whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm`}
aria-current={isCrntTab ? 'page' : undefined}
onClick={onClick}

20
src/dashboardWebView/components/Header/Tab.tsx
View File

@@ -18,21 +18,11 @@ export const Tab: React.FunctionComponent<ITabProps> = ({
return (
<button
className={`h-full flex items-center py-2 px-4 text-sm font-medium text-center border-b-2 border-transparent ${
getColors(
'hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300',
'text-[var(--vscode-tab-inactiveForeground)] hover:border-[var(--vscode-list-activeSelectionForeground)] hover:text-[var(--vscode-list-activeSelectionForeground)]'
)
} ${
location.pathname === `/${navigationType}`
? getColors(
'text-vulcan-500 dark:text-whisper-500 border-vulcan-500 dark:border-whisper-500',
'text-[var(--vscode-tab-activeForeground)] border-[var(--vscode-tab-activeForeground)]'
) : getColors(
'text-gray-500 dark:text-gray-400',
'text-[var(--vscode-tab-inactiveForeground)]'
)
}`}
className={`h-full flex items-center py-2 px-4 text-sm font-medium text-center border-b-2 border-transparent hover:border-[var(--vscode-tab-activeForeground)] hover:text-[var(--vscode-tab-activeForeground)] ${location.pathname === `/${navigationType}`
?
`text-[var(--vscode-tab-activeForeground)] border-[var(--vscode-tab-activeForeground)]` :
`text-[var(--vscode-tab-inactiveForeground)]`
}`}
type="button"
role="tab"
aria-controls="profile"

12
src/dashboardWebView/components/Menu/MenuButton.tsx
View File

@@ -22,19 +22,11 @@ export const MenuButton: React.FunctionComponent<IMenuButtonProps> = ({
<Menu.Button
disabled={disabled}
className={`group inline-flex justify-center text-sm font-medium ${getColors(
'text-vulcan-500 hover:text-vulcan-600 dark:text-whisper-500 dark:hover:text-whisper-600',
'text-[var(--vscode-list-activeSelectionForeground)] hover:text-[var(--vscode-list-highlightForeground)]'
)
}`}
className={`group inline-flex justify-center text-sm font-medium text-[var(--vscode-textLink-foreground)] hover:text-[var(--vscode-textLink-activeForeground)]`}
>
{title}
<ChevronDownIcon
className={`flex-shrink-0 -mr-1 ml-1 h-5 w-5 ${getColors(
'text-gray-400 group-hover:text-gray-500 dark:text-whisper-600 dark:group-hover:text-whisper-700',
'text-[var(--vscode-list-activeSelectionForeground)] group-hover:text-[var(--vscode-list-highlightForeground)]'
)
}`}
className={`flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-[var(--vscode-textLink-foreground)] group-hover:text-[var(--vscode-textLink-activeForeground)]`}
aria-hidden="true"
/>
</Menu.Button>