layout

src/app/(features)/alphabet/AlphabetCard.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { useTranslations } from "next-intl";
 import { Letter, SupportedAlphabets } from "@/lib/interfaces";
-import { IconClick, CircleToggleButton, CircleButton } from "@/components/ui/buttons";
+import { IconClick, CircleToggleButton, CircleButton, PrimaryButton } from "@/components/ui/buttons";
 import { IMAGES } from "@/config/images";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { PageLayout } from "@/components/ui/PageLayout";
@@ -191,12 +191,12 @@ export function AlphabetCard({ alphabet, alphabetType, onBack }: AlphabetCardPro
           {/* 中间区域：随机按钮 */}
           <div className="flex gap-2 items-center">
             {isRandomMode && (
-              <button
+              <PrimaryButton
                 onClick={goToRandom}
-                className="px-4 py-2 rounded-full bg-[#35786f] text-white text-sm font-medium hover:bg-[#2d5f58] transition-colors"
+                className="rounded-full px-4 py-2 text-sm"
               >
                 {t("randomNext")}
-              </button>
+              </PrimaryButton>
             )}
           </div>
 

src/app/(features)/memorize/FolderSelector.tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 import { Folder as Fd } from "lucide-react";
 import { TSharedFolderWithTotalPairs } from "@/shared/folder-type";
 import { PageLayout } from "@/components/ui/PageLayout";
+import { PrimaryButton } from "@/components/ui/buttons";
 
 interface FolderSelectorProps {
   folders: TSharedFolderWithTotalPairs[];
@@ -23,11 +24,10 @@ const FolderSelector: React.FC<FolderSelectorProps> = ({ folders }) => {
           <h1 className="text-2xl md:text-3xl font-bold text-gray-800 mb-4">
             {t("noFolders")}
           </h1>
-          <Link
+          <Link href="/folders">
-            className="inline-block px-6 py-2 bg-[#35786f] text-white rounded-full hover:bg-[#2d5f58] transition-colors"
+            <PrimaryButton className="px-6 py-2">
-            href="/folders"
+              Go to Folders
-          >
+            </PrimaryButton>
-            Go to Folders
           </Link>
         </div>
       ) : (

src/app/users/[username]/page.tsx

@@ -1,6 +1,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { PageLayout } from "@/components/ui/PageLayout";
+import { LinkButton } from "@/components/ui/buttons";
 import { actionGetUserProfileByUsername } from "@/modules/auth/auth-action";
 import { repoGetFoldersWithTotalPairsByUserId } from "@/modules/folder/folder-repository";
 import { notFound } from "next/navigation";
@@ -176,11 +177,10 @@ export default async function UserPage({ params }: UserPageProps) {
                                                 {new Date(folder.createdAt).toLocaleDateString()}
                                             </td>
                                             <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                                                <Link
+                                                <Link href={`/folders/${folder.id}`}>
-                                                    href={`/folders/${folder.id}`}
+                                                    <LinkButton>
-                                                    className="text-[#35786f] hover:text-[#2a5f58]"
+                                                        {t("folders.view")}
-                                                >
+                                                    </LinkButton>
-                                                    {t("folders.view")}
                                                 </Link>
                                             </td>
                                         </tr>