Design changes

package-lock.json

@@ -1,19 +1,19 @@
 {
   "name": "@codex-storage/marketplace-ui-components",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@codex-storage/marketplace-ui-components",
-      "version": "0.0.31",
+      "version": "0.0.32",
       "license": "MIT",
       "dependencies": {
         "lucide-react": "^0.453.0"
       },
       "devDependencies": {
         "@chromatic-com/storybook": "^2.0.2",
-        "@codex-storage/sdk-js": "^0.0.14",
+        "@codex-storage/sdk-js": "^0.0.15",
         "@storybook/addon-essentials": "^8.2.9",
         "@storybook/addon-interactions": "^8.2.9",
         "@storybook/addon-links": "^8.2.9",
@@ -619,9 +619,9 @@
       }
     },
     "node_modules/@codex-storage/sdk-js": {
-      "version": "0.0.14",
+      "version": "0.0.15",
-      "resolved": "https://registry.npmjs.org/@codex-storage/sdk-js/-/sdk-js-0.0.14.tgz",
+      "resolved": "https://registry.npmjs.org/@codex-storage/sdk-js/-/sdk-js-0.0.15.tgz",
-      "integrity": "sha512-zZcbFKQxxL3dlxjm77jKzOobYB8Z/oUozG5VVU4+hrAO2qlnERq9wQO2QgfnNB1LxaZeoN+Rb8kZrKc7Y1Jvmw==",
+      "integrity": "sha512-asL59uhHNI2zPLEcygh6HnZEdQJebSjU2JXut6xZxAI87VVkWfN9Y1BxlyxgsF+wJF10DB0tnv3cPEI3wb2huQ==",
       "dev": true,
       "dependencies": {
         "valibot": "^0.32.0"

package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/codex-storage/codex-marketplace-ui-components"
   },
-  "version": "0.0.31",
+  "version": "0.0.32",
   "type": "module",
   "scripts": {
     "prepack": "npm run build",
@@ -41,7 +41,7 @@
     "postcss-nesting": "^13.0.1"
   },
   "devDependencies": {
-    "@codex-storage/sdk-js": "^0.0.14",
+    "@codex-storage/sdk-js": "^0.0.15",
     "@chromatic-com/storybook": "^2.0.2",
     "@storybook/addon-essentials": "^8.2.9",
     "@storybook/addon-interactions": "^8.2.9",

src/components/Button/Button.tsx

@@ -37,6 +37,8 @@ type Props = {
    * Apply custom classname.
    */
   className?: string;
+
+  size?: "medium" | "small";
 };
 
 export function Button({
@@ -45,6 +47,7 @@ export function Button({
   Icon,
   onMouseEnter,
   onMouseLeave,
+  size = "medium",
   fetching = false,
   disabled = false,
   variant = "primary",
@@ -55,7 +58,7 @@ export function Button({
       onClick={onClick}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      className={`button ${className} button--${variant}`}
+      className={`button ${className} button--${variant} button--${size}`}
       {...attributes({
         disabled: disabled || fetching,
         "aria-disabled": disabled || fetching,

src/components/Button/button.css

@@ -1,17 +1,29 @@
 .button {
-  border-radius: var(--codex-border-radius);
+  &.button--medium {
+    --codex-button-padding: 9px 10px;
+  }
+
+  &.button--small {
+    --codex-button-padding: 6px 10px;
+  }
+
+  border-radius: 8px;
   outline: none;
-  padding: 0.75rem 1.5rem;
+  padding: var(--codex-button-padding);
   display: flex;
   place-items: center;
-  gap: 0.75rem;
+  gap: 2px;
   font-weight: 500;
   position: relative;
   border: none;
   transition:
     box-shadow 0.35s,
     opacity 0.35s;
-  font-family: var(--codex-font-family);
+  font-family: Inter;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: -0.006em;
   border: 1px solid transparent;
   place-content: center;
 
@@ -77,9 +89,8 @@
   &.button--outline {
     color: var(--codex-color-outline, var(--codex-color-contrast));
     border-color: var(--codex-border-color);
-    border-width: 1px;
+    background-color: #2f2f2f;
-    border-style: solid;
+    color: #969696;
-    background-color: transparent;
   }
 
   span {

src/components/Card/Card.tsx

@@ -1,19 +1,9 @@
-import { ReactNode } from "react";
 import "./card.css";
 
 type Props = {
-  children: ReactNode;
-
   className?: string;
-
-  title: string;
 };
 
-export function Card({ children, className = "", title }: Props) {
+export function Card({ className = "" }: Props) {
-  return (
+  return <div className={`card ${className}`}>{}</div>;
-    <div className={`card ${className}`}>
-      <header>{title}</header>
-      <div>{children}</div>
-    </div>
-  );
 }

src/components/Card/card.css

@@ -1,17 +1,20 @@
 .card {
-  border-radius: var(--codex-border-radius);
+  border: 1px solid #96969633;
-  border: 1px solid var(--codex-border-color);
+  border-radius: 16px;
-  font-family: var(--codex-font-family);
+  padding: 16px;
-  background-color: var(--codex-background-secondary);
 
   header {
-    border-bottom: 1px solid var(--codex-border-color);
+    display: flex;
-    padding: 1rem 1.5rem;
+    align-items: center;
-    font-size: 1.15rem;
+    justify-content: space-between;
-    font-weight: bold;
+    gap: 16px;
-  }
 
-  div {
+    h5 {
-    padding: 1.5rem;
+      font-family: Inter;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      letter-spacing: -0.011em;
+    }
   }
 }

src/components/Input/Input.tsx

@@ -38,6 +38,8 @@ type Props = {
   inputClassName?: string;
 
   inputContainerClassName?: string;
+
+  size?: "big" | "medium";
 } & InputHTMLAttributes<HTMLInputElement>;
 
 export const Input = forwardRef<HTMLInputElement, Props>(
@@ -49,6 +51,7 @@ export const Input = forwardRef<HTMLInputElement, Props>(
       style,
       Icon,
       inputClassName,
+      size = "big",
       inputContainerClassName = "",
       disabled = false,
       onChange,
@@ -74,6 +77,7 @@ export const Input = forwardRef<HTMLInputElement, Props>(
           ["input"],
           ["input--invalid", invalid || isInvalid],
           ["input--icon", !!Icon],
+          ["input--" + size],
           [inputClassName || ""]
         )}
       >

src/components/Input/input.css

@@ -1,4 +1,12 @@
 .input {
+  &.input--big {
+    --codex-input-height: 64px;
+  }
+
+  &.input--medium {
+    --codex-input-height: 40px;
+  }
+
   input {
     background-color: var(--codex-input-background);
     color: white;
@@ -10,8 +18,21 @@
     box-sizing: border-box;
     font-weight: 500;
     font-size: 20px;
-    height: 64px;
+    height: var(--codex-input-height);
     position: relative;
+    font-family: Inter;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: -0.006em;
+
+    &::placeholder {
+      font-family: Inter;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      letter-spacing: -0.006em;
+    }
   }
 
   &.input--invalid input {

src/components/SpaceAllocation/SpaceAllocation.tsx

@@ -1,4 +1,3 @@
-import { PrettyBytes } from "../utils/bytes";
 import "./spaceAllocation.css";
 
 export type SpaceAllocationItem = {
@@ -38,13 +37,13 @@ export function SpaceAllocation({ data }: Props) {
         ))}
       </header>
 
-      <ul className="nodeSpaceAllocation-legend">
+      <ul>
         {data.map((d) => (
           <li key={d.title}>
             <span style={{ backgroundColor: d.color }}></span>
             <p>
               <span>{d.title}</span>
-              <small> {PrettyBytes(d.size)}</small>
+              {/* <small> {PrettyBytes(d.size)}</small> */}
             </p>
           </li>
         ))}

src/components/SpaceAllocation/spaceAllocation.css

@@ -1,20 +1,25 @@
 .space-allocation {
   header {
-    height: 10px;
+    height: 26px;
     display: flex;
-    gap: 0.75rem;
+    gap: 5px;
-    margin-bottom: 0.5rem;
+    margin-bottom: 16px;
 
     span {
       display: inline-block;
       height: 100%;
-      border-radius: var(--codex-border-radius);
+      border-radius: 4px;
+      height: 26px;
+      font-family: Inter;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 16px;
     }
   }
 
   ul {
     display: flex;
-    gap: 0.75rem;
+    gap: 16px;
     flex-wrap: wrap;
     padding-left: 0;
 
@@ -22,15 +27,16 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: 0.5rem;
+      gap: 4px;
 
       > span {
-        width: 1rem;
+        width: 9px;
-        height: 1rem;
+        height: 9px;
-        border-radius: var(--codex-border-radius);
+        border-radius: 50%;
+        border: 2px solid #0e121b;
       }
 
-      p {
+      /* p {
         display: flex;
         flex-direction: column;
         line-height: 1rem;
@@ -40,7 +46,7 @@
         small {
           color: var(--codex-input-label-color);
         }
-      }
+      } */
     }
   }
 }

src/components/Upload/Upload.tsx

@@ -1,12 +1,11 @@
-import { FileStack, Upload as UploadIcon } from "lucide-react";
 import { ChangeEvent, DragEventHandler, useRef } from "react";
 import { attributes } from "../utils/attributes.ts";
 import "./upload.css";
 import { UploadFile } from "./UploadFile.tsx";
 import { useUploadStategy } from "./useUploadStrategy.ts";
 import { classnames } from "../utils/classnames.ts";
-import { ButtonIcon } from "../ButtonIcon/ButtonIcon.tsx";
 import { CodexData } from "@codex-storage/sdk-js";
+import { UploadIcon } from "./UploadIcon.tsx";
 
 type Props = {
   /**
@@ -118,7 +117,7 @@ export function Upload({
   return (
     <>
       <div
-        className={classnames(["upload"], ["upload-warning", !!warning])}
+        className={classnames(["upload"], ["upload--warning", !!warning])}
         tabIndex={1}
         onClick={onInternalClick}
         onDragOver={onDragPrevents}
@@ -127,16 +126,19 @@ export function Upload({
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
       >
-        <ButtonIcon Icon={multiple ? FileStack : UploadIcon}></ButtonIcon>
+        <div>
-
-        <p>
           <b>
             Drop your {multiple ? "file(s)" : "file"} here or{" "}
             <span>browse</span>
           </b>
-        </p>
 
-        <small> {multiple ? "Up to 10 files" : "Choose one single file"}</small>
+          <small>
+            {" "}
+            {multiple ? "Up to 10 files" : "Choose one single file"}
+          </small>
+        </div>
+
+        <UploadIcon></UploadIcon>
 
         <input
           data-testid="upload"

src/components/Upload/UploadIcon.tsx

@@ -0,0 +1,20 @@
+type Props = {
+  width?: number;
+  fill?: string;
+};
+
+export function UploadIcon({ width = 30, fill = "#96969666" }: Props) {
+  return (
+    <svg
+      width={width}
+      viewBox="0 0 30 28"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.621 3.5H28.5C28.8978 3.5 29.2794 3.65804 29.5607 3.93934C29.842 4.22064 30 4.60218 30 5V26C30 26.3978 29.842 26.7794 29.5607 27.0607C29.2794 27.342 28.8978 27.5 28.5 27.5H1.5C1.10218 27.5 0.720644 27.342 0.43934 27.0607C0.158035 26.7794 0 26.3978 0 26V2C0 1.60218 0.158035 1.22064 0.43934 0.93934C0.720644 0.658035 1.10218 0.5 1.5 0.5H12.621L15.621 3.5ZM3 3.5V24.5H27V6.5H14.379L11.379 3.5H3ZM16.5 15.5V21.5H13.5V15.5H9L15 9.5L21 15.5H16.5Z"
+        fill={fill}
+      />
+    </svg>
+  );
+}

src/components/Upload/upload.css

@@ -6,26 +6,40 @@
   );
   min-height: 150px;
   border-radius: var(--codex-border-radius);
-  justify-content: center;
+  justify-content: space-between;
-  flex-direction: column;
+  align-items: center;
   gap: 0.5rem;
   cursor: pointer;
   padding: 0.5rem 2rem;
   display: flex;
-  align-items: center;
 
-  p {
+  b {
-    margin-bottom: 0;
+    font-family: Inter;
-    margin-top: 12px;
+    font-size: 16px;
-    line-height: 4px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: -0.011em;
+    display: block;
 
     span {
       color: var(--codex-color-primary);
+      border-bottom: 1px solid var(--codex-color-primary);
+      font-family: Inter;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 24px;
+      letter-spacing: -0.011em;
     }
   }
 
   small {
-    color: var(--codex-input-label-color);
+    font-family: Inter;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: -0.006em;
+    text-align: left;
+    color: #969696;
   }
 
   input + span {

src/index.ts

@@ -2,7 +2,8 @@ export { Button } from "./components/Button/Button";
 export { ButtonIcon } from "./components/ButtonIcon/ButtonIcon";
 export { Input } from "./components/Input/Input";
 export { InputGroup } from "./components/InputGroup/InputGroup";
-export { Upload } from "./components/Upload/Upload";
+export * from "./components/Upload/Upload";
+export { UploadIcon } from "./components/Upload/UploadIcon";
 export { Card } from "./components/Card/Card";
 export { Select } from "./components/Select/Select";
 export { Toast } from "./components/Toast/Toast";