Apply suggestions from code review

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

Author: fiskus

catalog/app/containers/Bucket/Download/BucketOptions.tsx

@@ -36,7 +36,7 @@ interface DownloadDirProps {
 
 function DownloadDir({ dirHandle }: DownloadDirProps) {
   return (
-    <FileView.ZipDownloadForm suffix={`dir/${dirHandle}/${dirHandle}`}>
+    <FileView.ZipDownloadForm suffix={`dir/${dirHandle.bucket}/${dirHandle.path}`}>
       <M.Button startIcon={<M.Icon>archive</M.Icon>} type="submit">
         Download ZIP (directory)
       </M.Button>
@@ -81,7 +81,7 @@ interface OptionsProps {
   hideCode?: boolean
 }
 
-export default function Optiots({ handle, hideCode }: OptionsProps) {
+export default function Options({ handle, hideCode }: OptionsProps) {
   if (hideCode) return <DownloadPanel handle={handle} />
 
   return (

catalog/app/containers/Bucket/Download/Button.tsx

@@ -18,7 +18,7 @@ const useStyles = M.makeStyles((t) => ({
     },
   },
   backdrop: {
-    zIndex: t.zIndex.drawer,
+    zIndex: t.zIndex.modal - 1,
   },
 }))
 

catalog/app/containers/Bucket/Download/Code.tsx

@@ -80,7 +80,7 @@ export default function Code({ className, help, hl, label, lines }: CodeProps) {
     <div className={className}>
       <M.Typography className={classes.label} variant="subtitle2">
         {label}
-        <a href={help} target="_blank" className={classes.help}>
+        <a href={help} target="_blank" rel="noopener noreferrer" className={classes.help}>
           <M.IconButton size="small">
             <M.Icon fontSize="inherit">help</M.Icon>
           </M.IconButton>

catalog/app/containers/Bucket/Download/OptionsTabs.tsx

@@ -74,7 +74,7 @@ const useStyles = M.makeStyles((t) => ({
       transform: 'scaleX(0.5)',
     },
     '100%': {
-      opacity: 'scaleX(1)',
+      transform: 'scaleX(1)',
     },
   },
 }))

catalog/app/containers/Bucket/Download/PackageOptions.tsx

@@ -167,7 +167,7 @@ export default function Options({
   selection,
   uri,
 }: OptionsProps) {
-  if (hideCode) return <DownloadPanel fileHandle={fileHandle} uri={uri} />
+  if (hideCode) return <DownloadPanel fileHandle={fileHandle} selection={selection} uri={uri} />
 
   return (
     <Tabs labels={['QuiltSync', 'Code']}>

catalog/app/utils/StyledTooltip.tsx

@@ -16,7 +16,7 @@ const useStyles = M.makeStyles((t) => ({
     padding: t.spacing(1),
   },
   arrow: {
-    color: t.palette.common.white,
+    color: t.palette.background.paper,
   },
 }))