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] 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) => {