Added or repaired dark mode for several tables, improved icons for the operator index page, added intro link and callout to Blueprint page, updated copy on discord button and added AI/ML use case (#38)

* updated discord button to "Connect"

* added AIML use case

* added link to introduction on blueprint page

* added or fixed dark mode for tables

* updated icons for operator index

* ran prettier

* prettier, dark mode fix for landing page

* linkfix

* fix runtime issue

* fixd logo color in dark mode

* added new blueprint graphic

Author: thomivy

components/AllocationTable.tsx

@@ -1,73 +1,81 @@
-import React from "react";
-import styled from "styled-components";
+import React, { ReactNode } from "react";
 
-const TableContainer = styled.div`
-  overflow-x: auto;
-  margin: 20px;
-`;
+interface HeaderCellProps {
+  children: ReactNode;
+}
+
+const HeaderCell = ({ children }: HeaderCellProps) => (
+  <th className="py-2 px-3 bg-gray-100 font-semibold border border-gray-300 dark:bg-gray-700 dark:border-gray-600 whitespace-nowrap">
+    {children}
+  </th>
+);
 
-const Table = styled.table`
-  width: 100%;
-  border-collapse: collapse;
-  text-align: left;
-  font-size: 14px;
+interface CellProps {
+  children: ReactNode;
+}
 
-  @media (max-width: 768px) {
-    font-size: 12px;
-  }
-`;
+const Cell = ({ children }: CellProps) => (
+  <td className="py-2 px-3 border border-gray-300 dark:border-gray-600 whitespace-nowrap">
+    {children}
+  </td>
+);
+
+interface RowProps {
+  children: ReactNode;
+  isEven: boolean;
+}
 
-const Header = styled.th`
-  background-color: #f1f1f1;
-  padding: 12px;
-  font-weight: bold;
-  border: 1px solid #ddd;
-  white-space: nowrap;
-`;
+const Row = ({ children, isEven }: RowProps) => (
+  <tr
+    className={`border-b ${
+      isEven ? "bg-gray-100 dark:bg-gray-700" : "dark:bg-gray-800"
+    }`}
+  >
+    {children}
+  </tr>
+);
 
-const Row = styled.tr`
-  &:nth-child(even) {
-    background-color: #f9f9f9;
-  }
-`;
+interface SubtotalRowProps {
+  children: ReactNode;
+}
 
-const SubtotalRow = styled(Row)`
-  background-color: #e6f2ff !important;
-  font-weight: bold;
-`;
+const SubtotalRow = ({ children }: SubtotalRowProps) => (
+  <tr className="bg-blue-100 font-semibold dark:bg-blue-900 dark:text-blue-300">
+    {children}
+  </tr>
+);
 
-const TotalRow = styled(Row)`
-  background-color: #d9ead3;
-  font-weight: bold;
-`;
+interface TotalRowProps {
+  children: ReactNode;
+}
 
-const Cell = styled.td`
-  padding: 12px;
-  border: 1px solid #ddd;
-  white-space: nowrap;
-`;
+const TotalRow = ({ children }: TotalRowProps) => (
+  <tr className="bg-green-100 font-semibold dark:bg-green-900 dark:text-green-300">
+    {children}
+  </tr>
+);
 
 export default function AllocationTable() {
   return (
-    <TableContainer>
-      <Table>
+    <div className="overflow-x-auto m-5">
+      <table className="w-full border-collapse text-left text-sm text-gray-800 dark:text-gray-300">
         <thead>
-          <Row>
-            <Header>Allocation Category</Header>
-            <Header>Entity Name</Header>
-            <Header>Allocated Share (%)</Header>
-            <Header>Vesting Plan</Header>
-            <Header>Cliff (Months)</Header>
-            <Header>Vesting Period (Months)</Header>
-            <Header>Immediate Liquidity (%)</Header>
-            <Header>Initial Liquid Tokens</Header>
-            <Header>Cliff-Release Tokens</Header>
-            <Header>Monthly Vesting Rate</Header>
-            <Header>Total Tokens Allocated</Header>
-          </Row>
+          <TotalRow>
+            <HeaderCell>Allocation Category</HeaderCell>
+            <HeaderCell>Entity Name</HeaderCell>
+            <HeaderCell>Allocated Share (%)</HeaderCell>
+            <HeaderCell>Vesting Plan</HeaderCell>
+            <HeaderCell>Cliff (Months)</HeaderCell>
+            <HeaderCell>Vesting Period (Months)</HeaderCell>
+            <HeaderCell>Immediate Liquidity (%)</HeaderCell>
+            <HeaderCell>Initial Liquid Tokens</HeaderCell>
+            <HeaderCell>Cliff-Release Tokens</HeaderCell>
+            <HeaderCell>Monthly Vesting Rate</HeaderCell>
+            <HeaderCell>Total Tokens Allocated</HeaderCell>
+          </TotalRow>
         </thead>
         <tbody>
-          <Row>
+          <Row isEven={false}>
             <Cell>Contributors</Cell>
             <Cell>Webb (Developer)</Cell>
             <Cell>28.56500%</Cell>
@@ -80,7 +88,7 @@ export default function AllocationTable() {
             <Cell>2,380,416.67</Cell>
             <Cell>28,565,000.00</Cell>
           </Row>
-          <Row>
+          <Row isEven={true}>
             <Cell>Contributors</Cell>
             <Cell>Investors</Cell>
             <Cell>13.64000%</Cell>
@@ -93,7 +101,7 @@ export default function AllocationTable() {
             <Cell>1,136,666.67</Cell>
             <Cell>13,640,000.00</Cell>
           </Row>
-          <Row>
+          <Row isEven={false}>
             <Cell>Contributors</Cell>
             <Cell>Indiv. Contributors</Cell>
             <Cell>1.43500%</Cell>
@@ -107,17 +115,17 @@ export default function AllocationTable() {
             <Cell>1,435,000.00</Cell>
           </Row>
           <SubtotalRow>
-            <Cell colSpan={2}>
+            <Cell col-Span={2}>
               <strong>Contributors Total</strong>
             </Cell>
             <Cell>43.64000%</Cell>
-            <Cell colSpan={4}></Cell>
+            <td colSpan={4}></td>
             <Cell>0.00</Cell>
             <Cell>21,820,000.00</Cell>
-            <Cell colSpan={1}></Cell>
+            <td colSpan={1}></td>
             <Cell>43,640,000.00</Cell>
           </SubtotalRow>
-          <Row>
+          <Row isEven={true}>
             <Cell>Governance-Managed</Cell>
             <Cell>On-chain Treasury</Cell>
             <Cell>36.36000%</Cell>
@@ -130,7 +138,7 @@ export default function AllocationTable() {
             <Cell>n/a</Cell>
             <Cell>36,360,000.00</Cell>
           </Row>
-          <Row>
+          <Row isEven={false}>
             <Cell>Governance-Managed</Cell>
             <Cell>Foundation</Cell>
             <Cell>15.00000%</Cell>
@@ -144,17 +152,17 @@ export default function AllocationTable() {
             <Cell>15,000,000.00</Cell>
           </Row>
           <SubtotalRow>
-            <Cell colSpan={2}>
+            <Cell col-Span={2}>
               <strong>Governance-Managed Total</strong>
             </Cell>
             <Cell>51.36000%</Cell>
-            <Cell colSpan={4}></Cell>
+            <td colSpan={4}></td>
             <Cell>750,000.00</Cell>
             <Cell>593,750.00</Cell>
-            <Cell colSpan={1}></Cell>
+            <td colSpan={1}></td>
             <Cell>51,360,000.00</Cell>
           </SubtotalRow>
-          <Row>
+          <Row isEven={true}>
             <Cell>Airdrop Pool</Cell>
             <Cell>Leaderboard Participants</Cell>
             <Cell>2.00000%</Cell>
@@ -167,7 +175,7 @@ export default function AllocationTable() {
             <Cell>82,608.70</Cell>
             <Cell>2,000,000.00</Cell>
           </Row>
-          <Row>
+          <Row isEven={false}>
             <Cell>Airdrop Pool</Cell>
             <Cell>DOT Validators Snapshot</Cell>
             <Cell>1.00000%</Cell>
@@ -180,7 +188,7 @@ export default function AllocationTable() {
             <Cell>41,304.35</Cell>
             <Cell>1,000,000.00</Cell>
           </Row>
-          <Row>
+          <Row isEven={true}>
             <Cell>Airdrop Pool</Cell>
             <Cell>EDG Genesis Participants</Cell>
             <Cell>1.00000%</Cell>
@@ -193,7 +201,7 @@ export default function AllocationTable() {
             <Cell>41,304.35</Cell>
             <Cell>1,000,000.00</Cell>
           </Row>
-          <Row>
+          <Row isEven={false}>
             <Cell>Airdrop Pool</Cell>
             <Cell>EDG 2023 Snapshot</Cell>
             <Cell>1.00000%</Cell>
@@ -207,28 +215,28 @@ export default function AllocationTable() {
             <Cell>1,000,000.00</Cell>
           </Row>
           <SubtotalRow>
-            <Cell colSpan={2}>
+            <Cell col-Span={2}>
               <strong>Airdrop Pools Subtotal</strong>
             </Cell>
             <Cell>5.00000%</Cell>
-            <Cell colSpan={4}></Cell>
+            <td colSpan={4}></td>
             <Cell>250,000.00</Cell>
             <Cell>197,916.67</Cell>
             <Cell>206,521.74</Cell>
             <Cell>5,000,000.00</Cell>
           </SubtotalRow>
           <TotalRow>
-            <Cell colSpan={2}>
+            <Cell col-Span={2}>
               <strong>Total Supply</strong>
             </Cell>
             <Cell>100.00000%</Cell>
-            <Cell colSpan={4}></Cell>
+            <td colSpan={4}></td>
             <Cell>1,000,000.00</Cell>
-            <Cell colSpan={2}></Cell>
+            <td colSpan={2}></td>
             <Cell>100,000,000.00</Cell>
           </TotalRow>
         </tbody>
-      </Table>
-    </TableContainer>
+      </table>
+    </div>
   );
 }

components/CallToActionCard.tsx

@@ -4,7 +4,7 @@ const CallToActionCard = ({ icon, title, description, link }) => {
   return (
     <a
       href={link}
-      className="max-w-sm min-h-44  flex items-start hover:bg-gray-100 dark:bg-gray-800  dark:hover:bg-gray-700"
+      className="max-w-sm min-h-44 p-2 flex items-start hover:bg-gray-100  dark:hover:bg-gray-700"
     >
       <div className="flex items-start">
         <div className="mr-4">

components/HeaderLogo.tsx

@@ -28,7 +28,8 @@ function HeaderLogo() {
           </g>
           <path
             d="M193.24 76.392V132H179.632V76.392H193.24ZM161.992 82.44V69.84H210.88V82.44H161.992ZM227.615 133.092C223.191 133.092 219.663 131.888 217.031 129.48C214.455 127.016 213.167 123.74 213.167 119.652C213.167 115.788 214.483 112.708 217.115 110.412C219.803 108.116 223.667 106.772 228.707 106.38L240.467 105.456V104.784C240.467 103.384 240.187 102.236 239.627 101.34C239.067 100.388 238.255 99.688 237.191 99.24C236.183 98.736 234.895 98.484 233.327 98.484C230.583 98.484 228.483 98.988 227.027 99.996C225.627 101.004 224.927 102.46 224.927 104.364H214.175C214.175 101.172 214.987 98.4 216.611 96.048C218.235 93.696 220.531 91.876 223.499 90.588C226.523 89.3 230.023 88.656 233.999 88.656C238.087 88.656 241.531 89.384 244.331 90.84C247.187 92.296 249.343 94.424 250.799 97.224C252.311 100.024 253.067 103.44 253.067 107.472V132H241.643L240.803 126.456C240.131 128.36 238.535 129.956 236.015 131.244C233.551 132.476 230.751 133.092 227.615 133.092ZM232.151 123.516C234.615 123.516 236.631 122.928 238.199 121.752C239.767 120.52 240.551 118.7 240.551 116.292V114.024L233.999 114.612C231.199 114.836 229.211 115.312 228.035 116.04C226.915 116.712 226.355 117.72 226.355 119.064C226.355 120.576 226.831 121.696 227.783 122.424C228.735 123.152 230.191 123.516 232.151 123.516ZM280.321 132H267.385V90H279.565L280.405 94.368C281.693 92.576 283.457 91.176 285.697 90.168C287.993 89.16 290.513 88.656 293.257 88.656C298.241 88.656 302.105 90.196 304.849 93.276C307.649 96.3 309.049 100.556 309.049 106.044V132H296.113V109.152C296.113 106.52 295.441 104.42 294.097 102.852C292.753 101.228 290.961 100.416 288.721 100.416C286.145 100.416 284.101 101.2 282.589 102.768C281.077 104.28 280.321 106.352 280.321 108.984V132ZM321.267 110.244C321.267 105.988 322.107 102.236 323.787 98.988C325.523 95.74 327.903 93.192 330.927 91.344C334.007 89.496 337.507 88.572 341.427 88.572C344.731 88.572 347.559 89.244 349.911 90.588C352.319 91.932 353.971 93.696 354.867 95.88L353.607 96.72L354.615 90H366.795V129.312C366.795 134.296 365.871 138.58 364.023 142.164C362.175 145.804 359.543 148.576 356.127 150.48C352.711 152.44 348.595 153.42 343.779 153.42C337.339 153.42 332.103 151.684 328.071 148.212C324.039 144.796 321.715 140.12 321.099 134.184H334.203C334.315 136.536 335.211 138.356 336.891 139.644C338.571 140.988 340.839 141.66 343.695 141.66C346.831 141.66 349.295 140.792 351.087 139.056C352.935 137.32 353.859 134.968 353.859 132V123.096L355.287 124.188C354.391 126.372 352.655 128.136 350.079 129.48C347.503 130.824 344.535 131.496 341.175 131.496C337.255 131.496 333.783 130.6 330.759 128.808C327.791 127.016 325.467 124.524 323.787 121.332C322.107 118.14 321.267 114.444 321.267 110.244ZM334.287 109.908C334.287 111.924 334.707 113.716 335.547 115.284C336.387 116.796 337.535 118 338.991 118.896C340.447 119.792 342.127 120.24 344.031 120.24C345.991 120.24 347.699 119.82 349.155 118.98C350.667 118.084 351.815 116.88 352.599 115.368C353.439 113.8 353.859 111.98 353.859 109.908C353.859 107.836 353.439 106.072 352.599 104.616C351.815 103.104 350.667 101.928 349.155 101.088C347.699 100.248 345.963 99.828 343.947 99.828C342.043 99.828 340.363 100.248 338.907 101.088C337.451 101.928 336.303 103.104 335.463 104.616C334.679 106.128 334.287 107.892 334.287 109.908ZM394.499 132H381.563V68.664H394.499V132ZM428.731 133.092C424.531 133.092 420.779 132.14 417.475 130.236C414.227 128.332 411.651 125.728 409.747 122.424C407.899 119.064 406.975 115.228 406.975 110.916C406.975 106.548 407.871 102.712 409.663 99.408C411.511 96.048 414.059 93.416 417.307 91.512C420.555 89.608 424.279 88.656 428.479 88.656C432.903 88.656 436.711 89.58 439.903 91.428C443.095 93.22 445.559 95.796 447.295 99.156C449.031 102.46 449.899 106.408 449.899 111V114.276L413.779 114.444L413.947 106.464H437.047C437.047 104.224 436.291 102.46 434.779 101.172C433.267 99.828 431.195 99.156 428.563 99.156C426.379 99.156 424.587 99.576 423.187 100.416C421.843 101.256 420.835 102.572 420.163 104.364C419.491 106.1 419.155 108.34 419.155 111.084C419.155 115.004 419.939 117.916 421.507 119.82C423.131 121.668 425.623 122.592 428.983 122.592C431.447 122.592 433.491 122.172 435.115 121.332C436.739 120.492 437.775 119.316 438.223 117.804H450.067C449.339 122.452 447.043 126.176 443.179 128.976C439.315 131.72 434.499 133.092 428.731 133.092Z"
-            fill="#1F1D2B"
+            fill="currentColor"
+            className=" fill-[#1F1D2B] dark:fill-white"
           />
           <defs>
             <linearGradient

components/HelpDiscordBtn.tsx

@@ -22,7 +22,7 @@ const HelpDiscordBtn: React.FC = () => {
               />
             </g>
           </svg>
-          <span className="hidden lg:inline text-xs lg:text-sm">Get Help</span>
+          <span className="hidden lg:inline text-xs lg:text-sm">Connect</span>
         </button>
       </div>
     </a>

components/NetworkConfig.tsx

@@ -168,7 +168,7 @@ const NetworkTabs = () => {
       case "wss":
         return (
           <div className="flex items-center">
-            <span className="mr-2 bg-slate-200 font-mono text-sm py-1 px-3">
+            <span className="mr-2 bg-slate-200 font-mono dark:bg-black dark:text-white text-sm py-1 px-3">
               {value.url}
             </span>
             <BlockCopyButton name={value.url} code={value.url} />
@@ -178,7 +178,7 @@ const NetworkTabs = () => {
         return (
           <Link
             href={value.url}
-            className="underline underline-offset-1 text-linkBlue font-semibold"
+            className="underline underline-offset-1 dark:text-blue-200 text-linkBlue font-semibold"
             target="_blank"
             rel="noopener noreferrer"
           >
@@ -207,14 +207,17 @@ const NetworkTabs = () => {
         {Object.entries(sections).map(([section, items]) => (
           <div key={section} className="mb-8">
             <h3 className="text-xl font-semibold mb-2">{section}</h3>
-            <table className="w-full border-collapse">
+            <table className="w-full border-collapse bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-300">
               <tbody>
                 {(items as any[]).map((item, index) => (
-                  <tr className="border-b" key={index}>
-                    <td className="px-4 py-2 whitespace-nowrap bg-slate-100">
+                  <tr
+                    className={`${index % 2 === 0 ? "bg-gray-50 dark:bg-gray-700" : ""} border-b`}
+                    key={index}
+                  >
+                    <td className="px-4 py-2 whitespace-nowrap bg-slate-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-700">
                       {item.property}
                     </td>
-                    <td className="px-4 py-2 truncate text-ellipsis">
+                    <td className="px-4 py-2 truncate text-ellipsis border border-gray-300 dark:border-gray-700">
                       {renderValue(item.value)}
                     </td>
                   </tr>
@@ -229,8 +232,8 @@ const NetworkTabs = () => {
 
   return (
     <div className="mt-10">
-      <ul className="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
-        <li className="inline-flex text-xl items-center justify-center p-4 border-b-2 border-transparent rounded-t-lg group">
+      <ul className="flex flex-wrap mb-8 text-sm border-b-2 font-medium text-center text-gray-500 dark:text-gray-400">
+        <li className="inline-flex text-xl items-center justify-center pt-8 px-4  border-b-2 border-transparent rounded-t-lg group">
           <a
             href="#"
             onClick={() => handleTabClick("mainnet")}
@@ -244,7 +247,8 @@ const NetworkTabs = () => {
             Mainnet
           </a>
         </li>
-        <li className="inline-flex text-xl items-center justify-center p-4 border-b-2 border-transparent rounded-t-lg group">
+        <li className="inline-flex text-xl items-center justify-center pt-8 px-4  border-b-2 border-transparent rounded-t-lg group">
+          {" "}
           <a
             href="#"
             onClick={() => handleTabClick("testnet")}
@@ -258,7 +262,8 @@ const NetworkTabs = () => {
             Testnet
           </a>
         </li>
-        <li className="inline-flex items-center justify-center p-4 border-b-2 border-transparent text-xl rounded-t-lg group">
+        <li className="inline-flex text-xl items-center justify-center pt-8 px-4  border-b-2 border-transparent rounded-t-lg group">
+          {" "}
           <a
             href="#"
             onClick={() => handleTabClick("wallets")}