adam/vscode-front-matter
1
0
Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-07-03 16:31:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

#505 - Align to theme colors WIP

Browse Source
This commit is contained in:
Elio Struyf
2023-02-06 18:26:11 +01:00
parent baed139cc6
commit c843e74077
35 changed files with 1181 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dashboardWebView/components/SnippetsView/Snippets.tsx
+14 -3
View File
@@ -8,6 +8,7 @@ import { FEATURE_FLAG } from '../../../constants';
import { TelemetryEvent } from '../../../constants/TelemetryEvent';
import { SnippetParser } from '../../../helpers/SnippetParser';
import { DashboardMessage } from '../../DashboardMessage';
import useThemeColors from '../../hooks/useThemeColors';
import { ModeAtom, SettingsSelector, ViewDataSelector } from '../../state';
import { FilterInput } from '../Header/FilterInput';
import { PageLayout } from '../Layout/PageLayout';
@@ -30,6 +31,7 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
const [showCreateDialog, setShowCreateDialog] = useState(false);
const [mediaSnippet, setMediaSnippet] = useState(false);
const [snippetFilter, setSnippetFilter] = useState<string>('');
const { getColors } = useThemeColors();
const snippets = settings?.snippets || {};
const snippetKeys = useMemo(() => {
@@ -81,7 +83,9 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
header={
<FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.snippets.manage}>
<div
className="py-3 px-4 flex items-center justify-between border-b border-gray-300 dark:border-vulcan-100"
className={`py-3 px-4 flex items-center justify-between border-b ${
getColors(`border-gray-300 dark:border-vulcan-100`, `border-[var(--vscode-sideBar-border)]`)
}`}
aria-label="snippets header"
>
<FilterInput
@@ -95,7 +99,12 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
<div className="flex flex-1 justify-end">
<button
className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 focus:outline-none disabled:bg-gray-500`}
className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium focus:outline-none ${
getColors(
`text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
`text-[var(--vscode-button-foreground)] bg-[var(--vscode-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
)
}`}
title={`Create new snippet`}
onClick={() => setShowCreateDialog(true)}
>
@@ -125,7 +134,9 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
</ul>
) : (
<div className="w-full h-full flex items-center justify-center">
<div className="flex flex-col items-center text-gray-500 dark:text-whisper-900">
<div className={`flex flex-col items-center ${
getColors(`text-gray-500 dark:text-vulcan-500`, `text-[var(--vscode-foreground)]`)
}`}>
<CodeIcon className="w-32 h-32" />
<p className="text-3xl">No snippets found</p>
</div>