From 7dbf0e70a3209737ce94da0bcbd86a2eaa58e4d5 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Tue, 29 Apr 2025 09:00:12 +0000
Subject: [PATCH] [NEB-219] Nebula: Update theming (#6885)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `Nebula` application by introducing a new color scheme, refining components, and improving accessibility. It adds a `nebula-pink` color variant, modifies component styles, and updates layouts for better user experience.

### Detailed summary
- Added `::selection` style in `nebula-global.css`.
- Introduced `nebula-pink` color variant in `tailwind.config.js`.
- Exported `useIsClientMounted` function in `ClientOnly.tsx`.
- Updated global CSS variables for `nebula-pink-foreground`.
- Modified button styles to utilize `nebula-pink`.
- Adjusted layout and component styles for better aesthetics and usability.
- Enhanced accessibility by refining header and button elements.
- Implemented a theme toggle button in `ChatSidebar`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../src/@/components/blocks/multi-select.tsx  |  4 +-
 apps/dashboard/src/@/components/ui/button.tsx |  1 +
 .../nebula-app/(app)/components/ChatBar.tsx   |  7 +--
 .../(app)/components/ChatSidebar.tsx          | 38 ++++++++-----
 .../components/EmptyStateChatPageContent.tsx  | 16 ++++--
 .../FloatingChat/FloatingChatContent.tsx      |  6 +-
 .../app/nebula-app/(app)/icons/NebulaIcon.tsx | 55 ++-----------------
 apps/dashboard/src/app/nebula-app/layout.tsx  |  1 +
 .../app/nebula-app/login/NebulaLoginPage.tsx  |  8 +--
 .../src/app/nebula-app/nebula-global.css      |  3 +
 .../src/components/ClientOnly/ClientOnly.tsx  |  2 +-
 .../src/components/buttons/MismatchButton.tsx |  8 +--
 apps/dashboard/src/global.css                 |  2 +
 apps/dashboard/tailwind.config.js             |  3 +
 14 files changed, 67 insertions(+), 87 deletions(-)
 create mode 100644 apps/dashboard/src/app/nebula-app/nebula-global.css

diff --git a/apps/dashboard/src/@/components/blocks/multi-select.tsx b/apps/dashboard/src/@/components/blocks/multi-select.tsx
index ed1561479db..2824eaed728 100644
--- a/apps/dashboard/src/@/components/blocks/multi-select.tsx
+++ b/apps/dashboard/src/@/components/blocks/multi-select.tsx
@@ -217,7 +217,7 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
         </PopoverTrigger>
         <PopoverContent
           className={cn(
-            "flex max-h-[60vh] flex-col p-0",
+            "flex max-h-[500px] flex-col p-0",
             popoverContentClassName,
           )}
           align={props.align}
@@ -236,6 +236,8 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
             <Input
               placeholder={searchPlaceholder || "Search"}
               value={searchValue}
+              // do not focus on the input when the popover opens to avoid opening the keyboard
+              tabIndex={-1}
               onChange={(e) => setSearchValue(e.target.value)}
               className="!h-auto rounded-b-none border-0 border-border border-b py-4 pl-10 focus-visible:ring-0 focus-visible:ring-offset-0"
               onKeyDown={handleInputKeyDown}
diff --git a/apps/dashboard/src/@/components/ui/button.tsx b/apps/dashboard/src/@/components/ui/button.tsx
index 201ea8d6361..d89c7a433b8 100644
--- a/apps/dashboard/src/@/components/ui/button.tsx
+++ b/apps/dashboard/src/@/components/ui/button.tsx
@@ -20,6 +20,7 @@ const buttonVariants = cva(
           "bg-secondary hover:bg-secondary/80 text-semibold text-secondary-foreground ",
         ghost: "hover:bg-accent text-semibold hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline text-semibold",
+        pink: "border border-nebula-pink-foreground !text-nebula-pink-foreground bg-[hsl(var(--nebula-pink-foreground)/5%)] hover:bg-nebula-pink-foreground/10 dark:!text-foreground dark:bg-nebula-pink-foreground/10 dark:hover:bg-nebula-pink-foreground/20",
         upsell:
           "bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:from-purple-600 hover:to-pink-600 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200",
       },
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
index f64a79392d9..6f0a751c59c 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
@@ -192,11 +192,8 @@ export function ChatBar(props: {
           <Button
             aria-label="Send"
             disabled={message.trim() === "" || props.isConnectingWallet}
-            className={cn(
-              "!h-auto w-auto border border-transparent p-2 disabled:opacity-100",
-              message === "" &&
-                "border-border bg-muted text-muted-foreground hover:border-transparent hover:text-foreground",
-            )}
+            className="!h-auto w-auto border border-nebula-pink-foreground p-2 disabled:opacity-100"
+            variant="pink"
             onClick={() => {
               if (message.trim() === "") return;
               setMessage("");
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx
index 52542732ab8..5ba3f458adf 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx
@@ -8,12 +8,14 @@ import {
   ChevronRightIcon,
   FileCode2Icon,
   LogOutIcon,
-  PaletteIcon,
+  MoonIcon,
   PlusIcon,
+  SunIcon,
 } from "lucide-react";
 import { useTheme } from "next-themes";
 import Link from "next/link";
 import { toast } from "sonner";
+import { useIsClientMounted } from "../../../../components/ClientOnly/ClientOnly";
 import { doNebulaLogout } from "../../login/auth-actions";
 import type { TruncatedSessionInfo } from "../api/types";
 import { useNewChatPageLink } from "../hooks/useNewChatPageLink";
@@ -30,7 +32,6 @@ export function ChatSidebar(props: {
   const sessions = useSessionsWithLocalOverrides(props.sessions);
   const sessionsToShow = sessions.slice(0, 10);
   const newChatPage = useNewChatPageLink();
-  const { theme, setTheme } = useTheme();
   const router = useDashboardRouter();
   const logoutMutation = useMutation({
     mutationFn: doNebulaLogout,
@@ -39,9 +40,9 @@ export function ChatSidebar(props: {
   return (
     <div className="flex h-full flex-col">
       <div className="flex items-center justify-start gap-3 p-4 lg:justify-between">
-        <Link href="/" className="flex items-center gap-2">
+        <Link href="/" className="flex items-center gap-1">
           <NebulaIcon className="size-6 text-foreground" aria-label="Nebula" />
-          <span className="font-semibold text-lg tracking-tight">Nebula</span>
+          <span className="font-medium text-lg">Nebula</span>
         </Link>
 
         <Badge variant="secondary" className="gap-1 py-1">
@@ -54,8 +55,8 @@ export function ChatSidebar(props: {
       <div className="flex flex-col gap-2 px-4">
         <Button
           asChild
-          variant="outline"
-          className="w-full gap-2 rounded-lg bg-muted/50"
+          variant="pink"
+          className="w-full gap-2 rounded-lg border-nebula-pink-foreground"
         >
           <Link href={newChatPage}>
             <PlusIcon className="size-4" />
@@ -104,13 +105,7 @@ export function ChatSidebar(props: {
           target="_blank"
         />
 
-        <SidebarIconButton
-          onClick={() => {
-            setTheme(theme === "light" ? "dark" : "light");
-          }}
-          icon={PaletteIcon}
-          label="Theme"
-        />
+        <ToggleThemeButton />
 
         <SidebarIconButton
           onClick={async () => {
@@ -133,6 +128,23 @@ export function ChatSidebar(props: {
   );
 }
 
+function ToggleThemeButton() {
+  const { theme, setTheme } = useTheme();
+  const isClientMounted = useIsClientMounted();
+
+  return (
+    <SidebarIconButton
+      onClick={() => {
+        setTheme(theme === "light" ? "dark" : "light");
+      }}
+      icon={
+        isClientMounted ? (theme === "light" ? SunIcon : MoonIcon) : Spinner
+      }
+      label="Theme"
+    />
+  );
+}
+
 function SidebarIconLink(props: {
   icon: React.FC<{ className?: string }>;
   label: string;
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
index d8671763fd0..07878e3f03a 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import { ArrowUpRightIcon } from "lucide-react";
 import type { NebulaContext } from "../api/chat";
 import { examplePrompts } from "../data/examplePrompts";
@@ -23,9 +24,9 @@ export function EmptyStateChatPageContent(props: {
       <div className="relative py-10">
         <FancyBorders />
         <div className="flex justify-center">
-          <div className="rounded-full border p-1">
-            <div className="rounded-full border bg-card p-2">
-              <NebulaIcon className="size-7 text-muted-foreground" />
+          <div className="rounded-full border-[1.5px] border-nebula-pink-foreground/20 bg-[hsl(var(--nebula-pink-foreground)/5%)] p-1">
+            <div className="rounded-full border-[1.5px] border-nebula-pink-foreground/40 bg-[hsl(var(--nebula-pink-foreground)/5%)] p-2">
+              <NebulaIcon className="size-7 text-nebula-pink-foreground" />
             </div>
           </div>
         </div>
@@ -120,14 +121,17 @@ function DashedBgDiv(props: {
 }) {
   return (
     <div
-      className={props.className}
+      className={cn(
+        "text-nebula-pink-foreground/50 dark:text-active-border",
+        props.className,
+      )}
       style={{
-        backgroundImage: `linear-gradient(${props.type === "horizontal" ? "90deg" : "180deg"}, hsl(var(--active-border)) 0 30%, transparent 0 100%)`,
+        backgroundImage: `linear-gradient(${props.type === "horizontal" ? "90deg" : "180deg"}, currentColor 0 30%, transparent 0 100%)`,
         backgroundRepeat: "repeat",
         backgroundSize: "10px 10px",
         maskImage: `linear-gradient(${
           props.type === "horizontal" ? "to right" : "to bottom"
-        }, rgba(0,0,0,0.1), black 20%, black 80%, rgba(0,0,0,0.1))`,
+        }, rgba(0,0,0,0.1), black 30%, black 70%, rgba(0,0,0,0.1))`,
       }}
     />
   );
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx
index a666a9674ca..23789d1c2eb 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx
@@ -275,9 +275,9 @@ function EmptyStateChatPageContent(props: {
   return (
     <div className="flex flex-1 flex-col items-center justify-center overflow-auto p-4 ">
       <div className="mb-4 flex justify-center">
-        <div className="rounded-full border p-1">
-          <div className="rounded-full border bg-card p-2">
-            <NebulaIcon className="size-7 text-muted-foreground" />
+        <div className="rounded-full border-[1.5px] border-nebula-pink-foreground/20 bg-[hsl(var(--nebula-pink-foreground)/5%)] p-1">
+          <div className="rounded-full border-[1.5px] border-nebula-pink-foreground/40 bg-[hsl(var(--nebula-pink-foreground)/5%)] p-2">
+            <NebulaIcon className="size-7 text-nebula-pink-foreground" />
           </div>
         </div>
       </div>
diff --git a/apps/dashboard/src/app/nebula-app/(app)/icons/NebulaIcon.tsx b/apps/dashboard/src/app/nebula-app/(app)/icons/NebulaIcon.tsx
index e4da354043b..bfd2636bf1b 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/icons/NebulaIcon.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/icons/NebulaIcon.tsx
@@ -1,68 +1,23 @@
 export function NebulaIcon(props: { className?: string }) {
   return (
     <svg
-      className={props.className}
-      role="presentation"
       width="24"
       height="24"
-      viewBox="0 0 24 24"
+      viewBox="0 0 153 153"
+      className={props.className}
+      role="presentation"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M19 10.4399C18.3096 10.4399 17.75 10.9996 17.75 11.6899C17.75 12.3803 18.3096 12.9399 19 12.9399C19.6904 12.9399 20.25 12.3803 20.25 11.6899C20.25 10.9996 19.6904 10.4399 19 10.4399ZM16.25 11.6899C16.25 10.1712 17.4812 8.93994 19 8.93994C20.5188 8.93994 21.75 10.1712 21.75 11.6899C21.75 13.2087 20.5188 14.4399 19 14.4399C17.4812 14.4399 16.25 13.2087 16.25 11.6899Z"
-        fill="currentColor"
-        stroke="currentColor"
-        strokeWidth="0.25"
-        strokeMiterlimit="10"
-      />
-      <path
-        d="M12 13.9341C13.1046 13.9341 14 13.0387 14 11.9341C14 10.8295 13.1046 9.93408 12 9.93408C10.8954 9.93408 10 10.8295 10 11.9341C10 13.0387 10.8954 13.9341 12 13.9341Z"
+        d="M76.3162 90.8232C82.4613 90.8232 87.4429 85.8416 87.4429 79.6965C87.4429 73.5514 82.4613 68.5698 76.3162 68.5698C70.171 68.5698 65.1895 73.5514 65.1895 79.6965C65.1895 85.8416 70.171 90.8232 76.3162 90.8232Z"
         fill="currentColor"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M5 10.4399C4.30964 10.4399 3.75 10.9996 3.75 11.6899C3.75 12.3803 4.30964 12.9399 5 12.9399C5.69036 12.9399 6.25 12.3803 6.25 11.6899C6.25 10.9996 5.69036 10.4399 5 10.4399ZM2.25 11.6899C2.25 10.1712 3.48122 8.93994 5 8.93994C6.51878 8.93994 7.75 10.1712 7.75 11.6899C7.75 13.2087 6.51878 14.4399 5 14.4399C3.48122 14.4399 2.25 13.2087 2.25 11.6899Z"
-        fill="currentColor"
-        stroke="currentColor"
-        strokeWidth="0.25"
-        strokeMiterlimit="10"
-      />
-      <mask
-        id="path-4-outside-1_1247_10206"
-        maskUnits="userSpaceOnUse"
-        x="2.00342"
-        y="2.00342"
-        width="20"
-        height="20"
-        fill="black"
-      >
-        <rect
-          fill="currentColor"
-          x="2.00342"
-          y="2.00342"
-          width="20"
-          height="20"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M4.7277 14.182C4.24985 16.0934 4.54726 17.6287 5.45936 18.5408C6.37146 19.4529 7.90677 19.7503 9.8182 19.2725C11.7127 18.7989 13.8394 17.5854 15.7124 15.7124C16.5051 14.9198 17.1796 14.0817 17.7299 13.235C18.0753 13.5193 18.5178 13.6901 19.0001 13.6901C19.0756 13.6901 19.1502 13.6859 19.2235 13.6777C18.5704 14.7489 17.7476 15.7985 16.7731 16.7731C14.7409 18.8053 12.3822 20.1776 10.182 20.7277C7.99867 21.2735 5.82974 21.0325 4.3987 19.6015C2.96766 18.1705 2.72666 16.0015 3.27249 13.8182C3.33854 13.554 3.41645 13.2875 3.50594 13.0196C3.8447 13.4 4.32658 13.6502 4.86709 13.6857C4.81514 13.8527 4.76865 14.0182 4.7277 14.182ZM6.5215 10.3918C7.02185 9.67265 7.61187 8.9637 8.28779 8.28779C10.1608 6.41476 12.2875 5.20134 14.182 4.7277C16.0934 4.24985 17.6287 4.54726 18.5408 5.45936C19.436 6.35453 19.7391 7.84998 19.2983 9.71214C19.8482 9.79435 20.325 10.1005 20.6329 10.5348C20.6668 10.4168 20.6984 10.2992 20.7277 10.182C21.2735 7.99867 21.0325 5.82974 19.6015 4.3987C18.1705 2.96766 16.0015 2.72666 13.8182 3.27249C11.618 3.82255 9.25934 5.19491 7.22713 7.22713C6.44286 8.01139 5.75687 8.84427 5.17848 9.6979C5.71512 9.74534 6.19088 10.0047 6.5215 10.3918Z"
-        />
-      </mask>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M4.7277 14.182C4.24985 16.0934 4.54726 17.6287 5.45936 18.5408C6.37146 19.4529 7.90677 19.7503 9.8182 19.2725C11.7127 18.7989 13.8394 17.5854 15.7124 15.7124C16.5051 14.9198 17.1796 14.0817 17.7299 13.235C18.0753 13.5193 18.5178 13.6901 19.0001 13.6901C19.0756 13.6901 19.1502 13.6859 19.2235 13.6777C18.5704 14.7489 17.7476 15.7985 16.7731 16.7731C14.7409 18.8053 12.3822 20.1776 10.182 20.7277C7.99867 21.2735 5.82974 21.0325 4.3987 19.6015C2.96766 18.1705 2.72666 16.0015 3.27249 13.8182C3.33854 13.554 3.41645 13.2875 3.50594 13.0196C3.8447 13.4 4.32658 13.6502 4.86709 13.6857C4.81514 13.8527 4.76865 14.0182 4.7277 14.182ZM6.5215 10.3918C7.02185 9.67265 7.61187 8.9637 8.28779 8.28779C10.1608 6.41476 12.2875 5.20134 14.182 4.7277C16.0934 4.24985 17.6287 4.54726 18.5408 5.45936C19.436 6.35453 19.7391 7.84998 19.2983 9.71214C19.8482 9.79435 20.325 10.1005 20.6329 10.5348C20.6668 10.4168 20.6984 10.2992 20.7277 10.182C21.2735 7.99867 21.0325 5.82974 19.6015 4.3987C18.1705 2.96766 16.0015 2.72666 13.8182 3.27249C11.618 3.82255 9.25934 5.19491 7.22713 7.22713C6.44286 8.01139 5.75687 8.84427 5.17848 9.6979C5.71512 9.74534 6.19088 10.0047 6.5215 10.3918Z"
-        fill="currentColor"
-      />
-      <path
-        d="M5.45936 18.5408L5.63614 18.3641L5.63614 18.3641L5.45936 18.5408ZM4.7277 14.182L4.48517 14.1214L4.48517 14.1214L4.7277 14.182ZM9.8182 19.2725L9.87883 19.515L9.87883 19.515L9.8182 19.2725ZM15.7124 15.7124L15.8892 15.8892L15.8892 15.8892L15.7124 15.7124ZM17.7299 13.235L17.8888 13.042L17.6728 12.8642L17.5203 13.0988L17.7299 13.235ZM19.2235 13.6777L19.437 13.8079L19.7022 13.373L19.1959 13.4292L19.2235 13.6777ZM16.7731 16.7731L16.9498 16.9498L16.9498 16.9498L16.7731 16.7731ZM10.182 20.7277L10.2426 20.9702L10.2426 20.9702L10.182 20.7277ZM4.3987 19.6015L4.57548 19.4247L4.57548 19.4247L4.3987 19.6015ZM3.27249 13.8182L3.51503 13.8788L3.51503 13.8788L3.27249 13.8182ZM3.50594 13.0196L3.69265 12.8533L3.40557 12.5309L3.26882 12.9404L3.50594 13.0196ZM4.86709 13.6857L5.1058 13.76L5.20009 13.457L4.88347 13.4362L4.86709 13.6857ZM6.5215 10.3918L6.3314 10.5542L6.54175 10.8004L6.72672 10.5346L6.5215 10.3918ZM8.28779 8.28779L8.46456 8.46456L8.46456 8.46456L8.28779 8.28779ZM14.182 4.7277L14.2426 4.97024L14.2426 4.97024L14.182 4.7277ZM18.5408 5.45936L18.7176 5.28258L18.7176 5.28258L18.5408 5.45936ZM19.2983 9.71214L19.055 9.65455L18.9924 9.91919L19.2613 9.95939L19.2983 9.71214ZM20.6329 10.5348L20.4289 10.6793L20.7295 11.1034L20.8731 10.6039L20.6329 10.5348ZM20.7277 10.182L20.9702 10.2426L20.9702 10.2426L20.7277 10.182ZM19.6015 4.3987L19.7783 4.22192L19.7783 4.22192L19.6015 4.3987ZM13.8182 3.27249L13.8788 3.51503L13.8788 3.51503L13.8182 3.27249ZM7.22713 7.22713L7.05035 7.05035L7.05035 7.05035L7.22713 7.22713ZM5.17848 9.6979L4.97152 9.55767L4.73312 9.90951L5.15647 9.94693L5.17848 9.6979ZM5.63614 18.3641C4.81019 17.5381 4.50387 16.1081 4.97024 14.2426L4.48517 14.1214C3.99582 16.0788 4.28432 17.7193 5.28258 18.7176L5.63614 18.3641ZM9.75756 19.03C7.8921 19.4963 6.46208 19.19 5.63614 18.3641L5.28258 18.7176C6.28085 19.7159 7.92144 20.0044 9.87883 19.515L9.75756 19.03ZM15.5356 15.5356C13.6891 17.3821 11.6012 18.5691 9.75756 19.03L9.87883 19.515C11.8243 19.0287 13.9896 17.7888 15.8892 15.8892L15.5356 15.5356ZM17.5203 13.0988C16.9797 13.9305 16.3162 14.755 15.5356 15.5356L15.8892 15.8892C16.6939 15.0845 17.3795 14.2328 17.9395 13.3712L17.5203 13.0988ZM19.0001 13.4401C18.5778 13.4401 18.1911 13.2908 17.8888 13.042L17.571 13.428C17.9596 13.7478 18.4577 13.9401 19.0001 13.9401V13.4401ZM19.1959 13.4292C19.1317 13.4364 19.0664 13.4401 19.0001 13.4401V13.9401C19.0849 13.9401 19.1687 13.9354 19.2512 13.9262L19.1959 13.4292ZM16.9498 16.9498C17.9379 15.9617 18.7732 14.8966 19.437 13.8079L19.0101 13.5476C18.3676 14.6013 17.5573 15.6353 16.5963 16.5963L16.9498 16.9498ZM10.2426 20.9702C12.4938 20.4074 14.8911 19.0086 16.9498 16.9498L16.5963 16.5963C14.5906 18.602 12.2706 19.9479 10.1214 20.4852L10.2426 20.9702ZM4.22192 19.7783C5.7397 21.296 8.01447 21.5273 10.2426 20.9702L10.1214 20.4852C7.98287 21.0198 5.91978 20.769 4.57548 19.4247L4.22192 19.7783ZM3.02996 13.7576C2.47291 15.9857 2.70415 18.2605 4.22192 19.7783L4.57548 19.4247C3.23117 18.0804 2.9804 16.0173 3.51503 13.8788L3.02996 13.7576ZM3.26882 12.9404C3.17736 13.2142 3.09763 13.4869 3.02995 13.7576L3.51503 13.8788C3.57946 13.6211 3.65554 13.3608 3.74306 13.0987L3.26882 12.9404ZM3.31923 13.1858C3.69996 13.6134 4.24222 13.8952 4.85072 13.9352L4.88347 13.4362C4.41095 13.4052 3.98945 13.1866 3.69265 12.8533L3.31923 13.1858ZM4.97024 14.2426C5.01001 14.0836 5.0552 13.9226 5.1058 13.76L4.62839 13.6114C4.57507 13.7827 4.5273 13.9528 4.48517 14.1214L4.97024 14.2426ZM6.72672 10.5346C7.21849 9.82776 7.79896 9.13017 8.46456 8.46456L8.11101 8.11101C7.42478 8.79724 6.82521 9.51754 6.31628 10.249L6.72672 10.5346ZM8.46456 8.46456C10.3111 6.61807 12.399 5.43114 14.2426 4.97024L14.1214 4.48517C12.1759 4.97154 10.0106 6.21144 8.11101 8.11101L8.46456 8.46456ZM14.2426 4.97024C16.1081 4.50387 17.5381 4.81019 18.3641 5.63614L18.7176 5.28258C17.7193 4.28432 16.0788 3.99582 14.1214 4.48517L14.2426 4.97024ZM18.3641 5.63614C19.1747 6.4468 19.4848 7.83895 19.055 9.65455L19.5416 9.76973C19.9934 7.86102 19.6973 6.26227 18.7176 5.28258L18.3641 5.63614ZM19.2613 9.95939C19.7418 10.0312 20.1592 10.2988 20.4289 10.6793L20.8368 10.3902C20.4909 9.90215 19.9547 9.55748 19.3353 9.46489L19.2613 9.95939ZM20.8731 10.6039C20.9078 10.4831 20.9402 10.3627 20.9702 10.2426L20.4852 10.1214C20.4566 10.2356 20.4257 10.3504 20.3926 10.4657L20.8731 10.6039ZM20.9702 10.2426C21.5273 8.01447 21.296 5.7397 19.7783 4.22192L19.4247 4.57548C20.769 5.91978 21.0198 7.98287 20.4852 10.1214L20.9702 10.2426ZM19.7783 4.22192C18.2605 2.70415 15.9857 2.47291 13.7576 3.02996L13.8788 3.51503C16.0173 2.9804 18.0804 3.23117 19.4247 4.57548L19.7783 4.22192ZM13.7576 3.02996C11.5064 3.59275 9.10909 4.99161 7.05035 7.05035L7.4039 7.4039C9.40959 5.39821 11.7296 4.05234 13.8788 3.51503L13.7576 3.02996ZM7.05035 7.05035C6.25512 7.84558 5.55897 8.69066 4.97152 9.55767L5.38545 9.83814C5.95476 8.99789 6.6306 8.17721 7.4039 7.4039L7.05035 7.05035ZM6.71159 10.2294C6.34004 9.79442 5.80474 9.50228 5.20049 9.44887L5.15647 9.94693C5.6255 9.98839 6.04171 10.215 6.3314 10.5542L6.71159 10.2294Z"
+        d="M91.9481 29.4892C78.7023 32.4916 63.6745 40.7425 50.4663 53.9508C46.781 57.636 43.4817 61.4629 40.5746 65.3532C44.5585 68.8492 47.0735 73.9786 47.0735 79.6955C47.0735 90.2299 38.5336 98.7698 27.9992 98.7698C27.1107 98.7698 26.2364 98.7091 25.3803 98.5915C23.3955 110.414 25.9579 119.384 31.3537 124.78C37.2202 130.646 47.3123 133.164 60.701 130.129C73.9468 127.126 88.9745 118.875 102.183 105.667C105.888 101.962 109.204 98.1131 112.122 94.2007C108.103 90.7037 105.562 85.551 105.562 79.8048C105.562 69.2704 114.102 60.7305 124.636 60.7305C125.536 60.7305 126.421 60.7928 127.288 60.9133C129.237 49.147 126.674 40.2167 121.295 34.8381C115.429 28.9716 105.337 26.4545 91.9481 29.4892ZM16.3791 94.8229C13.4047 109.493 15.9004 122.818 24.608 131.526C42.6147 149.532 80.3662 140.975 108.928 112.413C113.381 107.96 117.348 103.284 120.803 98.494C122.042 98.7466 123.324 98.8792 124.636 98.8792C135.171 98.8792 143.711 90.3393 143.711 79.8048C143.711 73.6582 140.803 68.1906 136.289 64.7023C139.234 50.0687 136.73 36.7817 128.041 28.0925C110.034 10.0859 72.2829 18.6429 43.7206 47.2051C39.2988 51.627 35.3564 56.2691 31.9179 61.024C30.6531 60.7599 29.3423 60.6211 27.9992 60.6211C17.4647 60.6211 8.9248 69.161 8.9248 79.6955C8.9248 85.8567 11.8461 91.3357 16.3791 94.8229ZM124.636 70.2677C119.369 70.2677 115.099 74.5376 115.099 79.8048C115.099 85.0721 119.369 89.342 124.636 89.342C129.904 89.342 134.174 85.0721 134.174 79.8048C134.174 74.5376 129.904 70.2677 124.636 70.2677ZM18.462 79.6955C18.462 74.4282 22.7319 70.1583 27.9992 70.1583C33.2664 70.1583 37.5363 74.4282 37.5363 79.6955C37.5363 84.9627 33.2664 89.2326 27.9992 89.2326C22.7319 89.2326 18.462 84.9627 18.462 79.6955Z"
         fill="currentColor"
-        mask="url(#path-4-outside-1_1247_10206)"
       />
     </svg>
   );
diff --git a/apps/dashboard/src/app/nebula-app/layout.tsx b/apps/dashboard/src/app/nebula-app/layout.tsx
index e5887336a98..f4bdf49beeb 100644
--- a/apps/dashboard/src/app/nebula-app/layout.tsx
+++ b/apps/dashboard/src/app/nebula-app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import "../../global.css";
+import "./nebula-global.css";
 import { DashboardRouterTopProgressBar } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
 import { PHProvider } from "lib/posthog/Posthog";
diff --git a/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx b/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx
index 159562dff61..bc8e7110ae6 100644
--- a/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx
+++ b/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx
@@ -46,11 +46,11 @@ export function NebulaLoggedOutStatePage(props: {
   return (
     <div className="relative flex min-h-dvh flex-col overflow-hidden bg-background">
       {/* nav */}
-      <header className="border-b bg-card">
+      <header className="border-b bg-background">
         <div className="container flex items-center justify-between p-4">
-          <div className="flex shrink-0 items-center gap-2 ">
-            <NebulaIcon className="size-7 text-foreground" />
-            <span className="font-bold text-xl tracking-tight">Nebula</span>
+          <div className="flex shrink-0 items-center gap-1.5">
+            <NebulaIcon className="size-6 text-foreground" />
+            <span className="font-medium text-xl">Nebula</span>
           </div>
 
           <div className="flex items-center gap-6">
diff --git a/apps/dashboard/src/app/nebula-app/nebula-global.css b/apps/dashboard/src/app/nebula-app/nebula-global.css
new file mode 100644
index 00000000000..d0a1d7bbba6
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/nebula-global.css
@@ -0,0 +1,3 @@
+::selection {
+  background-color: hsl(var(--nebula-pink-foreground) / 0.25);
+}
diff --git a/apps/dashboard/src/components/ClientOnly/ClientOnly.tsx b/apps/dashboard/src/components/ClientOnly/ClientOnly.tsx
index d175fd6af4f..f746934a0bf 100644
--- a/apps/dashboard/src/components/ClientOnly/ClientOnly.tsx
+++ b/apps/dashboard/src/components/ClientOnly/ClientOnly.tsx
@@ -42,7 +42,7 @@ export const ClientOnly: ComponentWithChildren<ClientOnlyProps> = ({
   );
 };
 
-function useIsClientMounted() {
+export function useIsClientMounted() {
   const [hasMounted, setHasMounted] = useState(false);
 
   // eslint-disable-next-line no-restricted-syntax
diff --git a/apps/dashboard/src/components/buttons/MismatchButton.tsx b/apps/dashboard/src/components/buttons/MismatchButton.tsx
index 69e3f9364a0..28a7a7ef24a 100644
--- a/apps/dashboard/src/components/buttons/MismatchButton.tsx
+++ b/apps/dashboard/src/components/buttons/MismatchButton.tsx
@@ -501,11 +501,11 @@ const MismatchNotice: React.FC<{
   return (
     <div className="flex flex-col gap-4">
       <div>
-        <h3 className="mb-1 font-semibold text-lg tracking-tight">
+        <h3 className="mb-1 font-semibold text-base tracking-tight">
           Network Mismatch
         </h3>
 
-        <p className="mb-1 text-muted-foreground">
+        <p className="mb-1 text-muted-foreground text-sm">
           Your wallet is connected to the{" "}
           <span className="font-semibold capitalize">
             {walletConnectedNetworkInfo?.name ||
@@ -514,7 +514,7 @@ const MismatchNotice: React.FC<{
           network
         </p>
 
-        <p className="text-muted-foreground">
+        <p className="text-muted-foreground text-sm">
           This action requires you to connect to the{" "}
           <span className="font-semibold capitalize">
             {txChain?.name || `Chain ID #${txChainId}`}
@@ -527,7 +527,7 @@ const MismatchNotice: React.FC<{
         size="sm"
         onClick={onSwitchWallet}
         disabled={!actuallyCanAttemptSwitch || switchNetworkMutation.isPending}
-        variant="primary"
+        variant="default"
         className="gap-2 capitalize disabled:opacity-100"
       >
         {switchNetworkMutation.isPending ? (
diff --git a/apps/dashboard/src/global.css b/apps/dashboard/src/global.css
index a91e5dcf761..2c748df498c 100644
--- a/apps/dashboard/src/global.css
+++ b/apps/dashboard/src/global.css
@@ -32,6 +32,7 @@
     --success-text: 142.09 70.56% 35.29%;
     --warning-text: 38 92% 40%;
     --destructive-text: 360 72% 60%;
+    --nebula-pink-foreground: 321 90% 51%;
 
     /* Borders */
     --border: 0 0% 85%;
@@ -82,6 +83,7 @@
     --destructive-text: 360 72% 55%;
     --success-text: 142 75% 50%;
     --inverted-foreground: 0 0% 0%;
+    --nebula-pink-foreground: 321 90% 51%;
 
     /* Borders */
     --border: 0 0% 15%;
diff --git a/apps/dashboard/tailwind.config.js b/apps/dashboard/tailwind.config.js
index 8f6ae47b0fb..1356d7ea55b 100644
--- a/apps/dashboard/tailwind.config.js
+++ b/apps/dashboard/tailwind.config.js
@@ -65,6 +65,9 @@ module.exports = {
           DEFAULT: "hsl(var(--inverted))",
           foreground: "hsl(var(--inverted-foreground))",
         },
+        "nebula-pink": {
+          foreground: "hsl(var(--nebula-pink-foreground))",
+        },
         warning: {
           text: "hsl(var(--warning-text))",
         },