Standardise page wrapper width and top padding and refresh catalog and theme styling

This commit is contained in:
Aaron Po
2026-10-04 04:49:50 -04:00
parent 9581435578
commit 2b8a03148f
41 changed files with 235 additions and 128 deletions

View File

@@ -1,7 +1,7 @@
const EmptyState = ({ message }: { message: string }) => (
<div className="card bg-base-100 shadow">
<div className="card-body items-center py-12">
<p className="text-sm text-base-content/60 text-center m-0">{message}</p>
<p className="text-sm text-base-content/70 text-center m-0">{message}</p>
</div>
</div>
);

View File

@@ -33,7 +33,7 @@ const ProfileSidebarCard = ({
<div className="card-body gap-4 p-6">
<div>
<h1 className="text-2xl font-bold m-0 leading-tight">{displayName}</h1>
<p className="text-sm text-base-content/60 m-0 mt-0.5">@{username}</p>
<p className="text-sm text-base-content/70 m-0 mt-0.5">@{username}</p>
</div>
{isOwnProfile ? (
@@ -52,7 +52,7 @@ const ProfileSidebarCard = ({
<p className="text-sm leading-normal m-0">{bio}</p>
<div className="flex flex-col gap-1.5 text-sm text-base-content/60">
<div className="flex flex-col gap-1.5 text-sm text-base-content/70">
<div className="flex items-center gap-1.5">
<MapPin className="size-4 shrink-0" aria-hidden="true" />
{location}
@@ -68,7 +68,7 @@ const ProfileSidebarCard = ({
<div className="flex flex-col gap-2">
{stats.map((stat) => (
<div key={stat.label} className="flex items-center justify-between gap-2">
<span className="text-sm text-base-content/60">{stat.label}</span>
<span className="text-sm text-base-content/70">{stat.label}</span>
<span className="font-serif text-lg font-bold tabular-nums">
{stat.value}
</span>

View File

@@ -24,7 +24,7 @@ const ProfileTabs = ({ activeTab, onChange, panels }: ProfileTabsProps) => {
{TABS.map((tab) => (
<Tab
key={tab.id}
className="-mb-px border-b-2 border-transparent py-3 text-sm font-semibold text-base-content/60 transition-colors hover:text-base-content focus:outline-none data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-primary data-[selected]:border-primary data-[selected]:text-primary"
className="-mb-px border-b-2 border-transparent py-3 text-sm font-semibold text-base-content/70 transition-colors hover:text-base-content focus:outline-none data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-primary data-[selected]:border-primary data-[selected]:text-primary"
>
{tab.label}
</Tab>

View File

@@ -36,11 +36,11 @@ const ActivityTab = ({ activity }: ActivityTabProps) => {
</div>
)}
{item.comment && (
<p className="text-sm text-base-content/60 italic mt-1.5 mb-0">
<p className="text-sm text-base-content/70 italic mt-1.5 mb-0">
&ldquo;{item.comment}&rdquo;
</p>
)}
<p className="text-xs text-base-content/60 mt-1.5 mb-0">
<p className="text-xs text-base-content/70 mt-1.5 mb-0">
{item.time}
</p>
</div>

View File

@@ -42,7 +42,7 @@ const FollowingTab = ({ following, onToggleFollow }: FollowingTabProps) => {
) : (
<p className="font-semibold text-sm m-0 truncate">{f.name}</p>
)}
<p className="text-xs text-base-content/60 m-0 truncate">{f.meta}</p>
<p className="text-xs text-base-content/70 m-0 truncate">{f.meta}</p>
</div>
<button
type="button"

View File

@@ -18,7 +18,7 @@ const LikedTab = ({ liked }: LikedTabProps) => {
<div className="h-[120px] bg-base-300" />
<div className="card-body p-4 gap-1">
<p className="font-serif font-bold m-0">{item.name}</p>
<p className="text-sm text-base-content/60 m-0">{item.meta}</p>
<p className="text-sm text-base-content/70 m-0">{item.meta}</p>
<div className="mt-1">
<StarRating value={item.rating} size="xs" />
</div>