#176 - update dropdown style

src/panelWebView/components/DataBlock/DataBlockSelector.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useCallback, useEffect, useState } from 'react';
 import { Field } from '../../../models';
 import { DataType } from '../../../models/DataType';
+import { VSCodeDropdown, VSCodeOption } from '@vscode/webview-ui-toolkit/react';
 
 export interface IDataBlockSelectorProps {
   field: Field;
@@ -54,20 +55,20 @@ export const DataBlockSelector: React.FunctionComponent<IDataBlockSelectorProps>
   return (
     <div className='data_block__selector'>
       <h3>Block type</h3>
-      <select
+      <VSCodeDropdown
         value={selectedDataType ?? EMPTY_OPTION}
-        onChange={event => onSetDataType(event.currentTarget.value === EMPTY_OPTION ? null : event.currentTarget.value)}
+        onChange={(event: any) => onSetDataType(event.currentTarget.value === EMPTY_OPTION ? null : event.currentTarget.value)}
         style={{
           width: "100%",
           marginBottom: "1rem"
         }}>
-        <option value={EMPTY_OPTION}></option>
+        <VSCodeOption value={EMPTY_OPTION}>&nbsp;</VSCodeOption>
         {
           options.map((o) => (
-            <option key={o} value={o}>{o}</option>
+            <VSCodeOption key={o} value={o}>{o}</VSCodeOption>
           ))
         }
-      </select>
+      </VSCodeDropdown>
     </div>
   );
 };

src/panelWebView/components/GlobalSettings.tsx

@@ -4,8 +4,9 @@ import { CommandToCode } from '../CommandToCode';
 import { MessageHelper } from '../../helpers/MessageHelper';
 import { useDebounce } from '../../hooks/useDebounce';
 import { Collapsible } from './Collapsible';
-import { VsCheckbox, VsLabel } from './VscodeComponents';
+import { VsLabel } from './VscodeComponents';
 import useStartCommand from '../hooks/useStartCommand';
+import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
 
 export interface IGlobalSettingsProps {
   settings: PanelSettings | undefined;
@@ -69,11 +70,11 @@ const GlobalSettings: React.FunctionComponent<IGlobalSettingsProps> = ({settings
       <Collapsible id={`${isBase ? "base_" : ""}settings`} className={`base__actions`} title="Global settings">
         <div className={`base__action`}>
           <VsLabel>Modified date</VsLabel>
-          <VsCheckbox checked={modifiedDateUpdate} onClick={onDateCheck}>Auto-update modified date</VsCheckbox>
+          <VSCodeCheckbox checked={modifiedDateUpdate} onClick={onDateCheck}>Auto-update modified date</VSCodeCheckbox>
         </div>
         <div className={`base__action`}>
           <VsLabel>Front Matter highlight</VsLabel>
-          <VsCheckbox checked={fmHighlighting} onClick={onHighlightCheck}>Highlight Front Matter</VsCheckbox>
+          <VSCodeCheckbox checked={fmHighlighting} onClick={onHighlightCheck}>Highlight Front Matter</VSCodeCheckbox>
         </div>
         <div className={`base__action`}>
           <VsLabel>Local preview</VsLabel>

src/panelWebView/components/VscodeComponents.ts

@@ -8,8 +8,4 @@ export const VsTableBody = wrapWc(`vscode-table-body`);
 export const VsTableRow = wrapWc(`vscode-table-row`);
 export const VsTableCell = wrapWc(`vscode-table-cell`);
 export const VsCollapsible = wrapWc(`vscode-collapsible`);
-export const VsLabel = wrapWc(`vscode-label`);
-export const VsCheckbox = wrapWc(`vscode-checkbox`);
-
-// @vscode/webview-ui-toolkit
-// export const VsCheckbox = wrapWc(`vscode-checkbox`);
+export const VsLabel = wrapWc(`vscode-label`);

src/panelWebView/index.tsx

@@ -15,7 +15,7 @@ import '@bendera/vscode-webview-elements/dist/vscode-table-row.js';
 import '@bendera/vscode-webview-elements/dist/vscode-table-cell.js';
 import '@bendera/vscode-webview-elements/dist/vscode-collapsible.js';
 import '@bendera/vscode-webview-elements/dist/vscode-label.js';
-import '@bendera/vscode-webview-elements/dist/vscode-checkbox.js';
+// import '@bendera/vscode-webview-elements/dist/vscode-checkbox.js';
 
 // import '@vscode/webview-ui-toolkit/dist/esm/checkbox';