-
+
diff --git a/src/dashboardWebView/components/Spinner.tsx b/src/dashboardWebView/components/Spinner.tsx
index f94734b0..6e3eabc9 100644
--- a/src/dashboardWebView/components/Spinner.tsx
+++ b/src/dashboardWebView/components/Spinner.tsx
@@ -1,15 +1,20 @@
import * as React from 'react';
+import useThemeColors from '../hooks/useThemeColors';
export interface ISpinnerProps {}
export const Spinner: React.FunctionComponent
= (
props: React.PropsWithChildren
) => {
+ const { getColors } = useThemeColors();
+
return (
);
};
diff --git a/src/dashboardWebView/components/SponsorMsg.tsx b/src/dashboardWebView/components/SponsorMsg.tsx
index ed595f32..4932b90f 100644
--- a/src/dashboardWebView/components/SponsorMsg.tsx
+++ b/src/dashboardWebView/components/SponsorMsg.tsx
@@ -2,6 +2,7 @@ import { HeartIcon, StarIcon } from '@heroicons/react/outline';
import * as React from 'react';
import { REVIEW_LINK, SPONSOR_LINK } from '../../constants';
import { VersionInfo } from '../../models';
+import useThemeColors from '../hooks/useThemeColors';
export interface ISponsorMsgProps {
beta: boolean | undefined;
@@ -9,15 +10,46 @@ export interface ISponsorMsgProps {
isBacker: boolean | undefined;
}
+interface ISponsorLinkProps {
+ title: string;
+ href: string;
+}
+
+const SponsorLink: React.FunctionComponent = ({ title, href, children }: React.PropsWithChildren) => {
+ const { getColors } = useThemeColors();
+
+ return (
+
+ {children}
+
+ );
+}
+
export const SponsorMsg: React.FunctionComponent = ({
beta,
isBacker,
version
}: React.PropsWithChildren) => {
+ const { getColors } = useThemeColors();
+
return (
diff --git a/src/dashboardWebView/components/Startup.tsx b/src/dashboardWebView/components/Startup.tsx
index 08fc8c12..1278be79 100644
--- a/src/dashboardWebView/components/Startup.tsx
+++ b/src/dashboardWebView/components/Startup.tsx
@@ -3,6 +3,7 @@ import { SETTING_DASHBOARD_OPENONSTART } from '../../constants';
import { Messenger } from '@estruyf/vscode/dist/client';
import { DashboardMessage } from '../DashboardMessage';
import { Settings } from '../models/Settings';
+import useThemeColors from '../hooks/useThemeColors';
export interface IStartupProps {
settings: Settings | null;
@@ -12,6 +13,7 @@ export const Startup: React.FunctionComponent = ({
settings
}: React.PropsWithChildren) => {
const [isChecked, setIsChecked] = React.useState(false);
+ const { getColors } = useThemeColors();
const onChange = (e: React.ChangeEvent) => {
setIsChecked(e.target.checked);
@@ -35,14 +37,24 @@ export const Startup: React.FunctionComponent = ({
type="checkbox"
checked={isChecked}
onChange={onChange}
- className="focus:outline-none focus:ring-teal-500 h-4 w-4 text-teal-600 border-gray-300 dark:border-vulcan-50 rounded"
+ className={`h-4 w-4 focus:outline-none rounded ${
+ getColors(
+ `focus:ring-teal-500 text-teal-600 border-gray-300 dark:border-vulcan-50`,
+ `focus:ring-[var(--vscode-button-background)] text-[var(--vscode-button-background)] border-[var(--vscode-editorWidget-border)]`
+ )
+ }`}
/>
diff --git a/src/dashboardWebView/components/Status.tsx b/src/dashboardWebView/components/Status.tsx
index 2eba25c2..58f03af7 100644
--- a/src/dashboardWebView/components/Status.tsx
+++ b/src/dashboardWebView/components/Status.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import { useMemo } from 'react';
import { useRecoilValue } from 'recoil';
+import useThemeColors from '../hooks/useThemeColors';
import { SettingsAtom } from '../state';
export interface IStatusProps {
@@ -10,6 +11,7 @@ export interface IStatusProps {
export const Status: React.FunctionComponent = ({
draft
}: React.PropsWithChildren) => {
+ const { getColors } = useThemeColors();
const settings = useRecoilValue(SettingsAtom);
const draftField = useMemo(() => settings?.draftField, [settings]);
@@ -28,7 +30,7 @@ export const Status: React.FunctionComponent = ({
if (draftValue) {
return (
{draftValue}
@@ -40,9 +42,14 @@ export const Status: React.FunctionComponent = ({
return (
{draftValue ? 'Draft' : 'Published'}
diff --git a/src/dashboardWebView/components/TaxonomyView/TaxonomyManager.tsx b/src/dashboardWebView/components/TaxonomyView/TaxonomyManager.tsx
index 2e5300d5..f27d7029 100644
--- a/src/dashboardWebView/components/TaxonomyView/TaxonomyManager.tsx
+++ b/src/dashboardWebView/components/TaxonomyView/TaxonomyManager.tsx
@@ -10,6 +10,7 @@ import { SettingsSelector } from '../../state';
import { getTaxonomyField } from '../../../helpers/getTaxonomyField';
import { TaxonomyActions } from './TaxonomyActions';
import { TaxonomyLookup } from './TaxonomyLookup';
+import useThemeColors from '../../hooks/useThemeColors';
export interface ITaxonomyManagerProps {
data: TaxonomyData | undefined;
@@ -23,6 +24,7 @@ export const TaxonomyManager: React.FunctionComponent = (
pages
}: React.PropsWithChildren) => {
const settings = useRecoilValue(SettingsSelector);
+ const { getColors } = useThemeColors();
const onCreate = () => {
Messenger.send(DashboardMessage.createTaxonomy, {
@@ -113,7 +115,12 @@ export const TaxonomyManager: React.FunctionComponent = (