feat: UI design improvements (#665)

Co-authored-by: Stefanie Fluin <[email protected]>
axelarnetwork · Dec 18, 2023 · e3c5a76 · e3c5a76 · vercel · Dec 18, 2023
1 parent 3071b86
commit e3c5a76
Show file tree

Hide file tree

Showing 9 changed files with 238 additions and 198 deletions.
diff --git a/public/images/icon-search-dark.svg b/public/images/icon-search-dark.svg
diff --git a/public/images/icon-search-light.svg b/public/images/icon-search-light.svg
diff --git a/src/components/copy.jsx b/src/components/copy.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import CopyToClipboard from 'react-copy-to-clipboard';
+import CopyToClipboard from "react-copy-to-clipboard";
 
 export default ({ size = 18, value, title, onCopy, className = "" }) => {
   const [copied, setCopied] = useState(false);
@@ -13,9 +13,22 @@ export default ({ size = 18, value, title, onCopy, className = "" }) => {
   }, [copied]);
 
   return copied ? (
-    <div className={`${title ? "min-w-max" : ""} flex items-center space-x-1`}>
+    <div
+      className={`${
+        title ? "min-w-max" : ""
+      } flex items-center space-x-1 link-text-icon`}
+    >
       {title && <span>{title}</span>}
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="green"><title>check-circle</title><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z" /></svg>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="18"
+        height="18"
+        fill="green"
+      >
+        <title>check-circle</title>
+        <path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z" />
+      </svg>
     </div>
   ) : (
     <CopyToClipboard
@@ -29,10 +42,21 @@ export default ({ size = 18, value, title, onCopy, className = "" }) => {
       }}
     >
       <div
-        className={`${title ? "min-w-max" : ""} flex items-center space-x-1 copy`}
+        className={`${
+          title ? "min-w-max" : ""
+        } flex items-center space-x-1 copy link-text-icon`}
       >
         {title && <span>{title}</span>}
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"  fill="currentColor"><title>content-copy</title><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" /></svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="16"
+          height="16"
+          fill="currentColor"
+        >
+          <title>content-copy</title>
+          <path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
+        </svg>
       </div>
     </CopyToClipboard>
   );

diff --git a/src/components/resources/index.jsx b/src/components/resources/index.jsx
@@ -11,88 +11,72 @@ const COLUMNS = [
   },
 ];
 
-export default ({
-  environment = "mainnet",
-}) => {
-  const _resources = resources?.[environment] ||
-    [];
+export default ({ environment = "mainnet" }) => {
+  const _resources = resources?.[environment] || [];
 
   return (
-      <table className="resources bleed">
-        <tbody>
-          {_resources
-            .map((r, i) => {
-              return (
-                <tr
-                  key={i}
-                  className="border-none border-b"
-                >
-                  {COLUMNS
-                    .map((c, j) => {
-                      const {
-                        id,
-                        className,
-                      } = { ...c };
+    <table className="resources bleed">
+      <tbody>
+        {_resources.map((r, i) => {
+          return (
+            <tr key={i} className="border-none border-b">
+              {COLUMNS.map((c, j) => {
+                const { id, className } = { ...c };
 
-                      const data = r?.[id];
+                const data = r?.[id];
 
-                      return (
-                        <td
-                          key={j}
-                          scope="col"
-                          className={`${i % 2 === 0 ? "bg-transparent" : "bg-gray-50 dark:bg-black"} ${i === _resources.length - 1 ? j === 0 ? "rounded-bl-lg" : j === COLUMNS.length - 1 ? "rounded-br-lg" : "" : ""} border-none whitespace-nowrap py-3 px-4 ${className || ""}`}
-                        >
-                          {id === 'value' ?
-                            <div className="flex flex-wrap">
-                              {(data || [])
-                                .map((v, k) => {
-                                  const {
-                                    title,
-                                    value,
-                                  } = { ...v };
+                return (
+                  <td
+                    key={j}
+                    scope="col"
+                    className={`${
+                      i % 2 === 0
+                        ? "bg-transparent"
+                        : "bg-gray-50 dark:bg-black"
+                    } ${
+                      i === _resources.length - 1
+                        ? j === 0
+                          ? "rounded-bl-lg"
+                          : j === COLUMNS.length - 1
+                          ? "rounded-br-lg"
+                          : ""
+                        : ""
+                    } border-none whitespace-nowrap py-3 px-4 ${
+                      className || ""
+                    }`}
+                  >
+                    {id === "value" ? (
+                      <div className="flex flex-wrap">
+                        {(data || []).map((v, k) => {
+                          const { title, value } = { ...v };
 
-                                  const is_external = !value?.startsWith('/');
+                          const is_external = !value?.startsWith("/");
 
-                                  return (
-                                    <div
-                                      key={k}
-                                      className="flex space-x-0.5 mb-2.5 mr-2.5"
-                                    >
-                                      <a
-                                        href={value}
-                                        className="bg-slate-100 dark:bg-slate-800 rounded-xl text-sm font-medium py-1 px-2.5"
-                                      >
-                                        {
-                                          title ||
-                                          value
-                                        }
-                                      </a>
-                                      {
-
-                                        (
-                                          <Copy
-                                            size={20}
-                                            hide={true}
-                                            value={value}
-                                          />
-                                        )
-                                      }
-                                    </div>
-                                  );
-                                })
+                          return (
+                            <div key={k} className="flex">
+                              <a href={value}>{title || value}</a>
+                              {
+                                <Copy
+                                  size={20}
+                                  hide={true}
+                                  value={value}
+                                  className="link-text-icon"
+                                />
                               }
-                            </div> :
-                            data
-                          }
-                        </td>
-                      );
-                    })
-                  }
-                </tr>
-              );
-            })
-          }
-        </tbody>
-      </table>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    ) : (
+                      data
+                    )}
+                  </td>
+                );
+              })}
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
   );
-};
+};
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -75,8 +75,8 @@ const shownDescription = description || 'The Axelar Documentation tells you how
     <script src="/src/scripts/index.ts"></script>
   </head>
   <body>
-    <nav style="display:flex;">
-      <a href="/" class="site-logo" ><svg height="25" width="106" style="vertical-align:middle;margin-top:-5px" fill="currentColor" stroke="currentColor" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 596.477 140.816">
+    <nav>
+      <a href="/" class="site-logo" style="line-height:1;" ><svg height="25" width="106" style="vertical-align:middle;margin-top:-5px" fill="currentColor" stroke="currentColor" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 596.477 140.816">
   <defs>
     <filter id="d" data-name="drop-shadow-1" filterUnits="userSpaceOnUse">
       <feOffset dx="0" dy="0"/>
@@ -89,7 +89,7 @@ const shownDescription = description || 'The Axelar Documentation tells you how
   <g id="c" data-name="Layer 1">
     <path d="M181.488,59.29l43.223-42.984L208.314,0l-35.023,34.83L138.267,0l-16.397,16.306,43.222,42.984c2.264,2.251,5.231,3.377,8.198,3.377s5.934-1.125,8.198-3.377Zm62.57,45.919l-35.023-34.83,35.023-34.831-16.397-16.306-43.221,42.984c-4.527,4.503-4.527,11.803,0,16.306l43.221,42.984,16.397-16.306h0Zm-70.828,.777l35.023,34.83,16.396-16.306-43.221-42.984c-4.529-4.503-11.868-4.503-16.397,0l-43.221,42.984,16.397,16.306,35.023-34.83h0Zm-11.15-27.395c2.175-2.163,3.396-5.095,3.396-8.153s-1.221-5.991-3.396-8.153L118.859,19.301l-16.397,16.306,35.023,34.83-35.023,34.831,16.397,16.306,43.222-42.984h0Zm-60.203,56.57h-36.348l-2.617-16.438h-23.697l-2.869,16.438H0L31.288,5.656h43.012l27.579,129.505Zm-43.095-44.202l-2.278-15.097c-.062-.055-.169-.811-.339-2.269-.111-1.224-.702-6.091-1.77-14.588-.114-.952-.252-2.251-.422-3.901-.169-1.65-.394-3.736-.674-6.253l-1.103-12.241c-.107,1.176-.263,2.489-.46,3.943-.197,1.454-.408,3.046-.633,4.782-.394,3.465-.674,5.871-.843,7.212-.173,1.337-.28,2.152-.335,2.434l-2.447,15.678-3.543,20.301h14.845Zm260.334,44.201v-31.114h-30.191v-19.798h27.069v-29.267h-27.069v-18.871h30.191V5.658h-65.36V135.16h65.36Zm69.171-31.114h-26.396V5.658h-35.17V135.16h61.566v-31.114h0Zm107.993,31.115h-36.345l-2.62-16.438h-23.697l-2.869,16.438h-36.348L425.691,5.656h43.013l27.579,129.505h0Zm-43.091-44.202l-2.282-15.097c-.058-.055-.169-.811-.339-2.269-.106-1.224-.701-6.091-1.77-14.588-.114-.952-.248-2.252-.421-3.902-.17-1.65-.395-3.736-.671-6.253l-1.103-12.241c-.11,1.176-.266,2.489-.464,3.943-.197,1.454-.408,3.045-.632,4.781-.393,3.465-.674,5.871-.844,7.212-.169,1.337-.279,2.152-.331,2.434l-2.451,15.678-3.543,20.301h14.849Zm143.286,44.202h-38.035l-17.368-46.13c-.169-.784-.47-1.818-.891-3.104-.422-1.286-.941-2.822-1.56-4.613l.252,8.556v45.291h-35V5.656h36.013c15.854,0,27.717,3.107,35.593,9.315,10.003,7.94,15.009,19.236,15.009,33.879,0,15.661-6.719,26.482-20.158,32.463l26.144,53.848h0Zm-40.903-85.891c0-9.669-5.088-14.506-15.264-14.506h-1.265v30.861h2.361c4.048,0,7.421-1.533,10.12-4.613,2.699-3.07,4.048-6.985,4.048-11.742Z" filter="url(#d)"/>
   </g>
-</svg> Docs</a>
+</svg><span style="margin-left:16px;font-size:30px;">Docs</span></a>
       <div class="nomobile desktop-nav">
         <a href="/dev/intro">Developers</a>
       <a href="/node/config-node">Node Operators</a>
@@ -115,7 +115,7 @@ const shownDescription = description || 'The Axelar Documentation tells you how
     </main>
     <footer>
       <div class="columns">
-        <div style="width:280px">
+        <div style="width:280px; line-height: 1.5;">
           <svg  width="254" height="60" fill="currentColor" stroke="currentColor" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 596.477 140.816">
   <defs>
     <filter id="d" data-name="drop-shadow-1" filterUnits="userSpaceOnUse">
@@ -156,7 +156,7 @@ const shownDescription = description || 'The Axelar Documentation tells you how
           </div>
         </div>
       </div>
-    <div style="text-align:center;font-weight:bold;">&copy; 2023 Axelar Network. All Rights Reserved.</div>
+    <div style="text-align:center; font-size: 12px;">&copy; 2023 Axelar Network. All Rights Reserved.</div>
     </footer>
 
 

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -57,55 +57,11 @@ const learnMoreCards = [
 
 <Section title={title}>
   Axelar delivers secure cross-chain communication for Web3, enabling you to
-  build Interchain dApps that grow beyond a single chain. <em>Secure</em> means Axelar
-  is built on proof-of-stake, the battle-tested approach used by Ethereum, Polygon,
-  Cosmos, and more. <em>Cross-chain communication</em> means you can build a complete
-  experience for your users that lets them interact with any asset, any application,
-  on any chain with one click.
-
-  <style>
-    .card-grid {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      grid-template-rows: repeat(2, 1fr);
-      grid-column-gap: 16px;
-      grid-row-gap: 16px;
-      grid-auto-flow: row;
-      margin-top: 32px;
-    }
-    .card {
-      padding: 16px;
-      border: 1px solid rgb(229, 231, 235);
-      border-radius: 4px;
-      margin-right: 16px;
-      display: flex;
-      flex-direction: column;
-      color: inherit;
-    }
-    .card:hover {
-      box-shadow: 0 0 10px #ddd;
-      color: inherit;
-    }
-    .card div:nth-child(1) {
-      font-weight: bold;
-      display: flex;
-      align-items: center;
-    }
-    .card div:nth-child(2) {
-      flex-grow: 1;
-    }
-    .card span {
-      color: #1b62d6;
-    }
-
-    @media (max-width: 768px) {
-      .card-grid {
-        display: flex;
-        flex-direction: column;
-      }
-    }
-
-  </style>
+  build Interchain dApps that grow beyond a single chain. <em>Secure</em> means
+  Axelar is built on proof-of-stake, the battle-tested approach used by
+  Ethereum, Polygon, Cosmos, and more. <em>Cross-chain communication</em> means
+  you can build a complete experience for your users that lets them interact
+  with any asset, any application, on any chain with one click.
 
   <div class="card-grid">
     {