UI(OperatedGuildCard): responsivity impros

guildxyz · Aug 12, 2024 · b984a81 · b984a81
1 parent 26223cf
commit b984a81
Showing 1 changed file with 5 additions and 7 deletions.
diff --git a/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx b/src/app/(marketing)/profile/_components/OperatedGuildCard.tsx
@@ -13,14 +13,13 @@ import {
   User,
 } from "@phosphor-icons/react/dist/ssr"
 import { AvatarImage } from "@radix-ui/react-avatar"
-import { Separator } from "@radix-ui/react-separator"
 import Image from "next/image"
 import { PropsWithChildren } from "react"
 
 export const OperatedGuildCard = () => {
   return (
     <Card className="flex flex-col bg-gray-50 md:flex-row dark:bg-card">
-      <div className="relative w-full px-4 py-8 md:w-1/3">
+      <div className="relative w-full border-border-muted p-6 max-md:border-b md:w-1/3 md:border-r">
         <div className="absolute inset-0 bg-black" />
         <Image
           className="absolute inset-0 size-full object-cover opacity-30"
@@ -30,7 +29,7 @@ export const OperatedGuildCard = () => {
           height={233}
         />
         <div className="relative flex h-full flex-col items-center justify-center gap-3">
-          <Avatar size="3xl">
+          <Avatar className="size-20 lg:size-24">
             <AvatarImage
               src="https://guild.xyz/_next/image?url=https%3A%2F%2Fguild-xyz.mypinata.cloud%2Fipfs%2FQmQXeY1ZEtnLGqFPuJ4RZthYz8nKdTLhLVxBRfHGXweamx&w=256&q=70"
               width={118}
@@ -41,15 +40,14 @@ export const OperatedGuildCard = () => {
               <Skeleton className="size-full" />
             </AvatarFallback>
           </Avatar>
-          <h3 className="text-center font-bold font-display text-white text-xl">
+          <h3 className="text-center font-bold font-display text-lg text-white lg:text-xl">
             The Guilded Age Guild
             <CheckMark className="ml-2 inline-block size-6" />
             <FeaturedIcon className="ml-1 " />
           </h3>
         </div>
       </div>
-      <Separator orientation="vertical" className="bg-border-muted" />
-      <div className="grid grow justify-stretch gap-2 p-5 md:grid-cols-2">
+      <div className="grid grow justify-stretch gap-2 p-5 sm:grid-cols-2">
         <OperatedGuildDetailCard Icon={User}>
           <EmphasizedData>123k</EmphasizedData>
           members
@@ -85,7 +83,7 @@ const OperatedGuildDetailCard = ({
   Icon,
   children,
 }: PropsWithChildren<{ Icon: Icon }>) => (
-  <Card className="flex items-center gap-2 rounded-xl p-5 font-bold shadow dark:bg-secondary">
+  <Card className="flex items-center gap-2 rounded-xl p-4 font-bold shadow md:p-5 dark:bg-secondary">
     <Icon weight="bold" className="min-w-min" />
     <span className="text-muted-foreground">{children}</span>
   </Card>