Improved template layout

src/dashboardWebView/components/Steps/Step.tsx

@@ -24,61 +24,45 @@ export const Step: React.FunctionComponent<IStepProps> = ({
     return (
       <>
         {status === Status.NotStarted && (
-          <span className="h-9 flex items-center" aria-hidden="true">
-            <span
-              className={`relative z-10 w-8 h-8 flex items-center justify-center border-2 rounded-full bg-[var(--frontmatter-border)] border-[var(--frontmatter-border)] ${onClick ? getColors('group-hover:text-gray-400', 'group-hover:text-[var(--vscode-button-foreground)] group-hover:border-[var(--vscode-button-hoverBackground)]') : ''
+          <div className="h-9 flex items-center" aria-hidden="true">
+            <div
+              className={`relative z-10 w-8 h-8 flex items-center justify-center border-2 rounded-full bg-[var(--frontmatter-border)] border-[var(--frontmatter-border)] ${onClick ? 'group-hover:text-[var(--vscode-button-foreground)] group-hover:border-[var(--vscode-button-hoverBackground)]' : ''
                 }`}
             >
               <span
                 className={`h-2.5 w-2.5 bg-transparent rounded-full ${onClick ? getColors('group-hover:bg-gray-400', 'group-hover:bg-[var(--vscode-button-hoverBackground)]') : ''
                   }`}
               />
-            </span>
-          </span>
+            </div>
+          </div>
         )}
 
         {status === Status.Active && (
-          <span className="h-9 flex items-center" aria-hidden="true">
-            <span className={`relative z-10 w-8 h-8 flex items-center justify-center border-2 rounded-full ${getColors(
-              'bg-white border-teal-600',
-              'bg-[var(--frontmatter-border)] border-[var(--frontmatter-border)] group-hover:text-[var(--vscode-button-foreground)] group-hover:border-[var(--vscode-button-hoverBackground)]'
-            )
-              }`}>
+          <div className="h-9 flex items-center" aria-hidden="true">
+            <div className={`relative z-10 w-8 h-8 flex items-center justify-center border-2 rounded-full bg-[var(--frontmatter-border)] border-[var(--frontmatter-border)] group-hover:text-[var(--vscode-button-foreground)] group-hover:border-[var(--vscode-button-hoverBackground)]`}>
               <span className={`h-2.5 w-2.5 rounded-full ${getColors(
                 'bg-teal-600',
                 'bg-[var(--frontmatter-button-background)]'
               )
                 }`} />
-            </span>
-          </span>
+            </div>
+          </div>
         )}
 
         {status === Status.Completed && (
-          <span className="h-9 flex items-center">
-            <span className={`relative z-10 w-8 h-8 flex items-center justify-center rounded-full ${getColors(
-              'bg-teal-600 group-hover:bg-teal-800',
-              'text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] group-hover:bg-[var(--vscode-button-hoverBackground)]'
-            )
-              }`}>
-              <CheckIcon className={`w-5 h-5 ${getColors('text-white', '')}`} aria-hidden="true" />
-            </span>
-          </span>
+          <div className="h-9 flex items-center">
+            <div className={`relative z-10 w-8 h-8 flex items-center justify-center rounded-full text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] group-hover:bg-[var(--vscode-button-hoverBackground)]`}>
+              <CheckIcon className={`w-5 h-5`} aria-hidden="true" />
+            </div>
+          </div>
         )}
 
-        <span className={`ml-4 min-w-0 flex flex-col`}>
-          <span className={`text-xs font-semibold tracking-wide uppercase ${getColors(
-            'text-vulcan-500 dark:text-whisper-500',
-            'text-[var(--vscode-editor-foreground)]'
-          )
-            }`}>
+        <div className={`ml-4 flex flex-col w-full`}>
+          <div className={`text-xs font-semibold tracking-wide uppercase text-[var(--vscode-editor-foreground)]`}>
             {name}
-          </span>
-          <div className={`mt-1 text-sm ${getColors(
-            'text-vulcan-400 dark:text-whisper-600',
-            'text-[var(--vscode-editor-foreground)]'
-          )
-            }`}>{description}</div>
-        </span>
+          </div>
+          <div className={`mt-1 text-sm text-[var(--vscode-editor-foreground)]`}>{description}</div>
+        </div>
       </>
     );
   };

src/dashboardWebView/components/Steps/StepsToGetStarted.tsx

@@ -16,6 +16,8 @@ import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { SelectItem } from './SelectItem';
 import { Templates } from '../../../constants';
+import { TemplateItem } from './TemplateItem';
+import { Spinner } from '../Common/Spinner';
 
 export interface IStepsToGetStartedProps {
   settings: Settings;
@@ -50,6 +52,7 @@ const Folder = ({
 export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps> = ({
   settings
 }: React.PropsWithChildren<IStepsToGetStartedProps>) => {
+  const [loading, setLoading] = useState<boolean>(false);
   const [framework, setFramework] = useState<string | null>(null);
   const [taxImported, setTaxImported] = useState<boolean>(false);
   const [templates, setTemplates] = useState<Template[]>([]);
@@ -71,7 +74,9 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
   }
 
   const triggerTemplate = (template: Template) => {
+    setLoading(true);
     messageHandler.request<boolean>(DashboardMessage.triggerTemplate, template).then((result) => {
+      setLoading(false);
       if (result) {
         reload();
       }
@@ -183,17 +188,18 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
         id: `welcome-template`,
         name: l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedTemplateName),
         description: (
-          <div className='mt-4'>
+          <div className=''>
             <div className="text-sm">{l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedTemplateDescription)}</div>
-            <div className="mt-1 space-y-1">
+            <div className="mt-4 grid grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-4 w-full">
               {
                 crntTemplates && (crntTemplates || []).map(template => (
-                  <SelectItem
+                  <TemplateItem
                     key={template.name.toLowerCase().replace(/ /g, '-')}
                     title={template.name}
-                    icon='add'
+                    author={template.author}
+                    version={template.version}
+                    description={template.description}
                     buttonTitle={template.name}
-                    isSelected={false}
                     onClick={() => triggerTemplate(template)} />
                 ))
               }
@@ -321,6 +327,11 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
 
   return (
     <nav aria-label="Progress">
+      {
+        loading && (
+          <Spinner />
+        )
+      }
       <ol role="list">
         {steps.map((step, stepIdx) => (
           step.show && (

src/dashboardWebView/components/Steps/TemplateItem.tsx

@@ -0,0 +1,38 @@
+import { UserIcon } from '@heroicons/react/outline';
+import { PuzzleIcon } from '@heroicons/react/solid';
+import * as React from 'react';
+
+export interface ITemplateItemProps {
+  title: string;
+  description: string;
+  author: string;
+  version: string;
+  buttonTitle: string;
+  onClick: () => void;
+}
+
+export const TemplateItem: React.FunctionComponent<ITemplateItemProps> = ({
+  title,
+  description,
+  author,
+  version,
+  buttonTitle,
+  onClick,
+}: React.PropsWithChildren<ITemplateItemProps>) => {
+  return (
+    <button
+      type='button'
+      onClick={onClick}
+      title={buttonTitle}
+      className='relative p-2 text-left space-y-2 rounded flex flex-col bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-editor-foreground)] border border-[var(--frontmatter-border)]'>
+      <h2 className='text-base'>{title}</h2>
+      <p className='text-sm'>{description}</p>
+      <div className='text-xs flex justify-between items-center w-full opacity-75'>
+        <span className='inline-flex items-center gap-1'><UserIcon className='inline w-3 h-3' /> {author}</span>
+        <span>v{version}</span>
+      </div>
+
+      <PuzzleIcon className='absolute top-0 right-2 h-8 w-8 opacity-25' />
+    </button>
+  );
+};