fix(a11y): add padding to verified badge, extract signin button

guildxyz · Jul 8, 2024 · dd37d8b · dd37d8b
1 parent d3e85e6
commit dd37d8b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 32 deletions.
diff --git a/src/app/explorer/page.tsx b/src/app/explorer/page.tsx
@@ -20,6 +20,13 @@ import {
 import { useAtom, useAtomValue, useSetAtom } from "jotai"
 import { YourGuilds } from "@/components/YourGuilds"
 import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
+import { Button } from "@/components/ui/Button"
+import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
+import { SignIn } from "@phosphor-icons/react"
+import Robot from "/public/landing/robot.svg"
+import { Card } from "@/components/ui/Card"
+import { walletSelectorModalAtom } from "@/components/Providers/atoms"
+
 
 const HeaderBackground = () => {
   const isNavStuck = useAtomValue(isNavStuckAtom)
@@ -67,6 +74,7 @@ const Page = () => {
   const { isWeb3Connected } = useWeb3ConnectionManager()
   const setIsNavStuck = useSetAtom(isNavStuckAtom)
   const setIsSearchStuck = useSetAtom(isSeachStuckAtom)
+  const setIsWalletSelectorModalOpen = useSetAtom(walletSelectorModalAtom)
   const { ref: navToggleRef } = useIsStuck(setIsNavStuck)
   const { ref: searchRef } = useIsStuck(setIsSearchStuck)
 
@@ -92,7 +100,22 @@ const Page = () => {
               )}
             </div>
           </div>
-          <YourGuilds />
+          {isWeb3Connected ?
+            <YourGuilds /> :
+            <Card className="my-2 mb-12 flex flex-col items-stretch justify-between gap-8 p-6 font-semibold sm:flex-row sm:items-center">
+              <div className="flex items-center gap-4">
+                <Robot className="size-8 min-w-8 text-white" />
+                <span>Sign in to view your guilds / create new ones</span>
+              </div>
+              <Button
+                className="space-x-2"
+                onClick={() => setIsWalletSelectorModalOpen(true)}
+              >
+                <SignIn />
+                <span className="text-md">Sign in</span>
+              </Button>
+            </Card>
+          }
           <section id={ActiveSection.ExploreGuilds}>
             <h2 className="text-lg font-bold tracking-tight">
               Explore verified guilds

diff --git a/src/v2/components/GuildCard.tsx b/src/v2/components/GuildCard.tsx
@@ -28,15 +28,15 @@ export const GuildCard: React.FC<Props> = ({ guildData }) => (
         <Skeleton className="size-full" />
       </AvatarFallback>
     </Avatar>
-    <div className="flex items-center gap-1">
+    <div className="flex items-center">
       <h3 className="max-w-36 truncate font-display text-lg font-bold tracking-tight text-foreground">
         {guildData.name}
       </h3>
       {guildData.tags.includes("VERIFIED") && (
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger
-              className="relative rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              className="relative rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring p-1"
               aria-label="verified"
             >
               <div

diff --git a/src/v2/components/YourGuilds.tsx b/src/v2/components/YourGuilds.tsx
@@ -1,15 +1,8 @@
 "use client"
 
-import { walletSelectorModalAtom } from "@/components/Providers/atoms"
-import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
 import useSWRWithOptionalAuth from "hooks/useSWRWithOptionalAuth"
-import { useSetAtom } from "jotai"
 import { GuildBase } from "types"
 import { GuildCardSkeleton, GuildCardWithLink } from "./GuildCard"
-import { Button } from "@/components/ui/Button"
-import { SignIn } from "@phosphor-icons/react"
-import Robot from "/public/landing/robot.svg"
-import { Card } from "@/components/ui/Card"
 
 const useYourGuilds = () =>
   useSWRWithOptionalAuth<GuildBase[]>(
@@ -20,36 +13,16 @@ const useYourGuilds = () =>
   )
 
 export const YourGuilds = () => {
-  const { isWeb3Connected } = useWeb3ConnectionManager()
-  const setIsWalletSelectorModalOpen = useSetAtom(walletSelectorModalAtom)
-
   const { data: usersGuilds, isLoading: isGuildsLoading } = useYourGuilds()
 
-  if (!isWeb3Connected) {
-    return (
-      <Card className="my-2 mb-12 flex flex-col items-stretch justify-between gap-8 p-6 font-semibold sm:flex-row sm:items-center">
-        <div className="flex items-center gap-4">
-          <Robot className="size-8 min-w-8 text-white" />
-          <span>Sign in to view your guilds / create new ones</span>
-        </div>
-        <Button
-          className="space-x-2"
-          onClick={() => setIsWalletSelectorModalOpen(true)}
-        >
-          <SignIn />
-          <span className="text-md">Sign in</span>
-        </Button>
-      </Card>
-    )
-  }
 
   return (
     <section className="mb-16 mt-1 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
       {isGuildsLoading || !usersGuilds
         ? Array.from({ length: 6 }, (_, i) => <GuildCardSkeleton key={i} />)
         : usersGuilds.map((guild) => (
-            <GuildCardWithLink guildData={guild} key={guild.id} />
-          ))}
+          <GuildCardWithLink guildData={guild} key={guild.id} />
+        ))}
     </section>
   )
 }