Updated styling

staratlasmeta · Sep 7, 2024 · 533c590 · 533c590
1 parent 3e9eb9c
commit 533c590
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 16 deletions.
diff --git a/packages/wallet-standard-test/src/App.tsx b/packages/wallet-standard-test/src/App.tsx
@@ -11,6 +11,8 @@ import { createStore } from 'solid-js/store';
 import { toast } from 'solid-sonner';
 import ColorModeToggle from '~/components/ColorModeToggle';
 import { ConnectionProvider } from '~/components/connection';
+import IconAtlasA from '~/components/icons/atlas-a.svg';
+import { Button } from '~/components/ui/button';
 import { Toaster } from '~/components/ui/sonner';
 import { WalletProxy, createWalletProxy } from '~/types';
 import WalletCard from '~/WalletCard';
@@ -73,18 +75,25 @@ export default (() => {
       <Toaster closeButton={true} />
       <ColorModeScript storageType={storageManager.type} />
       <ColorModeProvider storageManager={storageManager}>
-        <div class="border-b">
+        <div class="sticky top-0 z-50 border-b backdrop-blur">
           <div class="container flex h-16 items-center justify-between">
-            <nav class="flex items-center space-x-4">
-              <ColorModeToggle />
-            </nav>
-            <div>
-              <a
-                onClick={() => {}}
-                class="cursor-pointer text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
+            <div class="flex items-center">
+              <IconAtlasA class="mr-4 size-6" />
+              <span class={'text-2xl font-medium'}>
+                Star Atlas Wallet Tester
+              </span>
+            </div>
+            <div class={'flex items-center gap-4'}>
+              <Button
+                class="text-muted-foreground transition-colors hover:text-foreground"
+                variant={'link' as const}
+                onClick={() => window.open('https://play.staratlas.com/')}
               >
-                Wallet
-              </a>
+                Play
+              </Button>
+              <nav class="flex items-center space-x-4">
+                <ColorModeToggle />
+              </nav>
             </div>
           </div>
         </div>

diff --git a/packages/wallet-standard-test/src/components/icons/atlas-a.svg b/packages/wallet-standard-test/src/components/icons/atlas-a.svg
diff --git a/packages/wallet-standard-test/src/components/ui/table.tsx b/packages/wallet-standard-test/src/components/ui/table.tsx
@@ -6,7 +6,7 @@ import { cn } from '~/lib/utils';
 const Table: Component<ComponentProps<'table'>> = (props) => {
   const [local, others] = splitProps(props, ['class']);
   return (
-    <div class="relative w-full overflow-auto">
+    <div class="w-full overflow-auto">
       <table
         class={cn('w-full caption-bottom text-sm', local.class)}
         {...others}

diff --git a/packages/wallet-standard-test/src/features/SignAndSendTransactionFeature.tsx b/packages/wallet-standard-test/src/features/SignAndSendTransactionFeature.tsx
@@ -150,7 +150,7 @@ export default ((props) => {
         >
           Sign and Send Transaction
         </DialogTrigger>
-        <DialogContent>
+        <DialogContent class="bg-transparent backdrop-blur-xl">
           <DialogHeader>
             <DialogTitle>Sign and Send Transaction</DialogTitle>
             <DialogDescription>

diff --git a/packages/wallet-standard-test/src/features/SignMessageFeature.tsx b/packages/wallet-standard-test/src/features/SignMessageFeature.tsx
@@ -105,7 +105,7 @@ export default ((props) => {
         >
           Sign Message
         </DialogTrigger>
-        <DialogContent>
+        <DialogContent class="bg-transparent backdrop-blur-xl">
           <DialogHeader>
             <DialogTitle>Sign Message</DialogTitle>
             <DialogDescription>

diff --git a/packages/wallet-standard-test/src/features/SignTransactionFeature.tsx b/packages/wallet-standard-test/src/features/SignTransactionFeature.tsx
@@ -149,7 +149,7 @@ export default ((props) => {
         >
           Sign Transaction
         </DialogTrigger>
-        <DialogContent>
+        <DialogContent class="bg-transparent backdrop-blur-xl">
           <DialogHeader>
             <DialogTitle>Sign Transaction</DialogTitle>
             <DialogDescription>

diff --git a/packages/wallet-standard-test/src/features/index.tsx b/packages/wallet-standard-test/src/features/index.tsx
@@ -42,7 +42,7 @@ export default ((props) => {
   return (
     <Popover>
       <PopoverTrigger
-        class="h-fit w-fit p-0"
+        class="h-fit w-fit p-0 text-muted-foreground transition-colors hover:text-foreground"
         as={Button<'button'>}
         variant={'link'}
         onClick={() => {
@@ -51,7 +51,11 @@ export default ((props) => {
       >
         {props.feature}
       </PopoverTrigger>
-      <PopoverContent class={'w-fit'}>
+      <PopoverContent
+        class={
+          'backdrop z-40 w-fit bg-transparent backdrop-blur backdrop-brightness-50'
+        }
+      >
         <ErrorBoundary fallback={'Error rendering feature.'}>
           <Switch
             fallback={