feat: update portal style (#2279)

rooch-network · Jul 26, 2024 · 814afa0 · 814afa0
1 parent 8c8ea17
commit 814afa0
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 13 deletions.
diff --git a/infra/rooch-portal/public/logo-single.png b/infra/rooch-portal/public/logo-single.png
diff --git a/infra/rooch-portal/src/components/ui/card.tsx b/infra/rooch-portal/src/components/ui/card.tsx
@@ -35,7 +35,7 @@ export const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  <p ref={ref} className={cn('text-sm text-muted-foreground text-wrap', className)} {...props} />
 ))
 CardDescription.displayName = 'CardDescription'
 

diff --git a/infra/rooch-portal/src/pages/apps/apps-layout.tsx b/infra/rooch-portal/src/pages/apps/apps-layout.tsx
@@ -10,9 +10,9 @@ const mockApps: AppItemProps[] = [
     name: 'Rooch Clicker',
     description: 'Join our Click Challenge! You\'re in for 1,000 RCC!',
     profileUrl:
-      'https://cdn.lxdao.io/bafkreig3psglqxqiejrcokqwcoucbv4i2nkp4rumqawok2vjvhey5ps63i.png',
+      './logo-single.png',
     logoUrl: 'clicker-app.jpg',
-    type: 'Clicker',
+    type: 'Demo',
     url: 'https://rooch-clicker.vercel.app'
   }
 ]

diff --git a/infra/rooch-portal/src/pages/apps/components/apps-item.tsx b/infra/rooch-portal/src/pages/apps/components/apps-item.tsx
@@ -31,10 +31,10 @@ export const AppsItem = ({ id, name, description, profileUrl, logoUrl, type, url
       key={id}
       className="h-full w-full transition-all border-border/40 dark:bg-zinc-800/90 dark:hover:border-primary/20 hover:shadow-md overflow-hidden"
     >
-      <CardHeader className="p-4">
+      <CardHeader className="p-4 pb-2">
         <div className="flex items-center justify-start gap-x-3">
           <div>
-            <Avatar>
+            <Avatar className='bg-white'>
               <AvatarImage src={profileUrl} alt={description} />
               <AvatarFallback />
             </Avatar>
@@ -49,13 +49,14 @@ export const AppsItem = ({ id, name, description, profileUrl, logoUrl, type, url
                 {type}
               </Badge>
             </div>
-            <CardDescription>{description}</CardDescription>
+            <CardDescription className='mt-1'>{description}</CardDescription>
           </div>
         </div>
       </CardHeader>
       <div className="w-full">
         <Separator className="bg-accent dark:bg-accent/75" />
       </div>
+      <a href={url} className="w-full" target="_blank" rel="noopener noreferrer">
       <CardContent className="p-0">
         <div className="mx-4 border-none rounded-lg overflow-hidden">
           <AspectRatio
@@ -64,16 +65,10 @@ export const AppsItem = ({ id, name, description, profileUrl, logoUrl, type, url
           >
             <img src={logoUrl} alt="Website" className="rounded-md object-cover transition-all" />
 
-            {/*<iframe*/}
-            {/*  src={'https://rooch-clicker-five.vercel.app'}*/}
-            {/*  title="Website Preview"*/}
-            {/*  className="w-full h-full"*/}
-            {/*  style={{ border: 'none', transform: 'scale(1)' }}*/}
-            {/*  scrolling="no"*/}
-            {/*></iframe>*/}
           </AspectRatio>
         </div>
       </CardContent>
+      </a>
       <CardFooter className="p-4">
         <a href={url} className="w-full" target="_blank" rel="noopener noreferrer">
         <Button variant="default" size="default" className="w-full">