Migrate to tailwind v4 (#370)

This commit is contained in:
1ilit
2025-03-21 01:25:36 +04:00
committed by GitHub
parent a358b56d7e
commit f95841f0e7
20 changed files with 631 additions and 743 deletions

View File

@@ -234,13 +234,13 @@ export default function BugReport() {
<hr
className={`${
theme === "dark" ? "border-zinc-700" : "border-zinc-300"
} flex-grow`}
} grow`}
/>
<div className="text-sm font-semibold m-2">Alternatively</div>
<hr
className={`${
theme === "dark" ? "border-zinc-700" : "border-zinc-300"
} flex-grow`}
} grow`}
/>
</div>
<Button

View File

@@ -47,7 +47,7 @@ export default function LandingPage() {
<div>
<div className="flex flex-col h-screen bg-zinc-100">
{showSurvey && (
<div className="text-white font-semibold py-1.5 px-4 text-sm text-center bg-gradient-to-r from-[#12495e] from-10% via-slate-500 to-[#12495e]">
<div className="text-white font-semibold py-1.5 px-4 text-sm text-center bg-linear-to-r from-[#12495e] from-10% via-slate-500 to-[#12495e]">
<Link to="/survey" className="hover:underline">
Help us improve! Share your feedback.
</Link>
@@ -71,7 +71,7 @@ export default function LandingPage() {
<div className="absolute left-12 w-[45%] top-[50%] translate-y-[-54%] md:left-[50%] md:translate-x-[-50%] p-8 md:p-3 md:w-full text-zinc-800">
<FadeIn duration={0.75}>
<div className="md:px-3">
<h1 className="text-[42px] md:text-3xl font-bold tracking-wide bg-gradient-to-r from-sky-900 from-10% via-slate-500 to-[#12495e] inline-block text-transparent bg-clip-text">
<h1 className="text-[42px] md:text-3xl font-bold tracking-wide bg-linear-to-r from-sky-900 from-10% via-slate-500 to-[#12495e] inline-block text-transparent bg-clip-text">
Draw, Copy, and Paste
</h1>
<div className="text-lg font-medium mt-1 sliding-vertical">
@@ -140,7 +140,7 @@ export default function LandingPage() {
</div>
</div>
</div>
<div className="mt-16 w-[75%] text-center sm:w-full mx-auto shadow-sm rounded-2xl border p-6 bg-white space-y-3">
<div className="mt-16 w-[75%] text-center sm:w-full mx-auto shadow-xs rounded-2xl border p-6 bg-white space-y-3">
<div className="text-lg font-medium">
Build diagrams with a few clicks, see the full picture, export SQL
scripts, customize your editor, and more.
@@ -188,7 +188,7 @@ export default function LandingPage() {
{features.map((f, i) => (
<div
key={"feature" + i}
className="flex rounded-xl hover:bg-zinc-100 border border-zinc-100 shadow-sm hover:-translate-y-2 transition-all duration-300"
className="flex rounded-xl hover:bg-zinc-100 border border-zinc-100 shadow-xs hover:-translate-y-2 transition-all duration-300"
>
<div className="bg-sky-700 px-0.5 rounded-l-xl" />
<div className="px-8 py-4 ">

View File

@@ -88,7 +88,7 @@ export default function Templates() {
{t.title}
</div>
<button
className="border rounded px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300"
className="border rounded-sm px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300"
onClick={() => forkTemplate(t.id)}
>
<i className="fa-solid fa-code-fork"></i>
@@ -121,7 +121,7 @@ export default function Templates() {
</div>
<div>
<button
className="me-1 border rounded px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300"
className="me-1 border rounded-sm px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300"
onClick={() => forkTemplate(c.id)}
>
<i className="fa-solid fa-code-fork"></i>
@@ -130,7 +130,7 @@ export default function Templates() {
</div>
<div className="flex justify-around mt-2">
<button
className="w-full text-center flex justify-center items-center border rounded px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300 text-blue-500"
className="w-full text-center flex justify-center items-center border rounded-sm px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300 text-blue-500"
onClick={() => editTemplate(c.id)}
>
<i className="bi bi-pencil-fill"></i>
@@ -138,7 +138,7 @@ export default function Templates() {
</button>
<div className="border-l border-gray-300 mx-2" />
<button
className="w-full text-center flex justify-center items-center border rounded px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300 text-red-500"
className="w-full text-center flex justify-center items-center border rounded-sm px-2 py-1 bg-white hover:bg-gray-200 transition-all duration-300 text-red-500"
onClick={() => deleteTemplate(c.id)}
>
<IconDeleteStroked />
@@ -162,7 +162,7 @@ export default function Templates() {
<div className="grid grid-cols-5 sm:grid-cols-1 gap-4 place-content-center my-4">
<img
src={template_screenshot}
className="border col-span-3 sm:cols-span-1 rounded"
className="border col-span-3 sm:cols-span-1 rounded-sm"
/>
<div className="col-span-2 sm:cols-span-1">
<div className="text-xl font-bold my-4">