Skip to content

Commit

Permalink
Simplify the Card component to no longer need z-indexes (#567)
Browse files Browse the repository at this point in the history
* Simplify the Card component to no longer need z-indexes

* Fix positioning issue of tabs

* Ensure boolean
jessepinho authored Feb 19, 2024
1 parent 8e42b3a commit 7af2c49
Showing 3 changed files with 17 additions and 10 deletions.
2 changes: 1 addition & 1 deletion apps/webapp/src/components/send/layout.tsx
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@ export const SendLayout = () => {
<div className='relative mx-auto grid gap-6 md:grid-cols-2 md:gap-4 xl:max-w-[1276px] xl:grid-cols-3 xl:gap-5'>
<div className='hidden xl:order-1 xl:block' />
<Card gradient className='order-2 row-span-2 flex-1 p-5 md:order-1 md:p-4 xl:p-5'>
<Tabs tabs={sendTabs} activeTab={pathname} className='mx-auto w-[75%] lg:w-[372px]' />
<Tabs tabs={sendTabs} activeTab={pathname} className='mx-auto flex w-[75%] lg:w-[372px]' />
<Outlet />
</Card>
<EduInfoCard
12 changes: 10 additions & 2 deletions packages/tailwind-config/index.js
Original file line number Diff line number Diff line change
@@ -131,8 +131,16 @@ export default {
},
},
backgroundImage: {
'card-radial':
'radial-gradient(33% 50% at 15% 44%, var(--rust), transparent),radial-gradient(33% 40% at 105% 42%, var(--teal), transparent),radial-gradient(33% 80% at 85% 124%, var(--teal), transparent)',
// The final `linear-gradient` is just to make a solid charcoal
// background color for the radial gradients to sit on top of. If
// there's a way to make a solid background color without
// `linear-gradient`, feel free to update this.
'card-radial': `
radial-gradient(33% 50% at 15% 44%, color-mix(in srgb, var(--rust) 20%, transparent), transparent),
radial-gradient(33% 40% at 105% 42%, color-mix(in srgb, var(--teal) 20%, transparent), transparent),
radial-gradient(33% 80% at 85% 124%, color-mix(in srgb, var(--teal) 20%, transparent), transparent),
linear-gradient(to right, var(--charcoal), var(--charcoal))
`,
'button-gradient':
'linear-gradient(90deg, var(--teal-700) 0%, var(--sand-700) 25%, var(--rust-600) 50%, var(--rust-600) 50%, var(--sand-700) 75%, var(--teal-700) 100%)',
'text-linear': 'linear-gradient(90deg, var(--teal-700), var(--sand-700), var(--rust-600))',
13 changes: 6 additions & 7 deletions packages/ui/components/ui/card.tsx
Original file line number Diff line number Diff line change
@@ -8,13 +8,12 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
const Card = React.forwardRef<HTMLDivElement, CardProps>(
({ className, gradient, children, ...props }, ref) => {
const baseClasses = 'bg-charcoal rounded-lg shadow-sm p-[30px]';
return gradient ? (
<div ref={ref} className={cn(baseClasses, 'relative', className)} {...props}>
<div className='relative z-10 flex flex-col'>{children}</div>
<div className='absolute inset-0 z-0 rounded-lg bg-card-radial p-[30px] opacity-20 ' />
</div>
) : (
<div ref={ref} className={cn(baseClasses, className)} {...props}>
return (
<div
ref={ref}
className={cn(baseClasses, !!gradient && 'bg-card-radial', className)}
{...props}
>
{children}
</div>
);

0 comments on commit 7af2c49

Please sign in to comment.