Icon updates

src/dashboardWebView/components/Header/Header.tsx

@@ -124,10 +124,10 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
 
   return (
     <div className={`w-full sticky top-0 z-20 bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]`}>
-      <div className={`overflow-x-auto mb-0 border-b flex justify-between bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]`}>
+      <div className={`px-4 overflow-x-auto mb-0 border-b flex justify-between bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]`}>
         <Tabs onNavigate={updateView} />
 
-        <div className='flex items-center space-x-2 pr-4'>
+        <div className='flex items-center space-x-2'>
           <ProjectSwitcher />
 
           {

src/dashboardWebView/components/Header/Tab.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useLocation } from 'react-router-dom';
 import { NavigationType } from '../../models';
+import { cn } from '../../../utils/cn';
 
 export interface ITabProps {
   navigationType: NavigationType;
@@ -14,13 +15,15 @@ export const Tab: React.FunctionComponent<ITabProps> = ({
 }: React.PropsWithChildren<ITabProps>) => {
   const location = useLocation();
 
+  console.log(location.pathname, navigationType);
+
   return (
     <button
-      className={`h-full flex items-center py-2 px-4 text-sm font-medium text-center border-b-2 border-transparent hover:border-[var(--vscode-tab-activeForeground)] hover:text-[var(--vscode-tab-activeForeground)] ${location.pathname === `/${navigationType}`
+      className={cn(`h-full flex items-center py-2 px-1 text-sm font-medium text-center border-b-2 border-transparent hover:border-[var(--vscode-tab-activeForeground)] hover:text-[var(--vscode-tab-activeForeground)] ${location.pathname === `/${navigationType}`
         ?
         `text-[var(--vscode-tab-activeForeground)] border-[var(--vscode-tab-activeForeground)]` :
         `text-[var(--vscode-tab-inactiveForeground)]`
-        }`}
+        }`)}
       type="button"
       role="tab"
       aria-controls="profile"

src/dashboardWebView/components/Header/Tabs.tsx

@@ -1,14 +1,14 @@
-import { CircleStackIcon, PhotoIcon, ScissorsIcon, TagIcon } from '@heroicons/react/24/outline';
+import { PhotoIcon, ScissorsIcon, TagIcon, CircleStackIcon } from '@heroicons/react/24/solid';
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
 import { FeatureFlag } from '../../../components/features/FeatureFlag';
 import { FEATURE_FLAG } from '../../../constants';
-import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIcon';
 import { NavigationType } from '../../models';
 import { ModeAtom } from '../../state';
 import { Tab } from './Tab';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { PageIcon } from '../../../panelWebView/components/Icons';
 
 export interface ITabsProps {
   onNavigate: (navigationType: NavigationType) => void;
@@ -21,42 +21,42 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
 
   return (
     <ul
-      className="flex items-center justify-start h-full"
+      className="flex items-center justify-start h-full space-x-4"
       data-tabs-toggle="#myTabContent"
       role="tablist"
     >
-      <li className="mr-2" role="presentation">
+      <li role="presentation">
         <Tab navigationType={NavigationType.Contents} onNavigate={onNavigate}>
-          <MarkdownIcon className={`h-6 w-auto mr-2`} />
+          <PageIcon className={`h-4 w-auto mr-2`} />
           <span>{l10n.t(LocalizationKey.dashboardHeaderTabsContents)}</span>
         </Tab>
       </li>
-      <li className="mr-2" role="presentation">
+      <li role="presentation">
         <Tab navigationType={NavigationType.Media} onNavigate={onNavigate}>
-          <PhotoIcon className={`h-6 w-auto mr-2`} />
+          <PhotoIcon className={`h-4 w-auto mr-2`} />
           <span>{l10n.t(LocalizationKey.dashboardHeaderTabsMedia)}</span>
         </Tab>
       </li>
       <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.snippets.view}>
-        <li className="mr-2" role="presentation">
+        <li role="presentation">
           <Tab navigationType={NavigationType.Snippets} onNavigate={onNavigate}>
-            <ScissorsIcon className={`h-6 w-auto mr-2`} />
+            <ScissorsIcon className={`h-4 w-auto mr-2`} />
             <span>{l10n.t(LocalizationKey.dashboardHeaderTabsSnippets)}</span>
           </Tab>
         </li>
       </FeatureFlag>
       <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.data.view}>
-        <li className="mr-2" role="presentation">
+        <li role="presentation">
           <Tab navigationType={NavigationType.Data} onNavigate={onNavigate}>
-            <CircleStackIcon className={`h-6 w-auto mr-2`} />
+            <CircleStackIcon className={`h-4 w-auto mr-2`} />
             <span>{l10n.t(LocalizationKey.dashboardHeaderTabsData)}</span>
           </Tab>
         </li>
       </FeatureFlag>
       <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.taxonomy.view}>
-        <li className="mr-2" role="presentation">
+        <li role="presentation">
           <Tab navigationType={NavigationType.Taxonomy} onNavigate={onNavigate}>
-            <TagIcon className={`h-6 w-auto mr-2`} />
+            <TagIcon className={`h-4 w-auto mr-2`} />
             <span>{l10n.t(LocalizationKey.dashboardHeaderTabsTaxonomies)}</span>
           </Tab>
         </li>

src/panelWebView/components/Icons/PageIcon.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+export interface IPageIconProps {
+  className?: string;
+}
+
+export const PageIcon: React.FunctionComponent<IPageIconProps> = ({
+  className
+}: React.PropsWithChildren<IPageIconProps>) => {
+  return (
+    <svg className={className || ''} fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path d="M14 7H6v2h8V7Zm-2 5h2v1h-2v-1ZM6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM5 7a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7Zm7 4h2a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1Zm-7 .5c0-.28.22-.5.5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Zm.5 1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1 0-1Z" fill="currentColor"></path>
+    </svg>
+  );
+};

src/panelWebView/components/Icons/index.ts

@@ -0,0 +1,20 @@
+export * from './AddIcon';
+export * from './ArchiveIcon';
+export * from './BranchIcon';
+export * from './BugIcon';
+export * from './CenterIcon';
+export * from './FileIcon';
+export * from './FolderOpenedIcon';
+export * from './FrontMatterIcon';
+export * from './GitHubIcon';
+export * from './HeartIcon';
+export * from './ListUnorderedIcon';
+export * from './MarkdownIcon';
+export * from './PageIcon';
+export * from './RocketIcon';
+export * from './SettingsIcon';
+export * from './SymbolKeywordIcon';
+export * from './TagIcon';
+export * from './TemplateIcon';
+export * from './ToggleIcon';
+export * from './WritingIcon';