Update styles

darwinia-network · Jan 9, 2024 · 8b6fbd4 · 8b6fbd4
1 parent df8b688
commit 8b6fbd4
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 89 deletions.
diff --git a/src/components/PageTable/index.tsx b/src/components/PageTable/index.tsx
@@ -1,8 +1,8 @@
-import { useEffect, useRef } from "react";
+import { Fragment, useEffect, useRef } from "react";
 import { Link, useLocation } from "react-router-dom";
 
 interface Props {
-  data: { h1: string }[];
+  data: { h1: string; sub?: { h2: string }[] }[];
 }
 
 export default function PageTable({ data }: Props) {
@@ -26,14 +26,21 @@ export default function PageTable({ data }: Props) {
     <div className="hidden lg:flex flex-col gap-medium p-5 w-80 bg-table-bg h-fit sticky top-20">
       <h3 className="text-bold text-white text-sm font-bold">On This Page</h3>
       <div className="h-[1px] bg-white/50 w-full" />
-      {data.map(({ h1 }) => (
-        <Link
-          key={h1}
-          to={`#${h1}`}
-          className="text-sm font-light font-[JetBrainsMono-Light] text-gray hover:underline"
-        >
-          {h1}
-        </Link>
+      {data.map(({ h1, sub }) => (
+        <Fragment key={h1}>
+          <Link to={`#${h1}`} className="text-sm font-light font-[JetBrainsMono-Light] text-gray hover:underline">
+            {h1}
+          </Link>
+          {sub?.map(({ h2 }) => (
+            <Link
+              key={h2}
+              to={`#${h2}`}
+              className="text-sm font-light font-[JetBrainsMono-Light] text-gray hover:underline indent-4"
+            >
+              {h2}
+            </Link>
+          ))}
+        </Fragment>
       ))}
     </div>
   );

diff --git a/src/data/getInvolved.tsx b/src/data/getInvolved.tsx
@@ -1,13 +1,17 @@
+interface Section {
+  icon: string;
+  items?: (string | { label: string; path: string; isExternal?: boolean })[][];
+  description?: string;
+  content?: { link: { label: string; path: string; isExternal?: boolean }; text?: string }[];
+  sub?: ({ h2: string } & Section)[];
+}
+
 interface GetInvolvedData {
   title: string;
   summary: string;
-  sections: {
+  sections: ({
     h1: string;
-    icon: string;
-    items?: (string | { label: string; path: string; isExternal?: boolean })[][];
-    description?: string;
-    content?: { link: { label: string; path: string; isExternal?: boolean }; text?: string }[];
-  }[];
+  } & Section)[];
 }
 
 export default function useGetInvolvedData(): GetInvolvedData {
@@ -51,40 +55,42 @@ export default function useGetInvolvedData(): GetInvolvedData {
         icon: "🔊",
         description:
           "If you're not a developer, it can be hard to know where to start in Darwinia. Here are a few suggestions, along with resources for specific professional backgrounds.",
-      },
-      {
-        h1: "Content Creator",
-        icon: "⌨️",
-        description:
-          "Educate the community and the broader public about Darwinia through writing informative and insightful content in videos, blogs, graphic designs, podcasts, or any other artistic production form.",
-      },
-      {
-        h1: "Meetup Organizer",
-        icon: "🤝",
-        description:
-          "Host online or offline Darwinia meetups/ technical workshops/hackathons, connect with local blockchain enthusiasts to educate them on what Darwina is, and discover the potential users/partners through discussion and communication.",
-      },
-      {
-        h1: "Translator",
-        icon: "🌎",
-        description:
-          "Translate and share Darwinia-related content in different languages and expand Darwinia's ecological application to non-English speaking communities.",
-      },
-      {
-        h1: "Stake your RING",
-        icon: "🧑‍💼",
-        description: "By staking your RING you can earn rewards whilst helping to secure the Darwinia.",
-        content: [
+        sub: [
           {
-            link: { label: "Staking Discord", path: "https://discord.gg/hp9fzFNap8", isExternal: true },
-            text: "welcome to all interested in staking on Darwinia",
+            h2: "Content Creator",
+            icon: "⌨️",
+            description:
+              "Educate the community and the broader public about Darwinia through writing informative and insightful content in videos, blogs, graphic designs, podcasts, or any other artistic production form.",
           },
           {
-            link: {
-              label: "Staking guide",
-              path: "https://docs.darwinia.network/staking-guide-d7387bfc4d3f4604860651f268ed00ba",
-              isExternal: true,
-            },
+            h2: "Meetup Organizer",
+            icon: "🤝",
+            description:
+              "Host online or offline Darwinia meetups/ technical workshops/hackathons, connect with local blockchain enthusiasts to educate them on what Darwina is, and discover the potential users/partners through discussion and communication.",
+          },
+          {
+            h2: "Translator",
+            icon: "🌎",
+            description:
+              "Translate and share Darwinia-related content in different languages and expand Darwinia's ecological application to non-English speaking communities.",
+          },
+          {
+            h2: "Stake your RING",
+            icon: "🧑‍💼",
+            description: "By staking your RING you can earn rewards whilst helping to secure the Darwinia.",
+            content: [
+              {
+                link: { label: "Staking Discord", path: "https://discord.gg/hp9fzFNap8", isExternal: true },
+                text: "welcome to all interested in staking on Darwinia",
+              },
+              {
+                link: {
+                  label: "Staking guide",
+                  path: "https://docs.darwinia.network/staking-guide-d7387bfc4d3f4604860651f268ed00ba",
+                  isExternal: true,
+                },
+              },
+            ],
           },
         ],
       },

diff --git a/src/pages/GetInvolved/index.tsx b/src/pages/GetInvolved/index.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import { Fragment, PropsWithChildren } from "react";
 import Footer from "../../components/Footer";
 import PageTable from "../../components/PageTable";
 import { useFooterData } from "../../data/footer";
@@ -16,48 +16,25 @@ export default function GetInvolvedPage() {
           <span className="text-light text-gray text-sm font-light">Home/ Community</span>
           <h1 className="text-bold text-4xl text-white font-bold">{title}</h1>
           <div className="h-[1px] bg-white/50 w-full" />
-          <p className="text-light text-gray text-sm font-light">{summary}</p>
+          <p className="text-light text-gray text-sm font-light leading-7">{summary}</p>
 
           {sections.map((section) => (
             <Fragment key={section.h1}>
-              <h3 className="text-bold text-xl text-white font-bold" id={section.h1}>
+              <H1 id={section.h1}>
                 {section.icon} {section.h1}
-              </h3>
-              {section.description ? (
-                <p className="text-light text-gray text-sm font-light">{section.description}</p>
-              ) : null}
-              {section.items?.map((item, index) => (
-                <div key={index} className="text-light text-gray text-sm font-light">
-                  {item.map((i, k) => (
-                    <Fragment key={k}>
-                      {typeof i === "string" ? (
-                        <span>{i}</span>
-                      ) : i.isExternal ? (
-                        <a target="_blank" rel="noopener noreferrer" href={i.path} className="underline">
-                          {i.label}
-                        </a>
-                      ) : (
-                        <Link to={i.path} className="underline">
-                          {i.label}
-                        </Link>
-                      )}
-                    </Fragment>
-                  ))}
-                </div>
-              ))}
-              {section.content?.map(({ link, text }, index) => (
-                <div key={index} className="text-light text-gray text-sm font-light">
-                  {link.isExternal ? (
-                    <a target="_blank" rel="noopener noreferrer" href={link.path} className="underline">
-                      {link.label}
-                    </a>
-                  ) : (
-                    <Link to={link.path} className="underline">
-                      {link.label}
-                    </Link>
-                  )}
-                  {text ? <span> - {text}</span> : null}
-                </div>
+              </H1>
+              {section.description ? <Description>{section.description}</Description> : null}
+              {section.items?.length ? <Items data={section.items} /> : null}
+              {section.content?.length ? <Content data={section.content} /> : null}
+              {section.sub?.map((sub) => (
+                <Fragment key={sub.h2}>
+                  <H2 id={sub.h2}>
+                    {sub.icon} {sub.h2}
+                  </H2>
+                  {sub.description ? <Description>{sub.description}</Description> : null}
+                  {sub.items?.length ? <Items data={sub.items} /> : null}
+                  {sub.content?.length ? <Content data={sub.content} /> : null}
+                </Fragment>
               ))}
             </Fragment>
           ))}
@@ -68,3 +45,70 @@ export default function GetInvolvedPage() {
     </main>
   );
 }
+
+function H1({ id, children }: PropsWithChildren<{ id: string }>) {
+  return (
+    <h3 className="text-bold text-xl text-white font-bold" id={id}>
+      {children}
+    </h3>
+  );
+}
+
+function H2({ id, children }: PropsWithChildren<{ id: string }>) {
+  return (
+    <h5 className="text-bold text-lg text-white font-bold" id={id}>
+      {children}
+    </h5>
+  );
+}
+
+function Description({ children }: PropsWithChildren<unknown>) {
+  return <p className="text-light text-gray text-sm leading-7 font-light">{children}</p>;
+}
+
+function Items({ data }: { data: (string | { label: string; path: string; isExternal?: boolean })[][] }) {
+  return (
+    <ul className="list-disc space-y-3 pl-4">
+      {data.map((item, index) => (
+        <li key={index} className="text-light text-gray text-sm font-light">
+          {item.map((i, k) => (
+            <Fragment key={k}>
+              {typeof i === "string" ? (
+                <span>{i}</span>
+              ) : i.isExternal ? (
+                <a target="_blank" rel="noopener noreferrer" href={i.path} className="underline transition-colors hover:text-primary">
+                  {i.label}
+                </a>
+              ) : (
+                <Link to={i.path} className="underline transition-colors hover:text-primary">
+                  {i.label}
+                </Link>
+              )}
+            </Fragment>
+          ))}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Content({ data }: { data: { link: { label: string; path: string; isExternal?: boolean }; text?: string }[] }) {
+  return (
+    <ul className="list-disc space-y-3 pl-4">
+      {data.map(({ link, text }, index) => (
+        <li key={index} className="text-light text-gray text-sm font-light">
+          {link.isExternal ? (
+            <a target="_blank" rel="noopener noreferrer" href={link.path} className="underline transition-colors hover:text-primary">
+              {link.label}
+            </a>
+          ) : (
+            <Link to={link.path} className="underline transition-colors hover:text-primary">
+              {link.label}
+            </Link>
+          )}
+          {text ? <span> - {text}</span> : null}
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/src/pages/OnlineCommunities/index.tsx b/src/pages/OnlineCommunities/index.tsx
@@ -16,7 +16,7 @@ export default function OnlineCommunitiesPage() {
           <span className="text-light text-gray text-sm font-light">Home/ Community</span>
           <h1 className="text-bold text-4xl text-white font-bold">{title}</h1>
           <div className="h-[1px] bg-white/50 w-full" />
-          <p className="text-light text-gray text-sm font-light">{summary}</p>
+          <p className="text-light text-gray text-sm font-light leading-7">{summary}</p>
 
           {sections.map((section) => (
             <Fragment key={section.h1}>
@@ -26,11 +26,11 @@ export default function OnlineCommunitiesPage() {
               {section.content.map(({ link, text }, index) => (
                 <div key={index} className="text-light text-gray text-sm font-light italic">
                   {link.isExternal ? (
-                    <a target="_blank" rel="noopener noreferrer" href={link.path} className="underline">
+                    <a target="_blank" rel="noopener noreferrer" href={link.path} className="underline transition-colors hover:text-primary">
                       {link.label}
                     </a>
                   ) : (
-                    <Link to={link.path} className="underline">
+                    <Link to={link.path} className="underline transition-colors hover:text-primary">
                       {link.label}
                     </Link>
                   )}