fix(header): unify header button size

src/app/collective-rewards/user/components/Button/BecomeABuilderButton.tsx

@@ -1,6 +1,5 @@
 import { useBuilderContext } from '@/app/collective-rewards/user'
 import { useModal } from '@/app/user/Balances/hooks/useModal'
-import { Button } from '@/components/Button'
 import { LoadingSpinner } from '@/components/LoadingSpinner'
 import { BecomeABuilderModal, openKYC } from '@/components/Modal/BecomeABuilderModal'
 import { Typography } from '@/components/Typography'
@@ -9,6 +8,7 @@ import { Address } from 'viem'
 import { Builder, BuilderState } from '@/app/collective-rewards/types'
 import { isBuilderDeactivated, isBuilderKycRevoked, useHandleErrors } from '@/app/collective-rewards/utils'
 import { Popover } from '@/components/Popover'
+import { HeaderButton } from '@/components/Button'
 
 type ExtendedBuilderState = BuilderState | 'deactivated' | 'paused'
 type StatusBadgeProps = {
@@ -19,9 +19,9 @@ const BuilderRegistrationButton = () => {
   const modal = useModal()
   return (
     <>
-      <Button variant="white" onClick={modal.openModal}>
+      <HeaderButton variant="white" onClick={modal.openModal}>
         Become a builder
-      </Button>
+      </HeaderButton>
       {modal.isModalOpened && <BecomeABuilderModal onClose={modal.closeModal} />}
     </>
   )
@@ -51,7 +51,7 @@ const StatusBadge: FC<StatusBadgeProps> = ({ builderState }) => {
         size="small"
         trigger="hover"
       >
-        <Button onClick={openKYC}>Submit KYC</Button>
+        <HeaderButton onClick={openKYC}>Submit KYC</HeaderButton>
       </Popover>
     </StatusBadgeSection>
   )

src/app/proposals/components/HeaderSection.tsx

@@ -1,8 +1,8 @@
-import Link from 'next/link'
 import { Paragraph, HeaderTitle } from '@/components/Typography'
-import { Button } from '@/components/Button'
 import { Popover } from '@/components/Popover'
 import { Dropdown, prepareProposalsData } from '@/components/dropdown'
+import { useRouter } from 'next/navigation'
+import { HeaderButton } from '@/components/Button'
 
 export const HeaderSection = ({ createProposalDisabled = true, threshold = '' }) => (
   <div className="flex flex-row justify-between container">
@@ -15,31 +15,31 @@ export const HeaderSection = ({ createProposalDisabled = true, threshold = '' })
         }
         data={prepareProposalsData}
       />
-      {createProposalDisabled ? (
-        <Popover
-          content={
-            <Paragraph variant="normal" className="text-sm">
-              You need at least {threshold} Voting Power to create a proposal. The easiest way to get more
-              Voting Power is to Stake more RIF.
-            </Paragraph>
-          }
-          trigger="hover"
-          background="dark"
-          size="small"
-        >
-          <CreateProposalButton disabled />
-        </Popover>
-      ) : (
-        <CreateProposalButton />
-      )}
+
+      <Popover
+        content={
+          <Paragraph variant="normal" className="text-sm">
+            You need at least {threshold} Voting Power to create a proposal. The easiest way to get more
+            Voting Power is to Stake more RIF.
+          </Paragraph>
+        }
+        disabled={!createProposalDisabled}
+        trigger="hover"
+        background="dark"
+        size="small"
+      >
+        <CreateProposalButton disabled={createProposalDisabled} />
+      </Popover>
     </div>
   </div>
 )
 
-const CreateProposalButton = ({ disabled = false }) => (
-  <Link href="/proposals/choose">
-    <Button className="h-12 whitespace-nowrap" disabled={disabled} data-testid="CreateProposal">
+const CreateProposalButton = ({ disabled = false }) => {
+  const { push } = useRouter()
+
+  return (
+    <HeaderButton disabled={disabled} data-testid="CreateProposal" onClick={() => push('/proposals/choose')}>
       Create Proposal
-    </Button>
-  </Link>
-)
+    </HeaderButton>
+  )
+}

src/components/Button/HeaderButton.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react'
+import { Button, ButtonProps } from '.'
+import { cn } from '@/lib/utils'
+
+export const HeaderButton: FC<ButtonProps> = ({ className, children, ...buttonProps }) => {
+  return (
+    <Button className={cn('h-12 whitespace-nowrap', className)} {...buttonProps}>
+      {children}
+    </Button>
+  )
+}

src/components/Button/index.ts

@@ -1 +1,2 @@
 export * from './Button'
+export * from './HeaderButton'

src/components/Tabs/Tabs.tsx

@@ -35,6 +35,7 @@ const TabsTrigger = forwardRef<
     <TabsPrimitive.Trigger
       ref={ref}
       className={cn(
+        'h-12 whitespace-nowrap',
         'data-[state=active]:rounded-md data-[state=active]:bg-primary',
         'data-[state=inactive]:font-light data-[state=inactive]:text-disabled-primary',
         'px-[16px] py-[8px]',