Add Changelog Fragment

Author: kaja-osojnik

.changelog/2258.trivial.md

@@ -0,0 +1 @@
+Update Box element.

src/app/components/PageLayout/index.tsx

@@ -7,6 +7,7 @@ import { useScopeParam } from '../../hooks/useScopeParam'
 import { NetworkOfflineBanner, RuntimeOfflineBanner, ConsensusOfflineBanner } from '../OfflineBanner'
 import { Search } from '../Search'
 import { useIsApiReachable } from '../OfflineBanner/hook'
+import { useTheme } from '@mui/material/styles'
 
 interface PageLayoutProps {
   mobileFooterAction?: ReactNode
@@ -16,6 +17,7 @@ export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ children, m
   const { isMobile, isTablet } = useScreenSize()
   const scope = useScopeParam()
   const isApiReachable = useIsApiReachable(scope?.network ?? 'mainnet').reachable
+  const theme = useTheme()
 
   return (
     <>
@@ -25,7 +27,12 @@ export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ children, m
       {scope && scope.layer === 'consensus' && <ConsensusOfflineBanner />}
       <div className="min-h-screen">
         <Header />
-        <div className="border-8 md:border-[15px] border-transparent px-0 md:px-[4%] pt-4 md:pt-6 md:border-t-0">
+        <div
+          className="border-8 md:border-[15px] border-transparent px-0 md:px-[4%] pt-4 md:pt-6 md:border-t-0"
+          style={{
+            borderColor: theme.palette.layout.border,
+          }}
+        >
           {!isMobile && (
             <div className="mb-6">
               <Search scope={scope} variant={isTablet ? 'icon' : 'button'} disabled={!isApiReachable} />

src/app/components/Tokens/TokenDetails.tsx

@@ -42,7 +42,7 @@ export const TokenDetails: FC<{
           address={token.eth_contract_addr ?? token.contract_addr}
           name={token.name}
         />
-        <div className="ml-3 font-bold text-muted-foreground whitespace-nowrap">
+        <div className="ml-2 font-bold text-muted-foreground whitespace-nowrap">
           <HighlightedText text={token.symbol} />
         </div>
       </dd>

src/app/components/Tokens/TokenLinkWithIcon.tsx

@@ -16,7 +16,7 @@ export const TokenLinkWithIcon: FC<{
   const { t } = useTranslation()
   const { metadata } = useAccountMetadata(scope, address)
   return (
-    <div className="flex items-center gap-4">
+    <div className="flex items-center gap-2">
       <Tooltip
         placement="top"
         arrow

src/app/components/Tooltip/MaybeWithTooltip.tsx

@@ -28,9 +28,7 @@ export const MaybeWithTooltip: FC<MaybeWithTooltipProps> = ({ title, children, s
     <Tooltip
       placement="top"
       title={
-        <div className="flex items-center gap-2 md:mx-0 -mx-3 min-w-0 [overflow-wrap:anywhere] rounded-lg">
-          {title}
-        </div>
+        <div className="flex items-center gap-2 md:mx-0 -mx-3 min-w-0 [overflow-wrap:anywhere]">{title}</div>
       }
       disableFocusListener={!title}
       disableHoverListener={!title}