From 53591f95a3b5bc39a394dc997ec0e153ccc4f246 Mon Sep 17 00:00:00 2001
From: Caner Akdas <canerakdas@gmail.com>
Date: Sun, 29 Dec 2024 00:36:45 +0300
Subject: [PATCH] chore: Minor changes on download page (#7367)

* chore: mobile layout and skeleton sizes

* chore: layout on not-found page

* chore: mobile skeleton size

* chore: review updates

* chore: error page layout
---
 apps/site/app/[locale]/error.tsx                   |  2 +-
 apps/site/app/[locale]/not-found.tsx               |  2 +-
 .../components/Downloads/Release/BlogPostLink.tsx  |  6 ++----
 .../Downloads/Release/PlatformDropdown.tsx         |  2 +-
 .../Downloads/Release/PrebuiltDownloadButtons.tsx  | 14 +++++++++++---
 .../Downloads/Release/ReleaseCodeBox.tsx           |  2 +-
 apps/site/layouts/GlowingBackdrop.tsx              |  9 ++++-----
 7 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/apps/site/app/[locale]/error.tsx b/apps/site/app/[locale]/error.tsx
index 2a4d2e3431e71..79feae5ccf4c0 100644
--- a/apps/site/app/[locale]/error.tsx
+++ b/apps/site/app/[locale]/error.tsx
@@ -11,7 +11,7 @@ const ErrorPage: FC<{ error: Error }> = () => {
   const t = useTranslations();
 
   return (
-    <GlowingBackdropLayout>
+    <GlowingBackdropLayout kind="default">
       500
       <h1 className="special -mt-4 text-center">
         {t('layouts.error.internalServerError.title')}
diff --git a/apps/site/app/[locale]/not-found.tsx b/apps/site/app/[locale]/not-found.tsx
index ec3a343628e52..9ab34ca5bbf2e 100644
--- a/apps/site/app/[locale]/not-found.tsx
+++ b/apps/site/app/[locale]/not-found.tsx
@@ -12,7 +12,7 @@ const NotFoundPage: FC = () => {
   const t = useTranslations();
 
   return (
-    <GlowingBackdropLayout>
+    <GlowingBackdropLayout kind="default">
       404
       <h1 className="special -mt-4 text-center">
         {t('layouts.error.notFound.title')}
diff --git a/apps/site/components/Downloads/Release/BlogPostLink.tsx b/apps/site/components/Downloads/Release/BlogPostLink.tsx
index d9d1f90d60aad..3082da9c3c5c8 100644
--- a/apps/site/components/Downloads/Release/BlogPostLink.tsx
+++ b/apps/site/components/Downloads/Release/BlogPostLink.tsx
@@ -3,16 +3,14 @@
 import type { FC, PropsWithChildren } from 'react';
 import { useContext } from 'react';
 
-import LinkWithArrow from '@/components/Downloads/Release/LinkWithArrow';
+import Link from '@/components/Link';
 import { ReleaseContext } from '@/providers/releaseProvider';
 
 const BlogPostLink: FC<PropsWithChildren> = ({ children }) => {
   const { release } = useContext(ReleaseContext);
   const version = release.versionWithPrefix;
 
-  return (
-    <LinkWithArrow href={`/blog/release/${version}`}>{children}</LinkWithArrow>
-  );
+  return <Link href={`/blog/release/${version}`}>{children}</Link>;
 };
 
 export default BlogPostLink;
diff --git a/apps/site/components/Downloads/Release/PlatformDropdown.tsx b/apps/site/components/Downloads/Release/PlatformDropdown.tsx
index 46e3b8ec33c21..de595264ab5d9 100644
--- a/apps/site/components/Downloads/Release/PlatformDropdown.tsx
+++ b/apps/site/components/Downloads/Release/PlatformDropdown.tsx
@@ -64,7 +64,7 @@ const PlatformDropdown: FC = () => {
       placeholder={t('layouts.download.dropdown.unknown')}
       ariaLabel={t('layouts.download.dropdown.installMethod')}
       onChange={platform => platform && release.setPlatform(platform)}
-      className="min-w-20"
+      className="min-w-28"
       inline={true}
     />
   );
diff --git a/apps/site/components/Downloads/Release/PrebuiltDownloadButtons.tsx b/apps/site/components/Downloads/Release/PrebuiltDownloadButtons.tsx
index f3c8a2d57c7b0..5a943b0472a8b 100644
--- a/apps/site/components/Downloads/Release/PrebuiltDownloadButtons.tsx
+++ b/apps/site/components/Downloads/Release/PrebuiltDownloadButtons.tsx
@@ -30,12 +30,16 @@ const PrebuiltDownloadButtons: FC = () => {
     : '';
 
   return (
-    <div className="my-4 flex flex-wrap gap-2">
+    <div className="my-4 flex flex-col gap-2 sm:flex-row">
       <Skeleton
         loading={os === 'LOADING' || platform === ''}
         hide={OS_NOT_SUPPORTING_INSTALLERS.includes(os)}
       >
-        <Button href={installerUrl} size="small" className="min-w-56">
+        <Button
+          href={installerUrl}
+          size="small"
+          className="w-full min-w-56 sm:w-auto"
+        >
           <CloudArrowDownIcon />
 
           {t('layouts.download.buttons.installer', {
@@ -46,7 +50,11 @@ const PrebuiltDownloadButtons: FC = () => {
       </Skeleton>
 
       <Skeleton loading={os === 'LOADING' || platform === ''}>
-        <Button href={binaryUrl} size="small" className="min-w-56">
+        <Button
+          href={binaryUrl}
+          size="small"
+          className="w-full min-w-56 sm:w-auto"
+        >
           <CloudArrowDownIcon />
 
           {t('layouts.download.buttons.binary', {
diff --git a/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx b/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx
index 46701c5b17fa6..f3ffb8057cf62 100644
--- a/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx
+++ b/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx
@@ -111,7 +111,7 @@ const ReleaseCodeBox: FC = () => {
       )}
 
       <Skeleton loading={renderSkeleton}>
-        <CodeBox language={displayName} className="min-h-[16rem]">
+        <CodeBox language={displayName} className="min-h-[16.5rem]">
           <code dangerouslySetInnerHTML={{ __html: parsedSnippets }} />
         </CodeBox>
       </Skeleton>
diff --git a/apps/site/layouts/GlowingBackdrop.tsx b/apps/site/layouts/GlowingBackdrop.tsx
index 377eac2e18903..a291865f640d8 100644
--- a/apps/site/layouts/GlowingBackdrop.tsx
+++ b/apps/site/layouts/GlowingBackdrop.tsx
@@ -8,13 +8,12 @@ import WithNavBar from '@/components/withNavBar';
 import styles from './layouts.module.css';
 
 type GlowingBackdropLayoutProps = PropsWithChildren<{
-  kind?: 'home';
+  kind?: 'home' | 'default';
 }>;
 
-const GlowingBackdropLayout: FC<GlowingBackdropLayoutProps> = ({
-  kind = 'home',
-  children,
-}) => (
+const GlowingBackdropLayout: FC<
+  PropsWithChildren<GlowingBackdropLayoutProps>
+> = ({ kind = 'home', children }) => (
   <>
     <WithNavBar />
     <div className={styles.centeredLayout}>