Fix button styling on the data screen #858

CHANGELOG.md

@@ -13,6 +13,7 @@
 
 ### 🐞 Fixes
 
+- [#858](https://github.com/estruyf/vscode-front-matter/issues/858): Fix button styling on the data screen
 - [#860](https://github.com/estruyf/vscode-front-matter/issues/860): Fix typo on the data screen
 
 ## [10.4.1] - 2024-09-27

src/dashboardWebView/components/Common/Button.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-
-export interface IButtonProps {
-  secondary?: boolean;
-  disabled?: boolean;
-  className?: string;
-  onClick: () => void;
-}
-
-export const Button: React.FunctionComponent<IButtonProps> = ({
-  onClick,
-  className,
-  disabled,
-  secondary,
-  children
-}: React.PropsWithChildren<IButtonProps>) => {
-
-  return (
-    <button
-      type="button"
-      className={`${className || ''
-        } inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none rounded disabled:opacity-50 ${secondary ?
-          `bg-[var(--vscode-button-secondaryBackground)] text-[--vscode-button-secondaryForeground] hover:bg-[var(--vscode-button-secondaryHoverBackground)]` :
-          `bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--frontmatter-button-hoverBackground)]`
-        }
-      `}
-      onClick={onClick}
-      disabled={disabled}
-    >
-      {children}
-    </button>
-  );
-};

src/dashboardWebView/components/DataView/DataFormControls.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useForm } from 'uniforms';
-import { Button } from '../Common/Button';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { SubmitField } from '../../../components/uniforms-frontmatter';
+import { Button } from 'vscrui';
 
 export interface IDataFormControlsProps {
   model: any | null;
@@ -21,8 +21,8 @@ export const DataFormControls: React.FunctionComponent<IDataFormControlsProps> =
       <SubmitField value={model ? `Update` : `Add`} />
 
       <Button
-        className="ml-4"
-        secondary
+        className="ml-4 !py-2"
+        appearance="secondary"
         onClick={() => {
           if (onClear) {
             onClear();

src/dashboardWebView/components/DataView/DataView.tsx

@@ -10,7 +10,6 @@ import { DashboardMessage } from '../../DashboardMessage';
 import { SponsorMsg } from '../Layout/SponsorMsg';
 import { EventData } from '@estruyf/vscode';
 import { DashboardCommand } from '../../DashboardCommand';
-import { Button } from '../Common/Button';
 import { arrayMoveImmutable } from 'array-move';
 import { EmptyView } from './EmptyView';
 import { Container } from './SortableContainer';
@@ -27,12 +26,11 @@ import { DataFolder } from '../../../models';
 import { ActionsBarItem } from '../Header/ActionsBarItem';
 import { Spinner } from '../Common/Spinner';
 import { openFile } from '../../utils/MessageHandlers';
+import { Button } from 'vscrui';
 
 export interface IDataViewProps { }
 
-export const DataView: React.FunctionComponent<IDataViewProps> = (
-  _: React.PropsWithChildren<IDataViewProps>
-) => {
+export const DataView: React.FunctionComponent<IDataViewProps> = () => {
   const [selectedData, setSelectedData] = useState<DataFile | null>(null);
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
   const [dataEntries, setDataEntries] = useState<any | any[] | null>(null);
@@ -188,8 +186,6 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
     };
   }, []);
 
-  console.log('DataView render', settings?.dataFolders);
-
   return (
     <div className="flex flex-col h-full overflow-auto inset-y-0">
       <Header settings={settings} />
@@ -338,7 +334,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                               />
                             ))}
                           </Container>
-                          <Button className="mt-4" onClick={() => setSelectedIndex(null)}>
+                          <Button className="mt-4 !py-2" onClick={() => setSelectedIndex(null)}>
                             {localize(LocalizationKey.dashboardDataViewDataViewAdd)}
                           </Button>
                         </>

src/dashboardWebView/components/TaxonomyView/TaxonomyTagging.tsx

@@ -5,7 +5,7 @@ import { SettingsSelector } from '../../state';
 import { getTaxonomyField } from '../../../helpers/getTaxonomyField';
 import { Sorting } from '../../../helpers/Sorting';
 import { ArrowLeftIcon, EyeIcon } from '@heroicons/react/24/outline';
-import { Button } from '../Common/Button';
+import { Button } from 'vscrui';
 import { FilterInput } from './FilterInput';
 import { useDebounce } from '../../../hooks/useDebounce';
 import * as l10n from '@vscode/l10n';
@@ -229,8 +229,8 @@ export const TaxonomyTagging: React.FunctionComponent<ITaxonomyTaggingProps> = (
       </div>
 
       <div className='flex justify-end space-x-2'>
-        <Button onClick={onDismiss} secondary>{l10n.t(LocalizationKey.commonCancel)}</Button>
-        <Button onClick={() => onContentMapping(value, pageMappings)}>{l10n.t(LocalizationKey.commonApply)}</Button>
+        <Button className='!py-2' onClick={onDismiss} appearance='secondary'>{l10n.t(LocalizationKey.commonCancel)}</Button>
+        <Button className='!py-2' onClick={() => onContentMapping(value, pageMappings)}>{l10n.t(LocalizationKey.commonApply)}</Button>
       </div>
     </div>
   );

src/dashboardWebView/styles.css

@@ -115,7 +115,9 @@
     }
 
     input[type='submit'] {
-      @apply mt-4 inline-flex w-auto items-center rounded border border-transparent bg-[var(--frontmatter-button-background)] px-3 py-2 text-sm font-medium leading-4 text-[var(--vscode-button-foreground)];
+      @apply mt-4 inline-flex w-auto items-center rounded-[2px] border border-transparent bg-[var(--frontmatter-button-background)] px-[11px] py-[4px] text-[var(--vscode-button-foreground)];
+      font-family: var(--vscode-font-family);
+      font-size: var(--vscode-font-size, 13px);
 
       &:hover {
         @apply bg-[var(--frontmatter-button-hoverBackground)];
@@ -310,7 +312,7 @@
     }
 
     input[type='submit'] {
-      @apply rounded text-vulcan-500;
+      @apply rounded-[2px] text-vulcan-500;
     }
   }