styles: about page and header footer

darwinia-network · Feb 8, 2024 · d821e0a · d821e0a
1 parent 2021999
commit d821e0a
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 8 deletions.
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
@@ -84,7 +84,7 @@
 
   .text-t16 {
     font-size: 1rem;
-    @apply tracking-[0.0625rem] leading-[1.6rem] font-light;
+    @apply tracking-[0.0625rem] leading-[1.6rem] font-extralight;
   }
 
   .text-t16b {
@@ -94,14 +94,19 @@
 
   .text-t14 {
     font-size: 0.875rem;
-    @apply tracking-[0.0625rem] leading-[1.4rem] font-normal;
+    @apply tracking-[0.0625rem] leading-[1.4rem] font-extralight;
   }
 
   .text-t14b {
     font-size: 0.875rem;
     @apply tracking-[0.0625rem] leading-[1.4rem] font-bold;
   }
 
+  .text-t12 {
+    font-size: 0.75rem;
+    @apply tracking-[0.0625rem] font-light;
+  }
+
   .text-tag {
     font-size: 0.625rem;
     @apply leading-[1rem] font-bold;

diff --git a/src/components/FooterLinks/Section.tsx b/src/components/FooterLinks/Section.tsx
@@ -8,7 +8,7 @@ export default function Section({ title, links }: Props) {
   const { isDesktopHeight } = useApp();
 
   return (
-    <div className="hidden lg:flex flex-col gap-5 h-fit max-w-max">
+    <div className="hidden lg:flex flex-col gap-10 h-fit max-w-max">
       <h3 className="uppercase text-xl leading-normal font-bold text-app-white">{title}</h3>
       <div className="flex flex-col gap-5">
         {links.map(({ text, href, isExternal, isComingSoon }) => (

diff --git a/src/components/Header/HomePageDesktopHeader.tsx b/src/components/Header/HomePageDesktopHeader.tsx
@@ -45,6 +45,7 @@ export default function HomePageDesktopHeader() {
         <div className="flex items-center gap-[2.5rem] pl-[2.5rem] pr-[1.25rem] w-max shrink-0" ref={ref}>
           <DesktopNavigation
             data={navigations}
+            isHomePage
             isNavigationActive={isNavigationActive}
             setIsNavigationActive={setIsNavigationActive}
           />

diff --git a/src/components/Navigation/DesktopNavigation.tsx b/src/components/Navigation/DesktopNavigation.tsx
@@ -5,11 +5,12 @@ import ExternalIcon from "../ExternalIcon";
 
 interface Props {
   data: { label: string; sub: { label: string; link: string; isExternal?: boolean }[] }[];
+  isHomePage?: boolean;
   isNavigationActive: boolean[];
   setIsNavigationActive: Dispatch<SetStateAction<boolean[]>>;
 }
 
-export default function DesktopNavigation({ data, isNavigationActive, setIsNavigationActive }: Props) {
+export default function DesktopNavigation({ data, isHomePage, isNavigationActive, setIsNavigationActive }: Props) {
   const handleActiveChange = useCallback(
     (index: number, isActive: boolean) =>
       setIsNavigationActive((prev) => {
@@ -28,6 +29,7 @@ export default function DesktopNavigation({ data, isNavigationActive, setIsNavig
           index={index}
           label={label}
           sub={sub}
+          isHomePage={isHomePage}
           isActive={isNavigationActive[index]}
           onActiveChange={handleActiveChange}
         />
@@ -40,12 +42,14 @@ function Navigation({
   index,
   label,
   sub,
+  isHomePage,
   isActive,
   onActiveChange,
 }: {
   index: number;
   label: string;
   sub: { label: string; link: string; isExternal?: boolean }[];
+  isHomePage?: boolean;
   isActive: boolean;
   onActiveChange: (index: number, active: boolean) => void;
 }) {
@@ -59,7 +63,7 @@ function Navigation({
       placement="bottom"
       label={
         <span
-          className={`text-t20 whitespace-nowrap transition-colors hover:text-app-main ${
+          className={`whitespace-nowrap transition-colors hover:text-app-main ${isHomePage ? 'text-t20' : 'text-t16b'} ${
             isActive ? "text-app-main" : "text-app-black"
           }`}
         >

diff --git a/src/pages/About/ContentTable.tsx b/src/pages/About/ContentTable.tsx
@@ -24,13 +24,13 @@ export default function ContentTable({ title, data }: Props) {
   }, [hash]);
 
   return (
-    <div className="hidden lg:flex flex-col gap-large w-[15.625rem] sticky top-32 h-fit" data-aos="fade-up">
+    <div className="hidden lg:flex flex-col gap-[0.9375rem] w-[15.625rem] sticky top-32 h-fit" data-aos="fade-up">
       <span className="uppercase text-t16b text-app-black/70">CONTENT</span>
       <div />
       <span className="text-t14b text-app-black">{title}</span>
       {data.map((d) => (
         <Fragment key={d.title}>
-          <Link to={`#${d.title}`} className="text-t1 text-app-gray hover:underline">
+          <Link to={`#${d.title}`} className="text-t14 text-app-gray hover:underline">
             {d.title}
           </Link>
           {d.sub?.map((s) => (

diff --git a/src/pages/About/index.tsx b/src/pages/About/index.tsx
@@ -32,7 +32,7 @@ export default function About() {
       <div className="mx-auto w-full lg:w-fit py-5 lg:pt-[3.125rem] lg:pb-[7.5rem] flex gap-[3.75rem] px-large">
         <div className="flex flex-col gap-5 w-full lg:w-[45rem]">
           <div className="flex flex-col" data-aos="fade-up">
-            <h2 className="text-h2 text-app-black">{aboutData.title}</h2>
+            <h2 className="lg:text-h1 text-h2 text-app-black">{aboutData.title}</h2>
             <span className="text-t12 text-app-gray">{`Page last updated: ${aboutData.lastUpdate}`}</span>
           </div>
           <div className="h-[1px] w-full bg-app-black" />