Merge pull request #201 from bento-platform/style/beacon-network

style: beacon network styling
bento-platform · Oct 10, 2024 · 2bb70b6 · 2bb70b6
2 parents 878cdd4 + 64c87b5
commit 2bb70b6
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 39 deletions.
diff --git a/src/js/components/Beacon/BeaconNetwork/NetworkBeacons.tsx b/src/js/components/Beacon/BeaconNetwork/NetworkBeacons.tsx
@@ -1,3 +1,4 @@
+import { Col, Row } from 'antd';
 import { useAppSelector } from '@/hooks';
 import type { NetworkBeacon } from '@/types/beaconNetwork';
 import NodeDetails from './NetworkNodeDetails/NodeDetails';
@@ -8,11 +9,13 @@ const NetworkBeacons = ({ beacons }: NetworkBeaconsProps) => {
   // for now, render all beacons from the start and update as they respond (NodeDetails component is memoized)
   // they could be shown optionally if network is very large (ie could just show only beacons with non-zero responses)
   return (
-    <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', maxWidth: '1200px', width: '100%' }}>
+    <Row gutter={[8, 8]} style={{ width: '100%', maxWidth: 1200 }}>
       {beacons.map((b) => (
-        <NodeDetails beacon={b} key={b.id} response={beaconResponses[b.id] ?? {}} />
+        <Col span={24} xl={12} key={b.id}>
+          <NodeDetails beacon={b} key={b.id} response={beaconResponses[b.id] ?? {}} />
+        </Col>
       ))}
-    </div>
+    </Row>
   );
 };
 

diff --git a/src/js/components/Beacon/BeaconNetwork/NetworkNodeDetails/NodeCountsDisplay.tsx b/src/js/components/Beacon/BeaconNetwork/NetworkNodeDetails/NodeCountsDisplay.tsx
@@ -17,7 +17,11 @@ const NodeCountsDisplay = ({
 
   return (
     <div style={{ display: 'flex', justifyContent: 'center' }}>
-      <Space direction="horizontal" size="middle" style={{ display: 'flex', alignItems: 'flex-start' }}>
+      <Space
+        direction="horizontal"
+        size="middle"
+        style={{ display: 'flex', alignItems: 'flex-start', flexWrap: 'wrap' }}
+      >
         {isFetchingQueryResponse ? (
           <div style={{ display: 'flex', flexDirection: 'column', margin: '6px 0' }}>
             <Skeleton.Input size="small" style={{ width: '330px', height: '20px' }} active />

diff --git a/src/js/components/Beacon/BeaconNetwork/NetworkNodeDetails/NodeDetails.tsx b/src/js/components/Beacon/BeaconNetwork/NetworkNodeDetails/NodeDetails.tsx
@@ -10,9 +10,14 @@ const { Link } = Typography;
 
 const LOGO_MAX_HEIGHT = '50px';
 const LOGO_MAX_WIDTH = '175px';
-const CARD_DEFAULT_WIDTH = '480px';
 const CARD_BODY_MIN_HEIGHT = '100px'; // fit stats without jumping
-const LINK_STYLE = { padding: '10px' };
+const LINK_STYLE = { padding: '4px' };
+
+const ApiErrorTag = ({ errorMessage }: { errorMessage: string }) => (
+  <Tooltip title={`Error response from beacon: ${errorMessage}`}>
+    <Tag color="red">error</Tag>
+  </Tooltip>
+);
 
 const NodeDetails = ({ beacon, response }: NodeDetailsProps) => {
   const { apiUrl, organization, overview } = beacon;
@@ -24,47 +29,32 @@ const NodeDetails = ({ beacon, response }: NodeDetailsProps) => {
     response;
 
   const logo = (
-    <img src={organization.logoUrl} style={{ maxHeight: LOGO_MAX_HEIGHT, maxWidth: LOGO_MAX_WIDTH, padding: '5px' }} />
+    <img
+      alt={`Logo for ${organization.name}`}
+      src={organization.logoUrl}
+      style={{ maxHeight: LOGO_MAX_HEIGHT, maxWidth: LOGO_MAX_WIDTH, padding: '4px' }}
+    />
   );
 
-  const orgName = <h4 style={{ paddingLeft: '15px' }}>{organization.name}</h4>;
+  const orgName = <h4 style={{ textOverflow: 'ellipsis', overflow: 'hidden' }}>{organization.name}</h4>;
 
   const logoAndName = (
-    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 16 }}>
       {logo}
       {orgName}
     </div>
   );
 
-  const assemblyTags = (
-    <>
-      {assemblies.map((a) => (
-        <Tag color="blue" key={a}>
-          {a}
-        </Tag>
-      ))}
-    </>
-  );
-
-  const ApiErrorTag = ({ errorMessage }: { errorMessage: string }) => (
-    <Tooltip title={`Error response from beacon: ${errorMessage}`}>
-      <Tag color="red">error</Tag>
-    </Tooltip>
-  );
+  const assemblyTags = assemblies.map((a) => (
+    <Tag color="blue" key={a}>
+      {a}
+    </Tag>
+  ));
 
   return (
     <Card
       title={logoAndName}
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        margin: '5px',
-        borderRadius: '10px',
-        padding: '5px',
-        maxWidth: CARD_DEFAULT_WIDTH,
-        width: '100%',
-        ...BOX_SHADOW,
-      }}
+      style={BOX_SHADOW}
       styles={{
         body: { flexGrow: 1, minHeight: CARD_BODY_MIN_HEIGHT },
         actions: { display: 'flex', alignItems: 'center' },

diff --git a/src/js/components/Search/SearchResultsPane.tsx b/src/js/components/Search/SearchResultsPane.tsx
@@ -58,21 +58,19 @@ const SearchResultsPane = ({
       <Card
         style={{
           borderRadius: '10px',
-          padding: '10px 33px',
           maxWidth: '1200px',
           width: '100%',
           // Set a minimum height (i.e., an expected final height, which can be exceeded) to prevent this component from
           // suddenly increasing in height after it loads. This is calculated from the sum of the following parts:
           //   chart (300)
           // + heading (24 + 8 [0.5em] bottom margin)
           // + card body padding (2*24 = 48)
-          // + card wrapper padding (2*10 = 20)
           // + border (2*1 = 2)
-          // = 402, or + 56 = 458 if any header content present
-          minHeight: resultsTitle || resultsExtra ? '458px' : '402px',
+          // = 382, or + 56 = 438 if any header content present
+          minHeight: resultsTitle || resultsExtra ? '438px' : '382px',
           ...BOX_SHADOW,
         }}
-        // styles={{ body: { padding: '-10px' }, header: {} }}
+        styles={{ body: { padding: '24px 40px' } }}
         loading={isFetchingData}
         title={resultsTitle}
         extra={resultsExtra}