Downloads: Refine prior commit (#446)

src/components/ReleaseDownloadButton/index.js

@@ -41,10 +41,10 @@ function toProperCase(str) {
 function getOSIcon(os, fillColor) {
   if (os === "windows") {
     return <BsWindows size={22} fill={fillColor}></BsWindows>;
-  } else if (os === "linux") {
-    return <FaLinux size={22} fill={fillColor}></FaLinux>;
   } else if (os === "macos") {
     return <BsApple size={22} fill={fillColor}></BsApple>;
+  } else if (os === "linux") {
+    return <FaLinux size={22} fill={fillColor}></FaLinux>;
   } else {
     return null;
   }
@@ -88,6 +88,8 @@ function generateDropdownItems(release, os, assets, textRemovals, isNightly) {
       } else {
         displayName = "Download";
       }
+    } else if (os === "macos") {
+      displayName = "Download";
     } else if (os === "linux") {
       // Check for Flatpak or AppImage tags which will make Appimage - x64 Qt and Flatpak - x64 Qt and no way to seemingly fix the regular way
       if (asset.additionalTags.includes("appimage")) {
@@ -97,8 +99,6 @@ function generateDropdownItems(release, os, assets, textRemovals, isNightly) {
       } else {
         displayName = toProperCase(displayName); // Capitalize the first letter for other cases like old Linux releases
       }
-    } else if (os === "macos") {
-      displayName = "Download";
     }
 
     // Strip the "- x64 Qt" for Linux because it's being annoying with the tags and who cares about how good the code looks for now it's a bit of jank.
@@ -164,15 +164,15 @@ function renderDropdownItems(
       </DropdownSection>,
       <DropdownSection
         showDivider
+        title={macosItems.length > 0 ? "macOS" : "macOS - None Available"}
+      >
+        {macosItems}
+      </DropdownSection>,
+      <DropdownSection
         title={linuxItems.length > 0 ? "Linux" : "Linux - None Available"}
       >
         {linuxItems}
       </DropdownSection>,
-      <DropdownSection
-        title={macosItems.length > 0 ? "MacOS" : "MacOS - None Available"}
-      >
-        {macosItems}
-      </DropdownSection>,
     );
   }
   return items;
@@ -199,8 +199,8 @@ export function ReleaseDownloadButton({
 
   // States to hold dropdown items for each platform
   const [windowsItems, setWindowsItems] = useState([]);
-  const [linuxItems, setLinuxItems] = useState([]);
   const [macosItems, setMacosItems] = useState([]);
+  const [linuxItems, setLinuxItems] = useState([]);
 
   // Effect to generate dropdown items when the release or other inputs change
   useEffect(() => {
@@ -225,27 +225,6 @@ export function ReleaseDownloadButton({
         ),
       );
     }
-    if ("linux" in release) {
-      setLinuxItems(
-        generateDropdownItems(
-          release.linux,
-          "linux",
-          release.linux?.assets?.Linux,
-          ["Linux"],
-          isNightly,
-        ),
-      );
-    } else {
-      setLinuxItems(
-        generateDropdownItems(
-          release,
-          "linux",
-          release.assets?.Linux,
-          ["Linux"],
-          isNightly,
-        ),
-      );
-    }
     if ("macos" in release) {
       setMacosItems(
         generateDropdownItems(
@@ -267,6 +246,27 @@ export function ReleaseDownloadButton({
         ),
       );
     }
+    if ("linux" in release) {
+      setLinuxItems(
+        generateDropdownItems(
+          release.linux,
+          "linux",
+          release.linux?.assets?.Linux,
+          ["Linux"],
+          isNightly,
+        ),
+      );
+    } else {
+      setLinuxItems(
+        generateDropdownItems(
+          release,
+          "linux",
+          release.assets?.Linux,
+          ["Linux"],
+          isNightly,
+        ),
+      );
+    }
   }, [release]);
 
   return (

src/css/custom.css

@@ -405,22 +405,7 @@ table td {
 }
 
 .h1-icon {
-  fontsize: "1em";
-  verticalalign: "middle";
-}
-
-.h1-icon-spacer {
-  fontsize: "0.5em";
-  verticalalign: "middle";
-  marginleft: "0.5em";
-}
-
-.stable-blue {
-  color: "#4b7cd7";
-}
-
-.nightly-orange {
-  color: "#b58d05";
+  font-size: "1em";
 }
 
 .imgCompareContainer {

src/pages/downloads/index.js

@@ -128,14 +128,14 @@ export default function Downloads() {
         // is not actually a problem we currently have and should be solved at the API level
         setLatestStableRelease({
           windows: getLatestRelease(data.stableReleases.data, "Windows"),
-          linux: getLatestRelease(data.stableReleases.data, "Linux"),
           macos: getLatestRelease(data.stableReleases.data, "MacOS"),
+          linux: getLatestRelease(data.stableReleases.data, "Linux"),
         });
 
         setLatestNightlyRelease({
           windows: getLatestRelease(data.nightlyReleases.data, "Windows"),
-          linux: getLatestRelease(data.nightlyReleases.data, "Linux"),
           macos: getLatestRelease(data.nightlyReleases.data, "MacOS"),
+          linux: getLatestRelease(data.nightlyReleases.data, "Linux"),
         });
 
         setStableReleases(data.stableReleases);
@@ -185,10 +185,12 @@ export default function Downloads() {
             <div>
               <div className="inline-block">
                 <div>
-                  <h1 className="bg-clip-text text-transparent bg-gradient-to-b from-[#5099ff] to-[#465eae]">
+                  <h1 className="bg-clip-text text-transparent bg-gradient-to-b from-[#5099ff] to-[#465eae] flex items-center justify-left gap-2">
                     Stable Releases
-                    <span className="h1-icon-spacer" />
-                    <GiBrickWall className="h1-icon stable-blue" />
+                    <GiBrickWall
+                      className="h1-icon"
+                      style={{ color: "#4b7cd7" }}
+                    />
                   </h1>
                 </div>
                 {apiErrorMsg !== undefined && (
@@ -204,7 +206,7 @@ export default function Downloads() {
                             href="https://github.com/PCSX2/pcsx2/releases"
                             target="_blank"
                             rel="noreferrer"
-                            className="stable-blue hover:underline"
+                            className="text-blue-500 hover:underline"
                           >
                             GitHub
                           </a>
@@ -232,7 +234,7 @@ export default function Downloads() {
                 <div>
                   <p>
                     If you need help using the emulator,{" "}
-                    <a href="/docs/" className="text-blue-500 hover:underline">
+                    <a href="/docs/" className="text-blue-400 hover:underline">
                       see the documentation.
                     </a>
                   </p>
@@ -300,10 +302,12 @@ export default function Downloads() {
             <div>
               <div className="inline-block">
                 <div>
-                  <h1 className="bg-clip-text text-transparent bg-gradient-to-b to-[#777500] from-[#f2a40a]">
+                  <h1 className="bg-clip-text text-transparent bg-gradient-to-b to-[#777500] from-[#f2a40a] flex items-center justify-left gap-2">
                     Nightly Releases
-                    <span className="h1-icon-spacer" />
-                    <IoIosCloudyNight className="h1-icon nightly-orange" />
+                    <IoIosCloudyNight
+                      className="h1-icon"
+                      style={{ color: "#b58d05" }}
+                    />
                   </h1>
                 </div>
                 {apiErrorMsg !== undefined && (
@@ -347,7 +351,7 @@ export default function Downloads() {
                 <div>
                   <p>
                     If you need help using the emulator,{" "}
-                    <a href="/docs/" className="nightly-orange hover:underline">
+                    <a href="/docs/" className="text-amber-400 hover:underline">
                       see the documentation.
                     </a>
                   </p>