styling updates

coinbase · Nov 14, 2024 · 3278f5f · 3278f5f
1 parent 6ed65c8
commit 3278f5f
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 16 deletions.
diff --git a/site/docs/components/Code.tsx b/site/docs/components/Code.tsx
@@ -10,7 +10,7 @@ export function Code({ children, variant = 'gray', className }: CodeProps) {
   return (
     <code
       className={cn(
-        'box-border h-fit rounded-[calc(.5px+.2em)] px-1 py-0.5 font-mono leading-tight',
+        'box-border h-fit rounded-[calc(.5px+.2em)] px-1 py-0.5 font-mono text-[0.8rem] leading-tight',
         variant === 'blue' &&
           'bg-blue-100/60 text-blue-500 dark:bg-blue-900/60 dark:text-blue-400',
         variant === 'gray' &&

diff --git a/site/docs/components/PropsTable.tsx b/site/docs/components/PropsTable.tsx
@@ -1,5 +1,5 @@
 import { Code } from './Code.tsx';
-// biome-ignore lint/style/noNamespaceImport: TODO: fix
+// biome-ignore lint/style/noNamespaceImport: Recommended by Radix
 import * as Popover from '@radix-ui/react-popover';
 import InfoIcon from './svg/infoIcon.tsx';
 export type PropDef = {
@@ -24,8 +24,8 @@ const PropsTable = ({ data }: { data: PropDef[] }) => {
           >
             Prop
           </th>
-          <th className="pb-1 text-left font-normal">Type</th>
-          <th className="pb-1 text-left font-normal">Default</th>
+          <th className="w-[43%] pb-1 text-left font-normal">Type</th>
+          <th className="w-1/5 pb-1 text-left font-normal">Default</th>
         </tr>
       </thead>
       <tbody>
@@ -37,14 +37,13 @@ const PropsTable = ({ data }: { data: PropDef[] }) => {
                 {prop.description && (
                   <Popover.Root>
                     <Popover.Trigger>
-                      {/* TODO: make accessible */}
                       <InfoIcon className="size-[14px] text-[#4c4c4c] dark:text-stone-400" />
                     </Popover.Trigger>
                     <Popover.Portal>
                       <Popover.Content
                         side="top"
                         align="center"
-                        className="data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 rounded-md border border-gray-200 bg-white p-4 text-sm shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in dark:border-stone-800 dark:bg-stone-900"
+                        className="data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 rounded-md border border-gray-200 bg-white p-3 text-sm shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in dark:border-stone-800 dark:bg-stone-900"
                         style={{ maxWidth: 350 }}
                         onOpenAutoFocus={(event) => {
                           event.preventDefault();

diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx
@@ -654,13 +654,4 @@ Additional components for customizing the wallet interface include:
 - [`<Name />`](/identity/name) - Shows the user's name or ENS.
 - [`<Badge />`](/identity/badge) - Can be used to display additional user status or information.
 - [`<Address />`](/identity/address) - Shows the user's wallet address.
-- `<EthBalance />` - Displays the user's ETH balance.
-
-## Component types
-
-- [`WalletReact`](/wallet/types#walletreact)
-- [`ConnectWalletReact`](/wallet/types#connectwalletreact)
-- [`WalletDropdownReact`](/wallet/types#walletdropdownreact)
-- [`WalletDropdownBasenameReact`](/wallet/types#walletdropdownbasenamereact)
-- [`WalletDropdownDisconnectReact`](/wallet/types#walletdropdowndisconnectreact)
-- [`WalletDropdownLinkReact`](/wallet/types#walletdropdownlinkreact)
+- `<EthBalance />` - Displays the user's ETH balance.