Skip to content

Commit 2042c8e

Browse files
hammond-ljhammond-lj
authored
restore template card style (#2347)
1 parent 39df23f commit 2042c8e

File tree

21 files changed

+710
-86
lines changed

21 files changed

+710
-86
lines changed

‎apps/nextjs-app/src/features/app/blocks/table/table-header/publish-base/NodeTreeSelect.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -340,8 +340,8 @@ export const NodeTreeSelect = (props: INodeSelectProps) => {
340340
if (totalNodeCount && checkedItems.length === totalNodeCount) {
341341
return (
342342
<div className="flex min-w-0 flex-1 items-center gap-2">
343-
<div className="flex items-center rounded-md bg-secondary px-2 py-1">
344-
<span className="text-sm font-medium">{t('common:allNodes')}</span>
343+
<div className="flex items-center rounded-md bg-surface px-2 py-1">
344+
<span className="text-xs font-normal">{t('common:allNodes')}</span>
345345
</div>
346346
</div>
347347
);
@@ -363,20 +363,20 @@ export const NodeTreeSelect = (props: INodeSelectProps) => {
363363
return (
364364
<div
365365
key={node.id}
366-
className="flex min-w-0 items-center gap-1.5 rounded-md bg-secondary px-2 py-1"
366+
className="flex min-w-0 items-center gap-1.5 rounded-md bg-surface px-2 py-1"
367367
>
368368
{node.resourceType === BaseNodeResourceType.Table && icon ? (
369369
<Emoji emoji={icon} size={'1rem'} className="shrink-0" />
370370
) : (
371371
<IconComponent className="size-4 shrink-0" />
372372
)}
373-
<span className="min-w-0 truncate text-sm">{getNodeName(node)}</span>
373+
<span className="min-w-0 truncate text-xs">{getNodeName(node)}</span>
374374
</div>
375375
);
376376
})}
377377
{remainingCount > 0 && (
378-
<div className="flex items-center rounded-md bg-secondary px-2 py-1">
379-
<span className="text-sm font-medium">+{remainingCount}</span>
378+
<div className="flex items-center rounded-md bg-transparent py-1">
379+
<span className="text-sm">+{remainingCount}</span>
380380
</div>
381381
)}
382382
</div>
@@ -390,14 +390,14 @@ export const NodeTreeSelect = (props: INodeSelectProps) => {
390390
variant="outline"
391391
role="combobox"
392392
aria-expanded={open}
393-
className={cn('h-9 w-full justify-between py-2', className)}
393+
className={cn('h-9 w-full justify-between p-2', className)}
394394
disabled={disabled}
395395
>
396396
<div className="flex min-w-0 flex-1 items-center gap-2">{renderSelectedNodes()}</div>
397397
<ChevronDown className="ml-2 size-4 shrink-0 opacity-50" />
398398
</Button>
399399
</PopoverTrigger>
400-
<PopoverContent className="w-[400px] overflow-hidden p-0" align="start">
400+
<PopoverContent className="w-[354px] overflow-hidden p-0" align="start">
401401
{/* search input */}
402402
<div className="px-4 pt-4">
403403
<div className="relative">
@@ -419,7 +419,7 @@ export const NodeTreeSelect = (props: INodeSelectProps) => {
419419
</div>
420420
</div>
421421

422-
<div className="h-[300px] w-full overflow-x-hidden px-4 py-2">
422+
<div className="max-h-[240px] w-full overflow-x-hidden px-4 py-2">
423423
<div
424424
{...tree.getContainerProps()}
425425
className="flex w-full flex-col p-1"

‎apps/nextjs-app/src/features/app/blocks/table/table-header/publish-base/PublishBaseDialog.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -375,7 +375,7 @@ export const PublishBaseDialog = (props: IPublishBaseDialogProps) => {
375375

376376
<div className="flex flex-col gap-2">
377377
<div className="flex items-center gap-2">
378-
<span className="text-sm">{t('publishBase.form.publishNode')}</span>
378+
<span className="text-sm font-semibold">{t('publishBase.form.publishNode')}</span>
379379
</div>
380380
<NodeTreeSelect
381381
showCheckbox
@@ -389,7 +389,7 @@ export const PublishBaseDialog = (props: IPublishBaseDialogProps) => {
389389
</div>
390390

391391
<div className="flex flex-col gap-2">
392-
<span className="text-sm">{t('publishBase.form.security')}</span>
392+
<span className="text-sm font-semibold">{t('publishBase.form.security')}</span>
393393
<div className="flex items-center space-x-2">
394394
<Switch
395395
id="include-data"
@@ -411,7 +411,7 @@ export const PublishBaseDialog = (props: IPublishBaseDialogProps) => {
411411
/>
412412
</div>
413413

414-
<div className="absolute inset-x-0 bottom-0 flex w-full gap-1">
414+
<div className="absolute inset-x-0 bottom-0 flex w-full gap-3">
415415
{templateDetail && (
416416
<AlertDialog>
417417
<AlertDialogTrigger asChild>
@@ -472,12 +472,13 @@ export const PublishBaseDialog = (props: IPublishBaseDialogProps) => {
472472

473473
<div className="relative h-[520px] w-[512px] shrink-0 overflow-hidden rounded-lg border bg-muted">
474474
{templateDetail?.isPublished && (
475-
<div className="absolute left-1/2 top-6 z-50 flex max-w-[480px] -translate-x-1/2 items-center gap-2 overflow-hidden rounded-md border bg-background px-3 py-1 shadow-md">
475+
<div className="absolute bottom-6 left-1/2 z-50 flex h-9 max-w-[432px] -translate-x-1/2 items-center gap-2 overflow-hidden rounded-md border bg-background pl-3">
476+
<Link className="size-4 shrink-0" />
476477
<div className="truncate text-sm text-muted-foreground">{shareUrl}</div>
477478
<Button
478-
size="sm"
479-
variant="outline"
480-
className="size-8 shrink-0 p-0"
479+
size="icon"
480+
variant="ghost"
481+
className="size-9 shrink-0 rounded-none border-l p-0"
481482
onClick={handleCopyUrl}
482483
>
483484
<Copy className="size-4" />
@@ -492,12 +493,12 @@ export const PublishBaseDialog = (props: IPublishBaseDialogProps) => {
492493
className="hidden"
493494
onChange={handleFileSelect}
494495
/>
495-
<div className="relative flex size-full flex-col items-center justify-center gap-3 p-5">
496+
<div className="relative flex size-full flex-col items-center justify-center gap-6 p-5">
496497
<div className="text-base font-semibold">{t('publishBase.previewTips')}</div>
497498

498-
<div className="flex min-h-[302px] w-[432px] flex-col">
499+
<div className="flex w-[432px] flex-col gap-3 bg-transparent">
499500
<div
500-
className="group relative h-[180px] cursor-pointer overflow-hidden rounded-md border shadow-md"
501+
className="group relative h-[240px] cursor-pointer overflow-hidden rounded-lg bg-surface"
501502
onClick={handleUploadClick}
502503
role="button"
503504
tabIndex={0}
@@ -524,15 +525,15 @@ export const PublishBaseDialog = (props: IPublishBaseDialogProps) => {
524525
</div>
525526
</>
526527
) : (
527-
<div className="flex size-full flex-col items-center justify-center gap-4 bg-muted transition-colors hover:bg-muted/80">
528+
<div className="flex size-full flex-col items-center justify-center gap-3 transition-colors hover:bg-black/5 dark:hover:bg-white/10">
528529
{isUploading ? (
529530
<>
530-
<Spin className="size-12" />
531+
<Spin className="size-8" />
531532
<span className="text-sm text-muted-foreground">{uploadProgress}%</span>
532533
</>
533534
) : (
534535
<>
535-
<Plus className="size-12 text-muted-foreground" />
536+
<Plus className="size-8 text-muted-foreground" />
536537
<span className="text-sm text-muted-foreground">
537538
{t('publishBase.uploadCover')}
538539
</span>
@@ -541,15 +542,15 @@ export const PublishBaseDialog = (props: IPublishBaseDialogProps) => {
541542
</div>
542543
)}
543544
</div>
544-
<div className="flex flex-1 flex-col gap-1 pt-2">
545+
<div className="flex flex-1 flex-col gap-1 px-1">
545546
<div className="flex items-center justify-between">
546547
<p
547548
className={cn(
548-
'text-sm font-semibold',
549+
'text-base font-medium',
549550
title ? 'text-foreground' : 'text-muted-foreground'
550551
)}
551552
>
552-
{title || t('publishBase.form.toBeFilled')}
553+
{title || t('publishBase.form.titlePlaceholder')}
553554
</p>
554555

555556
<div className="flex items-center gap-1 text-sm text-muted-foreground">
@@ -560,11 +561,11 @@ export const PublishBaseDialog = (props: IPublishBaseDialogProps) => {
560561
<span
561562
className={cn(
562563
'text-nowrap break-words text-sm truncate',
563-
description ? 'text-foreground' : 'text-muted-foreground'
564+
description ? 'text-muted-foreground' : 'text-foreground/50'
564565
)}
565566
title={description}
566567
>
567-
{description || t('publishBase.form.toBeFilled')}
568+
{description || t('publishBase.form.descriptionPlaceholder')}
568569
</span>
569570
</div>
570571
</div>

‎apps/nextjs-app/src/features/app/components/space/template/CategoryMenu.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useTranslation } from 'next-i18next';
77
import { CategoryMenuItem } from './CategoryMenuItem';
88

99
const CategoryGroupLabel = ({ label }: { label: string }) => {
10-
return <span className="text-sm font-medium text-muted-foreground">{label}</span>;
10+
return <span className="mb-1 px-2 text-sm font-medium text-muted-foreground">{label}</span>;
1111
};
1212

1313
interface ICategoryMenuProps {
@@ -40,7 +40,7 @@ export const CategoryMenu = (props: ICategoryMenuProps) => {
4040

4141
return (
4242
<div
43-
className={cn('flex flex-col gap-3 overflow-hidden p-2 shrink-0 w-64', className, {
43+
className={cn('flex flex-col gap-6 overflow-hidden px-2 pt-4 shrink-0 w-64', className, {
4444
'flex-row w-full': isMobile,
4545
})}
4646
>
@@ -68,7 +68,7 @@ export const CategoryMenu = (props: ICategoryMenuProps) => {
6868

6969
{categoryList && categoryList.length > 0 && (
7070
<div
71-
className={cn('flex flex-1 flex-col gap-1 overflow-hidden', {
71+
className={cn('flex flex-1 flex-col overflow-hidden', {
7272
'flex-row overflow-x-auto': isMobile,
7373
})}
7474
>
@@ -79,7 +79,7 @@ export const CategoryMenu = (props: ICategoryMenuProps) => {
7979
)}
8080

8181
<div
82-
className={cn('flex flex-1 flex-col gap-y-1 overflow-auto', {
82+
className={cn('flex flex-1 flex-col overflow-auto', {
8383
'flex-row gap-x-0.5': isMobile,
8484
})}
8585
>

‎apps/nextjs-app/src/features/app/components/space/template/CategoryMenuItem.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ export const CategoryMenuItem = (props: CategoryMenuItemProps) => {
1111
const { category, currentCategoryId, id, onClickHandler } = props;
1212
return (
1313
<Button
14-
className={cn('w-full justify-start', {
15-
'bg-secondary': currentCategoryId === id,
14+
className={cn('px-2 h-8 cursor-pointer w-full justify-start', {
15+
'bg-accent': currentCategoryId === id,
1616
})}
1717
variant="ghost"
1818
onClick={() => onClickHandler(id)}
1919
>
20-
<span className="truncate text-nowrap text-sm font-medium" title={category}>
20+
<span className="truncate text-nowrap text-sm" title={category}>
2121
{category}
2222
</span>
2323
</Button>

‎apps/nextjs-app/src/features/app/components/space/template/RecommendTemplate.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,14 +54,14 @@ export const RecommendTemplate = (props: IRecommendTemplateProps) => {
5454
<p className="text-base font-semibold text-foreground">
5555
{t('settings.templateAdmin.relatedTemplates')}
5656
</p>
57-
<div className="flex flex-col items-start justify-start gap-4 self-stretch md:flex-row">
57+
<div className="flex flex-col items-start justify-start gap-5 self-stretch md:flex-row">
5858
{filteredTemplates?.map((template) => (
5959
<div
6060
key={template.id}
61-
className="group relative flex h-64 w-full flex-col items-start justify-start bg-background transition-shadow focus:outline-none md:max-w-[33%] md:flex-1"
61+
className="group relative flex w-full flex-col items-start justify-start rounded-lg border bg-card transition-shadow hover:shadow-md focus:outline-none md:max-w-[33%] md:flex-1"
6262
>
6363
<div
64-
className="relative h-[218px] w-full cursor-pointer self-stretch overflow-hidden rounded-lg border border-border bg-secondary hover:shadow-md"
64+
className="relative h-[218px] w-full cursor-pointer self-stretch overflow-hidden bg-secondary"
6565
onClick={() => handleTemplateClick(template.id)}
6666
onKeyDown={(e) => handleKeyDown(e, template.id)}
6767
role="button"
@@ -81,7 +81,7 @@ export const RecommendTemplate = (props: IRecommendTemplateProps) => {
8181
</div>
8282
)}
8383
</div>
84-
<div className="flex flex-col items-start justify-center gap-0.5 self-stretch border-border bg-background px-1 pt-1">
84+
<div className="flex flex-col items-start justify-center gap-1 self-stretch p-4">
8585
<div className="relative flex items-start justify-start gap-1 self-stretch">
8686
<p
8787
className="w-full truncate text-sm font-medium text-foreground"

‎apps/nextjs-app/src/features/app/components/space/template/TemplateCard.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const TemplateCard = ({ template, onClickTemplateCardHandler }: ITemplate
1414

1515
return (
1616
<div
17-
className="relative flex h-[236px] w-full shrink-0 cursor-pointer flex-col overflow-hidden"
17+
className="relative flex w-full shrink-0 cursor-pointer flex-col"
1818
role="button"
1919
tabIndex={0}
2020
onClick={(e) => {
@@ -28,7 +28,7 @@ export const TemplateCard = ({ template, onClickTemplateCardHandler }: ITemplate
2828
}
2929
}}
3030
>
31-
<div className="group h-[180px] w-auto shrink-0 overflow-hidden rounded-lg border bg-secondary p-0 transition-shadow hover:shadow-lg">
31+
<div className="group h-[180px] w-auto shrink-0 overflow-hidden rounded-lg border bg-secondary p-0 transition-shadow hover:shadow-[0_4px_12px_-4px_rgba(0,0,0,0.08),0_3px_6px_-2px_rgba(0,0,0,0.08)]">
3232
{presignedUrl ? (
3333
<img
3434
src={presignedUrl}
@@ -44,9 +44,9 @@ export const TemplateCard = ({ template, onClickTemplateCardHandler }: ITemplate
4444
)}
4545
</div>
4646

47-
<div className="flex flex-1 flex-col gap-0.5 pt-2">
47+
<div className="flex flex-1 flex-col gap-1 px-1 pt-2">
4848
<h2 className="flex items-center justify-between text-base">
49-
<span className="truncate font-semibold" title={name}>
49+
<span className="truncate font-medium" title={name}>
5050
{name}
5151
</span>
5252

‎apps/nextjs-app/src/features/app/components/space/template/TemplateDetail.tsx‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -161,9 +161,9 @@ export const TemplateDetail = (props: ITemplateDetailProps) => {
161161

162162
return (
163163
<div className="absolute inset-0 flex size-full flex-col rounded bg-background">
164-
<div className="flex gap-3 px-6 py-3 pr-14">
164+
<div className="flex gap-3 border-b px-6 py-4 pr-12">
165165
<div className="flex flex-1 flex-col gap-1 overflow-hidden">
166-
<div className="flex items-center gap-4">
166+
<div className="flex items-center gap-3">
167167
{onBackToTemplateList && (
168168
<Button
169169
className="h-auto p-0 font-normal"
@@ -173,12 +173,12 @@ export const TemplateDetail = (props: ITemplateDetailProps) => {
173173
<ChevronLeft className="size-6" />
174174
</Button>
175175
)}
176-
<h1 className="truncate bg-background text-lg font-bold">{name}</h1>
176+
<h1 className="truncate text-lg font-semibold">{name}</h1>
177177
{categoryNames.length > 0 &&
178178
categoryNames.map((name) => (
179179
<Badge
180180
variant="secondary"
181-
className="text-xs font-normal text-muted-foreground"
181+
className="px-2 text-xs font-normal text-muted-foreground"
182182
key={name}
183183
>
184184
{name}
@@ -187,7 +187,7 @@ export const TemplateDetail = (props: ITemplateDetailProps) => {
187187
</div>
188188
<p
189189
className={cn(
190-
'overflow-hidden text-wrap break-words pl-10 text-base font-normal text-muted-foreground',
190+
'overflow-hidden text-wrap break-words pl-9 text-sm font-normal text-muted-foreground',
191191
{
192192
'pl-0': !onBackToTemplateList,
193193
}
@@ -196,23 +196,21 @@ export const TemplateDetail = (props: ITemplateDetailProps) => {
196196
{description}
197197
</p>
198198
</div>
199-
<Button
200-
size="sm"
201-
className="my-3"
202-
onClick={() => createTemplateToBase()}
203-
disabled={isLoading}
204-
>
199+
<Button size="default" onClick={() => createTemplateToBase()} disabled={isLoading}>
205200
{t('common:settings.templateAdmin.useTemplate')}
206201
{isLoading && <Spin className="size-3" />}
207202
</Button>
208203
</div>
209-
<div ref={detailRef} className="flex flex-1 flex-col gap-8 overflow-y-auto px-10 py-6">
204+
<div
205+
ref={detailRef}
206+
className="flex flex-1 flex-col gap-8 overflow-y-auto bg-muted px-10 py-6"
207+
>
210208
<TemplatePreview detail={templateDetail} />
211-
<div className="flex flex-col gap-1 pb-2">
212-
{markdownDescription && (
209+
{markdownDescription && (
210+
<div className="flex flex-col gap-1 pb-2">
213211
<MarkdownPreview className="p-0">{markdownDescription}</MarkdownPreview>
214-
)}
215-
</div>
212+
</div>
213+
)}
216214
<RecommendTemplate
217215
filterTemplateIds={filterTemplateIds}
218216
onTemplateClick={onTemplateClick}

‎apps/nextjs-app/src/features/app/components/space/template/TemplateList.tsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ export const TemplateList = (props: ITemplateListProps) => {
2727
isFeatured,
2828
} = props;
2929
const { t } = useTranslation(['common']);
30-
3130
const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
3231
queryKey: ReactQueryKeys.publishedTemplateList(currentCategoryId, search, isFeatured),
3332
queryFn: ({ pageParam }) =>
@@ -53,13 +52,9 @@ export const TemplateList = (props: ITemplateListProps) => {
5352
return (
5453
<div className="flex flex-1 flex-col overflow-y-auto">
5554
<div
56-
className={cn(
57-
'grid grid-cols-1 gap-3 text-left sm:grid-cols-2 lg:grid-cols-3 flex-1',
58-
{
59-
'grid-cols-1 sm:grid-cols-1 lg:grid-cols-1': currentTemplateList?.length === 0,
60-
},
61-
className
62-
)}
55+
className={cn('grid grid-cols-1 gap-5 text-left sm:grid-cols-2 lg:grid-cols-3', className, {
56+
'grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 py-4 px-6': currentTemplateList?.length === 0,
57+
})}
6358
>
6459
{currentTemplateList?.map((template) => (
6560
<TemplateCard
@@ -72,7 +67,7 @@ export const TemplateList = (props: ITemplateListProps) => {
7267

7368
{currentTemplateList?.length === 0 && (
7469
<div className="flex flex-1 items-center justify-center">
75-
<p className="text-sm text-gray-500">{t('common:noResult')}</p>
70+
<p className="text-sm text-muted-foreground">{t('common:noResult')}</p>
7671
</div>
7772
)}
7873
</div>

‎apps/nextjs-app/src/features/app/components/space/template/TemplateMain.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export const TemplateMain = (props: ITemplateMainProps) => {
5656
search={search}
5757
onClickUseTemplateHandler={onClickUseTemplateHandler}
5858
onClickTemplateCardHandler={onClickTemplateCardHandler}
59-
className={templateListClassName}
59+
className={cn(templateListClassName, 'p-4 shrink-0 content-start')}
6060
isFeatured={isFeatured}
6161
/>
6262
</div>

0 commit comments

Comments
 (0)