Restructuring components

src/dashboardWebView/components/App.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Spinner } from './Spinner';
+import { Spinner } from './Common/Spinner';
 import useMessages from '../hooks/useMessages';
 import useDarkMode from '../../hooks/useDarkMode';
-import { WelcomeScreen } from './WelcomeScreen';
+import { WelcomeScreen } from './WelcomeView/WelcomeScreen';
 import { useRecoilValue } from 'recoil';
 import { DashboardViewSelector, ModeAtom } from '../state';
 import { Contents } from './Contents/Contents';

src/dashboardWebView/components/Button.tsx

@@ -1,31 +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 text-white dark:text-vulcan-500 focus:outline-none disabled:bg-gray-500 ${
-        secondary ? `bg-red-300 hover:bg-red-400` : `bg-teal-600 hover:bg-teal-700`
-      }`}
-      onClick={onClick}
-      disabled={disabled}
-    >
-      {children}
-    </button>
-  );
-};

src/dashboardWebView/components/Common/Button.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';
+
+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>) => {
+  const { getColors } = useThemeColors();
+
+  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 ${getColors(
+          'text-white dark:text-vulcan-500 disabled:bg-gray-500',
+          'disabled:opacity-50'
+        )
+        } ${secondary ?
+          getColors(`bg-red-300 hover:bg-red-400`, `bg-[var(--vscode-button-secondaryBackground)] text-[--vscode-button-secondaryForeground] hover:bg-[var(--vscode-button-secondaryHoverBackground)]`) :
+          getColors(`bg-teal-600 hover:bg-teal-700`, `bg-[var(--frontmatter-button-background)] text-[--vscode-button-foreground] hover:bg-[var(--frontmatter-button-hoverBackground)]`)
+        }
+      `}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+};

src/dashboardWebView/components/Common/ChoiceButton.tsx

@@ -1,8 +1,8 @@
 import { Menu } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/outline';
 import * as React from 'react';
-import useThemeColors from '../hooks/useThemeColors';
-import { MenuItem, MenuItems } from './Menu';
+import useThemeColors from '../../hooks/useThemeColors';
+import { MenuItem, MenuItems } from '../Menu';
 
 export interface IChoiceButtonProps {
   title: string;

src/dashboardWebView/components/Common/DateField.tsx

@@ -1,6 +1,7 @@
 import { format } from 'date-fns';
 import * as React from 'react';
-import { DateHelper } from '../../helpers/DateHelper';
+import { DateHelper } from '../../../helpers/DateHelper';
+import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IDateFieldProps {
   className?: string;
@@ -12,6 +13,7 @@ export const DateField: React.FunctionComponent<IDateFieldProps> = ({
   value
 }: React.PropsWithChildren<IDateFieldProps>) => {
   const [dateValue, setDateValue] = React.useState<string>('');
+  const { getColors } = useThemeColors();
 
   React.useEffect(() => {
     try {
@@ -28,7 +30,7 @@ export const DateField: React.FunctionComponent<IDateFieldProps> = ({
   }
 
   return (
-    <span className={`${className || ''} text-vulcan-100 dark:text-whisper-900 text-xs`}>
+    <span className={`${className || ''} text-xs ${getColors(`text-vulcan-100 dark:text-whisper-900`, `text-[var(--vscode-editor-foreground)]`)}`}>
       {dateValue}
     </span>
   );

src/dashboardWebView/components/Common/Spinner.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';
+
+export interface ISpinnerProps { }
+
+export const Spinner: React.FunctionComponent<ISpinnerProps> = (
+  props: React.PropsWithChildren<ISpinnerProps>
+) => {
+  const { getColors } = useThemeColors();
+
+  return (
+    <div
+      className={`fixed top-0 left-0 right-0 bottom-0 w-full h-full flex flex-wrap items-center justify-center z-50 ${getColors(
+        `bg-black bg-opacity-50`,
+        `bg-[var(--vscode-editor-background)] opacity-75`
+      )
+        }`}
+    >
+      <div className={`loader ease-linear rounded-full border-8 border-t-8 h-16 w-16 ${getColors(`border-gray-50 border-t-teal-500`, `border-[var(--vscode-activityBar-inactiveForeground)] border-t-[var(--vscode-activityBarBadge-background)]`)
+        }`} />
+    </div>
+  );
+};

src/dashboardWebView/components/Contents/Contents.tsx

@@ -3,8 +3,8 @@ import { useRecoilValue } from 'recoil';
 import { Page } from '../../models';
 import { SettingsSelector } from '../../state';
 import { Overview } from './Overview';
-import { Spinner } from '../Spinner';
-import { SponsorMsg } from '../SponsorMsg';
+import { Spinner } from '../Common/Spinner';
+import { SponsorMsg } from '../Layout/SponsorMsg';
 import usePages from '../../hooks/usePages';
 import { useEffect } from 'react';
 import { Messenger } from '@estruyf/vscode/dist/client';

src/dashboardWebView/components/Contents/Item.tsx

@@ -4,13 +4,13 @@ import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIco
 import { DashboardMessage } from '../../DashboardMessage';
 import { Page } from '../../models/Page';
 import { SettingsSelector, ViewSelector } from '../../state';
-import { DateField } from '../DateField';
-import { Status } from '../Status';
+import { DateField } from '../Common/DateField';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardViewType } from '../../models';
 import { ContentActions } from './ContentActions';
 import { useMemo } from 'react';
 import useThemeColors from '../../hooks/useThemeColors';
+import { Status } from './Status';
 
 export interface IItemProps extends Page { }
 

src/dashboardWebView/components/Contents/Status.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
-import useThemeColors from '../hooks/useThemeColors';
-import { SettingsAtom } from '../state';
+import useThemeColors from '../../hooks/useThemeColors';
+import { SettingsAtom } from '../../state';
 
 export interface IStatusProps {
   draft: boolean | string;
@@ -45,10 +45,9 @@ export const Status: React.FunctionComponent<IStatusProps> = ({
       className={`
         inline-block px-2 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-xs 
         ${getColors(`text-whisper-200 dark:text-vulcan-500`, ``)} 
-        ${
-          draftValue ? 
-            getColors(`bg-red-500`, 'bg-[var(--vscode-statusBarItem-errorBackground)] text-[var(--vscode-statusBarItem-errorForeground)]') : 
-            getColors(`bg-teal-500`, 'bg-[var(--vscode-badge-background)] text-[var(--vscode-badge-foreground)]') 
+        ${draftValue ?
+          getColors(`bg-red-500`, 'bg-[var(--vscode-statusBarItem-errorBackground)] text-[var(--vscode-statusBarItem-errorForeground)]') :
+          getColors(`bg-teal-500`, 'bg-[var(--vscode-badge-background)] text-[var(--vscode-badge-foreground)]')
         }`}
     >
       {draftValue ? 'Draft' : 'Published'}

src/dashboardWebView/components/DataView/DataFormControls.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useForm } from 'uniforms';
 import { SubmitField } from 'uniforms-unstyled';
-import { Button } from '../Button';
+import { Button } from '../Common/Button';
 
 export interface IDataFormControlsProps {
   model: any | null;
@@ -17,6 +17,7 @@ export const DataFormControls: React.FunctionComponent<IDataFormControlsProps> =
   return (
     <div className="text-right border-t border-gray-200 dark:border-vulcan-300">
       <SubmitField value={model ? `Update` : `Add`} />
+
       <Button
         className="ml-4"
         secondary

src/dashboardWebView/components/DataView/DataView.tsx

@@ -7,10 +7,10 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { DataFile } from '../../../models/DataFile';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
-import { SponsorMsg } from '../SponsorMsg';
+import { SponsorMsg } from '../Layout/SponsorMsg';
 import { EventData } from '@estruyf/vscode';
 import { DashboardCommand } from '../../DashboardCommand';
-import { Button } from '../Button';
+import { Button } from '../Common/Button';
 import { arrayMoveImmutable } from 'array-move';
 import { EmptyView } from './EmptyView';
 import { Container } from './SortableContainer';
@@ -22,7 +22,7 @@ import { DataType } from '../../../models/DataType';
 import { TelemetryEvent } from '../../../constants';
 import { NavigationItem } from '../Layout';
 
-export interface IDataViewProps {}
+export interface IDataViewProps { }
 
 export const DataView: React.FunctionComponent<IDataViewProps> = (
   props: React.PropsWithChildren<IDataViewProps>
@@ -242,9 +242,8 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                   </div>
                 )}
                 <div
-                  className={`${
-                    selectedData.singleEntry ? 'w-full' : 'w-2/3'
-                  } py-6 px-4 overflow-auto`}
+                  className={`${selectedData.singleEntry ? 'w-full' : 'w-2/3'
+                    } py-6 px-4 overflow-auto`}
                 >
                   <h2 className={`text-lg text-gray-500 dark:text-whisper-900`}>
                     Create or modify your {selectedData.title.toLowerCase()} data

src/dashboardWebView/components/Header/Header.tsx

@@ -5,8 +5,6 @@ import { Filter } from './Filter';
 import { Folders } from './Folders';
 import { Settings, NavigationType } from '../../models';
 import { DashboardMessage } from '../../DashboardMessage';
-import { Startup } from '../Startup';
-import { Navigation } from '../Navigation';
 import { Grouping } from '.';
 import { ViewSwitch } from './ViewSwitch';
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
@@ -14,7 +12,7 @@ import { CategoryAtom, GroupingSelector, SortingAtom, TagAtom } from '../../stat
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { ClearFilters } from './ClearFilters';
 import { MediaHeaderTop } from '../Media/MediaHeaderTop';
-import { ChoiceButton } from '../ChoiceButton';
+import { ChoiceButton } from '../Common/ChoiceButton';
 import { MediaHeaderBottom } from '../Media/MediaHeaderBottom';
 import { Tabs } from './Tabs';
 import { CustomScript } from '../../../models';
@@ -28,6 +26,8 @@ import { GroupOption } from '../../constants/GroupOption';
 import usePagination from '../../hooks/usePagination';
 import { PaginationStatus } from './PaginationStatus';
 import useThemeColors from '../../hooks/useThemeColors';
+import { Startup } from './Startup';
+import { Navigation } from './Navigation';
 
 export interface IHeaderProps {
   header?: React.ReactNode;
@@ -141,18 +141,16 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
   }, [location.search]);
 
   return (
-    <div className={`w-full sticky top-0 z-40 ${
-      getColors(
-        `bg-gray-100 dark:bg-vulcan-500`, 
-        `bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]`
-      )
-    }`}>
-      <div className={`mb-0 border-b ${
-        getColors(
-          `bg-gray-100 dark:bg-vulcan-500 border-gray-200 dark:border-vulcan-300`, 
-          `bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--vscode-editorWidget-border)]`
-        )
+    <div className={`w-full sticky top-0 z-40 ${getColors(
+      `bg-gray-100 dark:bg-vulcan-500`,
+      `bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]`
+    )
       }`}>
+      <div className={`mb-0 border-b ${getColors(
+        `bg-gray-100 dark:bg-vulcan-500 border-gray-200 dark:border-vulcan-300`,
+        `bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--vscode-editorWidget-border)]`
+      )
+        }`}>
         <Tabs onNavigate={updateView} />
       </div>
 
@@ -175,9 +173,8 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
             </div>
           </div>
 
-          <div className={`px-4 flex flex-row items-center border-b justify-between ${
-            getColors(`border-gray-200 dark:border-vulcan-100`, `border-[var(--vscode-editorWidget-border)]`)
-          }`}>
+          <div className={`px-4 flex flex-row items-center border-b justify-between ${getColors(`border-gray-200 dark:border-vulcan-100`, `border-[var(--vscode-editorWidget-border)]`)
+            }`}>
             <div>
               <Navigation totalPages={totalPages || 0} />
             </div>
@@ -188,9 +185,8 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
           </div>
 
           <div
-            className={`py-4 px-5 w-full flex items-center justify-between lg:justify-end border-b space-x-4 lg:space-x-6 xl:space-x-8 ${
-              getColors(`bg-gray-200 border-gray-300 dark:bg-vulcan-400 dark:border-vulcan-100`, `bg-[var(--vscode-panel-background)] border-[var(--vscode-editorWidget-border)]`)
-            }`}
+            className={`py-4 px-5 w-full flex items-center justify-between lg:justify-end border-b space-x-4 lg:space-x-6 xl:space-x-8 ${getColors(`bg-gray-200 border-gray-300 dark:bg-vulcan-400 dark:border-vulcan-100`, `bg-[var(--vscode-panel-background)] border-[var(--vscode-editorWidget-border)]`)
+              }`}
           >
             <ClearFilters />
 
@@ -219,9 +215,8 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
             (totalPages || 0) > pageSetNr &&
             (!grouping || grouping === GroupOption.none) && (
               <div
-                className={`px-4 flex justify-between py-2 border-b ${
-                  getColors(`border-gray-300 dark:border-vulcan-100`, `border-[var(--vscode-editorWidget-border)]`)
-                }`}
+                className={`px-4 flex justify-between py-2 border-b ${getColors(`border-gray-300 dark:border-vulcan-100`, `border-[var(--vscode-editorWidget-border)]`)
+                  }`}
               >
                 <PaginationStatus totalPages={totalPages || 0} />
 

src/dashboardWebView/components/Header/Navigation.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { Tab } from '../constants/Tab';
-import useThemeColors from '../hooks/useThemeColors';
-import { SettingsAtom, TabAtom, TabInfoAtom } from '../state';
+import { Tab } from '../../constants/Tab';
+import useThemeColors from '../../hooks/useThemeColors';
+import { SettingsAtom, TabAtom, TabInfoAtom } from '../../state';
 
 export interface INavigationProps {
   totalPages: number;
@@ -30,18 +30,17 @@ const NavigationItem: React.FunctionComponent<INavigationItemProps> = ({
 
   return (
     <button
-      className={`${
-        isCrntTab
-          ? 
+      className={`${isCrntTab
+          ?
           getColors(
-            'border-teal-900 dark:border-teal-300 text-teal-900 dark:text-teal-300', 
+            '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)]`
           )
-      } whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm`}
+        } whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm`}
       aria-current={isCrntTab ? 'page' : undefined}
       onClick={onClick}
     >

src/dashboardWebView/components/Header/Startup.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-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';
+import { Settings } from '../../models';
+import useThemeColors from '../../hooks/useThemeColors';
+import { DashboardMessage } from '../../DashboardMessage';
+import { SETTING_DASHBOARD_OPENONSTART } from '../../../constants';
 
 export interface IStartupProps {
   settings: Settings | null;

src/dashboardWebView/components/Layout/SponsorMsg.tsx

@@ -1,8 +1,8 @@
 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';
+import { REVIEW_LINK, SPONSOR_LINK } from '../../../constants';
+import { VersionInfo } from '../../../models';
+import useThemeColors from '../../hooks/useThemeColors';
 
 export interface ISponsorMsgProps {
   beta: boolean | undefined;

src/dashboardWebView/components/Media/FolderCreation.tsx

@@ -10,7 +10,7 @@ import {
   ViewDataSelector
 } from '../../state';
 import { Messenger } from '@estruyf/vscode/dist/client';
-import { ChoiceButton } from '../ChoiceButton';
+import { ChoiceButton } from '../Common/ChoiceButton';
 import { CustomScript, ScriptType } from '../../../models';
 import { STATIC_FOLDER_PLACEHOLDER } from '../../../constants';
 import { useCallback, useMemo } from 'react';

src/dashboardWebView/components/Media/Media.tsx

@@ -9,8 +9,8 @@ import {
   SettingsSelector,
   ViewDataSelector
 } from '../../state';
-import { Spinner } from '../Spinner';
-import { SponsorMsg } from '../SponsorMsg';
+import { Spinner } from '../Common/Spinner';
+import { SponsorMsg } from '../Layout/SponsorMsg';
 import { Item } from './Item';
 import { Lightbox } from './Lightbox';
 import { List } from './List';
@@ -27,7 +27,7 @@ import { basename, extname, join } from 'path';
 import { MediaInfo } from '../../../models';
 import useThemeColors from '../../hooks/useThemeColors';
 
-export interface IMediaProps {}
+export interface IMediaProps { }
 
 export const Media: React.FunctionComponent<IMediaProps> = (
   props: React.PropsWithChildren<IMediaProps>
@@ -174,19 +174,17 @@ export const Media: React.FunctionComponent<IMediaProps> = (
         )}
 
         {isDragActive && (
-          <div className={`absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center z-50 ${
-            getColors(
-              'text-whisper-500 bg-gray-900 bg-opacity-70',
-              'text-[var(--vscode-foreground)] bg-[var(--vscode-editor-background)] opacity-75'
-            )
-          }`}>
+          <div className={`absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center z-50 ${getColors(
+            'text-whisper-500 bg-gray-900 bg-opacity-70',
+            'text-[var(--vscode-foreground)] bg-[var(--vscode-editor-background)] opacity-75'
+          )
+            }`}>
             <UploadIcon className={`h-32`} />
             <p className={`text-xl max-w-md text-center`}>
               {selectedFolder
                 ? `Upload to ${selectedFolder}`
-                : `No folder selected, files you drop will be added to the ${
-                    currentStaticFolder || 'public'
-                  } folder.`}
+                : `No folder selected, files you drop will be added to the ${currentStaticFolder || 'public'
+                } folder.`}
             </p>
           </div>
         )}
@@ -195,9 +193,8 @@ export const Media: React.FunctionComponent<IMediaProps> = (
           <div className={`flex items-center justify-center h-full`}>
             <div className={`max-w-xl text-center`}>
               <FrontMatterIcon
-                className={`h-32 mx-auto opacity-90 mb-8 ${
-                  getColors('text-vulcan-300 dark:text-whisper-800', 'text-[var(--vscode-editor-foreground)]')
-                }`}
+                className={`h-32 mx-auto opacity-90 mb-8 ${getColors('text-vulcan-300 dark:text-whisper-800', 'text-[var(--vscode-editor-foreground)]')
+                  }`}
               />
 
               <p className={`text-xl font-medium`}>

src/dashboardWebView/components/SnippetsView/Snippets.tsx

@@ -13,7 +13,7 @@ import { ModeAtom, SettingsSelector, ViewDataSelector } from '../../state';
 import { FilterInput } from '../Header/FilterInput';
 import { PageLayout } from '../Layout/PageLayout';
 import { FormDialog } from '../Modals/FormDialog';
-import { SponsorMsg } from '../SponsorMsg';
+import { SponsorMsg } from '../Layout/SponsorMsg';
 import { Item } from './Item';
 import { NewForm } from './NewForm';
 

src/dashboardWebView/components/Spinner.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import useThemeColors from '../hooks/useThemeColors';
-
-export interface ISpinnerProps {}
-
-export const Spinner: React.FunctionComponent<ISpinnerProps> = (
-  props: React.PropsWithChildren<ISpinnerProps>
-) => {
-  const { getColors } = useThemeColors();
-  
-  return (
-    <div
-      className={`fixed top-0 left-0 right-0 bottom-0 w-full h-full flex flex-wrap items-center justify-center z-50 ${
-        getColors(
-          `bg-black bg-opacity-50`,
-          `bg-[var(--vscode-editor-background)] opacity-75`
-        )
-      }`}
-    >
-      <div className={`loader ease-linear rounded-full border-8 border-t-8 h-16 w-16 ${
-        getColors(`border-gray-50 border-t-teal-500`, `border-[var(--vscode-activityBar-inactiveForeground)] border-t-[var(--vscode-activityBarBadge-background)]`)
-      }`} />
-    </div>
-  );
-};

src/dashboardWebView/components/TaxonomyView/TaxonomyView.tsx

@@ -10,7 +10,7 @@ import { Page } from '../../models';
 import { SettingsSelector } from '../../state';
 import { NavigationBar, NavigationItem } from '../Layout';
 import { PageLayout } from '../Layout/PageLayout';
-import { SponsorMsg } from '../SponsorMsg';
+import { SponsorMsg } from '../Layout/SponsorMsg';
 import { TaxonomyManager } from './TaxonomyManager';
 
 export interface ITaxonomyViewProps {

src/dashboardWebView/components/WelcomeView/WelcomeScreen.tsx

@@ -1,14 +1,14 @@
 import { HeartIcon, StarIcon } from '@heroicons/react/outline';
 import * as React from 'react';
-import { GITHUB_LINK, REVIEW_LINK, SPONSOR_LINK, TelemetryEvent } from '../../constants';
+import { GITHUB_LINK, REVIEW_LINK, SPONSOR_LINK, TelemetryEvent } from '../../../constants';
 import { Messenger } from '@estruyf/vscode/dist/client';
-import { FrontMatterIcon } from '../../panelWebView/components/Icons/FrontMatterIcon';
-import { GitHubIcon } from '../../panelWebView/components/Icons/GitHubIcon';
-import { DashboardMessage } from '../DashboardMessage';
-import { Settings } from '../models/Settings';
-import { StepsToGetStarted } from './Steps/StepsToGetStarted';
-import useThemeColors from '../hooks/useThemeColors';
-import { WelcomeLink } from './WelcomeView/WelcomeLink';
+import { FrontMatterIcon } from '../../../panelWebView/components/Icons/FrontMatterIcon';
+import { GitHubIcon } from '../../../panelWebView/components/Icons/GitHubIcon';
+import { DashboardMessage } from '../../DashboardMessage';
+import { Settings } from '../../models/Settings';
+import { StepsToGetStarted } from '../Steps/StepsToGetStarted';
+import useThemeColors from '../../hooks/useThemeColors';
+import { WelcomeLink } from './WelcomeLink';
 
 export interface IWelcomeScreenProps {
   settings: Settings;

src/dashboardWebView/index.tsx

@@ -84,8 +84,9 @@ if (elm) {
       release: version || '',
       environment: environment || '',
       ignoreErrors: [
-        'ResizeObserver loop limit exceeded',
-        "Cannot read properties of undefined (reading 'unobserve')"
+        `ResizeObserver loop limit exceeded`,
+        `Cannot read properties of undefined (reading 'unobserve')`,
+        `TypeError: Cannot read properties of undefined (reading 'unobserve')`
       ]
     });
   }