Skip to content

Commit 349a2c5

Browse files
zhang-wenchaozhang-wenchao
authored
Merge pull request #237 from sethzhao/bounties
Bounties修改样式
2 parents 324c6cd + 8f18f14 commit 349a2c5

11 files changed

Lines changed: 80 additions & 77 deletions

File tree

‎src/app/bounties/ListSkeleton.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export function ListSkeleton() {
3232
</div>
3333
</div>
3434
</div>
35-
<div className="mb-9 mt-6 grid gap-5 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5">
35+
<div className="mb-9 mt-3.5 grid gap-5 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5">
3636
{new Array(10).fill(',').map((i, k) => (
3737
<div
3838
key={`ListSkeleton-${k}`}

‎src/domain/bounty/views/bounty-list/BountyItem.js‎

Lines changed: 50 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -18,65 +18,73 @@ import Link from 'next/link';
1818

1919
import Avatar from '@/components/Avatar';
2020
import { ArrowRightLineIcon } from '@/components/Icons';
21-
import Image from '@/components/Image';
2221
import { fromNow } from '@/utils/date';
2322

24-
import { useConfig } from '#/state/application/hooks';
25-
2623
import StatusBadge from './StatusBadge';
2724

25+
// import { useConfig } from '#/state/application/hooks';
26+
27+
2828
function BountyItem({ data }) {
29-
const config = useConfig();
30-
const filters = config?.find(f => f.config_id === 1)?.config_value['bounty'];
31-
const ecosystem = filters?.find(f => f.name === 'Ecosystem')?.labels.find(f => f.id === data.ecosystem);
29+
// const config = useConfig();
30+
// const filters = config?.find(f => f.config_id === 1)?.config_value['bounty'];
31+
// const ecosystem = filters?.find(f => f.name === 'Ecosystem')?.labels.find(f => f.id === data.ecosystem);
32+
33+
// 根据状态确定顶部边框颜色
34+
const getBorderColor = status => {
35+
if (status === 3) return 'border-t-[#17C489]'; // Recruiting - 绿色
36+
if (status > 6 && status < 24) return 'border-t-[#D672EF]'; // Building - 紫色
37+
if (status === 30 || status === 24 || status === 20) return 'border-t-[#82ADD8]'; // Completed/Closed - 蓝色
38+
return 'border-t-[#D1D5DB]';
39+
};
3240

3341
return (
3442
<Link
3543
href={`/bounties/${data.id}`}
3644
className={`
37-
group flex flex-col relative cursor-pointer overflow-hidden rounded-2xl
38-
bg-gradient-to-b ${ data.status === 3 ? 'from-[#E5E5FE] to-[#FFFFFF]' : 'bg-white'}
39-
py-4 transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-2 [&>div]:px-4
45+
group flex flex-col relative cursor-pointer overflow-hidden rounded-xl
46+
bg-white border border-[#E5E7EB] border-t-[3px] ${getBorderColor(data.status)}
47+
transition-all duration-300 ease-in-out hover:shadow-xl hover:-translate-y-1
4048
`}
4149
>
42-
<div>
43-
<Image className="mb-4 bg-neutral-300 rounded-full object-cover" width={80} height={80} src={ecosystem?.img} alt={ecosystem?.name} />
44-
<h5 className="mb-2 text-lg line-clamp-2">
45-
<span className="relative top-[2px]">{data.title}</span>
46-
</h5>
47-
</div>
48-
<div className="flex-1">
49-
<div className="mb-4 max-h-10 text-sm opacity-80 line-clamp-2">
50-
<p>{data.summary}</p>
51-
</div>
52-
<div className="flex items-center gap-2">
53-
<div className="flex items-center">
54-
<StatusBadge status={data.status} />
55-
</div>
50+
{/* 顶部状态标签区域 */}
51+
<div className="px-6 pt-5 pb-4">
52+
<div className="flex items-center gap-2 flex-wrap">
53+
<StatusBadge status={data.status} />
54+
{/* 这里可以添加其他标签，如 Front-end, Part-time 等 */}
5655
</div>
5756
</div>
58-
<hr className="mt-6 mb-4 border-gray-400" />
59-
<div className="flex items-center justify-between">
60-
<p className="text-sm">Reward</p>
61-
<div className="text-right">
62-
<div className="flex items-center justify-end text-sm">
63-
<strong className="text-lg">${data.amount / 100}</strong>
64-
</div>
57+
58+
{/* 标题和描述 */}
59+
<div className="px-6 pb-4 flex-1 min-h-[162px]">
60+
<h3 className="mb-2 text-[24px] font-extrabold line-clamp-2 leading-[26px]">
61+
{data.title}
62+
</h3>
63+
<p className="text-[16px] font-normal line-clamp-2 leading-[20px] opacity-80">
64+
{data.summary}
65+
</p>
66+
</div>
67+
68+
{/* Bounty Amount */}
69+
<div className="px-6 py-6 border-t border-[#1a1a1a0f]">
70+
<div className="flex items-center justify-between">
71+
<span className="text-[14px] font-bold leading-[24px]">Bounty Amount</span>
72+
<span className="text-[20px] font-extrabold text-[#111827] leading-[24px]">${data.amount / 100}</span>
6573
</div>
6674
</div>
67-
<hr className="my-4 border-gray-400" />
68-
<div className="flex items-center">
69-
<div className="flex flex-1 items-center truncate">
70-
<Avatar className="mr-4" size={48} user={data?.employer_user} />
71-
<div className="text-xs text-gray-50">
72-
<p className="truncate">
73-
{fromNow(data.created_at * 1000)} by{' '}
74-
<a href={`/u/${data.employer_user?.user_handle}`} className="truncate font-bold text-gray underline">{data.employer_user?.user_nick_name}</a>
75-
</p>
75+
76+
{/* 底部发布者信息 */}
77+
<div className="p-6 border-t border-[#1a1a1a0f]">
78+
<div className="flex items-center justify-between">
79+
<div className="flex items-center gap-2 flex-1 min-w-0">
80+
<Avatar size={24} user={data?.employer_user} />
81+
<div className="text-[14px] leading-[24px] truncate text-[#00000066]">
82+
<span className="text-gray">By {data.employer_user?.user_nick_name}</span>
83+
<span className="mx-1">·</span>
84+
<span>{fromNow(data.created_at * 1000)}</span>
85+
</div>
7686
</div>
77-
</div>
78-
<div>
79-
<ArrowRightLineIcon className="h-6 w-6" />
87+
<ArrowRightLineIcon className="h-5 w-5 flex-shrink-0 -rotate-45" />
8088
</div>
8189
</div>
8290
</Link>

‎src/domain/bounty/views/bounty-list/BountyList.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ function BountyListView({
2929
<>
3030
<div
3131
className={clsx(
32-
'mb-9 mt-6 grid gap-5 md:grid-cols-3',
32+
'mb-9 mt-3.5 grid gap-5 md:grid-cols-3',
3333
className
3434
)}
3535
>

‎src/domain/bounty/views/bounty-list/StatusBadge.js‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -17,33 +17,29 @@
1717
const badgeList = [
1818
{
1919
label: 'Recruiting',
20-
emoji: '🧱',
21-
textColor: 'text-[#807DFB]',
22-
bgColor: 'bg-[#807DFB]',
23-
borderColor: 'border-[#807DFB]',
20+
textColor: 'text-[#17C489]',
21+
bgColor: 'bg-[rgba(23,196,137,0.08)]',
22+
borderColor: 'border-[#17C489]',
2423
isMatched: status => status === 3,
2524
},
2625
{
2726
label: 'Building',
28-
emoji: '🔫',
29-
textColor: 'text-[#00C475]',
30-
bgColor: 'bg-[#01DB83]',
31-
borderColor: 'border-[#01DB83]',
27+
textColor: 'text-[#D672EF]',
28+
bgColor: 'bg-[rgba(214,114,239,0.08)]',
29+
borderColor: 'border-[#D672EF]',
3230
isMatched: status => status > 6 && status < 24,
3331
},
3432
{
3533
label: 'Completed',
36-
emoji: '🔚',
3734
textColor: 'text-[#82ADD8]',
38-
bgColor: 'bg-[#82ADD8]',
35+
bgColor: 'bg-[rgba(130,173,216,0.08)]',
3936
borderColor: 'border-[#82ADD8]',
4037
isMatched: status => status === 30,
4138
},
4239
{
43-
label: 'Termination',
44-
emoji: '🔚',
40+
label: 'Closed',
4541
textColor: 'text-[#82ADD8]',
46-
bgColor: 'bg-[#82ADD8]',
42+
bgColor: 'bg-[rgba(130,173,216,0.08)]',
4743
borderColor: 'border-[#82ADD8]',
4844
isMatched: status => status === 24 || status === 20,
4945
},
@@ -53,14 +49,9 @@ function StatusBadge({ status }) {
5349
const badge = badgeList.find(({ isMatched }) => isMatched(status));
5450

5551
return badge && (
56-
<div className={`inline-flex items-center gap-2 p-[3px] ${badge.bgColor} bg-opacity-10 rounded-full`}>
57-
<span className={`size-6 text-xs rounded-full text-center leading-[22px] border-1 ${badge.borderColor}`}>
58-
{badge.emoji}
59-
</span>
60-
<span className={`text-xs font-semibold ${badge.textColor} font-nunito leading-[12px] text-left pr-2`}>
61-
{badge.label}
62-
</span>
63-
</div>
52+
<span className={`inline-flex items-center px-2 py-1.5 rounded-[6px] text-xs leading-[12px] border ${badge.textColor} ${badge.bgColor} ${badge.borderColor}`}>
53+
{badge.label}
54+
</span>
6455
);
6556
}
6657

‎src/entry/components/basic-search/BasicSearch.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ type BasicSearchProps = {
2525

2626
function BasicSearch({ className }: BasicSearchProps) {
2727
return (
28-
<div className={clsx('flex items-center', className)}>
28+
<div className={clsx('flex items-center gap-4 w-full justify-end flex-col md:flex-row', className)}>
2929
<SearchFilter />
3030
<SortFilter />
3131
</div>

‎src/entry/components/basic-search/SearchFilter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ function SearchFilter() {
4040
}, 300);
4141

4242
return (
43-
<div className="max-w-[180px]">
43+
<div className="w-full md:max-w-[360px]">
4444
<Input
4545
defaultValue={searchParams.get('query')?.toString()}
4646
type="search"

‎src/entry/components/basic-search/SortFilter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ function SortFilter() {
3838
return searchParams?.get('order') || null;
3939
}, [searchParams]);
4040
return (
41-
<div className="w-[180px] ml-2">
41+
<div className="w-full md:w-[206px]">
4242
<ReactSelect
4343
isClearable
4444
isSearchable={false}

‎src/entry/layouts/list/Header.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { ArrowRightIcon } from '@/components/Icons';
2020

2121
function Header({ title, desc, link, linkText }) {
2222
return (
23-
<div className="pt-6 pb-6 text-center">
23+
<div className="pt-9 pb-9 text-center">
2424
<h1 className="text-[24px] font-bold leading-[32px] md:text-[36px] md:leading-[42px]">{title}</h1>
2525
<div className="mt-2 flex justify-center flex-col text-[13px] opacity-80 md:flex-row md:items-center md:text-[15px]">
2626
<p>{desc}</p>

‎src/shared/components/Input/index.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ import React, { forwardRef } from 'react';
2020
import type { InputProps } from '@nextui-org/input';
2121

2222
const styles = {
23-
input: [ 'bg-transparent', 'placeholder:opacity-40', 'ml-1' ],
24-
innerWrapper: 'border border-gray-600 hover:border-gray h-12 text-sm px-3 rounded',
23+
input: [ 'bg-transparent', 'placeholder:opacity-40', 'ml-0.5' ],
24+
innerWrapper: 'border border-gray-600 hover:border-gray h-12 text-sm px-4 rounded',
2525
inputWrapper: [ 'shadow-none' ],
2626
};
2727

@@ -40,6 +40,10 @@ const MyInput = forwardRef<HTMLInputElement | HTMLTextAreaElement, InputProps>((
4040
},
4141
});
4242

43+
console.log({
44+
...getInputProps()
45+
})
46+
4347
const innerWrapper = React.useMemo(() => {
4448
if (startContent) {
4549
return (

‎src/shared/components/Pagination/index.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,11 @@ export function OPagination({ page, pageSize = PAGE_SIZE, total, changeCallback
6161

6262
return total > 0 ? (
6363
<div className="flex justify-end">
64-
<div className="flex mt-5 md:mt-4">
64+
<div className="flex">
6565
{
6666
currentPage > 1 && <Button
67-
variant="light"
68-
className="mr-2 h-9"
67+
variant="text"
68+
className="mr-2 h-9 underline"
6969
disabled={currentPage <= 1}
7070
onClick={() => change(currentPage > 1 && currentPage - 1)}
7171
>
@@ -80,9 +80,9 @@ export function OPagination({ page, pageSize = PAGE_SIZE, total, changeCallback
8080
onChange={page => change(page)}
8181
/>
8282
<Button
83-
variant="light"
83+
variant="text"
8484
disabled={currentPage >= totalPage}
85-
className="ml-2 h-9"
85+
className="ml-2 h-9 underline"
8686
onClick={() => change(currentPage < totalPage && currentPage + 1)}
8787
>
8888
Next

0 commit comments

Comments
 (0)