fixed spacing of side-by-side detail elements

Author: MicahMaphet

packages/insight/src/components/block-details.tsx

@@ -163,7 +163,7 @@ const BlockDetails: FC<BlockDetailsProps> = ({currency, network, block}) => {
                       onClick={() =>
                         summary.previousBlockHash ? gotoBlock(summary.previousBlockHash) : null
                       }>
-                      {(summary.height > 0) ? summary.height - 1 : "None"}
+                      {(summary.height > 0) ? summary.height - 1 : 'None'}
                     </span>
                   </TileLink>
                 </Tile>

packages/insight/src/components/data-box.tsx

@@ -1,7 +1,7 @@
-import {Children, FC, ReactNode} from "react";
-import {useTheme} from "styled-components";
+import {Children, FC, ReactNode} from 'react';
+import {useTheme} from 'styled-components';
 
-const DataBox: FC<{children: ReactNode, label: string}> = ({children, label}) => {
+const DataBox: FC<{children: ReactNode, label: string, style?: object}> = ({children, label, style}) => {
   const theme = useTheme();
   const modifiedChildren = typeof children === 'object' 
     ? Children.map(children as JSX.Element, (child: JSX.Element) => {
@@ -11,15 +11,17 @@ const DataBox: FC<{children: ReactNode, label: string}> = ({children, label}) =>
 
   return (
     <fieldset style={{
-      border: `1.5px solid ${theme.dark ? '#5f5f5f' : '#ccc'}`,
+      border: `2.5px solid ${theme.dark ? '#5f5f5f' : '#ccc'}`,
       borderRadius: '5px',
       padding: '0.1rem 0.4rem',
       wordBreak: 'break-all',
       whiteSpace: 'normal',
       width: 'fit-content',
-      height: 'fit-content'
+      height: 'fit-content',
+      margin: '0.7rem 0.2rem',
+      ...style
     }}>
-      <legend style={{margin: '-0.2rem 0.1rem'}}>{label}</legend>
+      <legend style={{fontWeight: 'bold', color: 'gray', margin: '-0.2rem 0.1rem'}}>{label}</legend>
       {modifiedChildren}
     </fieldset>
   );

packages/insight/src/components/transaction-details.tsx

@@ -214,21 +214,20 @@ const TransactionDetails: FC<TransactionDetailsProps> = ({
                                   </TextElipsis>
                                 </DataBox>
 
-                                <span style={{display: 'flex'}}>
-                                  <DataBox label='Tx Index'>
+                                <div style={{display: 'flex', gap: '0.7rem', margin: '0 0.2rem'}}>
+                                  <DataBox label='Tx Index' style={{margin: 0}}>
                                     <TextElipsis>
                                       {item.mintIndex}
                                     </TextElipsis>
                                   </DataBox>
-
                                   {item.uiConfirmations && confirmations > 0 ? (
-                                    <DataBox label='Confirmations'>
+                                    <DataBox label='Confirmations' style={{margin: 0}}>
                                       <ScriptText>
                                         {item.uiConfirmations + confirmations}
                                       </ScriptText>
                                     </DataBox>
                                   ) : null}
-                                </span>
+                                </div>
 
                                 {item.script && (
                                   <>