feat: small visual polishes

renlabs-dev · Oct 18, 2024 · 13af441 · 13af441
1 parent 68fa889
commit 13af441
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/apps/commune-validator/src/app/(expanded-pages)/tutorial/page.tsx b/apps/commune-validator/src/app/(expanded-pages)/tutorial/page.tsx
@@ -11,6 +11,8 @@ import {
 } from "@heroicons/react/24/outline";
 
 import { useCommune } from "@commune-ts/providers/use-commune";
+import { Button, CopyButton } from "@commune-ts/ui";
+import { copyToClipboard } from "@commune-ts/utils";
 
 export const tutorialData = {
   "1": {
@@ -27,7 +29,22 @@ export const tutorialData = {
     description: "Staking on the Community Validator",
     steps: [
       "Navigate to the staking tab in your wallet",
-      "Add this validator address: 5Hgik8Kf7nq5VBtW41psbpXu1kinXpqRs4AHotPe6u1w6QX2 (Community Validator official validator)",
+      <div key="validator-address" className="flex items-center">
+        <span>Add this validator address: </span>
+        <Button
+          variant="link"
+          className="px-1 text-base text-green-500"
+          onClick={() =>
+            copyToClipboard("5Hgik8Kf7nq5VBtW41psbpXu1kinXpqRs4AHotPe6u1w6QX2")
+          }
+        >
+          Copy Validator Address
+        </Button>
+        <span>
+          (5Hgik8Kf7nq5VBtW41psbpXu1kinXpqRs4AHotPe6u1w6QX2 / Community
+          Validator official validator)
+        </span>
+      </div>,
       "Stake your desired amount (this determines your allocation power for modules and subnets)",
       "Note: Your staked balance remains untouched; it only represents your voting power",
     ],

diff --git a/apps/commune-validator/src/app/layout.tsx b/apps/commune-validator/src/app/layout.tsx
@@ -35,13 +35,13 @@ export default function RootLayout({
           <Wallet />
           <div className="flex w-full animate-fade-down border-b border-white/20 py-2.5">
             <div className="mx-auto flex max-w-screen-md items-center gap-1 px-2">
-              <InformationCircleIcon className="h-10 w-10 text-green-500 md:h-5 md:w-5" />
+              <InformationCircleIcon className="h-10 w-10 text-green-500 md:h-6 md:w-6" />
               <p className="text-gray-400">
                 To assign weights to modules, you need to stake on our
                 validator. Click{" "}
                 <Link
                   href="/tutorial"
-                  className="text-green-500 hover:underline"
+                  className="font-semibold text-green-500 hover:underline"
                 >
                   here
                 </Link>{" "}

diff --git a/apps/commune-validator/src/app/page.tsx b/apps/commune-validator/src/app/page.tsx
@@ -211,10 +211,13 @@ export default function Page() {
           </div>
         </div>
         <Separator className="mb-3" />
-        <Card className="flex mb-3 w-full animate-fade-down flex-col items-center justify-between gap-3 p-4 animate-delay-[650ms] md:flex-row">
+        <Card className="mb-3 flex w-full animate-fade-down flex-col items-center justify-between gap-3 p-4 animate-delay-[650ms] md:flex-row">
           <Label>
             Feeling lost? Check out our tutorial on how to get started with the{" "}
-            <b className="text-green-500">Community Validator</b>:
+            <Link href="/tutorial" className="text-green-500">
+              Community Validator
+            </Link>
+            :
           </Label>
           <Button variant="default-green" className="w-full md:w-fit" asChild>
             <Link href="/tutorial">Get Started!</Link>