download text formatting

uselagoon · Nov 29, 2023 · 2644d44 · 2644d44
1 parent 81818e3
commit 2644d44
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/src/components/Backups/StyledBackups.tsx b/src/components/Backups/StyledBackups.tsx
@@ -72,6 +72,23 @@ export const DataTable = styled.div`
       padding-right: 15px;
     }
 
+    .btn-download {
+      width: 173px;
+      padding-inline: 22px;
+      white-space: nowrap;
+
+      &-lg {
+        font-size: 80%;
+      }
+
+      @media (max-width: 1200px) {
+        width: unset;
+        &-lg {
+          font-size: initial;
+        }
+      }
+    }
+
     & > div {
       padding-left: 20px;
       @media ${bp.wideDown} {

diff --git a/src/components/RestoreButton/index.js b/src/components/RestoreButton/index.js
@@ -3,10 +3,11 @@ import React from 'react';
 import Button from 'components/Button';
 import Prepare from 'components/RestoreButton/Prepare';
 
-
 function humanFileSize(size) {
   var i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
-  return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
+  const formatted = (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
+
+  return [formatted.length > 5, formatted];
 }
 
 /**
@@ -19,7 +20,13 @@ const RestoreButton = ({ backup: { backupId, restore } }) => {
 
   if (restore.status === 'failed') return <Button disabled>Retrieve failed</Button>;
 
-  return <Button href={restore.restoreLocation}>Download ({humanFileSize(restore.restoreSize)})</Button>;
+  const [isOverflowing, formattedSize] = humanFileSize(restore.restoreSize);
+
+  return (
+    <Button variant={`download ${isOverflowing ? 'btn-download-lg' : ''}`} href={restore.restoreLocation}>
+      Download ({formattedSize})
+    </Button>
+  );
 };
 
 export default RestoreButton;