[TOOL-3166] Update portal theming to match dashboard

Author: MananTank

apps/portal/src/app/Header.tsx

@@ -9,14 +9,20 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import clsx from "clsx";
-import { ChevronDownIcon, Menu } from "lucide-react";
-import Image from "next/image";
+import { ChevronDownIcon, Menu, TableOfContentsIcon } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useState } from "react";
 import { GithubIcon } from "../components/Document/GithubButtonLink";
 import { CustomAccordion } from "../components/others/CustomAccordion";
 import { ThemeSwitcher } from "../components/others/theme/ThemeSwitcher";
+import {
+  DotNetIcon,
+  ReactIcon,
+  TypeScriptIcon,
+  UnityIcon,
+  UnrealEngineIcon,
+} from "../icons";
 import { ThirdwebIcon } from "../icons/thirdweb";
 
 const links = [
@@ -65,42 +71,45 @@ const toolLinks = [
   },
 ];
 
-export const connectLinks = [
+export const connectLinks: Array<{
+  name: string;
+  href: string;
+  icon: React.FC<{ className?: string }>;
+}> = [
   {
     name: "Overview",
     href: "/connect",
-    icon: "/icons/navbar/nav-icon-dashboard.svg",
+    icon: TableOfContentsIcon,
   },
   {
     name: "TypeScript",
     href: "/typescript/v5",
-    icon: "/icons/navbar/nav-icon-typescript.svg",
+    icon: TypeScriptIcon,
   },
   {
     name: "React",
     href: "/react/v5",
-    icon: "/icons/navbar/nav-icon-react.svg",
+    icon: ReactIcon,
   },
   {
     name: "React Native",
     href: "/react-native/v5",
-    icon: "/icons/navbar/nav-icon-react.svg",
-    // icon: "/icons/navbar/nav-icon-react-native.svg",
+    icon: ReactIcon,
   },
   {
     name: ".NET",
     href: "/dotnet",
-    icon: "/icons/navbar/nav-icon-dotnet.svg",
+    icon: DotNetIcon,
   },
   {
     name: "Unity",
     href: "/unity",
-    icon: "/icons/navbar/nav-icon-unity.svg",
+    icon: UnityIcon,
   },
   {
     name: "Unreal Engine",
     href: "/unreal-engine",
-    icon: "/icons/navbar/nav-icon-unreal-engine.svg",
+    icon: UnrealEngineIcon,
   },
 ] as const;
 
@@ -123,7 +132,7 @@ export function Header() {
   const [showBurgerMenu, setShowBurgerMenu] = useState(false);
 
   return (
-    <header className="flex w-full items-center border-b bg-b-900">
+    <header className="flex w-full items-center border-b bg-background">
       <div className="container flex items-center justify-between gap-6 p-4 xl:justify-start">
         <Link
           className="flex items-center gap-2"
@@ -132,7 +141,7 @@ export function Header() {
           title="thirdweb Docs"
         >
           <ThirdwebIcon className="size-8" />
-          <span className="font-bold text-[23px] text-f-100 leading-none tracking-tight">
+          <span className="font-bold text-[23px] text-foreground leading-none tracking-tight">
             Docs
           </span>
         </Link>
@@ -145,7 +154,7 @@ export function Header() {
           <Link
             href="https://github.com/thirdweb-dev"
             target="_blank"
-            className="text-f-100"
+            className="text-foreground"
           >
             <GithubIcon className="mx-3 size-6" />
           </Link>
@@ -164,7 +173,7 @@ export function Header() {
           className={clsx(
             "grow gap-5",
             !showBurgerMenu ? "hidden xl:flex" : "flex",
-            "fade-in-20 slide-in-from-top-3 fixed inset-0 top-sticky-top-height animate-in flex-col overflow-auto bg-b-800 p-6",
+            "fade-in-20 slide-in-from-top-3 fixed inset-0 top-sticky-top-height animate-in flex-col overflow-auto bg-card p-6",
             "xl:static xl:animate-none xl:flex-row xl:justify-between xl:bg-transparent xl:p-0",
           )}
         >
@@ -227,7 +236,7 @@ export function Header() {
             <Link
               href="https://github.com/thirdweb-dev"
               target="_blank"
-              className="hidden text-f-300 transition-colors hover:text-f-100 xl:block"
+              className="hidden text-muted-foreground transition-colors hover:text-foreground xl:block"
             >
               <GithubIcon className="mx-2 size-6" />
             </Link>
@@ -241,7 +250,11 @@ export function Header() {
 function DropdownLinks(props: {
   onLinkClick?: () => void;
   category: string;
-  links: readonly { name: string; href: string; icon?: string }[];
+  links: readonly {
+    name: string;
+    href: string;
+    icon?: React.FC<{ className?: string }>;
+  }[];
 }) {
   return (
     <>
@@ -251,42 +264,40 @@ function DropdownLinks(props: {
           <DropdownMenuTrigger asChild>
             <Button
               variant="ghost"
-              className="inline-flex items-center gap-1 p-0 font-medium text-f-300 text-sm hover:bg-transparent hover:text-f-100"
+              className="inline-flex items-center gap-1 p-0 font-medium text-muted-foreground text-sm hover:bg-transparent hover:text-foreground"
             >
               {props.category}
-              <ChevronDownIcon className="size-4 text-f-300 opacity-70" />
+              <ChevronDownIcon className="size-4 text-muted-foreground opacity-70" />
             </Button>
           </DropdownMenuTrigger>
 
           <DropdownMenuContent
-            className="flex flex-col gap-1 bg-b-800 p-3"
+            className="flex flex-col gap-1 bg-card p-3"
             style={{
               minWidth: "150px",
             }}
           >
             {props.links.map((info) => {
               return (
                 <DropdownMenuItem asChild key={info.name}>
-                  <Link
-                    href={info.href}
-                    target={info.href.startsWith("http") ? "_blank" : ""}
-                    prefetch={false}
+                  <div
                     className={clsx(
-                      "flex cursor-pointer font-medium text-f-200",
-                      "hover:bg-b-600 hover:text-f-100",
+                      "relative flex cursor-pointer gap-2 font-medium text-foreground",
+                      "hover:bg-accent",
                     )}
                   >
                     {info.icon && (
-                      <Image
-                        src={info.icon}
-                        width="20"
-                        height="20"
-                        alt=""
-                        className="mr-2"
-                      />
+                      <info.icon className="size-5 text-foreground" />
                     )}
-                    {info.name}
-                  </Link>
+                    <Link
+                      prefetch={false}
+                      target={info.href.startsWith("http") ? "_blank" : ""}
+                      href={info.href}
+                      className="before:absolute before:inset-0"
+                    >
+                      {info.name}
+                    </Link>
+                  </div>
                 </DropdownMenuItem>
               );
             })}
@@ -300,7 +311,7 @@ function DropdownLinks(props: {
           chevronPosition="right"
           containerClassName="border-none"
           trigger={props.category}
-          triggerContainerClassName="py-0 text-base font-medium text-f-300"
+          triggerContainerClassName="py-0 text-base font-medium text-muted-foreground"
         >
           <div className="pt-2">
             <div className="flex flex-col gap-4 border-l-2 pt-3 pl-4">
@@ -327,7 +338,7 @@ function NavLink(props: {
   href: string;
   name: string;
   onClick?: () => void;
-  icon?: string;
+  icon?: React.FC<{ className?: string }>;
 }) {
   const pathname = usePathname();
   return (
@@ -336,20 +347,14 @@ function NavLink(props: {
       onClick={props.onClick}
       target={props.href.startsWith("http") ? "_blank" : ""}
       className={clsx(
-        "font-medium text-base transition-colors hover:text-f-100 xl:text-sm",
-        pathname === props.href ? "text-f-100" : "text-f-300 ",
-        props.icon ? "flex flex-row gap-2" : "",
+        "font-medium text-base transition-colors hover:text-foreground xl:text-sm",
+        pathname === props.href ? "text-foreground" : "text-muted-foreground ",
+        props.icon ? "flex flex-row gap-3" : "",
       )}
     >
       {props.icon ? (
         <>
-          <Image
-            src={props.icon}
-            width="40"
-            height="40"
-            className="size-7"
-            alt=""
-          />
+          <props.icon className="size-6 text-muted-foreground" />
           <span className="my-auto">{props.name}</span>
         </>
       ) : (

apps/portal/src/app/changelog/[slug]/page.tsx

@@ -28,7 +28,7 @@ export default async function Page(props: {
       <Button asChild>
         <Link
           href="/changelog"
-          className="-translate-x-1/4 !p-2 !text-f-300 hover:!text-accent-500 mb-4 bg-transparent"
+          className="-translate-x-1/4 !p-2 !text-muted-foreground hover:!text-foreground mb-4 bg-transparent"
         >
           <ArrowLeft className="size-6" />
         </Link>
@@ -42,7 +42,7 @@ export default async function Page(props: {
 
       <h1
         className={cn(
-          "mb-8 break-words font-bold text-4xl text-f-100 tracking-tight md:text-5xl",
+          "mb-8 break-words font-bold text-4xl text-foreground tracking-tight md:text-5xl",
         )}
       >
         {data.title}

apps/portal/src/app/changelog/[slug]/styles.css

@@ -3,16 +3,27 @@
 }
 
 .changelog-page a {
-  color: var(--accent-500);
+  text-decoration: underline;
+  text-decoration-color: hsl(var(--muted-foreground));
+  text-decoration-style: dotted;
+  color: hsl(var(--foreground));
+  text-underline-offset: 5px;
+  transition: color 200ms ease;
+}
+
+.changelog-page h2 a {
+  text-decoration: none;
 }
 
 .changelog-page a:hover {
-  color: var(--f-100);
+  color: hsl(var(--foreground));
+  text-decoration-color: hsl(var(--foreground));
+  text-decoration-style: solid;
 }
 
 .changelog-page figcaption {
   text-align: center;
-  color: var(--f-300);
+  color: hsl(var(--muted-foreground));
 }
 
 .changelog-page iframe {
@@ -43,7 +54,7 @@
   display: flex;
   gap: 10px;
   margin: 20px 0;
-  background: var(--b-800);
+  background: hsl(var(--card));
 }
 
 .kg-video-overlay {

apps/portal/src/app/changelog/components/Author.tsx

@@ -10,7 +10,9 @@ export function Author(props: { name: string; profileImage?: string | null }) {
           alt=""
         />
       )}
-      <span className="font-medium text-f-200 text-sm">{props.name}</span>
+      <span className="font-medium text-muted-foreground text-sm">
+        {props.name}
+      </span>
     </div>
   );
 }

apps/portal/src/app/changelog/components/RenderData.tsx

@@ -5,7 +5,10 @@ export function RenderDate(props: { iso: string; className?: string }) {
   return (
     <time
       dateTime={props.iso}
-      className={cn("font-medium text-f-300 text-sm", props.className)}
+      className={cn(
+        "font-medium text-muted-foreground text-sm",
+        props.className,
+      )}
     >
       {formatDistance(new Date(props.iso), new Date())} ago
     </time>

apps/portal/src/app/changelog/page.tsx

@@ -65,11 +65,11 @@ async function PageContent() {
                 </div>
               </div>
 
-              <div className="-left-12 -translate-x-1/2 absolute top-12 hidden size-7 items-center justify-center rounded-[50%] bg-f-100 md:size-10 xl:flex">
-                <PlusIcon className="size-6 text-b-900" />
+              <div className="-left-12 -translate-x-1/2 absolute top-12 hidden size-7 items-center justify-center rounded-[50%] bg-foreground md:size-10 xl:flex">
+                <PlusIcon className="size-6 text-background" />
               </div>
 
-              <div className="overflow-hidden">
+              <div>
                 <Heading
                   level={2}
                   className="changelog-title"
@@ -78,7 +78,7 @@ async function PageContent() {
                 >
                   <Link
                     href={`/changelog/${post.slug}`}
-                    className="!text-f-100 font-bold text-3xl tracking-tighter hover:underline md:text-4xl xl:text-5xl"
+                    className="!text-foreground font-bold text-3xl tracking-tighter hover:underline md:text-4xl xl:text-5xl"
                   >
                     {post.title}
                   </Link>

apps/portal/src/app/changelog/utils/transform.tsx

@@ -60,7 +60,7 @@ export const transform: Transform = (node, index: number) => {
       if (!node.attribs) {
         node.attribs = {};
       }
-      node.attribs.class = "text-center text-sm text-f-300";
+      node.attribs.class = "text-center text-sm text-muted-foreground";
       return;
     }
     return <Paragraph>{getChildren()}</Paragraph>;

apps/portal/src/app/connect/layout.tsx

@@ -9,7 +9,7 @@ export default async function Layout(props: { children: React.ReactNode }) {
       editPageButton={true}
       sidebarHeader={
         <div className="flex-col items-center gap-1">
-          <p className="py-5 font-semibold text-f-100 text-lg">Connect</p>
+          <p className="py-5 font-semibold text-foreground text-lg">Connect</p>
           <PlatformSelector selected="Overview" />
         </div>
       }