From 7e25c56cfa892d40f0f0d0bd6db846de1f610278 Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Thu, 28 Nov 2024 09:00:14 +0100 Subject: [PATCH 1/5] feat: Tooltip component --- package.json | 1 + src/components/ui/Tooltip.tsx | 80 +++++++++++++++++++++++++++++++++ src/stories/Tooltip.stories.tsx | 40 +++++++++++++++++ src/styles/globals.css | 10 +++++ tailwind.config.ts | 8 ++++ 5 files changed, 139 insertions(+) create mode 100644 src/components/ui/Tooltip.tsx create mode 100644 src/stories/Tooltip.stories.tsx diff --git a/package.json b/package.json index 0dfc2cae6a..6b8ab3ce6c 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "@radix-ui/react-switch": "^1.1.1", "@radix-ui/react-toggle": "^1.1.0", "@radix-ui/react-toggle-group": "^1.1.0", + "@radix-ui/react-tooltip": "^1.1.4", "@t3-oss/env-nextjs": "^0.11.1", "@tailwindcss/typography": "^0.5.15", "@tanstack/react-query": "^5.60.2", diff --git a/src/components/ui/Tooltip.tsx b/src/components/ui/Tooltip.tsx new file mode 100644 index 0000000000..2c09a33023 --- /dev/null +++ b/src/components/ui/Tooltip.tsx @@ -0,0 +1,80 @@ +"use client"; + +import { cn } from "@/lib/cssUtils"; +import * as TooltipPrimitive from "@radix-ui/react-tooltip"; +import { type VariantProps, cva } from "class-variance-authority"; +import { + type ComponentPropsWithoutRef, + type ElementRef, + type FC, + forwardRef, +} from "react"; + +const tooltipVariants = cva( + "fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-w-sm animate-in px-3 py-1.5 text-center font-medium font-sans text-sm shadow-md data-[state=closed]:animate-out", + { + variants: { + variant: { + tooltip: + "bg-tooltip text-tooltip-foreground rounded-xl [&_svg.tooltip-arrow]:fill-tooltip", + popover: + "bg-popover text-popover-foreground rounded-lg outline outline-1 outline-border [&_svg.tooltip-arrow]:fill-popover [&_svg.tooltip-arrow]:[filter:drop-shadow(1px_0_0_hsl(var(--border)))_drop-shadow(-1px_0_0_hsl(var(--border)))_drop-shadow(0_1px_0_hsl(var(--border)))]", + }, + }, + defaultVariants: { + variant: "tooltip", + }, + }, +); + +const TooltipProvider = TooltipPrimitive.Provider; + +const Tooltip: FC> = ({ + ...props +}) => ; + +const TooltipTrigger = forwardRef< + ElementRef, + ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + +)); + +export interface TooltipContentProps + extends ComponentPropsWithoutRef, + VariantProps {} + +const TooltipContent = forwardRef< + ElementRef, + TooltipContentProps +>(({ className, sideOffset = 4, variant, children, ...props }, ref) => ( + + {children} + + +)); +TooltipContent.displayName = TooltipPrimitive.Content.displayName; + +const TooltipPortal = TooltipPrimitive.Portal; + +export { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, + TooltipPortal, +}; diff --git a/src/stories/Tooltip.stories.tsx b/src/stories/Tooltip.stories.tsx new file mode 100644 index 0000000000..a57699f431 --- /dev/null +++ b/src/stories/Tooltip.stories.tsx @@ -0,0 +1,40 @@ +import { Button } from "@/components/ui/Button"; +import { + Tooltip, + TooltipContent, + type TooltipContentProps, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/Tooltip"; +import type { Meta, StoryObj } from "@storybook/react"; + +const TooltipExample = (tooltipContentProps: TooltipContentProps) => ( + + + + + + +

This is a tooltip!

+ + + +); + +const meta: Meta = { + title: "Design system/Tooltip", + component: TooltipExample, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; +export const Popover: Story = { + args: { + variant: "popover", + }, +}; diff --git a/src/styles/globals.css b/src/styles/globals.css index d5f848f3d9..a618b6a950 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -87,6 +87,7 @@ html { --gray-800: #27272a; --gray-900: #18181b; + --black: #000; --white: #fff; --blackAlpha: rgba(0, 0, 0, 0.06); @@ -113,6 +114,12 @@ html { --input-border-invalid: var(--red-500); --input-background: var(--white); + --popover: var(--card); + --popover-foreground: var(--foreground); + + --tooltip: var(--black); + --tooltip-foreground: var(--gray-100); + --button-primary: var(--indigo-500); --button-primary-hover: var(--indigo-600); --button-primary-active: var(--indigo-700); @@ -167,6 +174,9 @@ html { --input-border-invalid: var(--red-300); --input-background: var(--blackAlpha-hard); + --tooltip: var(--gray-300); + --tooltip-foreground: var(--gray-800); + --button-primary: var(--indigo-500); --button-primary-hover: var(--indigo-400); --button-primary-active: var(--indigo-300); diff --git a/tailwind.config.ts b/tailwind.config.ts index 6aa5ee3970..d35465e192 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -40,6 +40,14 @@ const config = { invalid: "var(--input-border-invalid)" }, }, + tooltip: { + DEFAULT: "var(--tooltip)", + foreground: "var(--tooltip-foreground)", + }, + popover: { + DEFAULT: "var(--popover)", + foreground: "var(--popover-foreground)", + }, // Using these in our Toggle component button: { primary: { From 5494deee0245866316d2102ca6cb55f17ea49858 Mon Sep 17 00:00:00 2001 From: BrickheadJohnny <92519134+BrickheadJohnny@users.noreply.github.com> Date: Thu, 28 Nov 2024 23:14:31 +0100 Subject: [PATCH 2/5] feat: requirement building blocks (#1571) * feat: DataBlock component * feat: ChainIndicator component * feat: simplify the DataBlock component * feat: DataBlockWithCopy component * feat: Requirement compound component * feat: RequirementLink component * cleanup(DataBlock): remove unused stuff * cleanup: simplify DataBlock stories * fix(DataBlockWithCopy): adjust height, add `"use client"` * fix(Providers): add TooltipProvider * fix(DataBlockWithCopy): tooltip trigger * fix(DataBlockWithCopy): remove icon color * refactor: make a `SupportedChainID` type * fix(Button): adjust spacing for `sm` size --- public/chainLogos/eth.svg | 1 + src/components/Providers.tsx | 15 +++-- src/components/SignInDialog.tsx | 4 +- .../requirements/ChainIndicator.tsx | 13 +++++ src/components/requirements/DataBlock.tsx | 9 +++ .../requirements/DataBlockWithCopy.tsx | 58 +++++++++++++++++++ src/components/requirements/Requirement.tsx | 48 +++++++++++++++ .../requirements/RequirementLink.tsx | 18 ++++++ src/components/ui/Anchor.tsx | 2 +- src/components/ui/Badge.tsx | 2 +- src/components/ui/Button.tsx | 2 +- src/config/chains.ts | 21 +++++++ src/stories/Anchor.stories.tsx | 6 +- .../requirements/ChainIndicator.stories.tsx | 17 ++++++ .../requirements/DataBlock.stories.tsx | 17 ++++++ .../DataBlockWithCopy.stories.tsx | 24 ++++++++ .../requirements/Requirement.stories.tsx | 53 +++++++++++++++++ .../requirements/RequirementLink.stories.tsx | 18 ++++++ src/styles/globals.css | 13 +++++ tailwind.config.ts | 23 ++++++-- 20 files changed, 344 insertions(+), 20 deletions(-) create mode 100644 public/chainLogos/eth.svg create mode 100644 src/components/requirements/ChainIndicator.tsx create mode 100644 src/components/requirements/DataBlock.tsx create mode 100644 src/components/requirements/DataBlockWithCopy.tsx create mode 100644 src/components/requirements/Requirement.tsx create mode 100644 src/components/requirements/RequirementLink.tsx create mode 100644 src/config/chains.ts create mode 100644 src/stories/requirements/ChainIndicator.stories.tsx create mode 100644 src/stories/requirements/DataBlock.stories.tsx create mode 100644 src/stories/requirements/DataBlockWithCopy.stories.tsx create mode 100644 src/stories/requirements/Requirement.stories.tsx create mode 100644 src/stories/requirements/RequirementLink.stories.tsx diff --git a/public/chainLogos/eth.svg b/public/chainLogos/eth.svg new file mode 100644 index 0000000000..1f9ad00f9f --- /dev/null +++ b/public/chainLogos/eth.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Providers.tsx b/src/components/Providers.tsx index 6722b57a3a..4e3f8a2e22 100644 --- a/src/components/Providers.tsx +++ b/src/components/Providers.tsx @@ -7,6 +7,7 @@ import { Provider as JotaiProvider } from "jotai"; import { ThemeProvider } from "next-themes"; import type { FunctionComponent, PropsWithChildren } from "react"; import { WagmiProvider } from "wagmi"; +import { TooltipProvider } from "./ui/Tooltip"; const queryClient = new QueryClient(); @@ -21,12 +22,14 @@ export const Providers: FunctionComponent = ({ enableSystem disableTransitionOnChange > - - - {children} - - - + + + + {children} + + + + ); diff --git a/src/components/SignInDialog.tsx b/src/components/SignInDialog.tsx index db34c3a5f7..f3bfc40c55 100644 --- a/src/components/SignInDialog.tsx +++ b/src/components/SignInDialog.tsx @@ -96,7 +96,7 @@ const WalletList = () => { {"By continuing, you agree to our "} setOpen(false)} > Privacy Policy @@ -104,7 +104,7 @@ const WalletList = () => { {" and "} setOpen(false)} > Terms of use diff --git a/src/components/requirements/ChainIndicator.tsx b/src/components/requirements/ChainIndicator.tsx new file mode 100644 index 0000000000..72953f0a4e --- /dev/null +++ b/src/components/requirements/ChainIndicator.tsx @@ -0,0 +1,13 @@ +import { Badge } from "@/components/ui/Badge"; +import { CHAINS, type SupportedChainID } from "@/config/chains"; + +export const ChainIndicator = ({ chain }: { chain: SupportedChainID }) => ( + + {CHAINS[chain].name} + {CHAINS[chain].name} + +); diff --git a/src/components/requirements/DataBlock.tsx b/src/components/requirements/DataBlock.tsx new file mode 100644 index 0000000000..cb9f1ad7c0 --- /dev/null +++ b/src/components/requirements/DataBlock.tsx @@ -0,0 +1,9 @@ +import type { PropsWithChildren } from "react"; + +export const DataBlock = ({ children }: PropsWithChildren): JSX.Element => { + return ( + + {children} + + ); +}; diff --git a/src/components/requirements/DataBlockWithCopy.tsx b/src/components/requirements/DataBlockWithCopy.tsx new file mode 100644 index 0000000000..cee1806e0b --- /dev/null +++ b/src/components/requirements/DataBlockWithCopy.tsx @@ -0,0 +1,58 @@ +"use client"; + +import { + Tooltip, + TooltipContent, + TooltipPortal, + TooltipTrigger, +} from "@/components/ui/Tooltip"; +import { Check } from "@phosphor-icons/react/dist/ssr"; +import { useClipboard } from "foxact/use-clipboard"; +import { useDebouncedState } from "foxact/use-debounced-state"; +import { type PropsWithChildren, useEffect } from "react"; +import { DataBlock } from "./DataBlock"; + +type Props = { + text: string; +}; + +export const DataBlockWithCopy = ({ + text, + children, +}: PropsWithChildren): JSX.Element => { + const { copied, copy } = useClipboard({ + timeout: 1500, + }); + + /** + * Maintaining a debounced copied state too, so we can change the tooltip content only after the tooltip is actually invisible + */ + + const [debouncedCopied, debouncilySetState] = useDebouncedState(copied, 200); + + useEffect(() => { + debouncilySetState(copied); + }, [debouncilySetState, copied]); + + const tooltipInCopiedState = copied || debouncedCopied; + + return ( + + copy(text)} + className="inline-flex rounded-md" + > + + {children ?? text} + + + + + + {tooltipInCopiedState && } + {tooltipInCopiedState ? "Copied" : "Click to copy"} + + + + ); +}; diff --git a/src/components/requirements/Requirement.tsx b/src/components/requirements/Requirement.tsx new file mode 100644 index 0000000000..5066d2d651 --- /dev/null +++ b/src/components/requirements/Requirement.tsx @@ -0,0 +1,48 @@ +import { cn } from "@/lib/cssUtils"; +import type { PropsWithChildren } from "react"; + +export const Requirement = ({ + className, + children, +}: PropsWithChildren<{ className?: string }>) => ( +
+ {children} +
+); + +export const RequirementImage = ({ + className, + children, +}: PropsWithChildren<{ className?: string }>) => ( +
+ {children} +
+); + +export const RequirementContent = ({ + className, + children, +}: PropsWithChildren<{ className?: string }>) => ( +
+ {children} +
+); + +export const RequirementFooter = ({ + className, + children, +}: PropsWithChildren<{ className?: string }>) => ( +
*]:mt-1", + className, + )} + > + {children} +
+); diff --git a/src/components/requirements/RequirementLink.tsx b/src/components/requirements/RequirementLink.tsx new file mode 100644 index 0000000000..57d14f27d5 --- /dev/null +++ b/src/components/requirements/RequirementLink.tsx @@ -0,0 +1,18 @@ +import type { PropsWithChildren } from "react"; +import { Anchor } from "../ui/Anchor"; + +export const RequirementLink = ({ + href, + children, +}: PropsWithChildren<{ href: string }>) => ( + + {children} + +); diff --git a/src/components/ui/Anchor.tsx b/src/components/ui/Anchor.tsx index a712e42e15..11ead78fda 100644 --- a/src/components/ui/Anchor.tsx +++ b/src/components/ui/Anchor.tsx @@ -12,7 +12,7 @@ const anchorVariants = cva( variant: { default: "text-foreground hover:underline", highlighted: "text-blue-500 dark:text-blue-400 hover:underline", - muted: "text-muted-foreground hover:underline", + secondary: "text-foreground-secondary hover:underline", unstyled: "", }, }, diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx index 10a0e1b0fd..f81b6a5e8d 100644 --- a/src/components/ui/Badge.tsx +++ b/src/components/ui/Badge.tsx @@ -7,7 +7,7 @@ export const badgeVariants = cva( { variants: { size: { - sm: "text-xs h-5", + sm: "text-xs h-5 gap-1", md: "text-sm h-6", lg: "text-base h-8", }, diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 85917978cf..b59343d5da 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -32,7 +32,7 @@ const buttonVariants = cva( }, size: { xs: "h-6 px-2 text-xs gap-1", - sm: "h-8 px-3 text-sm", + sm: "h-8 px-3 text-sm gap-1", md: "h-11 px-4 py-2", lg: "h-12 px-6 py-4 text-lg", xl: "h-14 px-6 py-4 text-lg gap-2", diff --git a/src/config/chains.ts b/src/config/chains.ts new file mode 100644 index 0000000000..dc56e4ac7e --- /dev/null +++ b/src/config/chains.ts @@ -0,0 +1,21 @@ +import { mainnet, sepolia } from "viem/chains"; +import type { Register } from "wagmi"; + +export const CHAINS = { + [mainnet.id]: { + name: mainnet.name, + icon: "/chainLogos/eth.svg", + }, + [sepolia.id]: { + name: sepolia.name, + icon: "/chainLogos/eth.svg", + }, +} satisfies Record< + SupportedChainID, + { + name: string; + icon: string; + } +>; + +export type SupportedChainID = Register["config"]["chains"][number]["id"]; diff --git a/src/stories/Anchor.stories.tsx b/src/stories/Anchor.stories.tsx index 0390308ceb..6032a0120f 100644 --- a/src/stories/Anchor.stories.tsx +++ b/src/stories/Anchor.stories.tsx @@ -35,11 +35,11 @@ export const Default: Story = { }, }; -export const Muted: Story = { +export const Secondary: Story = { args: { ...Default.args, - variant: "muted", - children: "Muted", + variant: "secondary", + children: "Secondary", }, argTypes: { ...Default.argTypes, diff --git a/src/stories/requirements/ChainIndicator.stories.tsx b/src/stories/requirements/ChainIndicator.stories.tsx new file mode 100644 index 0000000000..a032a29bdf --- /dev/null +++ b/src/stories/requirements/ChainIndicator.stories.tsx @@ -0,0 +1,17 @@ +import { ChainIndicator } from "@/components/requirements/ChainIndicator"; +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + title: "Requirement building blocks/ChainIndicator", + component: ChainIndicator, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + chain: 1, + }, +}; diff --git a/src/stories/requirements/DataBlock.stories.tsx b/src/stories/requirements/DataBlock.stories.tsx new file mode 100644 index 0000000000..e277fe3657 --- /dev/null +++ b/src/stories/requirements/DataBlock.stories.tsx @@ -0,0 +1,17 @@ +import { DataBlock } from "@/components/requirements/DataBlock"; +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + title: "Requirement building blocks/DataBlock", + component: DataBlock, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + children: "DataBlock", + }, +}; diff --git a/src/stories/requirements/DataBlockWithCopy.stories.tsx b/src/stories/requirements/DataBlockWithCopy.stories.tsx new file mode 100644 index 0000000000..672523e416 --- /dev/null +++ b/src/stories/requirements/DataBlockWithCopy.stories.tsx @@ -0,0 +1,24 @@ +import { DataBlockWithCopy } from "@/components/requirements/DataBlockWithCopy"; +import { TooltipProvider } from "@/components/ui/Tooltip"; +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + title: "Requirement building blocks/DataBlockWithCopy", + component: DataBlockWithCopy, + decorators: (Story) => ( + + + + ), +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + children: "DataBlockWithCopy", + text: "DataBlockWithCopy", + }, +}; diff --git a/src/stories/requirements/Requirement.stories.tsx b/src/stories/requirements/Requirement.stories.tsx new file mode 100644 index 0000000000..ce064e1b7c --- /dev/null +++ b/src/stories/requirements/Requirement.stories.tsx @@ -0,0 +1,53 @@ +import { ChainIndicator } from "@/components/requirements/ChainIndicator"; +import { DataBlockWithCopy } from "@/components/requirements/DataBlockWithCopy"; +import { + Requirement, + RequirementContent, + RequirementFooter, + RequirementImage, +} from "@/components/requirements/Requirement"; +import { RequirementLink } from "@/components/requirements/RequirementLink"; +import { Card } from "@/components/ui/Card"; +import { TooltipProvider } from "@/components/ui/Tooltip"; +import { QuestionMark } from "@phosphor-icons/react/dist/ssr"; +import type { Meta, StoryObj } from "@storybook/react"; + +const RequirementExample = () => ( + + + + + + +

+ {"Copy "} + + {" to your clipboard"} +

+ + + + + View on explorer + + + + + +); + +const meta: Meta = { + title: "Requirement building blocks/Requirement", + component: RequirementExample, + decorators: (Story) => ( + + + + ), +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/src/stories/requirements/RequirementLink.stories.tsx b/src/stories/requirements/RequirementLink.stories.tsx new file mode 100644 index 0000000000..e701e8a6df --- /dev/null +++ b/src/stories/requirements/RequirementLink.stories.tsx @@ -0,0 +1,18 @@ +import { RequirementLink } from "@/components/requirements/RequirementLink"; +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + title: "Requirement building blocks/RequirementLink", + component: RequirementLink, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + href: "https://polygonscan.com/token/0xff04820c36759c9f5203021fe051239ad2dcca8a", + children: "Guild Pin contract", + }, +}; diff --git a/src/styles/globals.css b/src/styles/globals.css index a618b6a950..e74452b9e7 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -63,6 +63,17 @@ html { --blue-800: #1e40af; --blue-900: #1e3a8a; + --orange-50: #fff7ed; + --orange-100: #ffedd5; + --orange-200: #fed7aa; + --orange-300: #fdba74; + --orange-400: #fb923c; + --orange-500: #f97316; + --orange-600: #ea580c; + --orange-700: #c2410c; + --orange-800: #9a3412; + --orange-900: #7c2d12; + --red-50: #fef2f2; --red-100: #fee2e2; --red-200: #fecaca; @@ -156,6 +167,7 @@ html { --icon-success: var(--green-500); --icon-error: var(--red-500); + --icon-warning: var(--orange-500); } .dark { @@ -213,6 +225,7 @@ html { --icon-success: var(--green-400); --icon-error: var(--red-400); + --icon-warning: var(--orange-300); } body { diff --git a/tailwind.config.ts b/tailwind.config.ts index d35465e192..85b633f1da 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -12,11 +12,11 @@ const config = { ], prefix: "", theme: { - fontFamily: { - sans: ["var(--font-inter,sans-serif)"], - display: ["var(--font-dystopian,sans-serif)"], - }, extend: { + fontFamily: { + sans: ["var(--font-inter,sans-serif)"], + display: ["var(--font-dystopian,sans-serif)"], + }, colors: { background: "var(--background)", foreground: { @@ -71,8 +71,19 @@ const config = { "scroll-thumb": "var(--scroll-thumb)", icon: { success: "var(--icon-success)", - error: "var(--icon-error)" - } + error: "var(--icon-error)", + warning: "var(--icon-warning)", + }, + blackAlpha: { + DEFAULT: "var(--blackAlpha)", + medium: "var(--blackAlpha-medium)", + hard: "var(--blackAlpha-hard)", + }, + whiteAlpha: { + DEFAULT: "var(--whiteAlpha)", + medium: "var(--whiteAlpha-medium)", + hard: "var(--whiteAlpha-hard)", + }, }, keyframes: { "collapse-open": { From 9ac44d2e90ea63cb62e102d9f7b260fa805fac2a Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Fri, 29 Nov 2024 10:24:13 +0100 Subject: [PATCH 3/5] feat(explorer): background image --- public/images/banner-light.svg | 650 ++++++++++++++++++++++++++ public/images/banner.svg | 650 ++++++++++++++++++++++++++ src/app/(dashboard)/explorer/page.tsx | 10 +- 3 files changed, 1309 insertions(+), 1 deletion(-) create mode 100644 public/images/banner-light.svg create mode 100644 public/images/banner.svg diff --git a/public/images/banner-light.svg b/public/images/banner-light.svg new file mode 100644 index 0000000000..42bd11018a --- /dev/null +++ b/public/images/banner-light.svg @@ -0,0 +1,650 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/banner.svg b/public/images/banner.svg new file mode 100644 index 0000000000..83f1b55b3c --- /dev/null +++ b/public/images/banner.svg @@ -0,0 +1,650 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/(dashboard)/explorer/page.tsx b/src/app/(dashboard)/explorer/page.tsx index 94c5b1c95c..c21462188c 100644 --- a/src/app/(dashboard)/explorer/page.tsx +++ b/src/app/(dashboard)/explorer/page.tsx @@ -36,7 +36,15 @@ export default async function Explorer() { return ( <> -
+
+ +

Date: Fri, 29 Nov 2024 10:25:55 +0100 Subject: [PATCH 4/5] fix(CreateGuildLink): accept className prop --- .../(dashboard)/explorer/components/CreateGuildLink.tsx | 7 +++++-- src/app/(dashboard)/explorer/page.tsx | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/app/(dashboard)/explorer/components/CreateGuildLink.tsx b/src/app/(dashboard)/explorer/components/CreateGuildLink.tsx index f9d456ad00..d716acded9 100644 --- a/src/app/(dashboard)/explorer/components/CreateGuildLink.tsx +++ b/src/app/(dashboard)/explorer/components/CreateGuildLink.tsx @@ -2,7 +2,7 @@ import { buttonVariants } from "@/components/ui/Button"; import { Plus } from "@phosphor-icons/react/dist/ssr"; import Link from "next/link"; -export const CreateGuildLink = () => ( +export const CreateGuildLink = ({ className }: { className?: string }) => ( ( className={buttonVariants({ variant: "ghost", size: "sm", - className: "min-h-11 w-11 gap-1.5 px-0 sm:min-h-0 sm:w-auto sm:px-3", + className: [ + "min-h-11 w-11 gap-1.5 px-0 sm:min-h-0 sm:w-auto sm:px-3", + className, + ], })} > diff --git a/src/app/(dashboard)/explorer/page.tsx b/src/app/(dashboard)/explorer/page.tsx index c21462188c..bd00dd7b88 100644 --- a/src/app/(dashboard)/explorer/page.tsx +++ b/src/app/(dashboard)/explorer/page.tsx @@ -132,7 +132,7 @@ async function YourGuilds() { or create your own!

- +

); } From c2a9f52431e22fe78ac98aa89bf8b80fcc81e847 Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Fri, 29 Nov 2024 10:30:05 +0100 Subject: [PATCH 5/5] fix(RoleCard): use the old design --- src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx index 7ffa806b1f..3a38da759e 100644 --- a/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx +++ b/src/app/(dashboard)/[guildId]/[roleGroupId]/page.tsx @@ -75,8 +75,8 @@ const RoleCard = async ({ role }: { role: Role }) => { //console.log(rewards); return ( - -
+ +
{role.imageUrl && ( { {role.description}

{!!rewards.length && ( - +
{rewards.map((reward) => ( @@ -100,7 +100,7 @@ const RoleCard = async ({ role }: { role: Role }) => { )}
-
+
REQUIREMENTS @@ -117,7 +117,7 @@ const RoleCard = async ({ role }: { role: Role }) => { const Reward = ({ reward }: { reward: Reward }) => { return ( -
+
{reward.name}
{reward.description}