Merge pull request #5 from dappcamp/staging

Update styles

app/components/LogoCard.js

@@ -13,17 +13,17 @@ export default function LogoCard({ item, onClick }) {
       className="logo-card hover:text-blue-500"
     >
       <Card.Body css={{ p: 0 }}>
-        <img
-          src={logoUrl}
-          width={'36px'}
-          height={'36px'}
-          className="mx-auto my-2"
-          alt={item.title}
-        />
+        <div className="item-logo-container my-2 mx-auto">
+          <img
+            src={logoUrl}
+            className="item-logo"
+            alt={item.title}
+          />
+        </div>
       </Card.Body>
-      <Card.Footer style={{ padding: "10px" }}>
+      <Card.Footer style={{ padding: "8px" }}>
         <Row wrap="wrap" justify="space-between">
-          <p className='font-semibold text-gray-600 text-xs text-center w-full' style={{ maxWidth: "84px" }}>{item.name}</p>
+          <p className='font-semibold text-gray-600 text-xs text-center w-full single-line' style={{ maxWidth: "84px" }}>{item.name}</p>
         </Row>
       </Card.Footer>
     </Card>

app/pages/index.tsx

@@ -87,7 +87,7 @@ export default function Home({ tools }: { tools: Array<any> }) {
               className="mb-4"
               alt={currentItem.title}
             />
-            <h1 className="font-bold text-xl mb-2">{currentItem.name}</h1>
+            <h1 className="font-bold text-xl mb-2">{currentItem.full_name || currentItem.name}</h1>
             <p className="mb-3">{currentItem.description}</p>
             <div className="text-sm flex flex-col gap-2">
               <div className="detail">
@@ -160,7 +160,7 @@ export default function Home({ tools }: { tools: Array<any> }) {
           </div>
         </Modal.Body>
       </Modal>
-      <main className="max-w-10xl mx-auto px-4 py-4 lg:px-20 flex flex-col">
+      <main className="max-w-10xl mx-auto px-4 py-4 lg:py-6 lg:px-8 flex flex-col">
         <div>
           <div className="flex flex-wrap flex-col lg:flex-row w-full items-baseline lg:pb-6 lg:pt-4 position-relative">
             <div className="mb-2 lg:mb-0">
@@ -174,8 +174,8 @@ export default function Home({ tools }: { tools: Array<any> }) {
               <h1 className="block text-xl md:text-2xl xl:text-3xl font-bold text-gray-800">
                 Ethereum Developer Tooling Landscape
               </h1>
-              <p className="w-full hidden xl:block text-gray-600">
-                {`Ethereum and EVM compatible developer tooling landscape`}
+              <p className="w-full hidden xl:block text-gray-600 text-xs max-w-2xl lg:mx-auto">
+                {`This landscape represents a comprehensive list of tools that developers use when developing smart contracts on Ethereum and EVM-compatible chains. Scroll horizontally and vertically to view the whole landscape.`}
               </p>
             </div>
             <div className="mb-2 lg:mb-0 hidden lg:block">
@@ -192,7 +192,7 @@ export default function Home({ tools }: { tools: Array<any> }) {
           className="px-2 mt-4 lg:my-0 flex-1"
         >
           <div
-            className="mb-8 grid grid-rows-3 grid-cols-4 gap-x-10 px-4 text-center"
+            className="mb-8 grid grid-cols-4 gap-x-8 gap-y-12 px-4 text-center"
             style={{
               width: 'max-content',
               height: 'max-content',

app/styles/globals.css

@@ -21,3 +21,22 @@ main {
   text-decoration: underline;
   color: rgb(59 130 246);
 }
+
+.item-logo-container{
+  width: 36px;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.item-logo{
+  max-width: 100%;
+  max-height: 100%;
+}
+.single-line{
+  width: 100%;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}