From 21e7bd314de4cd2d67e7306015132e4e96185312 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Tue, 29 Apr 2025 20:25:10 +0000
Subject: [PATCH] Nebula: Add radial gradient on top  (#6888)
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 `EmptyStateChatPageContent` component by adding a new `showAurora` prop to control the display of an `Aurora` visual effect. It also adjusts the `isConnectingWallet` prop based on connection status and updates styles for better layout.

### Detailed summary
- Added `showAurora` prop to `EmptyStateChatPageContent` in multiple files.
- Updated `isConnectingWallet` logic based on connection status.
- Modified layout styles in `EmptyStateChatPageContent` for improved appearance.
- Introduced `Aurora` component with specific styles for visual effects.

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

<!-- end pr-codex -->
---
 .../(app)/components/ChatPageContent.tsx      |  1 +
 .../EmptyStateChatPageContent.stories.tsx     |  1 +
 .../components/EmptyStateChatPageContent.tsx  | 25 ++++++++++++++++++-
 .../app/nebula-app/login/NebulaLoginPage.tsx  |  1 +
 4 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
index 58f58eb7b0f..da8a79eaaac 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
@@ -352,6 +352,7 @@ export function ChatPageContent(props: {
           {showEmptyState ? (
             <div className="fade-in-0 container flex max-w-[800px] grow animate-in flex-col justify-center">
               <EmptyStateChatPageContent
+                showAurora={true}
                 isConnectingWallet={connectionStatus === "connecting"}
                 sendMessage={handleSendMessage}
                 prefillMessage={props.initialParams?.q}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx
index 11d764a0b4d..5e20d923e56 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx
@@ -34,6 +34,7 @@ function Story(props: {
     <ThirdwebProvider>
       <div className="container flex max-w-[800px] grow flex-col justify-center overflow-hidden">
         <EmptyStateChatPageContent
+          showAurora={false}
           isConnectingWallet={false}
           sendMessage={() => {}}
           prefillMessage={props.prefillMessage}
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 07878e3f03a..9a0bf150b80 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
@@ -18,9 +18,13 @@ export function EmptyStateChatPageContent(props: {
   activeAccountAddress: string | undefined;
   setActiveWallet: (wallet: WalletMeta) => void;
   isConnectingWallet: boolean;
+  showAurora: boolean;
 }) {
   return (
-    <div className="py-10 lg:py-16">
+    <div className="overflow-hidden py-10 lg:py-16">
+      {props.showAurora && (
+        <Aurora className="top-0 left-1/2 h-[800px] w-[1000px] text-[hsl(var(--nebula-pink-foreground)/8%)] lg:w-[150%] dark:text-[hsl(var(--nebula-pink-foreground)/10%)]" />
+      )}
       <div className="relative py-10">
         <FancyBorders />
         <div className="flex justify-center">
@@ -136,3 +140,22 @@ function DashedBgDiv(props: {
     />
   );
 }
+
+type AuroraProps = {
+  className?: string;
+};
+
+const Aurora: React.FC<AuroraProps> = ({ className }) => {
+  return (
+    <div
+      className={cn(
+        "-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute",
+        className,
+      )}
+      style={{
+        backgroundImage:
+          "radial-gradient(ellipse at center, currentColor, transparent 60%)",
+      }}
+    />
+  );
+};
diff --git a/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx b/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx
index bc8e7110ae6..f1b6b754fce 100644
--- a/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx
+++ b/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx
@@ -88,6 +88,7 @@ export function NebulaLoggedOutStatePage(props: {
       {showPage === "welcome" && (
         <div className="container relative flex max-w-[800px] grow flex-col justify-center overflow-hidden rounded-lg pb-6">
           <EmptyStateChatPageContent
+            showAurora={false}
             isConnectingWallet={false}
             prefillMessage={message}
             context={{