codex-storage
/
codex-marketplace-ui-components
mirror of https://github.com/codex-storage/codex-marketplace-ui-components.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Change icons

This commit is contained in:
Arnaud 2024-11-21 12:11:55 +01:00
parent 6323baf381
commit e0699c4cfe
No known key found for this signature in database
GPG Key ID: 69D6CE281FCAE663
12 changed files with 91 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/assets/icons/all.svg Normal file
View File

@ -0,0 +1,12 @@
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.25 5.5V3.25C6.25 3.05109 6.32902 2.86032 6.46967 2.71967C6.61032 2.57902 6.80109 2.5 7 2.5H16C16.1989 2.5 16.3897 2.57902 16.5303 2.71967C16.671 2.86032 16.75 3.05109 16.75 3.25V13.75C16.75 13.9489 16.671 14.1397 16.5303 14.2803C16.3897 14.421 16.1989 14.5 16 14.5H13.75V16.75C13.75 17.164 13.4125 17.5 12.9948 17.5H4.00525C3.90635 17.5006 3.8083 17.4816 3.71674 17.4442C3.62519 17.4068 3.54192 17.3517 3.47174 17.282C3.40156 17.2123 3.34584 17.1294 3.30779 17.0381C3.26974 16.9468 3.2501 16.8489 3.25 16.75L3.25225 6.25C3.25225 5.836 3.58975 5.5 4.0075 5.5H6.25ZM7.75 5.5H13.75V13H15.25V4H7.75V5.5ZM6.25 9.25V10.75H10.75V9.25H6.25ZM6.25 12.25V13.75H10.75V12.25H6.25Z"
fill="currentColor"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 830 B

6
src/assets/icons/copy.svg Normal file
View File

@ -0,0 +1,6 @@
<svg viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M7 5.5V3.25C7 3.05109 7.07902 2.86032 7.21967 2.71967C7.36032 2.57902 7.55109 2.5 7.75 2.5H16.75C16.9489 2.5 17.1397 2.57902 17.2803 2.71967C17.421 2.86032 17.5 3.05109 17.5 3.25V13.75C17.5 13.9489 17.421 14.1397 17.2803 14.2803C17.1397 14.421 16.9489 14.5 16.75 14.5H14.5V16.75C14.5 17.164 14.1625 17.5 13.7448 17.5H4.75525C4.65635 17.5006 4.5583 17.4816 4.46674 17.4442C4.37519 17.4068 4.29192 17.3517 4.22174 17.282C4.15156 17.2123 4.09584 17.1294 4.05779 17.0381C4.01974 16.9468 4.0001 16.8489 4 16.75L4.00225 6.25C4.00225 5.836 4.33975 5.5 4.7575 5.5H7ZM5.50225 7L5.5 16H13V7H5.50225ZM8.5 5.5H14.5V13H16V4H8.5V5.5Z"
fill="#969696"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 740 B

6
src/assets/icons/download-file.svg Normal file
View File

@ -0,0 +1,6 @@
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M4 15.25H16V10H17.5V16C17.5 16.1989 17.421 16.3897 17.2803 16.5303C17.1397 16.671 16.9489 16.75 16.75 16.75H3.25C3.05109 16.75 2.86032 16.671 2.71967 16.5303C2.57902 16.3897 2.5 16.1989 2.5 16V10H4V15.25ZM11.5 7.75H15.25L10 13L4.75 7.75H8.5V3.25H11.5V7.75Z"
fill="#969696"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 377 B

12
src/assets/icons/favorite.svg Normal file
View File

@ -0,0 +1,12 @@
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.99999 13.75L5.59149 16.4425L6.78999 11.4175L2.86749 8.0575L8.01624 7.645L9.99999 2.875L11.9837 7.645L17.1332 8.0575L13.21 11.4175L14.4085 16.4425L9.99999 13.75Z"
fill="#969696"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 318 B

12
src/assets/icons/plus.svg Normal file
View File

@ -0,0 +1,12 @@
<svg
width="21"
height="20"
viewBox="0 0 21 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.5 17.5C6.35775 17.5 3 14.1422 3 10C3 5.85775 6.35775 2.5 10.5 2.5C14.6422 2.5 18 5.85775 18 10C18 14.1422 14.6422 17.5 10.5 17.5ZM9.75 9.25H6.75V10.75H9.75V13.75H11.25V10.75H14.25V9.25H11.25V6.25H9.75V9.25Z"
fill="#99A0AE"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 365 B

13
src/assets/icons/warning-circle.svg Normal file
View File

@ -0,0 +1,13 @@
<svg
data-testid="icon-warning"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 17.5C5.85775 17.5 2.5 14.1423 2.5 10C2.5 5.85775 5.85775 2.5 10 2.5C14.1423 2.5 17.5 5.85775 17.5 10C17.5 14.1423 14.1423 17.5 10 17.5ZM6.25 9.25V10.75H13.75V9.25H6.25Z"
fill="#FF8447"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 356 B

23
src/components/Upload/UploadFile.tsx
View File

@ -2,12 +2,15 @@ import { useRef, useReducer, Reducer, useEffect, useCallback } from "react";
import { attributes } from "../utils/attributes";
import { PrettyBytes } from "../utils/bytes";
import { UploadStatus } from "./types";
import { CircleCheck, TriangleAlert, CircleX, CircleStop } from "lucide-react";
import { CircleStop } from "lucide-react";
import { Spinner } from "../Spinner/Spinner";
import { CodexData } from "@codex-storage/sdk-js";
import { ButtonIcon } from "../ButtonIcon/ButtonIcon";
import "./UploadFile.css";
import { WebFileIcon } from "../WebFileIcon/WebFileIcon";
import SuccessCircleIcon from "../../assets/icons/success-circle.svg?react";
import WarningCircleIcon from "../../assets/icons/warning-circle.svg?react";
import CloseIcon from "../../assets/icons/close.svg?react";
type UploadFileProps = {
file: File;
@ -332,25 +335,19 @@ export function UploadStatusIcon({ status }: UploadStatusIconProps) {
switch (status) {
case "done":
return (
<CircleCheck
size={"1.25rem"}
fill="currentColor"
className="upload-progress-check"
stroke="var(--codex-background)"
></CircleCheck>
<SuccessCircleIcon width={17.5} fill="currentColor"></SuccessCircleIcon>
);
case "error":
return (
<TriangleAlert
size={"1.25rem"}
<WarningCircleIcon
width={17.5}
fill="currentColor"
className="upload-progress-cancelled"
stroke="var(--codex-background)"
></TriangleAlert>
></WarningCircleIcon>
);
case "progress":
return <Spinner width={"1.25rem"} className="upload-progress-check" />;
return <Spinner width={"1.25rem"} />;
}
}
@ -358,7 +355,7 @@ function UploadActionIcon({ status }: UploadStatusIconProps) {
switch (status) {
case "error":
case "done":
return <CircleX size={"1.25rem"} />;
return <CloseIcon width={17.5} />;
case "progress":
return <CircleStop size={"1.25rem"} />;
}

4
stories/Button.stories.ts
View File

@ -1,7 +1,7 @@
import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
import { Button } from "../src/components/Button/Button";
import { Plus } from "lucide-react";
import PlusIcon from "../src/assets/icons/plus.svg?react";
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
@ -47,7 +47,7 @@ export const Outline: Story = {
export const Icon: Story = {
args: {
label: "Button",
Icon: Plus,
Icon: PlusIcon,
},
};

16
stories/ButtonIcon.stories.ts
View File

@ -1,7 +1,9 @@
import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
import { Copy, Download, Plus } from "lucide-react";
import { ButtonIcon } from "../src/components/ButtonIcon/ButtonIcon";
import CopyIcon from "../src/assets/icons/copy.svg?react";
import DownloadFileIcon from "../src/assets/icons/download-file.svg?react";
import PlusIcon from "../src/assets/icons/plus.svg?react";
const meta = {
title: "Components/ButtonIcon",
@ -23,42 +25,42 @@ type Story = StoryObj<typeof meta>;
export const Small: Story = {
args: {
Icon: Plus,
Icon: PlusIcon,
variant: "small",
},
};
export const Big: Story = {
args: {
Icon: Plus,
Icon: PlusIcon,
variant: "big",
},
};
export const Disabled: Story = {
args: {
Icon: Plus,
Icon: PlusIcon,
disabled: true,
},
};
export const BuzzAnimation: Story = {
args: {
Icon: Copy,
Icon: CopyIcon,
animation: "buzz"
},
};
export const BounceAnimation: Story = {
args: {
Icon: Download,
Icon: DownloadFileIcon,
animation: "bounce"
},
};
export const CustomStyle: Story = {
args: {
Icon: Plus,
Icon: PlusIcon,
variant: "big",
},
};

4
stories/InputIcon.tsx
View File

@ -1,5 +1,5 @@
import { User } from "lucide-react";
import PlusIcon from "../src/assets/icons/plus.svg?react";
export function InputIcon() {
return <User size="1.25rem" />;
return <PlusIcon width={17.5} />;
}

8
stories/Tabs.stories.tsx
View File

@ -1,6 +1,8 @@
import type { Meta } from "@storybook/react";
import { useState } from "react";
import { FilesIcon, Star } from "lucide-react";
import AllFilesIcon from "../src/assets/icons/all.svg?react";
import FavoriteIcon from "../src/assets/icons/favorite.svg?react";
import { Tabs } from "../src/components/Tabs/Tabs";
import { fn } from "@storybook/test";
@ -33,11 +35,11 @@ const Template = (props: { onTabChange: () => void }) => {
tabs={[
{
label: "All files",
Icon: () => <FilesIcon size={"1rem"}></FilesIcon>,
Icon: () => <AllFilesIcon></AllFilesIcon>,
},
{
label: "Favorites",
Icon: () => <Star size={"1rem"}></Star>,
Icon: () => <FavoriteIcon></FavoriteIcon>,
},
]}
/>

4
stories/Tooltip.stories.tsx
View File

@ -1,6 +1,6 @@
import type { Meta, StoryObj } from "@storybook/react";
import { Tooltip } from "../src/components/Tooltip/Tooltip";
import { CheckCircle } from "lucide-react";
import SuccessCircleIcon from "../src/assets/icons/success-circle.svg?react";
const meta = {
title: "Overlays/Tooltip",
@ -18,6 +18,6 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
message: "Hello world",
children: <CheckCircle size={"1rem"} className="cell-stateIcon" />,
children: <SuccessCircleIcon className="cell-stateIcon" />,
},
};