Skip to content

Commit dbf9097

Browse files
icecrasher321icecrasher321
authored
fix(templates-details): restore approval feature, and keep details UI consistent, smoothen out creation of profile (#1943)
* fix(templates): view current ui * update UI to be less cluttered * make state management for creating user profile smoother * fix autoselect logic * fix lint
1 parent 79b318f commit dbf9097

File tree

9 files changed

+279
-143
lines changed

9 files changed

+279
-143
lines changed

‎apps/sim/app/templates/[id]/template.tsx‎

Lines changed: 167 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -651,10 +651,10 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
651651
className={cn(
652652
'transition-colors',
653653
isStarred &&
654-
'border-yellow-200 bg-yellow-50 text-yellow-700 hover:bg-yellow-100'
654+
'border-yellow-500/50 bg-yellow-500/10 text-yellow-500 hover:bg-yellow-500/20'
655655
)}
656656
>
657-
<Star className={cn('mr-2 h-4 w-4', isStarred && 'fill-current')} />
657+
<Star className={cn('mr-2 h-4 w-4', isStarred && 'fill-yellow-500')} />
658658
{starCount}
659659
</Button>
660660
)}
@@ -837,14 +837,18 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
837837
{/* Workflow preview */}
838838
<div className='flex-1 p-6'>
839839
<div className='mx-auto max-w-7xl'>
840-
<h2 className='mb-4 font-semibold text-xl'>Workflow Preview</h2>
840+
<h2 className='mb-4 font-semibold text-[#0D0D0D] text-lg dark:text-[#F0F0F0]'>
841+
Workflow Preview
842+
</h2>
841843
<div className='h-[600px] w-full'>{renderWorkflowPreview()}</div>
842844

843845
{Array.isArray(template.requiredCredentials) &&
844846
template.requiredCredentials.length > 0 && (
845-
<div className='mt-8'>
846-
<h3 className='mb-3 font-semibold text-lg'>Credentials Needed</h3>
847-
<ul className='list-disc space-y-1 pl-6 text-muted-foreground text-sm'>
847+
<div className='mt-8 border-t pt-8'>
848+
<h3 className='mb-4 font-semibold text-[#0D0D0D] text-base dark:text-[#F0F0F0]'>
849+
Credentials Needed
850+
</h3>
851+
<ul className='ml-5 list-disc space-y-1.5 text-[#707070] text-sm leading-[1.4rem] dark:text-[#E8E8E8]'>
848852
{template.requiredCredentials.map((cred: CredentialRequirement, idx: number) => {
849853
// Get block name from registry or format blockType
850854
const blockName =
@@ -862,97 +866,170 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
862866

863867
{/* About this Workflow */}
864868
{template.details?.about && (
865-
<div className='mt-8'>
866-
<h3 className='mb-3 font-semibold text-lg'>About this Workflow</h3>
867-
<div className='prose prose-sm dark:prose-invert max-w-none'>
868-
<ReactMarkdown>{template.details.about}</ReactMarkdown>
869+
<div className='mt-8 border-t pt-8'>
870+
<h3 className='mb-4 font-semibold text-[#0D0D0D] text-base dark:text-[#F0F0F0]'>
871+
About this Workflow
872+
</h3>
873+
<div className='max-w-none space-y-2'>
874+
<ReactMarkdown
875+
components={{
876+
p: ({ children }) => (
877+
<p className='mb-2 text-[#707070] text-sm leading-[1.4rem] last:mb-0 dark:text-[#E8E8E8]'>
878+
{children}
879+
</p>
880+
),
881+
h1: ({ children }) => (
882+
<h1 className='mt-6 mb-3 font-semibold text-[#0D0D0D] text-xl first:mt-0 dark:text-[#F0F0F0]'>
883+
{children}
884+
</h1>
885+
),
886+
h2: ({ children }) => (
887+
<h2 className='mt-5 mb-2.5 font-semibold text-[#0D0D0D] text-lg first:mt-0 dark:text-[#F0F0F0]'>
888+
{children}
889+
</h2>
890+
),
891+
h3: ({ children }) => (
892+
<h3 className='mt-4 mb-2 font-semibold text-[#0D0D0D] text-base first:mt-0 dark:text-[#F0F0F0]'>
893+
{children}
894+
</h3>
895+
),
896+
h4: ({ children }) => (
897+
<h4 className='mt-3 mb-2 font-semibold text-[#0D0D0D] text-sm first:mt-0 dark:text-[#F0F0F0]'>
898+
{children}
899+
</h4>
900+
),
901+
ul: ({ children }) => (
902+
<ul className='my-2 ml-5 list-disc space-y-1.5 text-[#707070] text-sm dark:text-[#E8E8E8]'>
903+
{children}
904+
</ul>
905+
),
906+
ol: ({ children }) => (
907+
<ol className='my-2 ml-5 list-decimal space-y-1.5 text-[#707070] text-sm dark:text-[#E8E8E8]'>
908+
{children}
909+
</ol>
910+
),
911+
li: ({ children }) => <li className='leading-[1.4rem]'>{children}</li>,
912+
code: ({ inline, children }: any) =>
913+
inline ? (
914+
<code className='rounded bg-[#F5F5F5] px-1.5 py-0.5 font-mono text-[#F59E0B] text-xs dark:bg-[#2A2A2A]'>
915+
{children}
916+
</code>
917+
) : (
918+
<code className='my-2 block overflow-x-auto rounded-md bg-[#F5F5F5] p-3 font-mono text-[#0D0D0D] text-xs dark:bg-[#1A1A1A] dark:text-[#E5E5E5]'>
919+
{children}
920+
</code>
921+
),
922+
a: ({ href, children }) => (
923+
<a
924+
href={href}
925+
target='_blank'
926+
rel='noopener noreferrer'
927+
className='text-[#3B82F6] underline-offset-2 transition-colors hover:text-[#60A5FA] hover:underline dark:text-[#60A5FA] dark:hover:text-[#93C5FD]'
928+
>
929+
{children}
930+
</a>
931+
),
932+
strong: ({ children }) => (
933+
<strong className='font-semibold text-[#0D0D0D] dark:text-white'>
934+
{children}
935+
</strong>
936+
),
937+
em: ({ children }) => (
938+
<em className='text-[#888888] dark:text-[#B8B8B8]'>{children}</em>
939+
),
940+
}}
941+
>
942+
{template.details.about}
943+
</ReactMarkdown>
869944
</div>
870945
</div>
871946
)}
872947

873948
{/* Creator Profile */}
874949
{template.creator && (
875-
<div className='mt-8'>
876-
<h3 className='mb-4 font-semibold text-lg'>About the Creator</h3>
877-
<div className='rounded-lg border bg-card p-6'>
878-
<div className='flex items-start gap-4'>
879-
{/* Profile Picture */}
880-
<div className='flex-shrink-0'>
881-
{template.creator.profileImageUrl ? (
882-
<div className='relative h-20 w-20 overflow-hidden rounded-full'>
883-
<img
884-
src={template.creator.profileImageUrl}
885-
alt={template.creator.name}
886-
className='h-full w-full object-cover'
887-
/>
888-
</div>
889-
) : (
890-
<div className='flex h-20 w-20 items-center justify-center rounded-full bg-[#802FFF]'>
891-
<User className='h-10 w-10 text-white' />
892-
</div>
893-
)}
894-
</div>
950+
<div className='mt-8 border-t pt-8'>
951+
<h3 className='mb-4 font-semibold text-[#0D0D0D] text-base dark:text-[#F0F0F0]'>
952+
About the Creator
953+
</h3>
954+
<div className='flex items-start gap-4'>
955+
{/* Profile Picture */}
956+
<div className='flex-shrink-0'>
957+
{template.creator.profileImageUrl ? (
958+
<div className='relative h-16 w-16 overflow-hidden rounded-full ring-1 ring-border'>
959+
<img
960+
src={template.creator.profileImageUrl}
961+
alt={template.creator.name}
962+
className='h-full w-full object-cover'
963+
/>
964+
</div>
965+
) : (
966+
<div className='flex h-16 w-16 items-center justify-center rounded-full bg-purple-600 ring-1 ring-border'>
967+
<User className='h-8 w-8 text-white' />
968+
</div>
969+
)}
970+
</div>
895971

896-
{/* Creator Info */}
897-
<div className='flex-1'>
898-
<h4 className='font-semibold text-lg'>{template.creator.name}</h4>
899-
{template.creator.details?.about && (
900-
<p className='mt-2 text-muted-foreground text-sm leading-relaxed'>
901-
{template.creator.details.about}
902-
</p>
903-
)}
904-
905-
{/* Social Links */}
906-
{(template.creator.details?.xUrl ||
907-
template.creator.details?.linkedinUrl ||
908-
template.creator.details?.websiteUrl ||
909-
template.creator.details?.contactEmail) && (
910-
<div className='mt-4 flex flex-wrap gap-3'>
911-
{template.creator.details.xUrl && (
912-
<a
913-
href={template.creator.details.xUrl}
914-
target='_blank'
915-
rel='noopener noreferrer'
916-
className='inline-flex items-center gap-1.5 text-muted-foreground text-sm transition-colors hover:text-foreground'
917-
>
918-
<Twitter className='h-4 w-4' />
919-
<span>X</span>
920-
</a>
921-
)}
922-
{template.creator.details.linkedinUrl && (
923-
<a
924-
href={template.creator.details.linkedinUrl}
925-
target='_blank'
926-
rel='noopener noreferrer'
927-
className='inline-flex items-center gap-1.5 text-muted-foreground text-sm transition-colors hover:text-foreground'
928-
>
929-
<Linkedin className='h-4 w-4' />
930-
<span>LinkedIn</span>
931-
</a>
932-
)}
933-
{template.creator.details.websiteUrl && (
934-
<a
935-
href={template.creator.details.websiteUrl}
936-
target='_blank'
937-
rel='noopener noreferrer'
938-
className='inline-flex items-center gap-1.5 text-muted-foreground text-sm transition-colors hover:text-foreground'
939-
>
940-
<Globe className='h-4 w-4' />
941-
<span>Website</span>
942-
</a>
943-
)}
944-
{template.creator.details.contactEmail && (
945-
<a
946-
href={`mailto:${template.creator.details.contactEmail}`}
947-
className='inline-flex items-center gap-1.5 text-muted-foreground text-sm transition-colors hover:text-foreground'
948-
>
949-
<Mail className='h-4 w-4' />
950-
<span>Contact</span>
951-
</a>
952-
)}
953-
</div>
954-
)}
955-
</div>
972+
{/* Creator Info */}
973+
<div className='min-w-0 flex-1'>
974+
<h4 className='font-semibold text-[#0D0D0D] dark:text-[#F0F0F0]'>
975+
{template.creator.name}
976+
</h4>
977+
{template.creator.details?.about && (
978+
<p className='mt-1.5 text-[#707070] text-sm leading-[1.4rem] dark:text-[#E8E8E8]'>
979+
{template.creator.details.about}
980+
</p>
981+
)}
982+
983+
{/* Social Links */}
984+
{(template.creator.details?.xUrl ||
985+
template.creator.details?.linkedinUrl ||
986+
template.creator.details?.websiteUrl ||
987+
template.creator.details?.contactEmail) && (
988+
<div className='mt-3 flex flex-wrap gap-4'>
989+
{template.creator.details.xUrl && (
990+
<a
991+
href={template.creator.details.xUrl}
992+
target='_blank'
993+
rel='noopener noreferrer'
994+
className='inline-flex items-center gap-1.5 text-[#707070] text-sm transition-colors hover:text-[#0D0D0D] dark:text-[#E8E8E8] dark:hover:text-[#F0F0F0]'
995+
>
996+
<Twitter className='h-3.5 w-3.5' />
997+
<span>X</span>
998+
</a>
999+
)}
1000+
{template.creator.details.linkedinUrl && (
1001+
<a
1002+
href={template.creator.details.linkedinUrl}
1003+
target='_blank'
1004+
rel='noopener noreferrer'
1005+
className='inline-flex items-center gap-1.5 text-[#707070] text-sm transition-colors hover:text-[#0D0D0D] dark:text-[#E8E8E8] dark:hover:text-[#F0F0F0]'
1006+
>
1007+
<Linkedin className='h-3.5 w-3.5' />
1008+
<span>LinkedIn</span>
1009+
</a>
1010+
)}
1011+
{template.creator.details.websiteUrl && (
1012+
<a
1013+
href={template.creator.details.websiteUrl}
1014+
target='_blank'
1015+
rel='noopener noreferrer'
1016+
className='inline-flex items-center gap-1.5 text-[#707070] text-sm transition-colors hover:text-[#0D0D0D] dark:text-[#E8E8E8] dark:hover:text-[#F0F0F0]'
1017+
>
1018+
<Globe className='h-3.5 w-3.5' />
1019+
<span>Website</span>
1020+
</a>
1021+
)}
1022+
{template.creator.details.contactEmail && (
1023+
<a
1024+
href={`mailto:${template.creator.details.contactEmail}`}
1025+
className='inline-flex items-center gap-1.5 text-[#707070] text-sm transition-colors hover:text-[#0D0D0D] dark:text-[#E8E8E8] dark:hover:text-[#F0F0F0]'
1026+
>
1027+
<Mail className='h-3.5 w-3.5' />
1028+
<span>Contact</span>
1029+
</a>
1030+
)}
1031+
</div>
1032+
)}
9561033
</div>
9571034
</div>
9581035
</div>

‎apps/sim/app/templates/components/template-card.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -337,8 +337,8 @@ export function TemplateCard({
337337
className={cn(
338338
'h-4 w-4 cursor-pointer transition-colors duration-50',
339339
localIsStarred
340-
? 'fill-yellow-400 text-yellow-400'
341-
: 'text-muted-foreground hover:fill-yellow-400 hover:text-yellow-400',
340+
? 'fill-yellow-500 text-yellow-500'
341+
: 'text-muted-foreground hover:fill-yellow-500 hover:text-yellow-500',
342342
isStarLoading && 'opacity-50'
343343
)}
344344
/>

‎apps/sim/app/templates/template-card.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -460,8 +460,8 @@ export function TemplateCard({
460460
className={cn(
461461
'h-4 w-4 cursor-pointer transition-colors duration-50',
462462
localIsStarred
463-
? 'fill-yellow-400 text-yellow-400'
464-
: 'text-muted-foreground hover:fill-yellow-400 hover:text-yellow-400',
463+
? 'fill-yellow-500 text-yellow-500'
464+
: 'text-muted-foreground hover:fill-yellow-500 hover:text-yellow-500',
465465
isStarLoading && 'opacity-50'
466466
)}
467467
/>

‎apps/sim/app/theme-provider.tsx‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,25 @@ import { ThemeProvider as NextThemesProvider } from 'next-themes'
77
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
88
const pathname = usePathname()
99

10-
// Force dark mode for workspace pages
10+
// Force dark mode for workspace pages and templates
1111
// Force light mode for certain public pages
12-
const forcedTheme = pathname.startsWith('/workspace')
13-
? 'dark'
14-
: pathname === '/' ||
15-
pathname.startsWith('/login') ||
16-
pathname.startsWith('/signup') ||
17-
pathname.startsWith('/sso') ||
18-
pathname.startsWith('/terms') ||
19-
pathname.startsWith('/privacy') ||
20-
pathname.startsWith('/invite') ||
21-
pathname.startsWith('/verify') ||
22-
pathname.startsWith('/careers') ||
23-
pathname.startsWith('/changelog') ||
24-
pathname.startsWith('/chat') ||
25-
pathname.startsWith('/studio')
26-
? 'light'
27-
: undefined
12+
const forcedTheme =
13+
pathname.startsWith('/workspace') || pathname.startsWith('/templates')
14+
? 'dark'
15+
: pathname === '/' ||
16+
pathname.startsWith('/login') ||
17+
pathname.startsWith('/signup') ||
18+
pathname.startsWith('/sso') ||
19+
pathname.startsWith('/terms') ||
20+
pathname.startsWith('/privacy') ||
21+
pathname.startsWith('/invite') ||
22+
pathname.startsWith('/verify') ||
23+
pathname.startsWith('/careers') ||
24+
pathname.startsWith('/changelog') ||
25+
pathname.startsWith('/chat') ||
26+
pathname.startsWith('/studio')
27+
? 'light'
28+
: undefined
2829

2930
return (
3031
<NextThemesProvider

‎apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -353,7 +353,7 @@ export function TemplateCard({
353353
onClick={handleStarClick}
354354
className={cn(
355355
'h-[12px] w-[12px] cursor-pointer transition-colors',
356-
localIsStarred ? 'fill-yellow-400 text-yellow-400' : 'text-[#888888]',
356+
localIsStarred ? 'fill-yellow-500 text-yellow-500' : 'text-[#888888]',
357357
isStarLoading && 'opacity-50'
358358
)}
359359
/>

0 commit comments

Comments
 (0)