feat: Additional file upload button (#1290)

* feat: Upload files button added to files manager header * feat: Remove conditional rendering on upload button
web3-storage · May 5, 2022 · 9fafc83 · 9fafc83
1 parent 2432cf7
commit 9fafc83
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 7 deletions.
diff --git a/packages/website/components/account/filesManager/filesManager.js b/packages/website/components/account/filesManager/filesManager.js
@@ -189,7 +189,20 @@ const FilesManager = ({ className, content, onFileUpload }) => {
   return (
     <div className={clsx('section files-manager-container', className, isUpdating && 'disabled')}>
       <div className="files-manager-header">
-        <span>{content?.heading}</span>
+        <div className="files-manager-title has-upload-button">
+          <div className="title">{content?.heading}</div>
+          <Button
+            onClick={onFileUpload}
+            variant={content?.upload.theme}
+            tracking={{
+              ui: countly.ui[content?.upload.ui],
+              action: content?.upload.action,
+              data: { isFirstFile: false },
+            }}
+          >
+            {content?.upload.text}
+          </Button>
+        </div>
         <Filterable
           className="files-manager-search"
           items={files}

diff --git a/packages/website/components/account/filesManager/filesManager.scss b/packages/website/components/account/filesManager/filesManager.scss
@@ -35,8 +35,21 @@
   }
 
   // Title
-  > :first-child {
-    margin-right: 8rem;
+  .files-manager-title {
+    display: flex;
+    flex-direction: row;
+    &:not(.has-upload-button) {
+      margin-right: 8rem;
+    }
+    .button {
+      @include fontSize_Atom;
+      transform: translateY(1px);
+      @include tiny {
+        button {
+          padding: 0.25rem 0.75rem;
+        }
+      }
+    }
     @include medium {
       padding-left: 1rem;
       margin-right: initial;

diff --git a/packages/website/content/pages/app/account.json b/packages/website/content/pages/app/account.json
@@ -85,6 +85,12 @@
     },
     "file_manager": {
       "heading": "Files",
+      "upload": {
+        "text": "Upload +",
+        "theme": "text",
+        "ui": "FILES",
+        "action": "Upload File"
+      },
       "table": {
         "message": "You don't have any files uploaded yet.",
         "cta": {

diff --git a/packages/website/pages/account/index.js b/packages/website/pages/account/index.js
@@ -21,7 +21,7 @@ const Account = () => {
   const dashboard = AppData.page_content.dashboard;
   const { uploads } = useUploads();
 
-  const onFileUploead = useCallback(() => {
+  const onFileUpload = useCallback(() => {
     uploadModalState[1](true);
   }, [uploadModalState]);
 
@@ -55,14 +55,14 @@ const Account = () => {
         heading: !!uploads.length ? dashboard.card_right.heading.option_1 : dashboard.card_right.heading.option_2,
         description: dashboard.card_right.description,
         ctas: dashboard.card_right.ctas.map(cta => ({
-          onClick: onFileUploead,
+          onClick: onFileUpload,
           variant: cta.theme,
           tracking: { ui: countly.ui[cta.ui], action: cta.action, isFirstFile: !uploads.length },
           children: cta.text,
         })),
       },
     }),
-    [uploads.length, onFileUploead, dashboard]
+    [uploads.length, onFileUpload, dashboard]
   );
 
   return (
@@ -81,7 +81,7 @@ const Account = () => {
           <FilesManager
             content={AppData.page_content.file_manager}
             className="account-files-manager"
-            onFileUpload={onFileUploead}
+            onFileUpload={onFileUpload}
           />
         </div>
         <FileUploader