From 5cf3f82e06e58baf9f35195eb392d93622a409ff Mon Sep 17 00:00:00 2001 From: Arnaud Date: Mon, 4 Nov 2024 12:34:42 +0100 Subject: [PATCH] Design changes --- package-lock.json | 12 ++++---- package.json | 4 +-- src/components/Button/Button.tsx | 5 +++- src/components/Button/button.css | 25 +++++++++++----- src/components/Card/Card.tsx | 14 ++------- src/components/Card/card.css | 25 +++++++++------- src/components/Input/Input.tsx | 4 +++ src/components/Input/input.css | 23 +++++++++++++- .../SpaceAllocation/SpaceAllocation.tsx | 5 ++-- .../SpaceAllocation/spaceAllocation.css | 28 ++++++++++------- src/components/Upload/Upload.tsx | 18 ++++++----- src/components/Upload/UploadIcon.tsx | 20 +++++++++++++ src/components/Upload/upload.css | 30 ++++++++++++++----- src/index.ts | 3 +- 14 files changed, 145 insertions(+), 71 deletions(-) create mode 100644 src/components/Upload/UploadIcon.tsx diff --git a/package-lock.json b/package-lock.json index 96b700a..9c6b38a 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/@codex-storage/sdk-js/-/sdk-js-0.0.14.tgz", - "integrity": "sha512-zZcbFKQxxL3dlxjm77jKzOobYB8Z/oUozG5VVU4+hrAO2qlnERq9wQO2QgfnNB1LxaZeoN+Rb8kZrKc7Y1Jvmw==", + "version": "0.0.15", + "resolved": "https://registry.npmjs.org/@codex-storage/sdk-js/-/sdk-js-0.0.15.tgz", + "integrity": "sha512-asL59uhHNI2zPLEcygh6HnZEdQJebSjU2JXut6xZxAI87VVkWfN9Y1BxlyxgsF+wJF10DB0tnv3cPEI3wb2huQ==", "dev": true, "dependencies": { "valibot": "^0.32.0" diff --git a/package.json b/package.json index b4227f4..87052bd 100644 --- 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 index d0abf96..fee9dc6 100644 --- 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 index 44c42cd..0e09fa1 100644 --- 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 index 0d5cb6f..ac0623d 100644 --- 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 ( -
-
{title}
-
{children}
-
- ); +export function Card({ className = "" }: Props) { + return
{}
; } diff --git a/src/components/Card/card.css b/src/components/Card/card.css index a1f3302..17a28cf 100644 --- 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 index 902b6f3..f545f36 100644 --- 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; export const Input = forwardRef( @@ -49,6 +51,7 @@ export const Input = forwardRef( style, Icon, inputClassName, + size = "big", inputContainerClassName = "", disabled = false, onChange, @@ -74,6 +77,7 @@ export const Input = forwardRef( ["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 index a5854f5..42c0104 100644 --- 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 index edcdf20..63294ae 100644 --- 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) { ))} -
    +
      {data.map((d) => (

    • {d.title} - {PrettyBytes(d.size)} + {/* {PrettyBytes(d.size)} */}

      • ))} diff --git a/src/components/SpaceAllocation/spaceAllocation.css b/src/components/SpaceAllocation/spaceAllocation.css index 886efbf..8a21f1c 100644 --- a/src/components/SpaceAllocation/spaceAllocation.css +++ b/src/components/SpaceAllocation/spaceAllocation.css @@ -1,20 +1,25 @@ .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; @@ -22,15 +27,16 @@ 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 index 86e479a..38096f0 100644 --- 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 ( <>
      - - -

      +

      Drop your {multiple ? "file(s)" : "file"} here or{" "} browse -

      - {multiple ? "Up to 10 files" : "Choose one single file"} + + {" "} + {multiple ? "Up to 10 files" : "Choose one single file"} + +
      + + + + + ); +} diff --git a/src/components/Upload/upload.css b/src/components/Upload/upload.css index 502a5f7..3b71340 100644 --- a/src/components/Upload/upload.css +++ b/src/components/Upload/upload.css @@ -6,26 +6,40 @@ ); min-height: 150px; border-radius: var(--codex-border-radius); - justify-content: center; - flex-direction: column; + justify-content: space-between; + align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.5rem 2rem; display: flex; - align-items: center; - p { - margin-bottom: 0; - margin-top: 12px; - line-height: 4px; + b { + font-family: Inter; + font-size: 16px; + 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 { diff --git a/src/index.ts b/src/index.ts index 3b01541..bb380f9 100644 --- a/src/index.ts +++ b/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";