clients/portal: adjust portal elements order

polarsource · Dec 20, 2024 · f2632dd · f2632dd
1 parent 17f8227
commit f2632dd
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 27 deletions.
diff --git a/clients/apps/web/src/components/CustomerPortal/CustomerPortalOrder.tsx b/clients/apps/web/src/components/CustomerPortal/CustomerPortalOrder.tsx
@@ -5,10 +5,8 @@ import {
   useCustomerBenefitGrants,
   useCustomerOrderInvoice,
 } from '@/hooks/queries'
-import { markdownOptions } from '@/utils/markdown'
 import { organizationPageLink } from '@/utils/nav'
 import { CustomerOrder, PolarAPI } from '@polar-sh/sdk'
-import Markdown from 'markdown-to-jsx'
 import Link from 'next/link'
 import Button from 'polarkit/components/ui/atoms/button'
 import { List, ListItem } from 'polarkit/components/ui/atoms/list'
@@ -40,18 +38,22 @@ const CustomerPortalOrder = ({
     <>
       <div className="flex h-full flex-col gap-12">
         <div className="flex w-full flex-col gap-8">
-          <h1 className="text-3xl font-medium">{order.product.name}</h1>
-          {order.product.description ? (
-            <div className="prose dark:prose-invert prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl prose-h4:text-lg prose-h5:text-md prose-h6:text-sm dark:prose-headings:text-polar-50 dark:text-polar-300 max-w-4xl text-gray-800">
-              <Markdown options={markdownOptions}>
-                {order.product.description}
-              </Markdown>
+          {(benefitGrants?.items.length ?? 0) > 0 && (
+            <div className="flex flex-col gap-4">
+              <List>
+                {benefitGrants?.items.map((benefitGrant) => (
+                  <ListItem
+                    key={benefitGrant.id}
+                    className="py-6 hover:bg-transparent dark:hover:bg-transparent"
+                  >
+                    <BenefitGrant api={api} benefitGrant={benefitGrant} />
+                  </ListItem>
+                ))}
+              </List>
             </div>
-          ) : (
-            <></>
           )}
 
-          <ShadowBox className="flex flex-col gap-8">
+          <ShadowBox className="flex flex-col gap-8 dark:border-transparent">
             <h3 className="text-lg font-medium">{order.product.name}</h3>
             <div className="flex flex-col gap-4">
               <h1 className="text-4xl font-light">
@@ -92,19 +94,6 @@ const CustomerPortalOrder = ({
                 )}
             </div>
           </ShadowBox>
-
-          {(benefitGrants?.items.length ?? 0) > 0 && (
-            <div className="flex flex-col gap-4">
-              <h3 className="text-lg font-medium">Benefits</h3>
-              <List>
-                {benefitGrants?.items.map((benefitGrant) => (
-                  <ListItem key={benefitGrant.id}>
-                    <BenefitGrant api={api} benefitGrant={benefitGrant} />
-                  </ListItem>
-                ))}
-              </List>
-            </div>
-          )}
         </div>
 
         <div className="flex w-full flex-col gap-8"></div>

diff --git a/clients/apps/web/src/components/CustomerPortal/CustomerPortalSubscription.tsx b/clients/apps/web/src/components/CustomerPortal/CustomerPortalSubscription.tsx
@@ -68,12 +68,11 @@ const CustomerPortalSubscription = ({
 
           {(benefitGrants?.items.length ?? 0) > 0 && (
             <div className="flex flex-col gap-4">
-              <h3 className="text-lg font-medium">Benefits</h3>
               <List>
                 {benefitGrants?.items.map((benefitGrant) => (
                   <ListItem
                     key={benefitGrant.id}
-                    className="hover:bg-transparent dark:hover:bg-transparent"
+                    className="py-6 hover:bg-transparent dark:hover:bg-transparent"
                   >
                     <BenefitGrant api={api} benefitGrant={benefitGrant} />
                   </ListItem>

diff --git a/clients/apps/web/src/components/Subscriptions/SubscriptionDetails.tsx b/clients/apps/web/src/components/Subscriptions/SubscriptionDetails.tsx
@@ -35,7 +35,7 @@ export const SubscriptionDetails = ({
   }
 
   return (
-    <ShadowBox className="flex w-full flex-col gap-y-6">
+    <ShadowBox className="flex w-full flex-col gap-y-6 dark:border-transparent">
       <div className="flex flex-row items-start justify-between">
         <div className="flex flex-col gap-y-4">
           <h3 className="truncate text-2xl">{subscription.product.name}</h3>