Merge pull request #1994 from SkynetLabs/dashboard-v2-feedback-fixes-main-screen

Dashboard v2 - Address feedback regarding main dashboard

packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js

@@ -12,11 +12,13 @@ const BarTip = styled.span.attrs({
 })``;
 
 const BarLabel = styled.span.attrs({
-  className: "bg-white rounded border-2 border-palette-200 px-3 whitespace-nowrap absolute shadow",
+  className: "usage-label bg-white rounded border-2 border-palette-200 px-3 whitespace-nowrap absolute shadow",
 })`
-  right: max(0%, ${({ $percentage }) => 100 - $percentage}%);
-  top: -0.5rem;
-  transform: translateX(50%);
+  ${({ $percentage }) => `
+    left: max(0%, ${$percentage}%);
+    top: -0.5rem;
+    transform: translateX(-${$percentage}%);
+  `}
 `;
 
 export const GraphBar = ({ value, limit, label }) => {

packages/dashboard-v2/src/components/LatestActivity/ActivityTable.js

@@ -4,6 +4,7 @@ import useSWR from "swr";
 import { Table, TableBody, TableCell, TableRow } from "../Table";
 import { ContainerLoadingIndicator } from "../LoadingIndicator";
 
+import { ViewAllLink } from "./ViewAllLink";
 import useFormattedActivityData from "./useFormattedActivityData";
 
 export default function ActivityTable({ type }) {
@@ -22,20 +23,23 @@ export default function ActivityTable({ type }) {
   }
 
   return (
-    <Table style={{ tableLayout: "fixed" }}>
-      <TableBody>
-        {items.map(({ id, name, type, size, date, skylink }) => (
-          <TableRow key={id}>
-            <TableCell>{name}</TableCell>
-            <TableCell className="w-[80px]">{type}</TableCell>
-            <TableCell className="w-[80px]" align="right">
-              {size}
-            </TableCell>
-            <TableCell className="w-[180px]">{date}</TableCell>
-            <TableCell>{skylink}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
+    <>
+      <Table style={{ tableLayout: "fixed" }}>
+        <TableBody>
+          {items.map(({ id, name, type, size, date, skylink }) => (
+            <TableRow key={id}>
+              <TableCell>{name}</TableCell>
+              <TableCell className="w-[80px]">{type}</TableCell>
+              <TableCell className="w-[80px]" align="right">
+                {size}
+              </TableCell>
+              <TableCell className="w-[180px]">{date}</TableCell>
+              <TableCell>{skylink}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <ViewAllLink to={`/files?tab=${type}`} />
+    </>
   );
 }

packages/dashboard-v2/src/components/LatestActivity/LatestActivity.js

@@ -1,21 +1,10 @@
 import * as React from "react";
-import { Link } from "gatsby";
 
 import { Panel } from "../Panel";
 import { Tab, TabPanel, Tabs } from "../Tabs";
-import { ArrowRightIcon } from "../Icons";
 
 import ActivityTable from "./ActivityTable";
 
-const ViewAllLink = (props) => (
-  <Link className="inline-flex mt-6 items-center gap-3 ease-in-out hover:brightness-90" {...props}>
-    <span className="bg-primary rounded-full w-[32px] h-[32px] inline-flex justify-center items-center">
-      <ArrowRightIcon />
-    </span>
-    <span className="font-sans text-xs uppercase text-palette-400">View all</span>
-  </Link>
-);
-
 export default function LatestActivity() {
   return (
     <Panel title="Latest activity">
@@ -24,11 +13,9 @@ export default function LatestActivity() {
         <Tab id="downloads" title="Downloads" />
         <TabPanel tabId="uploads" className="pt-4">
           <ActivityTable type="uploads" />
-          <ViewAllLink to="/files?tab=uploads" />
         </TabPanel>
         <TabPanel tabId="downloads" className="pt-4">
           <ActivityTable type="downloads" />
-          <ViewAllLink to="/files?tab=downloads" />
         </TabPanel>
       </Tabs>
     </Panel>

packages/dashboard-v2/src/components/LatestActivity/ViewAllLink.js

@@ -0,0 +1,12 @@
+import { Link } from "gatsby";
+
+import { ArrowRightIcon } from "../Icons";
+
+export const ViewAllLink = (props) => (
+  <Link className="inline-flex mt-6 items-center gap-3 ease-in-out hover:brightness-90" {...props}>
+    <span className="bg-primary rounded-full w-[32px] h-[32px] inline-flex justify-center items-center">
+      <ArrowRightIcon />
+    </span>
+    <span className="font-sans text-xs uppercase text-palette-400">View all</span>
+  </Link>
+);

packages/dashboard-v2/src/components/Uploader/UploaderItem.js

@@ -109,7 +109,6 @@ export default function UploaderItem({ onUploadStateChange, upload }) {
           {upload.status === "uploading" && (
             <span className="uppercase tabular-nums">{Math.floor(upload.progress * 100)}%</span>
           )}
-          {upload.status === "processing" && <span className="uppercase text-palette-300">Wait</span>}
           {upload.status === "complete" && (
             <button
               className="uppercase hover:text-primary transition-colors duration-200"