Upgrade to Tailwind CSS v4 (#1173)

This commit is contained in:
Brandon McConnell 2025-09-09 15:44:07 -04:00 committed by GitHub
parent 4ce76987a1
commit 848205f5cb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
76 changed files with 1098 additions and 1050 deletions

View file

@ -152,7 +152,7 @@ export function SidebarHistory({ user }: { user: User | undefined }) {
return (
<SidebarGroup>
<SidebarGroupContent>
<div className="flex flex-row gap-2 justify-center items-center px-2 w-full text-sm text-zinc-500">
<div className="flex w-full flex-row items-center justify-center gap-2 px-2 text-sm text-zinc-500">
Login to save and revisit previous chats!
</div>
</SidebarGroupContent>
@ -163,7 +163,7 @@ export function SidebarHistory({ user }: { user: User | undefined }) {
if (isLoading) {
return (
<SidebarGroup>
<div className="px-2 py-1 text-xs text-sidebar-foreground/50">
<div className="px-2 py-1 text-sidebar-foreground/50 text-xs">
Today
</div>
<SidebarGroupContent>
@ -171,10 +171,10 @@ export function SidebarHistory({ user }: { user: User | undefined }) {
{[44, 32, 28, 64, 52].map((item) => (
<div
key={item}
className="flex gap-2 items-center px-2 h-8 rounded-md"
className="flex h-8 items-center gap-2 rounded-md px-2"
>
<div
className="h-4 rounded-md flex-1 max-w-[--skeleton-width] bg-sidebar-accent-foreground/10"
className="h-4 max-w-(--skeleton-width) flex-1 rounded-md bg-sidebar-accent-foreground/10"
style={
{
'--skeleton-width': `${item}%`,
@ -193,7 +193,7 @@ export function SidebarHistory({ user }: { user: User | undefined }) {
return (
<SidebarGroup>
<SidebarGroupContent>
<div className="flex flex-row gap-2 justify-center items-center px-2 w-full text-sm text-zinc-500">
<div className="flex w-full flex-row items-center justify-center gap-2 px-2 text-sm text-zinc-500">
Your conversations will appear here once you start chatting!
</div>
</SidebarGroupContent>
@ -218,7 +218,7 @@ export function SidebarHistory({ user }: { user: User | undefined }) {
<div className="flex flex-col gap-6">
{groupedChats.today.length > 0 && (
<div>
<div className="px-2 py-1 text-xs text-sidebar-foreground/50">
<div className="px-2 py-1 text-sidebar-foreground/50 text-xs">
Today
</div>
{groupedChats.today.map((chat) => (
@ -238,7 +238,7 @@ export function SidebarHistory({ user }: { user: User | undefined }) {
{groupedChats.yesterday.length > 0 && (
<div>
<div className="px-2 py-1 text-xs text-sidebar-foreground/50">
<div className="px-2 py-1 text-sidebar-foreground/50 text-xs">
Yesterday
</div>
{groupedChats.yesterday.map((chat) => (
@ -258,7 +258,7 @@ export function SidebarHistory({ user }: { user: User | undefined }) {
{groupedChats.lastWeek.length > 0 && (
<div>
<div className="px-2 py-1 text-xs text-sidebar-foreground/50">
<div className="px-2 py-1 text-sidebar-foreground/50 text-xs">
Last 7 days
</div>
{groupedChats.lastWeek.map((chat) => (
@ -278,7 +278,7 @@ export function SidebarHistory({ user }: { user: User | undefined }) {
{groupedChats.lastMonth.length > 0 && (
<div>
<div className="px-2 py-1 text-xs text-sidebar-foreground/50">
<div className="px-2 py-1 text-sidebar-foreground/50 text-xs">
Last 30 days
</div>
{groupedChats.lastMonth.map((chat) => (
@ -298,7 +298,7 @@ export function SidebarHistory({ user }: { user: User | undefined }) {
{groupedChats.older.length > 0 && (
<div>
<div className="px-2 py-1 text-xs text-sidebar-foreground/50">
<div className="px-2 py-1 text-sidebar-foreground/50 text-xs">
Older than last month
</div>
{groupedChats.older.map((chat) => (
@ -329,11 +329,11 @@ export function SidebarHistory({ user }: { user: User | undefined }) {
/>
{hasReachedEnd ? (
<div className="flex flex-row gap-2 justify-center items-center px-2 mt-8 w-full text-sm text-zinc-500">
<div className="mt-8 flex w-full flex-row items-center justify-center gap-2 px-2 text-sm text-zinc-500">
You have reached the end of your chat history.
</div>
) : (
<div className="flex flex-row gap-2 items-center p-2 mt-8 text-zinc-500 dark:text-zinc-400">
<div className="mt-8 flex flex-row items-center gap-2 p-2 text-zinc-500 dark:text-zinc-400">
<div className="animate-spin">
<LoaderIcon />
</div>