From e1607900c4666fd0f0e898f7a268c7ac6abd911f Mon Sep 17 00:00:00 2001
From: Caio Alexandre Troti Caetano <caio_aletroca@hotmail.com>
Date: Fri, 17 Jan 2025 14:03:01 -0300
Subject: [PATCH] :boom: fix: Fixed organization metadata padding

---
 locales/extracted/pt.json                     |  2 +-
 .../organizations/organizations-form.tsx      | 91 +++++++------------
 2 files changed, 34 insertions(+), 59 deletions(-)

diff --git a/locales/extracted/pt.json b/locales/extracted/pt.json
index 16adacf1..4c297d6b 100644
--- a/locales/extracted/pt.json
+++ b/locales/extracted/pt.json
@@ -331,4 +331,4 @@
   "settings.tabs.system": "Sistema",
   "notAuthorized.backToHome": "Voltar para Home",
   "notAuthorized.title": "Você não tem autorização para acessar esta página."
-}
+}
\ No newline at end of file
diff --git a/src/app/(routes)/settings/organizations/organizations-form.tsx b/src/app/(routes)/settings/organizations/organizations-form.tsx
index a6f3b621..fe5c6018 100644
--- a/src/app/(routes)/settings/organizations/organizations-form.tsx
+++ b/src/app/(routes)/settings/organizations/organizations-form.tsx
@@ -10,12 +10,6 @@ import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Button } from '@/components/ui/button'
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger
-} from '@/components/ui/collapsible'
-import { ChevronDown, ChevronUp } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { useIntl } from 'react-intl'
 import { MetadataField } from '@/components/form/metadata-field'
@@ -30,6 +24,11 @@ import {
 import { LoadingButton } from '@/components/ui/loading-button'
 import { omit } from 'lodash'
 import { OrganizationsFormParentIdField } from './organizations-form-parent-id-field'
+import {
+  PaperCollapsible,
+  PaperCollapsibleBanner,
+  PaperCollapsibleContent
+} from '@/components/transactions/primitives/paper-collapsible'
 
 type OrganizationsViewProps = {
   data?: OrganizationsType
@@ -313,58 +312,34 @@ export const OrganizationsForm = ({
               </CardContent>
             </Card.Root>
 
-            <Card.Root className="p-0 shadow">
-              <Collapsible
-                open={showMetadataCollapse}
-                onOpenChange={setShowMetadataCollapse}
-              >
-                <CardContent>
-                  <div className="flex items-center justify-between pt-6">
-                    <div>
-                      <Card.Header
-                        className="text-lg font-medium normal-case text-zinc-600"
-                        title={intl.formatMessage({
-                          id: 'common.metadata',
-                          defaultMessage: 'Metadata'
-                        })}
-                      />
-
-                      <p className="self-stretch text-xs font-normal italic text-zinc-400">
-                        {intl.formatMessage(
-                          {
-                            id: 'organizations.organizationForm.metadataRegisterCountText',
-                            defaultMessage:
-                              '{count} added {count, plural, =0 {records} one {record} other {records}}'
-                          },
-                          {
-                            count: Object.entries(metadataValue || 0).length
-                          }
-                        )}
-                      </p>
-                    </div>
-
-                    <CollapsibleTrigger
-                      className="content-end justify-end"
-                      asChild
-                    >
-                      <button className="inline-flex h-[25px] w-[25px] items-center justify-center rounded-full border-none">
-                        {showMetadataCollapse ? <ChevronUp /> : <ChevronDown />}
-                      </button>
-                    </CollapsibleTrigger>
-                  </div>
-                </CardContent>
-
-                <CollapsibleContent>
-                  <Separator />
-
-                  <CardContent className="pt-6">
-                    <React.Fragment>
-                      <MetadataField name="metadata" control={form.control} />
-                    </React.Fragment>
-                  </CardContent>
-                </CollapsibleContent>
-              </Collapsible>
-            </Card.Root>
+            <PaperCollapsible className="mb-32">
+              <PaperCollapsibleBanner className="flex items-center justify-between">
+                <p className="text-lg font-medium normal-case text-zinc-600">
+                  {intl.formatMessage({
+                    id: 'common.metadata',
+                    defaultMessage: 'Metadata'
+                  })}
+                </p>
+                <p className="text-xs italic text-shadcn-400">
+                  {intl.formatMessage(
+                    {
+                      id: 'organizations.organizationForm.metadataRegisterCountText',
+                      defaultMessage:
+                        '{count} added {count, plural, =0 {records} one {record} other {records}}'
+                    },
+                    {
+                      count: Object.entries(metadataValue || 0).length
+                    }
+                  )}
+                </p>
+              </PaperCollapsibleBanner>
+              <PaperCollapsibleContent>
+                <Separator orientation="horizontal" />
+                <div className="p-6">
+                  <MetadataField name="metadata" control={form.control} />
+                </div>
+              </PaperCollapsibleContent>
+            </PaperCollapsible>
           </div>
 
           <div className="grow space-y-6">