feat(studio): log drains tidy up sheet footer (supabase#40085)

* feat: log drain add sheet footer revamp

* chore: remove commented elements and unused imports

* fix: correct docs link for pricing

Author: kemaldotearth

apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx

@@ -6,7 +6,7 @@ import { toast } from 'sonner'
 import { z } from 'zod'
 
 import { IS_PLATFORM, useFlag, useParams } from 'common'
-import { DocsButton } from 'components/ui/DocsButton'
+import Link from 'next/link'
 import { LogDrainData, useLogDrainsQuery } from 'data/log-drains/log-drains-query'
 import { DOCS_URL } from 'lib/constants'
 import {
@@ -34,6 +34,7 @@ import {
   SheetSection,
   SheetTitle,
   Switch,
+  cn,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { InfoTooltip } from 'ui-patterns/info-tooltip'
@@ -571,33 +572,36 @@ export function LogDrainDestinationSheetForm({
 
         <div className="mt-auto">
           <SheetSection
-            className={`border-t bg-background-alternative-200 mt-auto ${!IS_PLATFORM ? 'hidden' : ''}`}
+            className={cn(
+              `border-t bg-background-alternative-200 mt-auto py-1.5 ${!IS_PLATFORM ? 'hidden' : ''}`
+            )}
           >
-            <FormItemLayout
-              isReactForm={false}
-              layout="horizontal"
-              label={
-                <div className="flex flex-col gap-y-2 text-foreground-light">
-                  Additional drain cost
-                  <DocsButton
-                    abbrev={false}
-                    className="w-min"
-                    href={`${DOCS_URL}/guides/platform/log-drains`}
-                  />
-                </div>
-              }
-            >
-              <ul className="text-right text-foreground-light">
-                <li className="text-brand-link text-base" translate="no">
-                  $60 per drain per month
-                </li>
-                <li translate="no">+ $0.20 per million events</li>
-                <li translate="no">+ $0.09 per GB egress</li>
-              </ul>
-            </FormItemLayout>
+            <ul className="text-right text-foreground-light divide-y divide-dashed text-sm">
+              <li className="flex items-center justify-between gap-2 py-2" translate="no">
+                <span className="text-foreground-lighter">Additional drain cost</span>
+                <span className="text-foreground">$60 per month</span>
+              </li>
+              <li className="flex items-center justify-between gap-2 py-2" translate="no">
+                <span className="text-foreground-lighter">Per million events</span>
+                <span>+$0.20</span>
+              </li>
+              <li className="flex items-center justify-between gap-2 py-2" translate="no">
+                <span className="text-foreground-lighter">Per GB egress</span>
+                <span>+$0.09</span>
+              </li>
+            </ul>
           </SheetSection>
 
-          <SheetFooter className="p-content !mt-0">
+          <SheetFooter className="p-content !mt-0 !justify-between !flex-row w-full items-center">
+            <span className="text-sm text-foreground-light">
+              <span>See full pricing breakdown</span>{' '}
+              <Link
+                href={`${DOCS_URL}/guides/platform/manage-your-usage/log-drains`}
+                className="text-foreground underline underline-offset-2 decoration-foreground-muted hover:decoration-foreground transition-all"
+              >
+                here
+              </Link>
+            </span>
             <Button form={FORM_ID} loading={isLoading} htmlType="submit" type="primary">
               Save destination
             </Button>