Design changes

codex-storage · Nov 4, 2024 · 5cf3f82 · 5cf3f82
1 parent d06e0f9
commit 5cf3f82
Show file tree

Hide file tree

Showing 14 changed files with 145 additions and 71 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/src/components/Button/Button.tsx b/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,

diff --git a/src/components/Button/button.css b/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;
-    border-style: solid;
-    background-color: transparent;
+    background-color: #2f2f2f;
+    color: #969696;
   }
 
   span {

diff --git a/src/components/Card/Card.tsx b/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) {
-  return (
-    <div className={`card ${className}`}>
-      <header>{title}</header>
-      <div>{children}</div>
-    </div>
-  );
+export function Card({ className = "" }: Props) {
+  return <div className={`card ${className}`}>{}</div>;
 }
diff --git a/src/components/Card/card.css b/src/components/Card/card.css
@@ -1,17 +1,20 @@
 .card {
-  border-radius: var(--codex-border-radius);
-  border: 1px solid var(--codex-border-color);
-  font-family: var(--codex-font-family);
-  background-color: var(--codex-background-secondary);
+  border: 1px solid #96969633;
+  border-radius: 16px;
+  padding: 16px;
 
   header {
-    border-bottom: 1px solid var(--codex-border-color);
-    padding: 1rem 1.5rem;
-    font-size: 1.15rem;
-    font-weight: bold;
-  }
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
 
-  div {
-    padding: 1.5rem;
+    h5 {
+      font-family: Inter;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      letter-spacing: -0.011em;
+    }
   }
 }
diff --git a/src/components/Input/Input.tsx b/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 || ""]
         )}
       >

diff --git a/src/components/Input/input.css b/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 {

diff --git a/src/components/SpaceAllocation/SpaceAllocation.tsx b/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>
         ))}

diff --git a/src/components/SpaceAllocation/spaceAllocation.css b/src/components/SpaceAllocation/spaceAllocation.css
@@ -1,36 +1,42 @@
 .space-allocation {
   header {
-    height: 10px;
+    height: 26px;
     display: flex;
-    gap: 0.75rem;
-    margin-bottom: 0.5rem;
+    gap: 5px;
+    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;
 
     li {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: 0.5rem;
+      gap: 4px;
 
       > span {
-        width: 1rem;
-        height: 1rem;
-        border-radius: var(--codex-border-radius);
+        width: 9px;
+        height: 9px;
+        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);
         }
-      }
+      } */
     }
   }
 }
diff --git a/src/components/Upload/Upload.tsx b/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>
-
-        <p>
+        <div>
           <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"

diff --git a/src/components/Upload/UploadIcon.tsx b/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>
+  );
+}