Merge branch 'feat/ui/integration' into mock

codex-storage · Nov 5, 2024 · 1d80fb6 · 1d80fb6
2 parents 53c557a + 301a672
commit 1d80fb6
Show file tree

Hide file tree

Showing 34 changed files with 763 additions and 268 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "React"
   ],
   "dependencies": {
-    "@codex-storage/marketplace-ui-components": "^0.0.33",
+    "@codex-storage/marketplace-ui-components": "^0.0.34",
     "@codex-storage/sdk-js": "^0.0.15",
     "@sentry/browser": "^8.32.0",
     "@sentry/react": "^8.31.0",

diff --git a/src/components/CloseIcon/CloseIcon.tsx b/src/components/CloseIcon/CloseIcon.tsx
@@ -0,0 +1,15 @@
+export function CloseIcon() {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5.00005 3.93955L8.71255 0.227051L9.77305 1.28755L6.06055 5.00005L9.77305 8.71255L8.71255 9.77305L5.00005 6.06055L1.28755 9.77305L0.227051 8.71255L3.93955 5.00005L0.227051 1.28755L1.28755 0.227051L5.00005 3.93955Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/ConnectedAccount/WalletLines.tsx b/src/components/ConnectedAccount/WalletLines.tsx
@@ -9,13 +9,13 @@ export function WalletLines() {
         opacity="0.5"
         d="M16.8017 44.5368H0.231579C0.103681 44.5368 0 44.6405 0 44.7684C0 44.8963 0.103681 45 0.231579 45H679C681.209 45 683 43.2091 683 41V5C683 2.79086 681.209 1 679 1H644.034C643.689 1 643.345 1.04472 643.011 1.13303L560.776 22.8885C560.443 22.9768 560.099 23.0215 559.753 23.0215H532.049C531.504 23.0215 530.964 22.91 530.463 22.6937L480.993 1.32786C480.493 1.11157 479.953 1 479.408 1H428.397C427.753 1 427.117 1.15593 426.546 1.45451L386.125 22.567C385.553 22.8656 384.945 23.0215 384.3 23.0215H317.645C317.177 23.0215 316.73 23.1039 316.289 23.2648L274.515 38.5387C274.075 38.6996 273.61 38.782 273.141 38.782H244.777C244.302 38.782 243.831 38.6975 243.386 38.5324L202.234 23.2711C201.789 23.1061 201.318 23.0215 200.843 23.0215H164.28C163.623 23.0215 162.977 22.8599 162.397 22.5508L122.879 1.47072C122.299 1.16166 121.653 1 120.996 1H73.6247C72.7112 1 71.8252 1.31267 71.1141 1.88603L19.3123 43.6508C18.6011 44.2242 17.7152 44.5368 16.8017 44.5368Z"
         fill="url(#paint0_linear_401_31774)"
-        fill-opacity="0.06"
+        fillOpacity="0.06"
       />
       <path
         opacity="0.6"
         d="M0 45H15.3667C17.2079 45 18.9928 44.3649 20.4201 43.2019L70.0062 2.79813C71.4336 1.63509 73.2184 1 75.0596 1H119.977C121.302 1 122.607 1.32923 123.773 1.9581L161.502 22.2977C162.669 22.9266 163.973 23.2558 165.299 23.2558H200.111C201.07 23.2558 202.021 23.4282 202.919 23.7647L242.701 38.675C243.599 39.0115 244.55 39.1839 245.509 39.1839H272.419C273.365 39.1839 274.304 39.016 275.192 38.688L315.613 23.7517C316.5 23.4237 317.424 23.2558 318.37 23.2558C336.899 23.2558 374.308 23.2558 383.286 23.2558C384.587 23.2558 385.856 22.9382 387.007 22.3306L425.663 1.92521C426.814 1.31759 428.096 1 429.398 1H478.564C479.666 1 480.755 1.22743 481.765 1.66803L529.692 22.5878C530.701 23.0284 531.791 23.2558 532.892 23.2558H559.222C559.92 23.2558 560.615 23.1645 561.289 22.9843L642.499 1.27147C643.173 1.09126 643.867 1 644.565 1L683 1"
         stroke="#3EE089"
-        stroke-width="2"
+        strokeWidth="2"
       />
       <defs>
         <linearGradient
@@ -25,8 +25,8 @@ export function WalletLines() {
           x2="341.5"
           y2="45"
           gradientUnits="userSpaceOnUse">
-          <stop stop-color="#CFD1D3" />
-          <stop offset="1" stop-color="#E4E5E7" stop-opacity="0" />
+          <stop stopColor="#CFD1D3" />
+          <stop offset="1" stopColor="#E4E5E7" stopOpacity="0" />
         </linearGradient>
       </defs>
     </svg>

diff --git a/src/components/Files/AllFilesIcon.tsx b/src/components/Files/AllFilesIcon.tsx
@@ -0,0 +1,15 @@
+export function AllFilesIcon() {
+  return (
+    <svg
+      width="14"
+      height="16"
+      viewBox="0 0 14 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M3.25 3.5V1.25C3.25 1.05109 3.32902 0.860322 3.46967 0.71967C3.61032 0.579018 3.80109 0.5 4 0.5H13C13.1989 0.5 13.3897 0.579018 13.5303 0.71967C13.671 0.860322 13.75 1.05109 13.75 1.25V11.75C13.75 11.9489 13.671 12.1397 13.5303 12.2803C13.3897 12.421 13.1989 12.5 13 12.5H10.75V14.75C10.75 15.164 10.4125 15.5 9.99475 15.5H1.00525C0.906345 15.5006 0.808298 15.4816 0.716742 15.4442C0.625186 15.4068 0.541925 15.3517 0.471744 15.282C0.401563 15.2123 0.345845 15.1294 0.307791 15.0381C0.269737 14.9468 0.250097 14.8489 0.25 14.75L0.25225 4.25C0.25225 3.836 0.58975 3.5 1.0075 3.5H3.25ZM4.75 3.5H10.75V11H12.25V2H4.75V3.5ZM3.25 7.25V8.75H7.75V7.25H3.25ZM3.25 10.25V11.75H7.75V10.25H3.25Z"
+        fill="#6FCB94"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/Files/ArchiveIcon.tsx b/src/components/Files/ArchiveIcon.tsx
@@ -0,0 +1,15 @@
+export function ArchiveIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M13.4 3.8001C13.5591 3.8001 13.7117 3.86331 13.8243 3.97583C13.9368 4.08836 14 4.24097 14 4.4001V12.8001C14 12.9592 13.9368 13.1118 13.8243 13.2244C13.7117 13.3369 13.5591 13.4001 13.4 13.4001H2.6C2.44087 13.4001 2.28826 13.3369 2.17574 13.2244C2.06321 13.1118 2 12.9592 2 12.8001V3.2001C2 3.04097 2.06321 2.88836 2.17574 2.77583C2.28826 2.66331 2.44087 2.6001 2.6 2.6001H7.0484L8.2484 3.8001H10.4V5.0001H11.6V3.8001H13.4ZM11.6 8.6001H10.4V9.8001H9.2V11.6001H11.6V8.6001ZM10.4 7.4001H9.2V8.6001H10.4V7.4001ZM11.6 6.2001H10.4V7.4001H11.6V6.2001ZM10.4 5.0001H9.2V6.2001H10.4V5.0001Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/Files/CidCopyButton.tsx b/src/components/Files/CidCopyButton.tsx
@@ -1,7 +1,7 @@
 import { useRef, useState } from "react";
-import { COPY_DURATION, ICON_SIZE } from "../../utils/constants";
-import { Copy } from "lucide-react";
+import { COPY_DURATION } from "../../utils/constants";
 import { Button } from "@codex-storage/marketplace-ui-components";
+import { CoypIcon } from "./CopyIcon";
 
 type CopyButtonProps = {
   cid: string;
@@ -27,13 +27,11 @@ export function CidCopyButton({ cid }: CopyButtonProps) {
 
   const label = copied ? "Copied !" : "Copy CID";
 
-  const Icon = () => <Copy size={ICON_SIZE} />;
-
   return (
     <Button
       label={label}
       variant="outline"
       onClick={onCopy}
-      Icon={Icon}></Button>
+      Icon={CoypIcon}></Button>
   );
 }
diff --git a/src/components/Files/CopyIcon.tsx b/src/components/Files/CopyIcon.tsx
@@ -0,0 +1,15 @@
+export function CoypIcon() {
+  return (
+    <svg
+      width="14"
+      height="16"
+      viewBox="0 0 14 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M3 3.5V1.25C3 1.05109 3.07902 0.860322 3.21967 0.71967C3.36032 0.579018 3.55109 0.5 3.75 0.5H12.75C12.9489 0.5 13.1397 0.579018 13.2803 0.71967C13.421 0.860322 13.5 1.05109 13.5 1.25V11.75C13.5 11.9489 13.421 12.1397 13.2803 12.2803C13.1397 12.421 12.9489 12.5 12.75 12.5H10.5V14.75C10.5 15.164 10.1625 15.5 9.74475 15.5H0.75525C0.656345 15.5006 0.558298 15.4816 0.466742 15.4442C0.375186 15.4068 0.291925 15.3517 0.221744 15.282C0.151563 15.2123 0.0958447 15.1294 0.0577907 15.0381C0.0197367 14.9468 9.70307e-05 14.8489 0 14.75L0.00225002 4.25C0.00225002 3.836 0.33975 3.5 0.7575 3.5H3ZM1.50225 5L1.5 14H9V5H1.50225ZM4.5 3.5H10.5V11H12V2H4.5V3.5Z"
+        fill="#99A0AE"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/Files/DocumentIcon.tsx b/src/components/Files/DocumentIcon.tsx
@@ -0,0 +1,15 @@
+export function DocumentIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M13.4001 6.2V13.3958C13.4007 13.4746 13.3857 13.5527 13.356 13.6257C13.3264 13.6987 13.2827 13.7652 13.2273 13.8213C13.172 13.8774 13.1062 13.9221 13.0336 13.9527C12.961 13.9834 12.8831 13.9995 12.8043 14H3.1959C3.03799 14 2.88653 13.9373 2.77482 13.8257C2.6631 13.7141 2.60026 13.5627 2.6001 13.4048V2.5952C2.6001 2.273 2.8683 2 3.1989 2H9.2001V5.6C9.2001 5.75913 9.26331 5.91174 9.37583 6.02426C9.48836 6.13679 9.64097 6.2 9.8001 6.2H13.4001ZM13.4001 5H10.4001V2.0018L13.4001 5ZM5.6001 5V6.2H7.4001V5H5.6001ZM5.6001 7.4V8.6H10.4001V7.4H5.6001ZM5.6001 9.8V11H10.4001V9.8H5.6001Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/Files/DownloadIcon.tsx b/src/components/Files/DownloadIcon.tsx
@@ -0,0 +1,15 @@
+export function DownloadIcon() {
+  return (
+    <svg
+      width="16"
+      height="14"
+      viewBox="0 0 16 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2 12.25H14V7H15.5V13C15.5 13.1989 15.421 13.3897 15.2803 13.5303C15.1397 13.671 14.9489 13.75 14.75 13.75H1.25C1.05109 13.75 0.860322 13.671 0.71967 13.5303C0.579018 13.3897 0.5 13.1989 0.5 13V7H2V12.25ZM9.5 4.75H13.25L8 10L2.75 4.75H6.5V0.25H9.5V4.75Z"
+        fill="#969696"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/Files/FavoriteIcon.tsx b/src/components/Files/FavoriteIcon.tsx
@@ -0,0 +1,15 @@
+export function FavoriteIcon() {
+  return (
+    <svg
+      width="16"
+      height="15"
+      viewBox="0 0 16 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M8.00018 11.75L3.59168 14.4425L4.79018 9.4175L0.867676 6.0575L6.01643 5.645L8.00018 0.875L9.98393 5.645L15.1334 6.0575L11.2102 9.4175L12.4087 14.4425L8.00018 11.75Z"
+        fill="#969696"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/Files/FileActions.css b/src/components/Files/FileActions.css
@@ -0,0 +1,19 @@
+.file-actions {
+  > div {
+    display: inline-flex;
+    align-items: center;
+    border: 1px solid var(--codex-border-color);
+    border-radius: var(--codex-border-radius);
+    padding: 0.5rem;
+    background-color: #14141499;
+    gap: 8px;
+    padding: 10px;
+
+    .button-icon {
+      width: 40px;
+      height: 40px;
+      background-color: #2f2f2f;
+      border: 1px solid #96969633;
+    }
+  }
+}
diff --git a/src/components/Files/FileActions.tsx b/src/components/Files/FileActions.tsx
@@ -1,9 +1,10 @@
 import { ButtonIcon, Cell } from "@codex-storage/marketplace-ui-components";
-import { Download, ReceiptText } from "lucide-react";
-import { ICON_SIZE } from "../../utils/constants";
 import { FolderButton } from "./FolderButton";
 import { CodexDataContent } from "@codex-storage/sdk-js";
 import { CodexSdk } from "../../sdk/codex";
+import "./FileActions.css";
+import { DownloadIcon } from "./DownloadIcon";
+import { InfoFileIcon } from "./InfoFileIcon";
 
 type Props = {
   content: CodexDataContent;
@@ -21,15 +22,12 @@ export function FileActions({
   const url = CodexSdk.url() + "/api/codex/v1/data/";
 
   return (
-    <Cell>
-      <div className="files-fileActions">
+    <Cell className="file-actions">
+      <div>
         <ButtonIcon
-          variant="small"
           animation="bounce"
           onClick={() => window.open(url + content.cid, "_blank")}
-          Icon={(props) => (
-            <Download size={ICON_SIZE} {...props} />
-          )}></ButtonIcon>
+          Icon={DownloadIcon}></ButtonIcon>
 
         <FolderButton
           folders={folders.map(([folder, files]) => [
@@ -42,7 +40,7 @@ export function FileActions({
         <ButtonIcon
           variant="small"
           onClick={() => onDetails(content.cid)}
-          Icon={() => <ReceiptText size={ICON_SIZE} />}></ButtonIcon>
+          Icon={InfoFileIcon}></ButtonIcon>
       </div>
     </Cell>
   );

diff --git a/src/components/Files/FileCell.css b/src/components/Files/FileCell.css
@@ -0,0 +1,22 @@
+.file-cell {
+  small {
+    word-break: break-all;
+  }
+
+  > div {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+
+    > div {
+      flex: 1;
+    }
+
+    .button-icon {
+      width: 40px;
+      height: 40px;
+      background-color: #14141499;
+      border: 1px solid #96969633;
+    }
+  }
+}
diff --git a/src/components/Files/FileCell.tsx b/src/components/Files/FileCell.tsx
@@ -7,6 +7,7 @@ import {
 import { CodexDataContent } from "@codex-storage/sdk-js";
 import { Copy } from "lucide-react";
 import { useState } from "react";
+import "./FileCell.css";
 
 type Props = {
   content: CodexDataContent;
@@ -22,23 +23,23 @@ export function FileCell({ content }: Props) {
 
   return (
     <>
-      <Cell>
-        <div className="files-cell-file">
+      <Cell className="file-cell">
+        <div>
           <WebFileIcon type={content.manifest.mimetype || ""} />
 
           <div>
-            <b>{content.manifest.filename}</b>
-            <div className="files-fileMeta">
-              <small className="files-fileMeta-cid">{content.cid}</small>
-              <ButtonIcon
-                variant="small"
-                onClick={() => onCopy(content.cid)}
-                animation="buzz"
-                Icon={(props) => (
-                  <Copy size={"1rem"} {...props} />
-                )}></ButtonIcon>
-            </div>
+            <p>
+              <b>{content.manifest.filename}</b>
+            </p>
+            <p>
+              <small>{content.cid}</small>
+            </p>
           </div>
+          <ButtonIcon
+            variant="small"
+            onClick={() => onCopy(content.cid)}
+            animation="buzz"
+            Icon={(props) => <Copy size={"1rem"} {...props} />}></ButtonIcon>
         </div>
 
         <Toast message={toast.message} time={toast.time} variant={"success"} />