chore: add icon and color to empty indicator cards

guildxyz · Aug 12, 2024 · af4d3b6 · af4d3b6
1 parent 63eb32a
commit af4d3b6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/src/app/(marketing)/profile/_components/EditContributions.tsx b/src/app/(marketing)/profile/_components/EditContributions.tsx
@@ -23,7 +23,7 @@ import {
 import { useToast } from "@/components/ui/hooks/useToast"
 import { useYourGuilds } from "@/hooks/useYourGuilds"
 import { Guild, MembershipResult, Role, Schemas } from "@guildxyz/types"
-import { X } from "@phosphor-icons/react"
+import { WarningCircle, X } from "@phosphor-icons/react"
 import { PencilSimple } from "@phosphor-icons/react"
 import { AvatarFallback } from "@radix-ui/react-avatar"
 import { DialogDescription } from "@radix-ui/react-dialog"
@@ -117,6 +117,14 @@ export const EditContributions = () => {
         </DialogHeader>
         <DialogBody className="gap-7">
           <div className="flex flex-col gap-3">
+            {guilds?.length === 0 && (
+              <Card className="flex gap-2 border border-destructive-subtle p-4 text-destructive-subtle">
+                <WarningCircle size={32} weight="fill" />
+                <h3 className="font-medium">
+                  You have no verified guild membership to select from
+                </h3>
+              </Card>
+            )}
             {contributions.data?.slice(0, 3).map((contribution) => (
               <EditContributionCard
                 contribution={contribution}
@@ -132,6 +140,7 @@ export const EditContributions = () => {
               <div className="pb-2">
                 <Label>Guild</Label>
                 <Select
+                  disabled={guilds?.length === 0}
                   onValueChange={(value) => {
                     setGuildId(value)
                     setRoleId("")

diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -7,6 +7,7 @@ import { Card } from "@/components/ui/Card"
 import { Separator } from "@/components/ui/Separator"
 import { Skeleton } from "@/components/ui/Skeleton"
 import { cn } from "@/lib/utils"
+import { Info } from "@phosphor-icons/react"
 import { PropsWithChildren } from "react"
 import { ContributionCard } from "../_components/ContributionCard"
 import { EditContributions } from "../_components/EditContributions"
@@ -81,13 +82,16 @@ export const Profile = () => {
       </div>
       <div className="grid grid-cols-1 gap-3">
         {contributions.length === 0 && (
-          <Card className="p-4">
-            <h3 className="mb-2 font-bold text-md">
-              Contributions will appear here
-            </h3>
-            <p className="text-muted-foreground">
-              This profile doesn't have any contribution yet
-            </p>
+          <Card className="flex gap-2 border border-info p-4">
+            <Info weight="fill" size={32} className="text-info" />
+            <div>
+              <h3 className="mb-1 font-bold text-md">
+                Contributions will appear here
+              </h3>
+              <p className="text-muted-foreground">
+                This profile doesn't have any contribution yet
+              </p>
+            </div>
           </Card>
         )}
         {contributions.map((contribution) => (