Update shop UI

xmliszt · Sep 11, 2024 · 124f77c · 124f77c
1 parent fe997f2
commit 124f77c
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 26 deletions.
diff --git a/app/shop/checkout-success/[checkout_session_id]/loading.tsx b/app/shop/checkout-success/[checkout_session_id]/loading.tsx
@@ -1,3 +1,9 @@
-export default function CheckoutSuccessLoading() {
-  return <div>Loading...</div>;
+import { TabooAILoadingEffect } from '@/components/custom/globals/taboo-ai-loading-effect';
+
+export default function Loading() {
+  return (
+    <section className='flex h-full w-full items-center justify-center p-4'>
+      <TabooAILoadingEffect />
+    </section>
+  );
 }
diff --git a/app/shop/checkout-success/[checkout_session_id]/page.tsx b/app/shop/checkout-success/[checkout_session_id]/page.tsx
@@ -6,7 +6,6 @@ import { fetchUserProfile } from '@/app/profile/server/fetch-user-profile';
 import { Confetti } from '@/components/custom/confetti';
 import { Button } from '@/components/ui/button';
 
-import { expireCheckoutSession } from '../../server/expire-checkout-session';
 import { getPrices } from '../../server/get-prices';
 import { retrieveCheckoutSession } from '../../server/retrieve-checkout-session';
 import { retrieveCheckoutSessionLineItems } from '../../server/retrieve-checkout-session-line-items';
@@ -42,7 +41,7 @@ export default async function CheckoutSuccessPage({ params }: CheckoutSuccessPag
 
   const { user: updatedUser } = await updateUserTokens({ tokens });
 
-  await expireCheckoutSession(params.checkout_session_id);
+  // TODO(@xmliszt): Make this checkout session no longer valid
 
   return (
     <main className='flex h-screen w-full items-start justify-center pt-24'>

diff --git a/app/shop/page.tsx b/app/shop/page.tsx
@@ -1,3 +1,5 @@
+import { cn } from '@/lib/utils';
+
 import { DiamondScene } from './diamond-scene';
 import { getPrices } from './server/get-prices';
 import { ShopItemCarousel } from './shop-item-carousel';
@@ -13,7 +15,15 @@ export default async function Page() {
   prices.sort((a, b) => (a.unit_amount ?? 0) - (b.unit_amount ?? 0));
 
   return (
-    <main className='flex flex-col items-center pt-6 md:pt-16 [&_*]:select-none'>
+    <main className='relative flex flex-col items-center pt-6 md:pt-16 [&_*]:select-none'>
+      {/* Overlay gradient lining */}
+      <div
+        className={cn(
+          'pointer-events-none absolute z-10 -mt-6 h-full w-full md:-mt-16',
+          'animate-pulse',
+          'shadow-[inset_0_0_50px_10px_rgba(147,0,255,0.25)] dark:shadow-[inset_0_0_50px_10px_rgba(147,0,255,0.75)]'
+        )}
+      />
       <div className='h-auto w-full md:h-48 md:w-96'>
         <DiamondScene />
       </div>

diff --git a/app/shop/server/expire-checkout-session.ts b/app/shop/server/expire-checkout-session.ts
diff --git a/app/shop/shop-item-carousel.tsx b/app/shop/shop-item-carousel.tsx
@@ -68,18 +68,8 @@ export function ShopItemCarousel({ products }: ShopItemCarouselProps) {
               style={{
                 boxShadow: (() => {
                   const radius = product.price * 3;
-                  const spread = product.price * 1.1;
-                  const color = (() => {
-                    switch (product.price) {
-                      case 2:
-                        return 'hsl(260, 100%, 50%)';
-                      case 3:
-                        return 'hsl(270, 100%, 50%)';
-                      case 5:
-                        return 'hsl(280, 100%, 50%)';
-                    }
-                  })();
-                  return `0 0 ${radius}px ${spread}px ${color}`;
+                  const spread = product.price * 2;
+                  return `0 0 ${radius}px ${spread}px rgba(147,0,255,0.5)`;
                 })(),
                 border: '1px solid rgba(147,0,255,0.5)',
               }}
@@ -99,6 +89,7 @@ export function ShopItemCarousel({ products }: ShopItemCarouselProps) {
                   </span>
                   <Button
                     variant='outline'
+                    className='hover:bg-purple-600'
                     onClick={() =>
                       startPurchasing(async () => {
                         const paymentLink = await createPaymentLink({

diff --git a/components/header/user-sign-in-portal.tsx b/components/header/user-sign-in-portal.tsx
@@ -160,7 +160,7 @@ export function UserSignInPortal() {
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent loop sideOffset={10} align='end'>
-          <DropdownMenuLabel className='flex flex-row items-center justify-center gap-x-1'>
+          <DropdownMenuLabel className='flex flex-row items-center justify-end gap-x-1'>
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button