Skip to content

deps: migrate to tailwind v4 #118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mezotv wants to merge 2 commits into
base: main
Choose a base branch
from
Open

deps: migrate to tailwind v4 #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1284b5c
deps: migrate to tailwind v4
mezotv Feb 12, 2025
741da8d
deps: update nextjs
mezotv Feb 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/blog/_components/BlogList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export async function BlogList() {
height="297"
viewBox="0 0 210 297"
fill="currentColor"
className="absolute -right-3 -top-3 z-10 h-10 w-10 rounded-full bg-hover p-1 text-foreground/70 shadow"
className="absolute -right-3 -top-3 z-10 h-10 w-10 rounded-full bg-hover p-1 text-foreground/70 shadow-sm"
>
<path d="m 37.279436,221.88246 c 0,-0.34438 0.257235,-0.67605 21.723636,-28.01043 11.44456,-14.573 20.89617,-26.63857 21.0036,-26.81238 0.12457,-0.20157 -2.81639,-3.35001 -8.12038,-8.69323 -6.9607,-7.0122 -8.36673,-8.55465 -8.62898,-9.46623 -0.81961,-2.84901 -0.0914,-4.23754 4.65512,-8.87671 4.78949,-4.68112 6.81632,-6.04111 10.39631,-6.97585 2.41758,-0.63124 4.42626,-0.41608 7.01659,0.75157 1.15095,0.51882 2.69745,1.02295 3.43666,1.1203 1.45981,0.19223 4.00068,-0.22433 5.23545,-0.85832 0.41725,-0.21424 8.060448,-5.92014 16.984898,-12.67978 15.77496,-11.94843 16.24625,-12.33109 16.94463,-13.75854 0.95679,-1.95561 0.99605,-3.92211 0.1182,-5.9201 -1.14716,-2.610915 -0.76706,-6.174751 0.98767,-9.260417 0.9534,-1.676551 3.95765,-4.741306 5.21638,-5.321438 1.35337,-0.623753 2.89186,-0.620596 4.23333,0.0087 1.49552,0.701541 33.29553,32.584145 33.85747,33.945395 0.53783,1.30286 0.50452,2.74625 -0.0933,4.04339 -0.58013,1.25873 -3.64489,4.26298 -5.32144,5.21639 -3.05358,1.73647 -6.67835,2.12323 -9.26042,0.98806 -1.99701,-0.87796 -3.96419,-0.83913 -5.9181,0.11683 -1.4246,0.69699 -1.8155,1.17827 -13.75124,16.93052 -6.75673,8.91723 -12.46353,16.56088 -12.68178,16.98588 -0.64058,1.24745 -1.05871,3.78319 -0.86561,5.24956 0.0973,0.7392 0.59869,2.27954 1.11411,3.42297 1.14554,2.5413 1.35602,4.39338 0.7788,6.85309 -0.84388,3.59606 -2.24131,5.70782 -6.9969,10.57349 -4.63782,4.74518 -6.02266,5.47184 -8.8767,4.6578 -0.91391,-0.26066 -2.43575,-1.64844 -9.46403,-8.63034 -5.705278,-5.66762 -8.482488,-8.2533 -8.712188,-8.11134 -0.18546,0.11462 -11.75436,9.18059 -25.70867,20.1466 -13.95432,10.96602 -26.144152,20.53042 -27.088522,21.25424 -1.653211,1.26712 -2.214574,1.54857 -2.214574,1.11033 z" />
</svg>
Expand Down
196 changes: 107 additions & 89 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,51 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';

@config '../tailwind.config.ts';

/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.

If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}

@utility popular-pack {
position: relative;

&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
inset: 0;
border-radius: calc(var(--radius) + 0.1875rem);
z-index: -1;
background-image: linear-gradient(
146.78deg,
#0598f6 -1.37%,
#f00505 104.43%
);
}
}

@utility popular-btn {
background: linear-gradient(102.07deg, #0e93ed -169.31%, #e10f14 113.25%);
}

@utility popular-badge {
background: linear-gradient(98.64deg, #4a6db0 -12.21%, #725487 119.79%);
}

@layer base {
:root {
Expand Down Expand Up @@ -106,7 +151,7 @@
}

.brand-focus {
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary-light focus-visible:ring-offset-2;
@apply focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-primary-light focus-visible:ring-offset-2;
}

.disable-focus {
Expand All @@ -115,16 +160,16 @@

@media screen and (max-width: 500px) {
.discord-message:first-child {
@apply w-[95%] !important;
@apply w-[95%]!;
}
.smalldevice {
@apply mx-auto my-[0.5rem] w-[100%] !important;
@apply mx-auto! my-[0.5rem]! w-[100%]!;
}
.order-last {
@apply mx-auto w-[100%] !important;
@apply mx-auto! w-[100%]!;
}
.discord-messages {
@apply min-w-0 !important;
@apply min-w-0!;
}
}

Expand All @@ -133,93 +178,66 @@
@apply text-xs;
}
.discord-thread-message .discord-thread-message-timestamp {
@apply text-xs !important;
@apply text-xs!;
}
.discord-thread {
@apply max-w-full !important;
@apply max-w-full!;
}
}
}

[data-radix-popper-content-wrapper] {
outline: none !important;
}

body {
display: flex;
flex-direction: column;
min-height: 100vh;
align-items: center;
font-family: 'Inter', sans-serif;
overflow-x: hidden;
overflow-y: auto;
}

body::-webkit-scrollbar {
width: 0.5rem;
border-radius: 20px;
}

body::-webkit-scrollbar-thumb {
width: 0.5rem;
background-color: hsl(var(--scrollbar));
border-radius: 20px;
}
body::-webkit-scrollbar-track {
width: 0.5rem;
background-color: transparent;
}

.discord-button span {
display: flex;
align-items: center;
}

.discord-embed-footer {
color: #999999;
}

.ring-pulse {
animation: 2s pulse infinite ease-in-out;
}

@keyframes pulse {
0% {
box-shadow: 0 0 0 0px hsl(var(--foreground) / 0.15);
}

100% {
box-shadow: 0 0 0 14px hsl(var(--secondary) / 0);
}
}

@layer components {
.popular-pack {
position: relative;
}

.popular-pack::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
inset: 0;
border-radius: calc(var(--radius) + 0.1875rem);
z-index: -1;
background-image: linear-gradient(
146.78deg,
#0598f6 -1.37%,
#f00505 104.43%
);
}

.popular-btn {
background: linear-gradient(102.07deg, #0e93ed -169.31%, #e10f14 113.25%);
}

.popular-badge {
background: linear-gradient(98.64deg, #4a6db0 -12.21%, #725487 119.79%);
}
@layer utilities {
[data-radix-popper-content-wrapper] {
outline: none !important;
}

body {
display: flex;
flex-direction: column;
min-height: 100vh;
align-items: center;
font-family: 'Inter', sans-serif;
overflow-x: hidden;
overflow-y: auto;
}

body::-webkit-scrollbar {
width: 0.5rem;
border-radius: 20px;
}

body::-webkit-scrollbar-thumb {
width: 0.5rem;
background-color: hsl(var(--scrollbar));
border-radius: 20px;
}
body::-webkit-scrollbar-track {
width: 0.5rem;
background-color: transparent;
}

.discord-button span {
display: flex;
align-items: center;
}

.discord-embed-footer {
color: #999999;
}

.ring-pulse {
animation: 2s pulse infinite ease-in-out;
}

@keyframes pulse {
0% {
box-shadow: 0 0 0 0px hsl(var(--foreground) / 0.15);
}

100% {
box-shadow: 0 0 0 14px hsl(var(--secondary) / 0);
}
}
}

.thin-scrollbar::-webkit-scrollbar {
Expand Down
2 changes: 1 addition & 1 deletion app/packs/_components/QuestionPackList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ function QuestionPackList({
const type = searchParams.get('type')

return (
<ul className="grid grid-cols-[repeat(auto-fill,_minmax(320px,_1fr))] gap-10 lg:gap-x-12 xl:gap-x-14 max-md:max-w-[500px] max-md:mx-auto">
<ul className="grid grid-cols-[repeat(auto-fill,minmax(320px,1fr))] gap-10 lg:gap-x-12 xl:gap-x-14 max-md:max-w-[500px] max-md:mx-auto">
{packList.map((question) => (
<React.Fragment key={`pack-${question.id}`}>
<QuestionPack
Expand Down
2 changes: 1 addition & 1 deletion app/packs/create/_components/PackForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ function PackForm() {
<form onSubmit={handleSubmit(onSubmit)}>
{
!step || step === '1' ?
<section className="grid gap-6 max-w-screen-md">
<section className="grid gap-6 max-w-(--breakpoint-md)">
{/* type select */}
<div className="space-y-3">
<label htmlFor="type">Pack Type</label>
Expand Down
2 changes: 1 addition & 1 deletion app/packs/edit/_components/EditPackForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ function EditPackForm({ data, userId, packId }: EditPackFormProps) {
onSubmit={handleSubmit(onSubmit)}
className="grid gap-10 lg:grid-cols-2"
>
<section className="grid gap-6 max-w-screen-md">
<section className="grid gap-6 max-w-(--breakpoint-md)">
<div className="space-y-8">
{/* type select */}
<div className="space-y-3">
Expand Down
2 changes: 1 addition & 1 deletion app/packs/review/_components/PageContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ function PageContent({ pending }: PageContentProps) {
<section className="space-y-10">
<div>
{packs.pending.length > 0 ?
<ul className="grid grid-cols-[repeat(auto-fill,_minmax(300px,_1fr))] gap-6">
<ul className="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-6">
{packs.pending.map((pack) => (
<UnreviewedPack
key={pack.id}
Expand Down
2 changes: 1 addition & 1 deletion app/status/_components/ClusterCardsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export const ClusterCardsList = ({ data }: ClusterCardProps) => {
shard.selected && 'ring-pulse', // Apply ring-pulse to the selected shard
isAnyShardSelected &&
!shard.selected &&
'opacity-50 !text-foreground/50' // Apply global styles if any shard is selected
'opacity-50 text-foreground/50!' // Apply global styles if any shard is selected
)}
>
{index}
Expand Down
2 changes: 1 addition & 1 deletion app/status/_components/PageContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const PageContent = ({ clusterData }: PageContentProps) => {
type="text"
placeholder="Guild ID"
onChange={(e) => setGuildId(e.target.value)}
className="flex h-11 w-full rounded-md bg-transparent py-3 text-base outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
className="flex h-11 w-full rounded-md bg-transparent py-3 text-base outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/Embeds/DailyMessageEmbed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const DailyMessageEmbed: FC<MainProps> = ({ threadName }) => {
return (
<DiscordMessages
lightTheme={theme === 'light'}
className="min-w-fit overflow-x-hidden rounded-lg shadow"
className="min-w-fit overflow-x-hidden rounded-lg shadow-sm"
>
<DiscordMessage
profile="wouldyou"
Expand Down
2 changes: 1 addition & 1 deletion components/Embeds/HigherLowerEmbed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const HigherLowerEmbed: FC<MainProps> = ({ currentDate }) => {
return (
<DiscordMessages
lightTheme={theme === 'light'}
className="overflow-x-hidden rounded-lg shadow"
className="overflow-x-hidden rounded-lg shadow-sm"
>
<DiscordMessage
profile="wouldyou"
Expand Down
2 changes: 1 addition & 1 deletion components/Embeds/MainDiscordEmbed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const MainDiscordEmbed: FC<MainProps> = ({ initialQuestion }) => {
>
<DiscordMessages
lightTheme={theme === 'light' ? true : false}
className="mx-auto w-auto overflow-x-hidden rounded-lg text-left shadow sm:w-2/3 lg:w-auto"
className="mx-auto w-auto overflow-x-hidden rounded-lg text-left shadow-sm sm:w-2/3 lg:w-auto"
>
<DiscordMessage
profile="wouldyou"
Expand Down
2 changes: 1 addition & 1 deletion components/Embeds/NeverHaveIEverEmbed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const NeverHaveIEverEmbed: FC<MainProps> = ({ initialQuestion }) => {
return (
<DiscordMessages
lightTheme={theme === 'light'}
className="overflow-x-hidden rounded-lg text-left shadow"
className="overflow-x-hidden rounded-lg text-left shadow-sm"
>
<DiscordMessage
profile="wouldyou"
Expand Down
6 changes: 3 additions & 3 deletions components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const Navbar = ({ idToken: idToken_ }: NavbarProps) => {
return (
<nav className="sticky left-0 top-[1px] z-50 mb-8 flex h-auto w-full items-center justify-center py-6">
<div className="flex h-full w-full max-w-8xl items-center justify-between px-8 transition-all duration-300">
<div className="flex h-16 min-w-fit items-center justify-center rounded-[10px] border-2 border-foreground/5 bg-background-light/90 px-6 backdrop-blur">
<div className="flex h-16 min-w-fit items-center justify-center rounded-[10px] border-2 border-foreground/5 bg-background-light/90 px-6 backdrop-blur-sm">
<Link
href="/"
className="flex items-center gap-6"
Expand All @@ -42,7 +42,7 @@ const Navbar = ({ idToken: idToken_ }: NavbarProps) => {
</Link>
</div>
<div
className={`absolute flex items-center justify-center gap-6 rounded-[10px] border-2 border-foreground/5 bg-background-light/90 backdrop-blur lg:static ${isOpen ? 'right-0 top-0 z-10 h-screen w-screen rounded-none' : 'right-7 top-6 h-16 w-16 lg:w-min'} transition-all duration-300`}
className={`absolute flex items-center justify-center gap-6 rounded-[10px] border-2 border-foreground/5 bg-background-light/90 backdrop-blur-sm lg:static ${isOpen ? 'right-0 top-0 z-10 h-screen w-screen rounded-none' : 'right-7 top-6 h-16 w-16 lg:w-min'} transition-all duration-300`}
>
<div className="hidden w-max gap-6 px-6 lg:px-10 lg:flex items-center">
<Link
Expand Down Expand Up @@ -128,7 +128,7 @@ const Navbar = ({ idToken: idToken_ }: NavbarProps) => {
: <DiscordLoginButton className="h-16 rounded-[10px] px-6" />}
</div>
</div>
<div className="hidden h-16 min-w-fit items-center justify-center lg:flex gap-1 p-1 rounded-xl border-2 border-foreground/5 bg-background-light/90 backdrop-blur">
<div className="hidden h-16 min-w-fit items-center justify-center lg:flex gap-1 p-1 rounded-xl border-2 border-foreground/5 bg-background-light/90 backdrop-blur-sm">
<ThemeToggle />
{isTokenValid ?
<UserDropdown
Expand Down
2 changes: 1 addition & 1 deletion components/Profile/edit-profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export function EditProfile({
}

return (
<Card className="border shadow-sm">
<Card className="border shadow-xs">
<CardContent className="p-6">
<h2 className="text-2xl font-bold text-foreground mb-4">
<span className="text-brand-red-100 drop-shadow-red-glow">Edit</span>{' '}
Expand Down
2 changes: 1 addition & 1 deletion components/Profile/game-stats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export function GameStats({
higherLower
}: GameStatsProps) {
return (
<Card className="border shadow-sm">
<Card className="border shadow-xs">
<CardContent className="p-6 space-y-6">
{wouldYouRather && (
<GameStatSection
Expand Down
2 changes: 1 addition & 1 deletion components/Profile/stats-overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export function StatsOverview({
totalNo
}: StatsOverviewProps) {
return (
<Card className="border shadow-sm">
<Card className="border shadow-xs">
<CardContent className="p-6">
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
<div className="text-center">
Expand Down
2 changes: 1 addition & 1 deletion components/Profile/user-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export function UserCard({ userData }: UserCardProps) {
}

return (
<Card className="border shadow-sm h-fit sticky top-[112px]">
<Card className="border shadow-xs h-fit sticky top-[112px]">
<CardContent className="p-4">
<div className="relative">
<div className="h-20 rounded-lg overflow-hidden">
Expand Down
Loading