chore: applied required style changes

Author: dkrabdev

package.json

@@ -1,6 +1,6 @@
 {
   "name": "inkchain-docs",
-  "packageManager": "pnpm@9.1.3",
+  "packageManager": "pnpm@9.2.0",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -63,7 +63,7 @@
     "remark-code-import": "1.2.0",
     "remark-frontmatter": "5.0.0",
     "remark-gfm": "4.0.0",
-    "remark-lint-frontmatter-schema": "3.15.3",
+    "remark-lint-frontmatter-schema": "3.15.4",
     "remark-lint-heading-style": "4.0.0",
     "remark-lint-list-item-indent": "4.0.0",
     "remark-lint-table-cell-padding": "5.0.0",
@@ -72,7 +72,7 @@
     "remark-lint-unordered-list-marker-style": "4.0.0",
     "remark-preset-lint-consistent": "6.0.0",
     "remark-preset-lint-recommended": "7.0.0",
-    "tailwindcss": "3.4.3",
+    "tailwindcss": "3.4.4",
     "typescript": "5.4.5"
   }
 }

pnpm-lock.yaml

@@ -1,12 +1,15 @@
 import { addNetwork } from "@/utils/add-network";
 
+import { Button } from "./Button";
+
 export const AddNetworkButton = () => {
   return (
-    <button
-      className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
+    <Button
+      variant="primary"
+      // variant="secondary"
       onClick={addNetwork}
     >
       Add Ink Sepolia Network
-    </button>
+    </Button>
   );
 };

src/components/AddNetworkButton.tsx

@@ -0,0 +1,29 @@
+import { PropsWithChildren } from "react";
+import clsx from "clsx";
+
+interface ButtonProps {
+  variant: "primary" | "secondary";
+  onClick?: () => void;
+}
+
+export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
+  children,
+  variant,
+  onClick,
+}) => {
+  return (
+    <button
+      className={clsx(
+        "font-semibold py-2 px-4 rounded-xl inline-flex items-center transition-all",
+        {
+          "text-magic-white bg-magic-purple": variant === "primary",
+          "text-magic-purple bg-magic-semi-deep-purple/15 ":
+            variant === "secondary",
+        }
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};

src/components/Button.tsx

@@ -16,15 +16,19 @@ export const SidebarTitleComponent: React.FC<SidebarTitleComponentProps> = ({
   const isActive = route === asPath;
 
   if (type === "separator") {
-    return <div className="font-bold text-black dark:text-white">{title}</div>;
+    return (
+      <div className="font-bold text-black dark:text-magic-white">{title}</div>
+    );
   }
 
   return (
     <div
       className={clsx(
-        "ink-sidebar-item px-2 py-1.5  rounded-sm w-full hover:bg-magic-purple/20 transition-all",
+        "ink-sidebar-item px-2 py-1.5 rounded-sm w-full transition-all",
         {
-          "bg-magic-purple/20": isActive,
+          "text-ink-grey-400 dark:text-magic-white dark:hover:text-ink-grey-700 hover:text-ink-grey-700 hover:bg-ink-grey-100":
+            !isActive,
+          "bg-magic-semi-deep-purple/15 text-magic-purple": isActive,
         }
       )}
     >

src/components/SidebarTitleComponent.tsx

@@ -31,7 +31,7 @@ export const ThemeToggle = () => {
   return (
     <button className="w-6 h-6" type="button" onClick={onToggleTheme}>
       {resolvedTheme === "light" ? (
-        <SunIcon className="w-6 h-6 text-magic-purple" />
+        <SunIcon className="w-6 h-6 text-magic-black" />
       ) : (
         <MoonIcon className="w-6 h-6 text-white" />
       )}

src/components/ThemeToggle.tsx

@@ -19,12 +19,14 @@ export const Toc: React.FC<TocProps> = ({ headings }) => {
     <div className="flex flex-col items-start justify-start py-5 sticky top-14">
       {headings.length > 0 && (
         <div className="flex flex-col gap-2 border-b pb-4 mb-6">
-          <h5 className="font-bold text-magic-black">On this page</h5>
+          <h5 className="font-bold text-magic-black dark:text-magic-white">
+            On this page
+          </h5>
 
           <ul>
             {headings.map(({ id, value }) => (
-              <li key={id} className="mb-2">
-                <Link className="text-sm cursor-pointer" href={`#${id}`}>
+              <li key={id} className="group mb-2">
+                <Link className="text-sm toc-link" href={`#${id}`}>
                   {value}
                 </Link>
               </li>
@@ -35,18 +37,18 @@ export const Toc: React.FC<TocProps> = ({ headings }) => {
       <div className="flex flex-col gap-2">
         <Link
           href={URLS.developerWailistUrl}
-          className="text-xs flex items-center gap-1"
+          className="group text-xs flex items-center gap-1"
         >
-          <ThumpUpIcon className="size-4 text-magic-purple" />
-          Give us feedback
+          <ThumpUpIcon className="size-4 toc-link" />
+          <span className="toc-link">Give us feedback</span>
         </Link>
 
         <Link
           href={URLS.editDocsOnGithub}
-          className="text-xs flex items-center gap-1"
+          className="group text-xs flex items-center gap-1"
         >
-          <PencilIcon className="size-4 text-magic-purple" />
-          Edit this page on Github
+          <PencilIcon className="size-4 toc-link" />
+          <span className="toc-link">Edit this page on Github</span>
         </Link>
       </div>
     </div>

src/components/Toc.tsx

@@ -3,12 +3,35 @@
 @tailwind utilities;
 
 @layer base {
+  h1,
+  h2,
+  h3,
+  h4 {
+    @apply !text-magic-deep-purple dark:!text-magic-white;
+  }
+
   a {
-    @apply !text-magic-purple dark:!text-magic-purple;
+    @apply !text-magic-purple dark:!text-magic-semi-deep-purple;
+  }
+
+  nav > a {
+    @apply !text-ink-grey-400 dark:!text-magic-white dark:hover:!text-ink-grey-400 hover:!text-ink-grey-700;
+  }
+
+  nav > a > svg {
+    @apply !fill-magic-black dark:!fill-magic-white;
   }
 
   nav {
-    @apply bg-magic-white dark:bg-magic-black;
+    @apply bg-white dark:bg-magic-black;
+  }
+
+  pre {
+    @apply !bg-magic-semi-deep-purple/15;
+  }
+
+  .toc-link {
+    @apply cursor-pointer !text-ink-grey-400 dark:!text-magic-white group-hover:!text-ink-grey-700 dark:group-hover:!text-ink-grey-700;
   }
 }
 

src/globals.css

@@ -1,14 +1,22 @@
 // These styles apply to every route in the application
 import type { AppProps } from "next/app";
+import { Inter } from "next/font/google";
 import { ThemeProvider } from "next-themes";
 
 import "../globals.css";
 
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <ThemeProvider attribute="class">
-      <div className="bg-magic-white dark:bg-magic-black">
-        <Component {...pageProps} />
+      <div className={`${inter.variable} font-sans`}>
+        <div className="bg-white dark:bg-magic-black">
+          <Component {...pageProps} />
+        </div>
       </div>
     </ThemeProvider>
   );