style(rubgram):change rule text style(artifact):add donate button when sub is full style(tl): move see all

app/(ui)/artifact/page.tsx

@@ -114,6 +114,20 @@ export default async function ArtifactFormPage({
             <div className="flex gap-1 flex-col items-center">
               <span className="font-bold text-3xl">คิวเต็มแล้ว</span>
               <span className="font-bold text-2xl">ต้องโดเนทลัดคิวแล้วล่ะ</span>
+              <SimpleTooltip text="โดเนทลัดคิว ขั้นต่ำ 10 บาท" side="bottom">
+                <Link
+                  href="https://tipme.in.th/536d969652666273c2fa85ad"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <Button
+                    className="bg-emerald-600! border-white! animate-pulse"
+                    type="button"
+                  >
+                  <CircleDollarSign />
+                </Button>
+              </Link>
+            </SimpleTooltip>
             </div>
           </Blocker>
         ) : (
@@ -211,15 +225,7 @@ export default async function ArtifactFormPage({
                 target="_blank"
                 rel="noreferrer"
               >
-                <Button
-                  variant="outline"
-                  className={
-                    config.limit >= 0 && count >= config.limit
-                      ? "bg-emerald-600! border-white! animate-pulse"
-                      : ""
-                  }
-                  type="button"
-                >
+                <Button variant="outline" type="button">
                   <CircleDollarSign />
                 </Button>
               </Link>

app/(ui)/rubgram/client.tsx

@@ -60,10 +60,10 @@ export function WelcomeScreening({
         </div>
       ) : (
         <div className="grid gap-2">
-          โปรดล็อคอินด้วย Discord เพื่อดำเนินการต่อ
+          โปรดล็อคอินผ่าน Discord เพื่อดำเนินการต่อ
           <Button onClick={loginDiscord}>
             <span className="flex justify-between w-full items-center">
-              Login ด้วย Discord
+              ล็อคอินผ่าน Discord
               <LogIn />
             </span>
           </Button>

app/(ui)/rubgram/rules.tsx

@@ -29,19 +29,19 @@ export function RulesDialog({
           1. เมื่อจ่ายเงินแล้วจะ<u className="text-red-500">ไม่สามารถขอคืนเงิน</u>
           ได้ทุกกรณีนะคับ
           <br />
-          2. เมื่อถึงคิวแล้วจะมีการเรียกตัวผ่าน Discord ผ่านช่อง ยมบาลตามตัว
+          2. เมื่อถึงคิวแล้วจะมีการเรียกตัวผ่านช่อง ยมบาลตามตัว
           หลังจากโดนแท็กแล้วให้ทักหาบุสทันที
           <br />
-          3. จะลงทั้งในไลฟ์และนอกไลฟ์เพราะฉะนั้นควรเตรียมตัวให้พร้อมก่อนถึงคิว
+          3. จะลงทั้งในไลฟ์และนอกไลฟ์ ควรเตรียมตัวให้พร้อมก่อนถึงคิว
           <br />
-          4. หากไม่ทักหาเกิน 10 นาทีจะข้ามคิวไปก่อน ถ้ามาแล้วสามารถทักหาได้เลย
+          4. หากไม่ทักภายใน 10 นาทีจะข้ามคิวไปก่อน ถ้ามาแล้วสามารถทักได้เลย
           <br />
           5. ไม่แนะนำให้ใช้ Truemoney จ่าย
           <br />
-          6. โดยการกดตกลงจะถือเป็นการยอมรับ{" "}
-          <span className="text-blue-500 underline">
+          6. การกดตกลงจะถือว่ายอมรับ{" "}
+          <u className="text-blue-500">
             <Link href="https://sudloh.com/privacy">Privacy policy</Link>
-          </span>
+          </u>
         </p>
         <DialogFooter>
           <DialogClose asChild>

app/(ui)/tl/[type]/[ver]/character.tsx

@@ -123,7 +123,7 @@ export function Draggable({
                 }}
               >
                 <div className="relative">
-                  <SimpleTooltip text={char.name} delayDuration={500}>
+                  <SimpleTooltip text={char.name} delayDuration={200}>
                     <Image
                       src={`/cdn/${char.image}`}
                       style={{

app/(ui)/tl/[type]/page.tsx

@@ -64,7 +64,7 @@ export default async function TierlistSelectionPage({
                     </div>
                   </div>
                 ) : (
-                  <div className="flex items-center justify-center aspect-video w-60 border rounded-sm bg-[#1118] backdrop-blur-xl font-bold text-4xl">
+                  <div className="flex items-center justify-center aspect-video border rounded-sm bg-[#1118] backdrop-blur-xl font-bold text-5xl">
                     {e.name}
                   </div>
                 )}

app/(ui)/tl/page.tsx

@@ -8,6 +8,7 @@ import Image from "@/components/image";
 import { ScrollBar } from "@/components/ui/scroll-area";
 import { db } from "@/lib/db";
 import { tierlistTypes, tierlistVersions } from "@/lib/db/schema";
+import { ArrowRight } from "lucide-react";
 
 export const metadata: Metadata = {
   title: "จัดเทียร์ลิสต์",
@@ -50,8 +51,9 @@ export default async function TierlistSelectionPage() {
                 </span>
               </div>
               <SimpleTooltip text="ดูเทียร์ลิสต์ของคอนเทนต์นี้ทั้งหมด">
-                <span className="text-sm font-normal text-muted-foreground ml-2 hover:underline ">
+                <span className="absolute right-0 m-8 text-sm font-normal text-blue-400 ml-2 hover:underline ">
                   ดูทั้งหมด
+                  <ArrowRight className="inline-block size-4" />
                 </span>
               </SimpleTooltip>
             </div>