Merge pull request #19 from h4rkl/feat/styling

feat: add theming and design elements

Author: h4rkl

packages/ui/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

packages/ui/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@mosaic/sdk": "workspace:*",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-slot": "^1.2.3",
     "@solana/react": "^2.3.0",
     "@solana/signers": "^2.3.0",
     "@solana/wallet-adapter-base": "^0.9.27",
@@ -24,16 +24,16 @@
     "@wallet-standard/core": "^1.1.1",
     "@wallet-standard/react": "^1.0.1",
     "bs58": "^6.0.0",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "gill": "^0.10.2",
     "gill-react": "^0.4.4",
     "lucide-react": "^0.294.0",
     "next": "15.4.5",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwind-merge": "^2.0.0",
+    "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {

packages/ui/public/solanaLogoMark.svg

@@ -6,6 +6,7 @@ import { ArrowLeft, ExternalLink } from 'lucide-react';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { TokenDisplay } from '@/types/token';
+import { Loader } from '@/components/ui/loader';
 import { findTokenByAddress } from '@/lib/token/tokenData';
 import { SelectedWalletAccountContext } from '@/context/SelectedWalletAccountContext';
 import { TokenOverview } from './components/TokenOverview';
@@ -137,7 +138,7 @@ function ManageTokenConnected({ address }: { address: string }) {
       <div className="flex-1 p-8">
         <div className="flex items-center justify-center h-64">
           <div className="text-center">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+            <Loader className="h-8 w-8 mx-auto mb-4" />
             <p className="text-muted-foreground">Loading token details...</p>
           </div>
         </div>

packages/ui/src/app/dashboard/manage/[address]/page.tsx

@@ -19,6 +19,8 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { TokenDisplay } from '@/types/token';
+import { Badge } from '@/components/ui/badge';
+import { Loader } from '@/components/ui/loader';
 import { getAllTokens, getTokenCount } from '@/lib/token/tokenData';
 import { TokenStorage } from '@/lib/token/tokenStorage';
 import { SelectedWalletAccountContext } from '@/context/SelectedWalletAccountContext';
@@ -80,7 +82,7 @@ function DashboardConnected({ publicKey }: { publicKey: string }) {
       <div className="flex-1 p-8">
         <div className="flex items-center justify-center h-64">
           <div className="text-center">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+            <Loader className="h-8 w-8 mx-auto mb-4" />
             <p className="text-muted-foreground">Loading your tokens...</p>
           </div>
         </div>
@@ -201,9 +203,14 @@ function DashboardConnected({ publicKey }: { publicKey: string }) {
                     <Coins className="h-6 w-6 text-primary mr-3" />
                     <div>
                       <CardTitle className="text-lg">
-                        {token.name || `Token ${index + 1}`}
+                        {token.name || `Token ${index + 1}`}{' '}
+                        <Badge
+                          className="ml-2 align-middle text-sm"
+                          variant="outline"
+                        >
+                          {token.symbol || 'TKN'}
+                        </Badge>
                       </CardTitle>
-                      <CardDescription>{token.symbol || 'TKN'}</CardDescription>
                     </div>
                   </div>
                   <DropdownMenu>
@@ -246,25 +253,27 @@ function DashboardConnected({ publicKey }: { publicKey: string }) {
                 <div className="space-y-2 text-sm">
                   <div className="flex justify-between">
                     <span className="text-muted-foreground">Type:</span>
-                    <span className="font-medium">
+                    <span className="font-normal">
                       {getTokenTypeLabel(token.type)}
                     </span>
                   </div>
                   <div className="flex justify-between">
                     <span className="text-muted-foreground">Supply:</span>
-                    <span>{token.supply || '0'}</span>
+                    <span className="font-normal">{token.supply || '0'}</span>
                   </div>
                   <div className="flex justify-between">
                     <span className="text-muted-foreground">Decimals:</span>
-                    <span>{token.decimals || '6'}</span>
+                    <span className="font-normal">{token.decimals || '6'}</span>
                   </div>
                   <div className="flex justify-between">
                     <span className="text-muted-foreground">Created:</span>
-                    <span>{formatDate(token.createdAt)}</span>
+                    <span className="font-normal">
+                      {formatDate(token.createdAt)}
+                    </span>
                   </div>
                   <div className="flex justify-between">
                     <span className="text-muted-foreground">Status:</span>
-                    <span className="text-green-600">Active</span>
+                    <span className="text-green-600 font-normal">Active</span>
                   </div>
                   {token.extensions && token.extensions.length > 0 && (
                     <div className="pt-2">

packages/ui/src/app/dashboard/page.tsx

@@ -4,14 +4,14 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
+    --background: 222.2 100% 99.5%;
     --foreground: 222.2 84% 4.9%;
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --primary: 255 80% 40%;
+    --primary-foreground: 255 0% 100%;
     --secondary: 210 40% 96%;
     --secondary-foreground: 222.2 47.4% 11.2%;
     --muted: 210 40% 96%;
@@ -24,17 +24,18 @@
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
     --radius: 0.5rem;
+    --mosaic-gradient-color: #000;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
+    --background: 222.2 84% 3%;
     --foreground: 210 40% 98%;
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --primary: 255 80% 55%;
+    --primary-foreground: 255 0% 100%;
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
     --muted: 217.2 32.6% 17.5%;
@@ -46,14 +47,73 @@
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
+    --mosaic-gradient-color: #fff;
   }
 }
 
 @layer base {
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
+    font-family: var(--font-sans), sans-serif;
+    font-weight: 300;
+  }
+
+  input,
+  textarea,
+  select {
+    @apply px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent bg-card text-foreground;
+    transition:
+      box-shadow 0.2s,
+      border-color 0.2s;
+  }
+
+  input:disabled,
+  textarea:disabled,
+  select:disabled {
+    @apply bg-muted text-muted-foreground cursor-not-allowed opacity-70;
+  }
+
+  label {
+    @apply block text-sm font-medium mb-2;
   }
+
+  button {
+    @apply px-4 py-2 rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-primary;
+    transition:
+      background 0.2s,
+      color 0.2s;
+  }
+}
+
+.mosaic-text {
+  position: relative;
+  z-index: 1;
+  background-image: radial-gradient(
+    circle,
+    var(--mosaic-gradient-color) 55%,
+    transparent 0%
+  );
+  background-size: 2px 3px;
+  background-position: 0px 1px;
+  background-repeat: repeat;
+  background-clip: text;
+  color: transparent;
+}
+
+.mosaic-text::before {
+  content: '';
+  position: absolute;
+  inset: -5%;
+  z-index: -1;
+  border-radius: 9999px;
+  background:
+    radial-gradient(circle at 30% 40%, #1fff9a 0%, transparent 70%),
+    radial-gradient(circle at 70% 60%, #9945ff 0%, transparent 70%);
+  filter: blur(20px);
+  opacity: 0.3;
+  pointer-events: none;
 }

packages/ui/src/app/globals.css

@@ -1,14 +1,25 @@
 import type { Metadata } from 'next';
-import { AR_One_Sans } from 'next/font/google';
+import { Inter, Fira_Mono } from 'next/font/google';
 import './globals.css';
 import { ThemeProvider } from '@/components/theme-provider';
 import { Header } from '@/components/layout/header';
 import { Footer } from '@/components/layout/footer';
+import { SolanaProvider } from '@/components/solana-provider';
+import { cn } from '@/lib/utils';
 import { ChainContextProvider } from '@/context/ChainContextProvider';
 import { SelectedWalletAccountContextProvider } from '@/context/SelectedWalletAccountContextProvider';
 import { RpcContextProvider } from '@/context/RpcContextProvider';
 
-const ar = AR_One_Sans({ subsets: ['latin'] });
+const fontSans = Inter({
+  subsets: ['latin'],
+  weight: ['300', '500', '700'],
+  variable: '--font-sans',
+});
+const fontMono = Fira_Mono({
+  subsets: ['latin'],
+  weight: ['400', '500', '700'],
+  variable: '--font-mono',
+});
 
 export const metadata: Metadata = {
   title: 'Mosaic - Tokenization Engine',
@@ -22,27 +33,35 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={ar.className}>
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="dark"
-          enableSystem
-          disableTransitionOnChange
+    <SolanaProvider>
+      <html lang="en" suppressHydrationWarning>
+        <body
+          className={cn(
+            fontSans.variable,
+            fontMono.variable,
+            'font-sans antialiased'
+          )}
         >
-          <ChainContextProvider>
-            <SelectedWalletAccountContextProvider>
-              <RpcContextProvider>
-                <div className="flex min-h-screen flex-col bg-background">
-                  <Header />
-                  <main className="flex-1">{children}</main>
-                  <Footer />
-                </div>
-              </RpcContextProvider>
-            </SelectedWalletAccountContextProvider>
-          </ChainContextProvider>
-        </ThemeProvider>
-      </body>
-    </html>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="dark"
+            enableSystem
+            disableTransitionOnChange
+          >
+            <ChainContextProvider>
+              <SelectedWalletAccountContextProvider>
+                <RpcContextProvider>
+                  <div className="flex min-h-screen flex-col bg-background">
+                    <Header />
+                    <main className="flex-1">{children}</main>
+                    <Footer />
+                  </div>
+                </RpcContextProvider>
+              </SelectedWalletAccountContextProvider>
+            </ChainContextProvider>
+          </ThemeProvider>
+        </body>
+      </html>
+    </SolanaProvider>
   );
 }

packages/ui/src/app/layout.tsx

@@ -1,10 +1,48 @@
+import { GithubIcon, TwitterIcon } from 'lucide-react';
+
 export function Footer() {
   return (
     <footer className="border-t bg-background">
-      <div className="container flex h-16 items-center justify-center">
+      <div className="container flex h-16 items-center justify-between">
         <p className="text-sm text-muted-foreground">
-          © 2025 Mosaic. All rights reserved.
+          <a
+            href="https://github.com/YOUR_ORG/mosaic/blob/main/LICENSE"
+            className="underline hover:text-primary"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            MIT License
+          </a>
         </p>
+        <div className="flex gap-4 text-muted-foreground">
+          <a
+            href="https://github.com/gitteri/mosaic"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="GitHub"
+            className="hover:text-primary"
+          >
+            <GithubIcon className="w-5 h-5" />
+          </a>
+          <a
+            href="https://x.com/solana"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Twitter"
+            className="hover:text-primary"
+          >
+            <TwitterIcon className="w-5 h-5" />
+          </a>
+          <a
+            href="https://solana.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Solana"
+            className="hover:text-primary"
+          >
+            <img src="/solanaLogoMark.svg" alt="Solana" className="w-5 h-5" />
+          </a>
+        </div>
       </div>
     </footer>
   );