Dashboard: dedicated engine header UI tweak on mobile, Tab component tweaks

MananTank · MananTank · commit 91ade0be0595 · 2025-08-04T22:33:20.000+05:30
diff --git a/apps/dashboard/src/@/components/batch-upload/batch-lazy-mint.tsx b/apps/dashboard/src/@/components/batch-upload/batch-lazy-mint.tsx
@@ -324,7 +324,6 @@ function SelectReveal(props: {
       {canCreateDelayedRevealBatch && (
         <TabButtons
           containerClassName="mb-8"
-          tabClassName="!text-sm"
           tabs={[
             {
               name: "Reveal upon mint",
diff --git a/apps/dashboard/src/@/components/blocks/code/code-segment.client.tsx b/apps/dashboard/src/@/components/blocks/code/code-segment.client.tsx
@@ -95,7 +95,6 @@ export const CodeSegment: React.FC<CodeSegmentProps> = ({
       {!hideTabs && (
         <TabButtons
           hideBottomLine={!!onlyTabs}
-          tabClassName="text-sm gap-2 !text-sm"
           tabContainerClassName="px-3 pt-1.5 gap-0.5"
           tabIconClassName="size-4"
           tabs={environments.map((env) => ({
diff --git a/apps/dashboard/src/@/components/contract-components/contract-publish-form/factory-fieldset.tsx b/apps/dashboard/src/@/components/contract-components/contract-publish-form/factory-fieldset.tsx
@@ -30,7 +30,6 @@ export const FactoryFieldset: React.FC<FactoryFieldsetProps> = ({
       </p>
 
       <TabButtons
-        tabClassName="!text-sm font-semibold"
         tabs={[
           {
             name: "Default Factory",
diff --git a/apps/dashboard/src/@/components/contract-components/contract-publish-form/landing-fieldset.tsx b/apps/dashboard/src/@/components/contract-components/contract-publish-form/landing-fieldset.tsx
@@ -144,7 +144,6 @@ export function LandingFieldset({
         </p>
 
         <TabButtons
-          tabClassName="!text-sm"
           tabs={[
             {
               name: "Write",
@@ -226,7 +225,6 @@ export function LandingFieldset({
                 </p>
               )}
               <TabButtons
-                tabClassName="!text-sm"
                 tabs={[
                   {
                     name: "Write",
diff --git a/apps/dashboard/src/@/components/contracts/code-overview.tsx b/apps/dashboard/src/@/components/contracts/code-overview.tsx
@@ -743,7 +743,6 @@ export function CodeOverview(props: {
                   <div className="bg-background">
                     <TabButtons
                       tabs={tabList}
-                      tabClassName="!text-sm"
                       tabContainerClassName="px-3 pt-2"
                     />
                   </div>
diff --git a/apps/dashboard/src/@/components/contracts/functions/contract-function.tsx b/apps/dashboard/src/@/components/contracts/functions/contract-function.tsx
@@ -332,7 +332,6 @@ export const ContractFunctionsPanel: React.FC<ContractFunctionsPanelProps> = ({
           <div className="flex flex-col h-full relative">
             <TabButtons
               tabContainerClassName="px-3 pt-2"
-              tabClassName="!text-sm"
               tabs={[
                 ...(viewFunctions.length > 0
                   ? [
diff --git a/apps/dashboard/src/@/components/ui/DatePickerWithRange.tsx b/apps/dashboard/src/@/components/ui/DatePickerWithRange.tsx
@@ -79,7 +79,6 @@ export function DatePickerWithRange(props: {
             <div className={cn("px-4", !props.header && "py-4")}>
               <TabButtons
                 activeTabClassName="!bg-inverted !text-inverted-foreground"
-                tabClassName="!text-sm"
                 tabContainerClassName="gap-2"
                 tabs={[
                   {
diff --git a/apps/dashboard/src/@/components/ui/tabs.tsx b/apps/dashboard/src/@/components/ui/tabs.tsx
@@ -56,7 +56,7 @@ export function TabLinks(props: {
                 <Link
                   aria-disabled={tab.isDisabled}
                   className={cn(
-                    "relative h-auto rounded-lg px-3 font-normal text-muted-foreground text-sm lg:text-sm",
+                    "relative inline-flex h-auto items-center gap-1.5 rounded-lg font-medium hover:bg-accent !px-3",
                     !tab.isActive && !tab.isDisabled && "hover:text-foreground",
                     tab.isDisabled && "pointer-events-none",
                     tab.isActive && "!text-foreground",
@@ -125,7 +125,7 @@ export function TabButtons(props: {
               >
                 <Button
                   className={cn(
-                    "relative inline-flex h-auto items-center gap-1.5 rounded-lg px-2 font-medium text-sm hover:bg-accent lg:px-3 lg:text-base",
+                    "relative inline-flex h-auto items-center gap-1.5 rounded-lg font-medium hover:bg-accent !px-3",
                     !tab.isActive &&
                       "text-muted-foreground hover:text-foreground",
                     tab.isDisabled && "cursor-not-allowed opacity-50",
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-button.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/components/list-button.tsx
@@ -64,8 +64,6 @@ export const CreateListingButton: React.FC<CreateListingButtonProps> = ({
           {isInsightSupported ? (
             <>
               <TabButtons
-                tabClassName="text-sm gap-2 !text-sm"
-                tabContainerClassName="gap-0.5"
                 tabs={LISTING_MODES.map((mode) => ({
                   isActive: mode === listingMode,
                   name: mode,
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx
@@ -157,7 +157,6 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
           </div>
 
           <TabButtons
-            tabClassName="!text-sm"
             tabs={[
               {
                 isActive: tab === "Details",
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/token-viewer/token-viewer.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/token-viewer/token-viewer.tsx
@@ -338,7 +338,6 @@ function TokenInfoUI(props: {
             {props.type === "erc1155" && (
               <div className="border-t border-dashed pt-2">
                 <TabButtons
-                  tabClassName="!text-sm"
                   tabs={[
                     {
                       isActive: tab === "traits",
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.tsx
@@ -60,7 +60,6 @@ export function TeamMembersSettingsPage(props: {
       <div className="h-10" />
 
       <TabButtons
-        tabClassName="!text-sm"
         tabs={[
           {
             isActive: manageTab === "members",
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx
@@ -22,7 +22,6 @@ export function IntegrateAPIKeyCodeTabs(props: {
   return (
     <div>
       <TabButtons
-        tabClassName="!text-sm"
         tabs={Object.entries(tabNames).map(([key, name]) => ({
           isActive: tab === key,
           name,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/WaitingForIntegrationCard/WaitingForIntegrationCard.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/WaitingForIntegrationCard/WaitingForIntegrationCard.tsx
@@ -29,7 +29,6 @@ export function WaitingForIntegrationCard(props: {
         {/* Code */}
         <div>
           <TabButtons
-            tabClassName="!text-sm"
             tabs={props.codeTabs.map((tab) => ({
               isActive: tab.label === selectedTab,
               name: tab.label,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx
@@ -44,7 +44,6 @@ export const EngineAccessTokens: React.FC<EngineAccessTokensProps> = ({
       {supportsKeyPairAuth && (
         <TabButtons
           containerClassName="mb-4 mt-3"
-          tabClassName="!text-sm"
           tabs={[
             {
               name: "Standard",
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx
@@ -82,7 +82,6 @@ export function EngineWalletConfig({
       </div>
 
       <TabButtons
-        tabClassName="font-medium !text-sm"
         tabs={filteredWalletOptions.map(({ key, name }) => ({
           icon:
             (key === "aws-kms" && !isAwsKmsConfigured) ||
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/BuyWidgetFTUX.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/components/BuyWidgetFTUX.tsx
@@ -27,7 +27,6 @@ export function BuyWidgetFTUX(props: {
 
       <div className="p-4 pt-2">
         <TabButtons
-          tabClassName="!text-sm"
           tabs={[
             {
               isActive: tab === "embed",
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/upload-nfts/upload-nfts.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/upload-nfts/upload-nfts.tsx
@@ -30,7 +30,6 @@ export function UploadNFTsFieldset(props: {
     <StepCard nextButton={undefined} prevButton={undefined} title="Upload NFTs">
       <TabButtons
         containerClassName="pt-2 px-4 md:px-6"
-        tabClassName="!text-sm"
         tabs={[
           {
             isActive: props.nftData.type === "single",
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/layout.tsx
@@ -31,7 +31,7 @@ function TransactionsLayout(props: {
       <div className="pt-4 lg:pt-6">
         {/* header */}
         <div className="container flex max-w-7xl flex-col gap-4">
-          <div className="flex flex-row items-center justify-between">
+          <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
             <div className="flex flex-col">
               <h1 className="mb-1 flex items-center gap-2 font-semibold text-3xl tracking-tight">
                 Transactions{" "}
@@ -53,15 +53,20 @@ function TransactionsLayout(props: {
                 </Link>
               </div>
             </div>
-            <Button variant="outline" asChild className="rounded-full">
+            <Button
+              variant="outline"
+              asChild
+              className="rounded-full bg-background"
+              size="sm"
+            >
               <Link href={`${projectLayoutPath}/engine/dedicated`}>
                 View Dedicated Engine
               </Link>
             </Button>
           </div>
         </div>
 
-        <div className="h-4" />
+        <div className="h-5" />
 
         {/* Nav */}
         <TabPathLinks
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/try-it-out.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/try-it-out.tsx
@@ -37,7 +37,6 @@ export function TryItOut({ useEngineAPI }: TryItOutProps) {
 
       <div>
         <TabButtons
-          tabClassName="!text-sm"
           tabs={[
             {
               isActive: activeTab === "curl",
@@ -166,7 +165,7 @@ curl -X POST "${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/transactions" \\
   -H "x-secret-key: <your-project-secret-key>" \\
   -d '{
     "chainId": "84532",
-    "from": "<your-server-wallet-address>",  
+    "from": "<your-server-wallet-address>",
     "transactions": [
       {
         "type": "contractCall",
@@ -191,7 +190,7 @@ const response = await fetch(
       "from": "<your-server-wallet-address>",
       "transactions": [
         {
-          "type": "contractCall", 
+          "type": "contractCall",
           "contractAddress": "0x...",
           "method": "function mintTo(address to, uint256 amount)",
           "params": ["0x...", "100"]
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/tx/[id]/transaction-details-ui.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/tx/[id]/transaction-details-ui.tsx
@@ -384,7 +384,6 @@ function TransactionParametersCard({
       </CardHeader>
       <CardContent className="space-y-4">
         <TabButtons
-          tabClassName="!text-sm"
           tabs={[
             {
               isActive: activeTab === "decoded",

Original file line number	Diff line number	Diff line change
`@@ -324,7 +324,6 @@ function SelectReveal(props: {`
`324`	`324`	`{canCreateDelayedRevealBatch && (`
`325`	`325`	`<TabButtons`
`326`	`326`	`containerClassName="mb-8"`
`327`		`- tabClassName="!text-sm"`
`328`	`327`	`tabs={[`
`329`	`328`	`{`
`330`	`329`	`name: "Reveal upon mint",`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,6 @@ export const FactoryFieldset: React.FC<FactoryFieldsetProps> = ({`
`30`	`30`	`</p>`
`31`	`31`
`32`	`32`	`<TabButtons`
`33`		`- tabClassName="!text-sm font-semibold"`
`34`	`33`	`tabs={[`
`35`	`34`	`{`
`36`	`35`	`name: "Default Factory",`
Original file line number	Diff line number	Diff line change
`@@ -144,7 +144,6 @@ export function LandingFieldset({`
`144`	`144`	`</p>`
`145`	`145`
`146`	`146`	`<TabButtons`
`147`		`- tabClassName="!text-sm"`
`148`	`147`	`tabs={[`
`149`	`148`	`{`
`150`	`149`	`name: "Write",`
`@@ -226,7 +225,6 @@ export function LandingFieldset({`
`226`	`225`	`</p>`
`227`	`226`	`)}`
`228`	`227`	`<TabButtons`
`229`		`- tabClassName="!text-sm"`
`230`	`228`	`tabs={[`
`231`	`229`	`{`
`232`	`230`	`name: "Write",`
Original file line number	Diff line number	Diff line change
`@@ -79,7 +79,6 @@ export function DatePickerWithRange(props: {`
`79`	`79`	`<div className={cn("px-4", !props.header && "py-4")}>`
`80`	`80`	`<TabButtons`
`81`	`81`	`activeTabClassName="!bg-inverted !text-inverted-foreground"`
`82`		`- tabClassName="!text-sm"`
`83`	`82`	`tabContainerClassName="gap-2"`
`84`	`83`	`tabs={[`
`85`	`84`	`{`
Original file line number	Diff line number	Diff line change
`@@ -157,7 +157,6 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({`
`157`	`157`	`</div>`
`158`	`158`
`159`	`159`	`<TabButtons`
`160`		`- tabClassName="!text-sm"`
`161`	`160`	`tabs={[`
`162`	`161`	`{`
`163`	`162`	`isActive: tab === "Details",`