From 542171621efda0967ce2bf39539b52357808c5c6 Mon Sep 17 00:00:00 2001
From: ctzsnooze <chris.thompson@sydney.edu.au>
Date: Sun, 31 Dec 2023 16:10:08 -0800
Subject: [PATCH] Styling and text update for downloads page (#311)

* styling and text update for downloads and stats pages

* commends from reviews, remove spaces and group code into blocks

* subtle react changes for smaller screens
---
 src/components/AboutCard/index.tsx       |   6 +-
 src/components/HomepageFeature/index.tsx |   4 +-
 src/pages/download.tsx                   | 161 ++++++++++++++---------
 src/pages/stats.tsx                      |  12 +-
 4 files changed, 106 insertions(+), 77 deletions(-)

diff --git a/src/components/AboutCard/index.tsx b/src/components/AboutCard/index.tsx
index a43ad722aa..ec0a8d9be9 100644
--- a/src/components/AboutCard/index.tsx
+++ b/src/components/AboutCard/index.tsx
@@ -20,13 +20,13 @@ export default function AboutCard({
       <div
         className={clsx(
           className,
-          `relative flex text-lg md:text-xl xl:text-2xl w-fit font-semibold items-center dark:bg-neutral-500/10 bg-neutral-150/50 py-2 px-4 rounded-t-xl`,
+          `relative flex text-base xl:text-lg w-fit font-semibold items-center dark:bg-neutral-500/10 bg-neutral-150/50 pt-1 pr-3 xl:p-2 xl:pr-4  rounded-t-xl`,
           blur ? 'backdrop-blur-md' : '',
         )}
       >
-        <Icon className="w-8 h-8 mr-2" />
+        <Icon className="h-4 w-4 xl:w-6 h-6 ml-2 mr-2" />
         {title}
-        <AboutHeaderFix className="absolute right-[-32px] bottom-0  dark:text-neutral-500/10 text-neutral-150/50"></AboutHeaderFix>
+        <AboutHeaderFix className="absolute right-[-32px] bottom-0 dark:text-neutral-500/10 text-neutral-150/50"></AboutHeaderFix>
       </div>
       <div className={clsx(`shadow-xl w-full h-full  dark:bg-neutral-500/10 bg-neutral-150/50 p-4 rounded-b-xl rounded-r-xl text-base`, blur ? 'backdrop-blur-md' : '')}>{children}</div>
     </div>
diff --git a/src/components/HomepageFeature/index.tsx b/src/components/HomepageFeature/index.tsx
index a146e697c8..9c3362c3ef 100644
--- a/src/components/HomepageFeature/index.tsx
+++ b/src/components/HomepageFeature/index.tsx
@@ -17,9 +17,9 @@ export default function HomepageFeature({ title = '<unset>', compact = false, cl
     // </section>
     // make background blur depend on blur prop
     <section className={className}>
-      <h2 className="text-primary-600 text-3xl font-bold my-4 ml-1">{title}</h2>
+      <h2 className="text-primary-600 text-3xl font-bold m-0 sm:m-1 base:m-2 md:m-4">{title}</h2>
       {/* eslint-disable-next-line no-restricted-globals */}
-      <div className={clsx({ 'bg-neutral-500/10 shadow-xl p-8': !compact }, 'flex justify-center rounded-2xl', blur ? 'backdrop-blur-md' : '')}>{children}</div>
+      <div className={clsx({ 'bg-neutral-500/10 shadow-xl mb-6  p-4 xl:p-6': !compact }, 'flex justify-center rounded-2xl', blur ? 'backdrop-blur-md' : '')}>{children}</div>
     </section>
   );
 }
diff --git a/src/pages/download.tsx b/src/pages/download.tsx
index dcdacd5ad0..b4cecbbf4f 100644
--- a/src/pages/download.tsx
+++ b/src/pages/download.tsx
@@ -38,7 +38,7 @@ function IconElementFeature({ Icon, title, description, link, children }: IconEl
 }
 
 export default function Media() {
-  const isXl = useMediaQuery({ query: '(min-width: 1280px)' });
+  const isXl = useMediaQuery({ query: '(min-width: 1024px)' });
 
   const videoSize = useMemo(() => {
     if (isXl) {
@@ -56,75 +56,84 @@ export default function Media() {
 
   return (
     <BetaflightLayout>
-      <div className="relative w-full mt-4 xl:mt-32">
-        <div className="w-full h-fit flex flex-col justify-start">
-          <div className="flex flex-col p-6 h-fit w-fit xl:ml-12">
-            <h1 className="md:text-[6rem] text-6xl border-primary-600 font-bold mb-4">Download</h1>
-            <h2 className="font-semibold md:text-3xl text-xl">Downloads & Videos</h2>
-          </div>
-        </div>
-      </div>
-      <div className="xl:max-w-[1920px] m-auto p-4 xl:p-16">
+      <div className="m-auto p-6 mt-0 xl:mt-16">
+        {/* Start Downloads block */}
+
         <HomepageFeature blur title="Downloads">
           <div className="grid max-w-fit grid-cols-1 md:grid-cols-2 gap-x-4">
             <div className="flex flex-col space-y-4">
-              <IconElementFeature title="Installation & Documentation" link={{ text: 'See the Betaflight Wiki', href: '/docs/wiki' }} Icon={DocumentTextIcon}></IconElementFeature>
-              <IconElementFeature
-                title="Configuration Tool"
-                link={{
-                  text: 'Latest configurator releases',
-                  href: 'https://github.com/betaflight/betaflight-configurator/releases/latest',
-                }}
-                description="To configure Betaflight you should use the Betaflight-configurator GUI tool (Windows/OSX/Linux) which can be found here:"
-                Icon={Cog6ToothIcon}
-              ></IconElementFeature>
-              <IconElementFeature
-                title="TX Lua Scripts"
-                Icon={Cog8ToothIcon}
-                description="Configure Betaflight from your radio with the Betaflight TX Lua Scripts:"
-                link={{
-                  text: 'Latest lua scripts releases',
-                  href: 'https://github.com/betaflight/betaflight-tx-lua-scripts/releases/latest',
-                }}
-              ></IconElementFeature>
-              <IconElementFeature title="BlackBox Viewer" Icon={PresentationChartLineIcon}>
+              <IconElementFeature title="Betaflight Configurator" Icon={Cog6ToothIcon}>
+                <div className="flex flex-col">
+                  <div className="flex flex-row space-x-1 mt-0">
+                    <span>
+                      Betaflight Configurator is a Windows/OSX/Linux application for building, flashing and configuring Betaflight. Download the{' '}
+                      <a href="https://github.com/betaflight/betaflight-configurator/releases/latest" className="fancy-link no-underline">
+                        {' '}
+                        latest release
+                      </a>
+                      .
+                    </span>
+                  </div>
+                </div>
+              </IconElementFeature>
+
+              <IconElementFeature title="Betaflight Firmware" Icon={Cog6ToothIcon}>
                 <div className="flex flex-col">
-                  <div className="flex flex-row space-x-1 mt-2">
-                    <span>Viewer Releases are:</span>
-                    <a href="https://github.com/betaflight/blackbox-log-viewer/releases" className="fancy-link no-underline">
-                      Latest viewer releases
-                    </a>
+                  <div className="flex flex-row space-x-1 mt-0">
+                    <span>
+                      For Betaflight 4.4 and higher, Configurator builds a custom firmware file 'in the cloud' and flashes it to your flight controller. For 4.3 and earlier, download the correct{' '}
+                      <a href="https://github.com/betaflight/betaflight/releases" className="fancy-link no-underline">
+                        {' '}
+                        'hex' file for your flight controller
+                      </a>{' '}
+                      and flash it manually.
+                    </span>
                   </div>
-                  <div className="flex flex-row space-x-1 mt-2">
-                    <span>The Latest Viewer source is:</span>
-                    <a href="https://github.com/betaflight/blackbox-log-viewer" className="fancy-link no-underline">
-                      Latest viewer source
-                    </a>
+                </div>
+              </IconElementFeature>
+
+              <IconElementFeature title="Lua Tx Scripts" Icon={Cog6ToothIcon}>
+                <div className="flex flex-col">
+                  <div className="flex flex-row space-x-1 mt-0">
+                    <span>
+                      Adjust Betaflight's settings with your radio transmitter with Betaflight's{' '}
+                      <a href="https://github.com/betaflight/betaflight-tx-lua-scripts/releases/latest" className="fancy-link no-underline">
+                        {' '}
+                        Lua Tx scripts.
+                      </a>
+                      .
+                    </span>
+                  </div>
+                </div>
+              </IconElementFeature>
+
+              <IconElementFeature title="BlackBox Log Viewer" Icon={PresentationChartLineIcon}>
+                <div className="flex flex-col">
+                  <div className="flex flex-row space-x-1 mt-0">
+                    <span>
+                      Review flight data logs, map the flight and check debug values with{' '}
+                      <a href="https://github.com/betaflight/blackbox-log-viewer/releases" className="fancy-link no-underline">
+                        {' '}
+                        Betaflight Blackbox Log Viewer
+                      </a>
+                      .
+                    </span>
                   </div>
-                  <div className="flex flex-col mt-2">See BB Logging and Usage Wiki page on using the BlackBox logger.</div>
                 </div>
               </IconElementFeature>
             </div>
+
+            {/* End left column, start right column */}
+
             <div className="flex flex-col space-y-4">
               <IconElementFeature
-                title="Betaflight Releases"
-                link={{
-                  text: 'Releases',
-                  href: 'https://github.com/betaflight/betaflight/releases',
-                }}
-                description="Releases can be found by following the link below or downloaded from within the firmware section within the Betaflight Configurator. Also check the Upgrading List to the Right for Release Notes and other Details on the various Versions."
-                Icon={FolderIcon}
-              ></IconElementFeature>
-              <IconElementFeature
-                title="BETA TESTING (WARNING)"
+                title="Beta testing (WARNING)"
                 Icon={ExclamationCircleIcon}
-                description="If you want to contribute to better development you can download the latest beta build directly from:"
+                description="Test the latest upcoming features and contribute to Betaflight's development by using the nightly builds:"
               >
                 <div className="flex flex-col">
-                  <a href="https://ci.betaflight.tech/job/Betaflight/lastBuild/artifact/obj/" className="fancy-link no-underline">
-                    Nightly builds
-                  </a>
                   <a href="https://github.com/betaflight/betaflight-configurator-nightlies/releases" className="fancy-link no-underline">
+                    {' '}
                     Betaflight Configurator Nightly builds
                   </a>
                   <a href="https://github.com/betaflight/betaflight-tx-lua-scripts-nightlies/releases" className="fancy-link no-underline">
@@ -133,28 +142,54 @@ export default function Media() {
                   <a href="https://github.com/betaflight/blackbox-log-viewer-nightlies/releases" className="fancy-link no-underline">
                     Blackbox Viewer Nightly builds
                   </a>
-                  <div className="text-gray-400 flex flex-col mt-2">
-                    You can find release planning here:
-                    <a href="https://github.com/betaflight/betaflight/milestones" className="fancy-link no-underline">
-                      Release planning
-                    </a>
+                </div>
+              </IconElementFeature>
+
+              <IconElementFeature title="Source code" Icon={DocumentTextIcon}>
+                <div className="flex flex-col">
+                  <div className="flex flex-row space-x-1 mt-0">
+                    <span>
+                      Review and download the source code on the{' '}
+                      <a href="https://github.com/betaflight/" className="fancy-link no-underline">
+                        Betaflight GitHub Repository
+                      </a>
+                      .
+                    </span>
+                  </div>
+                </div>
+              </IconElementFeature>
+
+              <IconElementFeature title="Documentation" Icon={DocumentTextIcon}>
+                <div className="flex flex-col">
+                  <div className="flex flex-row space-x-1 mt-0">
+                    <span>
+                      Wiki, Development and other documentation may be found in the{' '}
+                      <a href="https://github.com/betaflight/betaflight.com" className="fancy-link no-underline">
+                        betaflight.com docs directory
+                      </a>
+                      .
+                    </span>
                   </div>
                 </div>
               </IconElementFeature>
             </div>
           </div>
         </HomepageFeature>
+
+        {/* Start Videos block */}
+
         <HomepageFeature className="" title="Videos" compact={true}>
           <div className="flex flex-wrap flex-col md:flex-row flex-start space-y-4 md:space-y-0 md:space-x-4">
             <div>
-              <AboutCard title="Betaflight 4.3 walkthrough" className="text-red-500 inline-block" Icon={PlayIcon}>
+              <AboutCard title="Betaflight 4.3 walkthrough" className="text-primary-600" Icon={PlayIcon}>
                 <div>
                   <YouTube videoId="LkBWRiEGKTI" opts={videoSize} />
                 </div>
               </AboutCard>
             </div>
+
             <div>
-              <AboutCard title="Betaflight 4.3 for beginners" className="text-red-500" Icon={PlayIcon}>
+              <AboutCard title="Betaflight 4.3 for beginners" className="text-primary-600" Icon={PlayIcon}>
                 <div>
                   <YouTube videoId="UTFeh-SjH9A" opts={videoSize} />
                 </div>
@@ -162,6 +197,8 @@ export default function Media() {
             </div>
           </div>
         </HomepageFeature>
+
+        {/* End Videos block */}
       </div>
     </BetaflightLayout>
   );
diff --git a/src/pages/stats.tsx b/src/pages/stats.tsx
index 21ff1cac01..e2dff27e4c 100644
--- a/src/pages/stats.tsx
+++ b/src/pages/stats.tsx
@@ -274,16 +274,8 @@ const MinorChartWrapper = ({ type }) => {
 export default function Stats() {
   return (
     <BetaflightLayout>
-      <div className="relative w-full mt-4 xl:mt-32">
-        <div className="w-full h-fit flex flex-col justify-start">
-          <div className="flex flex-col p-6 h-fit w-fit xl:ml-12">
-            <h1 className="md:text-[6rem] text-6xl border-primary-500 font-bold mb-4">Stats</h1>
-            <h2 className="text-white font-semibold md:text-3xl text-xl">Cloud Build Statistics</h2>
-          </div>
-        </div>
-      </div>
-      <div className="xl:max-w-[1920px] w-full m-auto p-4 xl:p-16">
-        <HomepageFeature title="Stats">
+      <div className="xl:max-w-[1920px] w-full p-6 mt-0 xl:mt-16">
+        <HomepageFeature blur title="Cloud Build Statistics">
           <div className="flex flex-col w-full h-full">
             <h2 className="text-primary-600 text-3xl font-bold">Total Builds</h2>
             <MajorChartWrapper />