Skip to content

Commit

Permalink
Merge branch '12-donate-modal' of https://github.com/PotLock/potlock-…
Browse files Browse the repository at this point in the history 
…nextjs-app into 65-indexer-api-bindings-ui-kit-updates-and-minor-fixes
  • Loading branch information
@carina-akaia
carina-akaia committed Jun 12, 2024
2 parents 891d53a + 94dbee7 commit b965db6
Show file tree
Hide file tree
Showing 3 changed files with 128 additions and 27 deletions.
3 changes: 2 additions & 1 deletion .vscode/extensions.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"antfu.unocss",
"aaron-bond.better-comments",
"streetsidesoftware.code-spell-checker",
"gruntfuggly.todo-tree"
"gruntfuggly.todo-tree",
"naumovs.color-highlight"
]
}
68 changes: 49 additions & 19 deletions src/common/ui/components/button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,43 +5,72 @@ import { type VariantProps, cva } from "class-variance-authority";

import { cn } from "../utils";

// TODO: add hover effects correctly & disabled styling
// TODO: add correct hover effects
const buttonVariants = cva(
"flex text-sm leading-[157%] items-center justify-center text-[#292929] gap-2 font-medium no-underline cursor-pointer transition-all duration-200 ease-in-out w-fit rounded-md border-none focus:shadow-button-focus",
cn(
"flex text-sm leading-[157%] items-center justify-center text-[#292929] gap-2 font-medium",
"no-underline cursor-pointer transition-all duration-200 ease-in-out w-fit rounded-md",
"border-none focus:shadow-button-focus",
),

{
variants: {
variant: {
// Brand
"brand-filled":
"bg-[var(--primary-600)] translate-y-[-1.5px] text-white shadow-button-primary hover:translate-y-0 hover:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.84)_inset,0px_1px_1px_1px_rgba(246,118,122,0.5)_inset,0px_0px_0px_2px_rgba(246,118,122,0.5)_inset]",
"brand-tonal":
"translate-y-[-1.5px] bg-[var(--peach-50)] shadow-button-tonal hover:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.84)_inset,0px_1px_1px_1px_#fff_inset,0px_0px_0px_2px_rgba(255,255,255,0.8)_inset] hover:translate-y-0",
"brand-plain":
"brand-filled": cn(
"bg-[var(--primary-600)] translate-y-[-1.5px] text-white shadow-button-primary hover:translate-y-0",
"hover:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.84)_inset,0px_1px_1px_1px_rgba(246,118,122,0.5)_inset,0px_0px_0px_2px_rgba(246,118,122,0.5)_inset]",
"disabled:text-[#a6a6a6] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset] disabled:bg-[var(--neutral-100)]",
),

"brand-tonal": cn(
"translate-y-[-1.5px] bg-[var(--peach-50)] shadow-button-tonal hover:translate-y-0",
"hover:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.84)_inset,0px_1px_1px_1px_#fff_inset,0px_0px_0px_2px_rgba(255,255,255,0.8)_inset]",
"disabled:text-[#a6a6a6] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset] disabled:bg-[var(--neutral-100)]",
),

"brand-plain": cn(
"text-[color:var(--primary-600)] p-0 hover:text-[color:var(--Primary-400)]",
"brand-outline":
"bg-[rgba(255,255,255,0.01)] text-[color:var(--primary-600)] shadow-[0px_0px_0px_1px_rgba(243,78,95,0.78)_inset,0px_-1px_0px_0px_rgba(73,8,19,0.5)_inset,0px_1px_2px_-0.5px_rgba(73,8,19,0.2)] hover:bg-[#fef3f2]",
"disabled:text-[#a6a6a6] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset] disabled:bg-[var(--neutral-100)]",
),

"brand-outline": cn(
"bg-[rgba(255,255,255,0.01)] text-[color:var(--primary-600)] hover:bg-[#fef3f2]",
"shadow-[0px_0px_0px_1px_rgba(243,78,95,0.78)_inset,0px_-1px_0px_0px_rgba(73,8,19,0.5)_inset,0px_1px_2px_-0.5px_rgba(73,8,19,0.2)]",
"disabled:text-[#c7c7c7] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset]",
),

// Standard
"standard-filled":
"text-[white] bg-[var(--neutral-800)] shadow-[0px_0px_0px_1px_rgba(0,0,0,0.84)_inset,0px_1px_1px_1px_rgba(166,166,166,0.4)_inset,0px_0px_0px_2px_rgba(166,166,166,0.4)_inset,0px_1px_2px_0px_rgba(15,15,15,0.15),0px_1px_3px_-1px_rgba(5,5,5,0.08)]",
"standard-outline":
"bg-white bg shadow-[0px_0px_0px_1px_rgba(0,0,0,0.22)_inset,0px_-1px_0px_0px_rgba(15,15,15,0.15)_inset,0px_1px_2px_-0.5px_rgba(5,5,5,0.08)] hover:bg-[var(--neutral-50)",
"standard-plain": "p-0 hover:text-[color:var(--neutral-500)]",
// Disabled
"filled-disabled":
"text-[#a6a6a6] shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset] bg-[var(--neutral-100)]",
"plain-disabled":
"bg-white text-[#c7c7c7] shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset]",
"standard-filled": cn(
"text-[white] bg-[var(--neutral-800)]",
"shadow-[0px_0px_0px_1px_rgba(0,0,0,0.84)_inset,0px_1px_1px_1px_rgba(166,166,166,0.4)_inset,0px_0px_0px_2px_rgba(166,166,166,0.4)_inset,0px_1px_2px_0px_rgba(15,15,15,0.15),0px_1px_3px_-1px_rgba(5,5,5,0.08)]",
"disabled:text-[#a6a6a6] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset] disabled:bg-[var(--neutral-100)]",
),

"standard-outline": cn(
"bg-white hover:bg-[var(--neutral-50)",
"shadow-[0px_0px_0px_1px_rgba(0,0,0,0.22)_inset,0px_-1px_0px_0px_rgba(15,15,15,0.15)_inset,0px_1px_2px_-0.5px_rgba(5,5,5,0.08)]",
"disabled:text-[#c7c7c7] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset]",
),

"standard-plain": cn(
"p-0 hover:text-[color:var(--neutral-500)]",
"disabled:text-[#a6a6a6] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset] disabled:bg-[var(--neutral-100)]",
),
},

size: {
default: "px-4 py-[9px]",
icon: "h-10 w-10",
},

font: {
default: "font-medium",
bold: "font-bold",
semibold: "font-semibold",
},
},

defaultVariants: {
font: "default",
variant: "brand-filled",
Expand All @@ -68,6 +97,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
);
},
);

Button.displayName = "Button";

export { Button, buttonVariants };
84 changes: 77 additions & 7 deletions src/common/ui/components/dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const DialogOverlay = forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/80",
"fixed inset-0 z-50 bg-white/30 backdrop-blur-sm",
"data-[state=open]:animate-in data-[state=closed]:animate-out",
" data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className,
Expand All @@ -48,7 +48,7 @@ const DialogContent = forwardRef<
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg sm:rounded-lg",
"translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg",
"translate-x-[-50%] translate-y-[-50%] gap-4 bg-background shadow-lg",
"duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
Expand All @@ -63,31 +63,101 @@ const DialogContent = forwardRef<
<DialogPrimitive.Close
onClick={onCloseClick}
className={cn(
"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity",
"absolute right-6 top-6 rounded-sm opacity-70 ring-offset-background transition-opacity",
"hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring",
"focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent",
"data-[state=open]:text-muted-foreground",
)}
>
<X className="h-4 w-4" />
<X className="color-white h-7 w-7" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
));
DialogContent.displayName = DialogPrimitive.Content.displayName;

const DialogHeaderPattern: React.FC<{ className?: string }> = (props) => (
<svg
width="118"
height="152"
viewBox="0 0 118 152"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<rect
width="20"
height="161.118"
rx="10"
transform="matrix(-0.707107 0.707107 0.707107 0.707107 -39.752 -37)"
fill="white"
fill-opacity="0.08"
/>

<rect
width="20"
height="245.972"
rx="10"
transform="matrix(-0.707107 0.707107 0.707107 0.707107 -71.752 -37)"
fill="white"
fill-opacity="0.08"
/>

<rect
width="20"
height="164.654"
rx="10"
transform="matrix(-0.707107 0.707107 0.707107 0.707107 -103.752 -37)"
fill="white"
fill-opacity="0.08"
/>

<rect
width="20"
height="177.702"
rx="10"
transform="matrix(-0.707107 0.707107 0.707107 0.707107 -7.75195 -37)"
fill="white"
fill-opacity="0.08"
/>

<rect
width="20"
height="78.4889"
rx="10"
transform="matrix(-0.707107 0.707107 0.707107 0.707107 24.248 -37)"
fill="white"
fill-opacity="0.08"
/>
</svg>
);

const DialogHeader = ({
className,
children,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
"flex flex-col space-y-1.5 p-4 pt-8 text-center sm:text-left",
className,
)}
{...props}
/>
>
<div
un-position="absolute left-0 top-0"
un-w="full"
un-flex="~"
un-justify="between"
un-gap="4"
>
<DialogHeaderPattern />
<DialogHeaderPattern className="rotate-180" />
</div>

{children}
</div>
);
DialogHeader.displayName = "DialogHeader";

Expand All @@ -112,7 +182,7 @@ const DialogTitle = forwardRef<
<DialogPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
"prose text-lg font-semibold leading-none tracking-tight",
className,
)}
{...props}
Expand Down

0 comments on commit b965db6

Please sign in to comment.