From af86168c2f73665f60295c4f5159634b006f9d3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= <nh.quiroz@gmail.com>
Date: Wed, 7 Dec 2022 14:30:09 -0300
Subject: [PATCH 1/2] feat: add empty state for platforms without releases

---
 src/components/UI/DataTable.tsx               | 58 +++++++++++++------
 .../UI/downloads/DownloadsTable.tsx           |  2 +-
 2 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/src/components/UI/DataTable.tsx b/src/components/UI/DataTable.tsx
index 1aa5341ce9..810d92813a 100644
--- a/src/components/UI/DataTable.tsx
+++ b/src/components/UI/DataTable.tsx
@@ -1,4 +1,15 @@
-import { Link, Table, Thead, Tr, Th, TableContainer, Text, Tbody, Td } from '@chakra-ui/react';
+import {
+  Link,
+  Table,
+  Thead,
+  Tr,
+  Th,
+  TableContainer,
+  Text,
+  Tbody,
+  Td,
+  Stack
+} from '@chakra-ui/react';
 import { FC } from 'react';
 import { OpenPGPSignaturesData, ReleaseData } from '../../types';
 import { getParsedDate } from '../../utils';
@@ -20,6 +31,7 @@ export const DataTable: FC<Props> = ({ columnHeaders, data }) => {
       css={{
         '&::-webkit-scrollbar': {
           borderTop: '2px solid var(--chakra-colors-primary)',
+          borderBottom: '2px solid var(--chakra-colors-primary)',
           height: 18
         },
         '&::-webkit-scrollbar-thumb': {
@@ -30,26 +42,34 @@ export const DataTable: FC<Props> = ({ columnHeaders, data }) => {
       pb={4}
     >
       <Table variant='unstyled'>
-        <Thead>
-          <Tr>
-            {columnHeaders.map((columnHeader, idx) => {
-              return (
-                <Th key={idx} textTransform='none' minW={'130.5px'} px={4}>
-                  <Text
-                    fontFamily='"JetBrains Mono", monospace'
-                    fontWeight={700}
-                    fontSize='md'
-                    color='#868b87' //? Use theme color? Or add to theme?
-                  >
-                    {columnHeader}
-                  </Text>
-                </Th>
-              );
-            })}
-          </Tr>
-        </Thead>
+        {data.length > 0 && (
+          <Thead>
+            <Tr>
+              {columnHeaders.map((columnHeader, idx) => {
+                return (
+                  <Th key={idx} textTransform='none' minW={'130.5px'} px={4}>
+                    <Text
+                      fontFamily='"JetBrains Mono", monospace'
+                      fontWeight={700}
+                      fontSize='md'
+                      color='#868b87' //? Use theme color? Or add to theme?
+                    >
+                      {columnHeader}
+                    </Text>
+                  </Th>
+                );
+              })}
+            </Tr>
+          </Thead>
+        )}
 
         <Tbody>
+          {data.length === 0 && (
+            <Stack justifyContent='center' alignItems='center' w='100%' minH={80}>
+              <Text textStyle='header4'>No builds found</Text>
+            </Stack>
+          )}
+
           {dataType === 'Releases' &&
             data.map((r: ReleaseData, idx: number) => {
               return (
diff --git a/src/components/UI/downloads/DownloadsTable.tsx b/src/components/UI/downloads/DownloadsTable.tsx
index 7b3263313c..a5feab18c0 100644
--- a/src/components/UI/downloads/DownloadsTable.tsx
+++ b/src/components/UI/downloads/DownloadsTable.tsx
@@ -36,7 +36,7 @@ export const DownloadsTable: FC<Props> = ({
   const LAST_2_LINUX_RELEASES = amountOfReleasesToShow + 12;
 
   return (
-    <Stack sx={{ mt: '0 !important' }} borderBottom='2px solid' borderColor='primary'>
+    <Stack sx={{ mt: '0 !important' }}>
       <Tabs variant='unstyled' onChange={idx => setTotalReleases(totalReleases[idx])}>
         <TabList color='primary' bg='button-bg'>
           {DOWNLOADS_TABLE_TABS.map((tab, idx) => {

From 527dad36352b602df28a66bab5dd321e2f15139b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= <nh.quiroz@gmail.com>
Date: Wed, 7 Dec 2022 16:59:44 -0300
Subject: [PATCH 2/2] fix: borderBottom on DownloadsTable

---
 src/components/UI/DataTable.tsx                |  3 +--
 src/components/UI/downloads/DownloadsTable.tsx | 11 ++++++++++-
 src/pages/downloads.tsx                        |  2 ++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/UI/DataTable.tsx b/src/components/UI/DataTable.tsx
index 810d92813a..55df07c493 100644
--- a/src/components/UI/DataTable.tsx
+++ b/src/components/UI/DataTable.tsx
@@ -31,7 +31,6 @@ export const DataTable: FC<Props> = ({ columnHeaders, data }) => {
       css={{
         '&::-webkit-scrollbar': {
           borderTop: '2px solid var(--chakra-colors-primary)',
-          borderBottom: '2px solid var(--chakra-colors-primary)',
           height: 18
         },
         '&::-webkit-scrollbar-thumb': {
@@ -52,7 +51,7 @@ export const DataTable: FC<Props> = ({ columnHeaders, data }) => {
                       fontFamily='"JetBrains Mono", monospace'
                       fontWeight={700}
                       fontSize='md'
-                      color='#868b87' //? Use theme color? Or add to theme?
+                      color='#868b87' // TODO: Use theme color? Or add to theme?
                     >
                       {columnHeader}
                     </Text>
diff --git a/src/components/UI/downloads/DownloadsTable.tsx b/src/components/UI/downloads/DownloadsTable.tsx
index a5feab18c0..b8a45207c6 100644
--- a/src/components/UI/downloads/DownloadsTable.tsx
+++ b/src/components/UI/downloads/DownloadsTable.tsx
@@ -12,6 +12,7 @@ interface Props {
   windowsData: ReleaseData[];
   iOSData: ReleaseData[];
   androidData: ReleaseData[];
+  totalReleasesNumber: number;
   amountOfReleasesToShow: number;
   setTotalReleases: (idx: number) => void;
 }
@@ -22,6 +23,7 @@ export const DownloadsTable: FC<Props> = ({
   windowsData,
   iOSData,
   androidData,
+  totalReleasesNumber,
   amountOfReleasesToShow,
   setTotalReleases
 }) => {
@@ -36,7 +38,14 @@ export const DownloadsTable: FC<Props> = ({
   const LAST_2_LINUX_RELEASES = amountOfReleasesToShow + 12;
 
   return (
-    <Stack sx={{ mt: '0 !important' }}>
+    <Stack
+      sx={{ mt: '0 !important' }}
+      borderBottom={
+        amountOfReleasesToShow < totalReleasesNumber
+          ? '2px solid var(--chakra-colors-primary)'
+          : 'none'
+      }
+    >
       <Tabs variant='unstyled' onChange={idx => setTotalReleases(totalReleases[idx])}>
         <TabList color='primary' bg='button-bg'>
           {DOWNLOADS_TABLE_TABS.map((tab, idx) => {
diff --git a/src/pages/downloads.tsx b/src/pages/downloads.tsx
index 06f546df22..720f3020ed 100644
--- a/src/pages/downloads.tsx
+++ b/src/pages/downloads.tsx
@@ -368,6 +368,7 @@ const DownloadsPage: NextPage<Props> = ({ data }) => {
               windowsData={ALL_WINDOWS_STABLE_RELEASES}
               iOSData={ALL_IOS_STABLE_RELEASES}
               androidData={ALL_ANDROID_STABLE_RELEASES}
+              totalReleasesNumber={totalStableReleases}
               amountOfReleasesToShow={amountStableReleases}
               setTotalReleases={setTotalStableReleases}
             />
@@ -423,6 +424,7 @@ const DownloadsPage: NextPage<Props> = ({ data }) => {
               windowsData={ALL_WINDOWS_DEV_BUILDS}
               iOSData={ALL_IOS_DEV_BUILDS}
               androidData={ALL_ANDROID_DEV_BUILDS}
+              totalReleasesNumber={totalDevBuilds}
               amountOfReleasesToShow={amountDevBuilds}
               setTotalReleases={setTotalDevBuilds}
             />