From 5a64c1a93b835007f10bdbbc47a1659b2285683f Mon Sep 17 00:00:00 2001 From: Arnaud Date: Fri, 22 Nov 2024 09:35:07 +0100 Subject: [PATCH] Update icons --- package-lock.json | 9 -- package.json | 1 - src/assets/error-placeholder.svg | 16 ---- src/assets/icons/arrow-onboarding.svg | 10 +++ src/assets/icons/durability-custom.svg | 11 +++ src/assets/icons/durability-high.svg | 11 +++ src/assets/icons/durability-low.svg | 11 +++ src/assets/icons/durability-medium.svg | 11 +++ src/assets/logo-inverse.svg | 11 --- src/assets/network-error.svg | 89 ------------------- src/assets/react.svg | 1 - .../Availability/AvailabilityConfirmation.tsx | 4 +- .../ErrorPlaceholder/ErrorPlaceholder.tsx | 2 +- .../StorageRequestReview.css | 4 +- .../StorageRequestReview.tsx | 15 ++-- src/components/Welcome/WelcomeCard.tsx | 3 +- src/routes/dashboard/dashboard.css | 4 +- src/routes/dashboard/help.tsx | 14 +-- src/routes/onboarding-name.tsx | 15 ---- src/routes/onboarding.tsx | 10 +-- 20 files changed, 82 insertions(+), 170 deletions(-) delete mode 100644 src/assets/error-placeholder.svg create mode 100644 src/assets/icons/arrow-onboarding.svg create mode 100644 src/assets/icons/durability-custom.svg create mode 100644 src/assets/icons/durability-high.svg create mode 100644 src/assets/icons/durability-low.svg create mode 100644 src/assets/icons/durability-medium.svg delete mode 100644 src/assets/logo-inverse.svg delete mode 100644 src/assets/network-error.svg delete mode 100644 src/assets/react.svg diff --git a/package-lock.json b/package-lock.json index 77cfaff..826d6e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,6 @@ "echarts": "^5.5.1", "emoji-picker-react": "^4.12.0", "idb-keyval": "^6.2.1", - "lucide-react": "^0.445.0", "preact": "^10.24.3", "react-router": "^6.28.0", "react-router-dom": "^6.28.0" @@ -3883,14 +3882,6 @@ "yallist": "^3.0.2" } }, - "node_modules/lucide-react": { - "version": "0.445.0", - "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.445.0.tgz", - "integrity": "sha512-YrLf3aAHvmd4dZ8ot+mMdNFrFpJD7YRwQ2pUcBhgqbmxtrMP4xDzIorcj+8y+6kpuXBF4JB0NOCTUWIYetJjgA==", - "peerDependencies": { - "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc" - } - }, "node_modules/magic-string": { "version": "0.30.13", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.13.tgz", diff --git a/package.json b/package.json index c00699f..da305f9 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,6 @@ "echarts": "^5.5.1", "emoji-picker-react": "^4.12.0", "idb-keyval": "^6.2.1", - "lucide-react": "^0.445.0", "preact": "^10.24.3", "react-router": "^6.28.0", "react-router-dom": "^6.28.0" diff --git a/src/assets/error-placeholder.svg b/src/assets/error-placeholder.svg deleted file mode 100644 index d55762d..0000000 --- a/src/assets/error-placeholder.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/src/assets/icons/arrow-onboarding.svg b/src/assets/icons/arrow-onboarding.svg new file mode 100644 index 0000000..ece2d3b --- /dev/null +++ b/src/assets/icons/arrow-onboarding.svg @@ -0,0 +1,10 @@ + + + diff --git a/src/assets/icons/durability-custom.svg b/src/assets/icons/durability-custom.svg new file mode 100644 index 0000000..21361f7 --- /dev/null +++ b/src/assets/icons/durability-custom.svg @@ -0,0 +1,11 @@ + + + diff --git a/src/assets/icons/durability-high.svg b/src/assets/icons/durability-high.svg new file mode 100644 index 0000000..85f8086 --- /dev/null +++ b/src/assets/icons/durability-high.svg @@ -0,0 +1,11 @@ + + + diff --git a/src/assets/icons/durability-low.svg b/src/assets/icons/durability-low.svg new file mode 100644 index 0000000..7978cf9 --- /dev/null +++ b/src/assets/icons/durability-low.svg @@ -0,0 +1,11 @@ + + + diff --git a/src/assets/icons/durability-medium.svg b/src/assets/icons/durability-medium.svg new file mode 100644 index 0000000..bb37958 --- /dev/null +++ b/src/assets/icons/durability-medium.svg @@ -0,0 +1,11 @@ + + + diff --git a/src/assets/logo-inverse.svg b/src/assets/logo-inverse.svg deleted file mode 100644 index 3b77344..0000000 --- a/src/assets/logo-inverse.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/src/assets/network-error.svg b/src/assets/network-error.svg deleted file mode 100644 index 45cb79b..0000000 --- a/src/assets/network-error.svg +++ /dev/null @@ -1,89 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Availability/AvailabilityConfirmation.tsx b/src/components/Availability/AvailabilityConfirmation.tsx index 02a63e3..5281389 100644 --- a/src/components/Availability/AvailabilityConfirmation.tsx +++ b/src/components/Availability/AvailabilityConfirmation.tsx @@ -1,10 +1,10 @@ import "./AvailabilityConfirm.css"; import { AvailabilityComponentProps } from "./types"; import "./AvailabilityConfirm.css"; -import { Info } from "lucide-react"; import { useEffect } from "react"; import { SpaceAllocation } from "@codex-storage/marketplace-ui-components"; import NodesIcon from "../../assets/icons/nodes.svg?react"; +import InfoIcon from "../../assets/icons/info.svg?react"; export function AvailabilityConfirm({ dispatch, @@ -56,7 +56,7 @@ export function AvailabilityConfirm({
- +
diff --git a/src/components/ErrorPlaceholder/ErrorPlaceholder.tsx b/src/components/ErrorPlaceholder/ErrorPlaceholder.tsx index 4fa2ba6..3e42e6c 100644 --- a/src/components/ErrorPlaceholder/ErrorPlaceholder.tsx +++ b/src/components/ErrorPlaceholder/ErrorPlaceholder.tsx @@ -13,7 +13,7 @@ export function ErrorPlaceholder({ subtitle, error }: Props) { return ( } + Icon={} title="Error" subtitle={subtitle} message={message}> diff --git a/src/components/StorageRequestSetup/StorageRequestReview.css b/src/components/StorageRequestSetup/StorageRequestReview.css index 24b8a96..7ad4d37 100644 --- a/src/components/StorageRequestSetup/StorageRequestReview.css +++ b/src/components/StorageRequestSetup/StorageRequestReview.css @@ -69,8 +69,8 @@ svg { position: absolute; - right: 0; - top: 0; + right: -16px; + top: -7px; color: var(--codex-preset-color); } diff --git a/src/components/StorageRequestSetup/StorageRequestReview.tsx b/src/components/StorageRequestSetup/StorageRequestReview.tsx index 4156e47..860a9ed 100644 --- a/src/components/StorageRequestSetup/StorageRequestReview.tsx +++ b/src/components/StorageRequestSetup/StorageRequestReview.tsx @@ -2,11 +2,14 @@ import { useCallback, useEffect, useState } from "react"; import "./StorageRequestReview.css"; import { Alert } from "@codex-storage/marketplace-ui-components"; import { CardNumbers } from "../CardNumbers/CardNumbers"; -import WarningIcon from "../../assets/icons/warning-circle.svg?react"; +import WarningIcon from "../../assets/icons/warning.svg?react"; import { StorageRequest, StorageRequestComponentProps } from "./types"; import DurabilityIcon from "../../assets/icons/durability.svg?react"; import AlphaIcon from "../../assets/icons/alpha.svg?react"; -import PresetIcon from "../../assets/icons/preset.svg?react"; +import PresetCustomIcon from "../../assets/icons/durability-custom.svg?react"; +import PresetLowIcon from "../../assets/icons/durability-low.svg?react"; +import PresetMediumIcon from "../../assets/icons/durability-medium.svg?react"; +import PresetHighIcon from "../../assets/icons/durability-high.svg?react"; import CommitmentIcon from "../../assets/icons/commitment.svg?react"; import RequestDurationIcon from "../../assets/icons/request-duration.svg?react"; import { attributes } from "../../utils/attributes"; @@ -222,7 +225,7 @@ export function StorageRequestReview({ })} onClick={() => onDurabilityChange(0)}> Custom - +
onDurabilityChange(1)}> Low - +
onDurabilityChange(2)}> Medium Recommanded - +
onDurabilityChange(3)}> High - +
diff --git a/src/components/Welcome/WelcomeCard.tsx b/src/components/Welcome/WelcomeCard.tsx index fb1a38b..ed13ab3 100644 --- a/src/components/Welcome/WelcomeCard.tsx +++ b/src/components/Welcome/WelcomeCard.tsx @@ -1,5 +1,4 @@ import "./WelcomeCard.css"; -import { ArrowRight } from "lucide-react"; import { Alert } from "@codex-storage/marketplace-ui-components"; import { useEffect, useRef, useState } from "react"; import { classnames } from "../../utils/classnames"; @@ -47,7 +46,7 @@ export function WelcomeCard() {

- Learn more + Learn more → diff --git a/src/routes/dashboard/dashboard.css b/src/routes/dashboard/dashboard.css index ddac5ec..3a2e7dd 100644 --- a/src/routes/dashboard/dashboard.css +++ b/src/routes/dashboard/dashboard.css @@ -13,11 +13,11 @@ @media (min-width: 1600px) { & { - flex: 1 1 23%; + flex: 1 1 35%; } &.welcome-card { - flex: 1 1 30%; + flex: 1 1 35%; } &.card--main--files { diff --git a/src/routes/dashboard/help.tsx b/src/routes/dashboard/help.tsx index 8799dd4..78afbfc 100644 --- a/src/routes/dashboard/help.tsx +++ b/src/routes/dashboard/help.tsx @@ -1,7 +1,7 @@ import "./help.css"; -import { HelpCircle } from "lucide-react"; import { useEffect } from "react"; import * as Sentry from "@sentry/react"; +import HelpIcon from "../../assets/icons/help.svg?react"; export const HelpRoute = () => { useEffect(() => { @@ -21,7 +21,7 @@ export const HelpRoute = () => {

You might be wondering...

- +

What's Codex?

@@ -33,7 +33,7 @@ export const HelpRoute = () => {

- +

What is the purpose of this web application?

@@ -44,7 +44,7 @@ export const HelpRoute = () => {

- +

Can Codex handle big files ?

@@ -55,7 +55,7 @@ export const HelpRoute = () => {

- +

Is it production ready ?

@@ -67,7 +67,7 @@ export const HelpRoute = () => {

- +

How can I reach you if I am stuck ?

@@ -84,7 +84,7 @@ export const HelpRoute = () => {

- +

How can I build and run Codex ?

diff --git a/src/routes/onboarding-name.tsx b/src/routes/onboarding-name.tsx index be199a5..dd10761 100644 --- a/src/routes/onboarding-name.tsx +++ b/src/routes/onboarding-name.tsx @@ -21,21 +21,6 @@ export const OnBoardingNameRoute = () => { } }; - // useEffect(() => { - // const onKeyPress = (event: Event) => { - // const e = event as KeyboardEvent; - // if (e.key === "ArrowRight") { - // navigate({ to: "/onboarding-checks" }); - // } else if (e.key === "ArrowLeft") { - // navigate({ to: "/" }); - // } - // }; - - // document.addEventListener("keydown", onKeyPress); - - // return () => document.removeEventListener("keydown", onKeyPress); - // }, [navigate]); - return ( <> diff --git a/src/routes/onboarding.tsx b/src/routes/onboarding.tsx index 1454bd2..a1a0e9a 100644 --- a/src/routes/onboarding.tsx +++ b/src/routes/onboarding.tsx @@ -1,10 +1,10 @@ import { useState } from "react"; import { Modal } from "@codex-storage/marketplace-ui-components"; -import { ArrowRight } from "lucide-react"; import { OnBoardingLayout } from "../components/OnBoarding/OnBoardingLayout"; import AlphaIcon from "../assets/icons/alpha.svg?react"; import AlphaText from "../assets/icons/alphatext.svg?react"; -import ArrowRightCircle from "../assets/icons/arrow-circle.svg?react"; +import ArrowCircleIcon from "../assets/icons/arrow-circle.svg?react"; +import ArrowRightIcon from "../assets/icons/arrow-onboarding.svg?react"; import { useNavigate } from "react-router-dom"; export function OnBoardingRoute() { @@ -43,9 +43,7 @@ export function OnBoardingRoute() {

- - Let’s get started - + Let’s get started →
- +