diff --git a/package-lock.json b/package-lock.json index f37fce9..99cc45e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.13", "license": "MIT", "dependencies": { - "@codex-storage/marketplace-ui-components": "^0.0.47", + "@codex-storage/marketplace-ui-components": "^0.0.50", "@codex-storage/sdk-js": "^0.0.16", "@sentry/browser": "^8.32.0", "@sentry/react": "^8.31.0", @@ -395,9 +395,9 @@ } }, "node_modules/@codex-storage/marketplace-ui-components": { - "version": "0.0.47", - "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.47.tgz", - "integrity": "sha512-dcnZsYEFB1IoEx9sSC3Z1gaReLf6SAFmFNvfnBs3U81mAFnOd/nGi7IUY/ipPyN9U+J8nrGlAOsWnzNiPlEOpA==", + "version": "0.0.50", + "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.50.tgz", + "integrity": "sha512-pijYw8Wd/ns64Q7iSLQ444U5Q7Ql0U88OuxBycuxIOVp3obITJk6SBgdZpxHIj5kWShsUvXU/nJl0V0oKt9ieQ==", "engines": { "node": ">=18" }, diff --git a/package.json b/package.json index 3b9b81d..4415bb3 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "React" ], "dependencies": { - "@codex-storage/marketplace-ui-components": "^0.0.47", + "@codex-storage/marketplace-ui-components": "^0.0.50", "@codex-storage/sdk-js": "^0.0.16", "@sentry/browser": "^8.32.0", "@sentry/react": "^8.31.0", @@ -70,4 +70,4 @@ "author": "Codex team", "readme": "README.md", "license": "MIT" -} +} \ No newline at end of file diff --git a/src/assets/css/container.css b/src/assets/css/container.css deleted file mode 100644 index 0140e28..0000000 --- a/src/assets/css/container.css +++ /dev/null @@ -1,8 +0,0 @@ -.container { - padding: 1.5rem; - flex: 1; -} - -.container-fluid { - padding-inline: 1.5rem; -} diff --git a/src/assets/css/indicator.css b/src/assets/css/indicator.css deleted file mode 100644 index 4b42e68..0000000 --- a/src/assets/css/indicator.css +++ /dev/null @@ -1,35 +0,0 @@ -.indicator { - display: flex; - align-items: center; - gap: 0.75rem; -} - -.indicator-point { - width: 12px; - height: 12px; - border-radius: 50%; - animation-duration: 3s; - animation-name: flash; - animation-iteration-count: infinite; - transition: none; -} - -.indicator-point-online { - background-color: var(--codex-color-primary); -} - -.indicator-point-offline { - background-color: rgb(217, 53, 38); -} - -@keyframes flash { - 0% { - opacity: 1; - } - 40% { - opacity: 0; - } - 100% { - opacity: 1; - } -} diff --git a/src/assets/css/text.css b/src/assets/css/text.css deleted file mode 100644 index ee13f03..0000000 --- a/src/assets/css/text.css +++ /dev/null @@ -1,27 +0,0 @@ -.text-contrast { - color: white; -} - -.text-secondary { - mix-blend-mode: difference; -} - -.text-center { - text-align: center; -} - -.text--primary { - color: var(--codex-color-primary); -} - -.text--error { - color: var(--codex-color-error); -} - -.text--spacing { - margin-bottom: 0.75rem; -} - -.text--warning { - color: var(--codex-color-warning); -} diff --git a/src/assets/icons/arrow-onboarding.svg b/src/assets/icons/arrow-onboarding.svg index ece2d3b..f9f067f 100644 --- a/src/assets/icons/arrow-onboarding.svg +++ b/src/assets/icons/arrow-onboarding.svg @@ -1,9 +1,4 @@ - + diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx index 322fba1..9030404 100644 --- a/src/components/AppBar/AppBar.tsx +++ b/src/components/AppBar/AppBar.tsx @@ -74,12 +74,10 @@ export function AppBar({ onIconClick, onExpanded }: Props) { const title = location.pathname.split("/")[2] || location.pathname.split("/")[1]; - const networkIconColor = online - ? "#3EE089" - : "var(--codex-input-color-error)"; + const networkIconColor = online ? "#3EE089" : "var(-codex-color-error)"; const nodesIconColor = codex.enabled === false - ? "var(--codex-input-color-error)" + ? "var(-codex-color-error)" : persistence.enabled ? "#3EE089" : "var(--codex-input-color-warning)"; diff --git a/src/components/AppBar/appBar.css b/src/components/AppBar/appBar.css index 9c6d110..b7201bd 100644 --- a/src/components/AppBar/appBar.css +++ b/src/components/AppBar/appBar.css @@ -1,12 +1,12 @@ .app-bar { height: 80px; justify-content: space-between; - border-bottom: 1px solid var(--codex-border-color); + border-bottom: 1px solid rgba(150, 150, 150, 0.2); display: flex; padding: 16px; - border-bottom: 1px solid #96969633; + border-bottom: 1px solid rgba(150, 150, 150, 0.2); box-sizing: border-box; - background-color: #1c1c1c; + background-color: rgb(28, 28, 28); border-right: 12px solid transparent; position: sticky; top: 0; @@ -19,15 +19,15 @@ } &:not(.app-bar--offline):not(.app-bar--no-persistence) { - border-right-color: #6ccc93; + border-right-color: rgb(108, 204, 147); } &.app-bar--offline { - border-right-color: var(--codex-input-color-error); + border-right-color: rgb(251, 55, 72); } &.app-bar--no-persistence:not(.app-bar--offline) { - border-right-color: rgb(var(--codex-color-warning)); + border-right-color: rgb(251, 198, 75); } h1 { @@ -44,28 +44,28 @@ 400 14px/20px "Inter", sans-serif; letter-spacing: -0.006em; - color: #969696cc; + color: rgba(150, 150, 150, 0.8); } > div { span { - background: #141414; + background: rgb(20, 20, 20); height: 48px; width: 48px; display: flex; align-items: center; justify-content: center; - border: 1px solid #353639; + border: 1px solid rgb(53, 54, 57); border-radius: 50%; - color: #969696; + color: rgba(150, 150, 150, 1); } } aside { svg { padding: 10px; - background-color: #141414; - border-radius: var(--codex-border-radius); + background-color: rgb(20, 20, 20); + border-radius: 5px; } span { @@ -73,7 +73,7 @@ 500 14px/20px "Inter", sans-serif; letter-spacing: -0.006em; - color: #8d8d8d; + color: rgb(141, 141, 141); @media (max-width: 999px) { & { diff --git a/src/components/Availability/AvailabilityActionsCell.css b/src/components/Availability/AvailabilityActionsCell.css index 37c5352..c17b2e6 100644 --- a/src/components/Availability/AvailabilityActionsCell.css +++ b/src/components/Availability/AvailabilityActionsCell.css @@ -1,17 +1,10 @@ .availability-actions { display: inline-flex; align-items: center; - border: 1px solid var(--codex-border-color); - border-radius: var(--codex-border-radius); - padding: 0.5rem; - background-color: #14141499; + border: 1px solid rgba(150, 150, 150, 0.2); + border-radius: 10px; + padding: 10px; + background-color: rgba(20, 20, 20, 0.6); gap: 8px; padding: 10px; - - .button-icon { - width: 40px; - height: 40px; - background-color: #2f2f2f; - border: 1px solid #96969633; - } } diff --git a/src/components/Availability/AvailabilityConfirm.css b/src/components/Availability/AvailabilityConfirm.css index efcdb77..224f2db 100644 --- a/src/components/Availability/AvailabilityConfirm.css +++ b/src/components/Availability/AvailabilityConfirm.css @@ -11,7 +11,7 @@ align-items: flex-start; > div:first-child { - background-color: rgb(var(--codex-color-primary-rgb), 0.2); + background-color: rgb(193, 240, 164, 0.2); border-radius: 50%; padding: 0.5rem; display: flex; @@ -19,7 +19,7 @@ justify-content: center; svg { - color: rgb(var(--codex-color-primary-rgb)); + color: rgb(193, 240, 164); } } diff --git a/src/components/Availability/AvailabilityEdit.css b/src/components/Availability/AvailabilityEdit.css index 085867d..1f3d397 100644 --- a/src/components/Availability/AvailabilityEdit.css +++ b/src/components/Availability/AvailabilityEdit.css @@ -30,7 +30,7 @@ } svg { - color: #969696; + color: rgba(150, 150, 150, 1); } header { @@ -38,10 +38,6 @@ gap: 8px; } - input { - background-color: transparent; - } - .space-allocation { margin-bottom: 16px; } diff --git a/src/components/Availability/AvailabilityForm.css b/src/components/Availability/AvailabilityForm.css index 72fb2ed..0b2055a 100644 --- a/src/components/Availability/AvailabilityForm.css +++ b/src/components/Availability/AvailabilityForm.css @@ -10,7 +10,7 @@ } option { - background-color: #232323; + background-color: rgb(35, 35, 35); } header { @@ -35,13 +35,13 @@ &[aria-invalid] { .input-group > div > div > div:nth-child(2) { - border-color: var(--codex-input-color-error); + border-color: var(-codex-color-error); } label, svg, select { - color: var(--codex-input-color-error); + color: var(-codex-color-error); } } } diff --git a/src/components/Card/Card.css b/src/components/Card/Card.css index 543f0d2..4584204 100644 --- a/src/components/Card/Card.css +++ b/src/components/Card/Card.css @@ -1,8 +1,8 @@ .card { - border: 1px solid #96969633; + border: 1px solid rgba(150, 150, 150, 0.2); border-radius: 16px; padding: 16px; - background-color: #232323; + background-color: rgb(35, 35, 35); > header { display: flex; @@ -12,7 +12,7 @@ margin-bottom: 16px; svg { - color: #969696; + color: rgba(150, 150, 150, 1); } > div { diff --git a/src/components/CardNumbers/CardNumbers.css b/src/components/CardNumbers/CardNumbers.css index 25b52be..11a39d4 100644 --- a/src/components/CardNumbers/CardNumbers.css +++ b/src/components/CardNumbers/CardNumbers.css @@ -1,10 +1,10 @@ .card-number { - --codex-card-number-label-color: #7b7b7b; - --codex-card-number-unit-color: #969696; + --codex-card-number-label-color: rgb(123, 123, 123); + --codex-card-number-unit-color: rgba(150, 150, 150, 1); &[aria-invalid] { - --codex-card-number-label-color: var(--codex-input-color-error); - --codex-card-number-unit-color: var(--codex-input-color-error); + --codex-card-number-label-color: var(-codex-color-error); + --codex-card-number-unit-color: var(-codex-color-error); } position: relative; @@ -33,21 +33,6 @@ color: var(--codex-card-number-unit-color); } - /* svg::after { - content: attr(data-title); - background-color: #2f2f2f; - color: #fff; - padding: 8px; - border-radius: 4px; - font-size: 12px; - line-height: 14px; - display: block; - white-space: nowrap; - position: absolute; - right: 1rem; - overflow: visible; - } */ - span { font-family: Inter; font-size: 12px; diff --git a/src/components/ConnectedAccount/ConnectedAccount.css b/src/components/ConnectedAccount/ConnectedAccount.css index 85b8a56..b0e7351 100644 --- a/src/components/ConnectedAccount/ConnectedAccount.css +++ b/src/components/ConnectedAccount/ConnectedAccount.css @@ -13,8 +13,8 @@ display: flex; list-style-type: none; margin-top: 16px; - border: 1px solid #96969633; - background-color: #14141499; + border: 1px solid rgba(150, 150, 150, 0.2); + background-color: rgba(20, 20, 20, 0.6); height: 24px; border-radius: 6px; @@ -28,22 +28,22 @@ font-weight: 500; line-height: 16px; text-align: left; - color: #969696; + color: rgba(150, 150, 150, 1); &:hover { cursor: pointer; } &[aria-selected] { - background: #2f2f2f; + background: rgb(47, 47, 47); color: white; } } } button { - background-color: #161616; - border: 1px solid #96969633; + background-color: rgb(22, 22, 22); + border: 1px solid rgba(150, 150, 150, 0.2); height: 24px; width: 24px; border-radius: 6px; @@ -71,7 +71,7 @@ line-height: 20px; letter-spacing: -0.006em; text-align: left; - color: #969696; + color: rgba(150, 150, 150, 1); } var { @@ -91,7 +91,7 @@ font-weight: 500; line-height: 16px; text-align: left; - color: #7d7d7d; + color: rgb(125, 125, 125); } } } diff --git a/src/components/ConnectedAccount/ProgressCircle.css b/src/components/ConnectedAccount/ProgressCircle.css index 6f73ad1..fa55130 100644 --- a/src/components/ConnectedAccount/ProgressCircle.css +++ b/src/components/ConnectedAccount/ProgressCircle.css @@ -3,20 +3,21 @@ width: 48px; height: 48px; display: flex; - background: #2f2f2f; + background: rgb(47, 47, 47); background-image: - -webkit-linear-gradient(90deg, #2f2f2f 50%, transparent 50%), - -webkit-linear-gradient(270deg, var(--codex-color-primary) 50%, #2f2f2f 50%); - background-image: linear-gradient(90deg, #2f2f2f 50%, transparent 50%), - linear-gradient(270deg, var(--codex-color-primary) 50%, #2f2f2f 50%); + -webkit-linear-gradient(90deg, rgb(47, 47, 47) 50%, transparent 50%), + -webkit-linear-gradient(270deg, var(--codex-color-primary) 50%, rgb + (47, 47, 47) 50%); + background-image: linear-gradient(90deg, rgb(47, 47, 47) 50%, transparent 50%), + linear-gradient(270deg, var(--codex-color-primary) 50%, rgb(47, 47, 47) 50%); div { border-radius: 50%; width: 36px; height: 36px; margin: auto; - background: #232323; + background: rgb(35, 35, 35); text-align: center; box-sizing: border-box; } diff --git a/src/components/ConnectedAccount/WalletCard.css b/src/components/ConnectedAccount/WalletCard.css index 5c16606..b4b6b28 100644 --- a/src/components/ConnectedAccount/WalletCard.css +++ b/src/components/ConnectedAccount/WalletCard.css @@ -10,7 +10,7 @@ background-repeat: no-repeat; background-size: cover; - border: 1px solid #96969633; + border: 1px solid rgba(150, 150, 150, 0.2); border-radius: 16px; padding: 16px; box-sizing: border-box; @@ -36,8 +36,8 @@ align-items: center; button { - background-color: #161616; - border: 1px solid #96969633; + background-color: rgb(22, 22, 22); + border: 1px solid rgba(150, 150, 150, 0.2); height: 24px; width: 24px; cursor: pointer; @@ -47,7 +47,7 @@ align-items: center; &:hover { - box-shadow: 0 0 0 3px var(--codex-border-color); + box-shadow: 0 0 0 3px rgba(150, 150, 150, 0.2); } &:first-child { @@ -84,7 +84,7 @@ line-height: 20px; letter-spacing: -0.006em; text-align: left; - color: #ffffffb2; + color: rgb(255, 255, 255, 0.7); } var { @@ -92,7 +92,7 @@ font-weight: 500; line-height: 40px; letter-spacing: -0.005em; - color: var(--text-strong-950, #ffffff); + color: rgb(255, 255, 255); display: block; font-style: normal; } @@ -130,9 +130,9 @@ } select { - background-color: #161616; + background-color: rgb(22, 22, 22); border-radius: 8px; - border: 1px solid #96969633; + border: 1px solid rgba(150, 150, 150, 0.2); padding: 6px 24px 6px 34px; outline: none; -moz-appearance: none; /* Firefox */ @@ -144,7 +144,7 @@ font-size: 0; &:hover { - box-shadow: 0 0 0 3px var(--codex-border-color); + box-shadow: 0 0 0 3px rgba(150, 150, 150, 0.2); } &:has(option[value="USD"]:checked) { @@ -176,11 +176,11 @@ } small { - color: #3ee089; + color: rgb(62, 224, 137); height: 20px; width: 42px; border-radius: 16px; - background-color: #1fc16b29; + background-color: rgb(31, 193, 107, 0.16); display: flex; align-items: center; justify-content: center; diff --git a/src/components/Dialog/Dialog.css b/src/components/Dialog/Dialog.css deleted file mode 100644 index 7b0246d..0000000 --- a/src/components/Dialog/Dialog.css +++ /dev/null @@ -1,11 +0,0 @@ -.dialog { - background-color: var(--codex-background-secondary); - border: none; - color: var(--codex-color); - min-width: 200px; - - &::backdrop { - background: rgba(70, 70, 70, 0.75); - backdrop-filter: blur(2px); - } -} diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx deleted file mode 100644 index 1b99e36..0000000 --- a/src/components/Dialog/Dialog.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { ReactNode, useEffect, useRef } from "react"; -import "./Dialog.css"; -import { Button } from "@codex-storage/marketplace-ui-components"; - -type Props = { - open: boolean; - children: ReactNode; - onClose: () => void; -}; - -export function Dialog({ open, children, onClose }: Props) { - const ref = useRef(null); - - useEffect(() => { - if (open) { - ref.current?.showModal(); - } else { - ref.current?.close(); - } - }, [open]); - - return ( - -
{children}
- - - ); -} diff --git a/src/components/FileCellRender/FileCell.css b/src/components/FileCellRender/FileCell.css index b7acf7d..a5e075f 100644 --- a/src/components/FileCellRender/FileCell.css +++ b/src/components/FileCellRender/FileCell.css @@ -13,6 +13,6 @@ font-weight: 500; line-height: 16px; text-align: left; - color: #7d7d7d; + color: rgb(125, 125, 125); } } diff --git a/src/components/Files/FileActions.css b/src/components/Files/FileActions.css index 5a8d6b7..4afa681 100644 --- a/src/components/Files/FileActions.css +++ b/src/components/Files/FileActions.css @@ -2,19 +2,12 @@ > div { display: inline-flex; align-items: center; - border: 1px solid var(--codex-border-color); - border-radius: var(--codex-border-radius); + border: 1px solid rgba(150, 150, 150, 0.2); + border-radius: 10px; padding: 0.5rem; - background-color: #14141499; + background-color: rgba(20, 20, 20, 0.6); gap: 8px; padding: 10px; - - .button-icon { - width: 40px; - height: 40px; - background-color: #2f2f2f; - border: 1px solid #96969633; - } } @media (max-width: 800px) { diff --git a/src/components/Files/FileActions.tsx b/src/components/Files/FileActions.tsx index adfb2c0..bfb3f10 100644 --- a/src/components/Files/FileActions.tsx +++ b/src/components/Files/FileActions.tsx @@ -25,6 +25,7 @@ export function FileActions({
window.open(url + content.cid, "_blank")} Icon={() => }> diff --git a/src/components/Files/FileCell.css b/src/components/Files/FileCell.css index b0a4d65..c2c2d35 100644 --- a/src/components/Files/FileCell.css +++ b/src/components/Files/FileCell.css @@ -15,8 +15,8 @@ .button-icon { width: 40px; height: 40px; - background-color: #14141499; - border: 1px solid #96969633; + background-color: rgba(20, 20, 20, 0.6); + border: 1px solid rgba(150, 150, 150, 0.2); } } } diff --git a/src/components/Files/FileDetails.css b/src/components/Files/FileDetails.css index 4f78919..4a8bae5 100644 --- a/src/components/Files/FileDetails.css +++ b/src/components/Files/FileDetails.css @@ -1,6 +1,6 @@ .file-details { - background-color: #232323; - border-left: 1px solid #96969633; + background-color: rgb(35, 35, 35); + border-left: 1px solid rgba(150, 150, 150, 0.2); border-top-left-radius: 16px; border-bottom-left-radius: 16px; padding: 16px; @@ -23,8 +23,8 @@ } .button-icon { - background-color: #2f2f2f; - border: 1px solid #96969633; + background-color: rgb(47, 47, 47); + border: 1px solid rgba(150, 150, 150, 0.2); svg { position: relative; @@ -35,8 +35,8 @@ } .preview { - background-color: #14141499; - border: 1px solid #69696933; + background-color: rgba(20, 20, 20, 0.6); + border: 1px solid rgba(105, 105, 105, 0.2); height: 150px; margin: auto; border-radius: 10px; @@ -63,7 +63,7 @@ line-height: 24px; letter-spacing: -0.011em; text-align: left; - color: #ffffff33; + color: rgb(255, 255, 255, 0.2); p { margin-top: 8px; @@ -95,7 +95,7 @@ line-height: 20px; letter-spacing: -0.006em; text-align: left; - color: #ffffffcc; + color: rgba (255, 255, 255, 0.8); } &:last-child p:nth-child(2) { @@ -106,14 +106,14 @@ letter-spacing: -0.006em; text-align: left; - color: #6beca1; + color: rgb(107, 236, 161); } } } .buttons { padding: 16px 0; - border-bottom: 1px solid #96969633; + border-bottom: 1px solid rgba(150, 150, 150, 0.2); display: flex; gap: 16px; @@ -128,7 +128,7 @@ header { margin-top: 16px; display: block; - border-bottom: 1px solid #96969633; + border-bottom: 1px solid rgba(150, 150, 150, 0.2); padding-bottom: 16px; > span { @@ -138,15 +138,15 @@ } thead tr th { - border-top: 1px solid #96969633; - border-bottom: 1px solid #96969633; + border-top: 1px solid rgba(150, 150, 150, 0.2); + border-bottom: 1px solid rgba(150, 150, 150, 0.2); &:first-child { - border-left: 1px solid #96969633; + border-left: 1px solid rgba(150, 150, 150, 0.2); } &:last-child { - border-right: 1px solid #96969633; + border-right: 1px solid rgba(150, 150, 150, 0.2); } } diff --git a/src/components/Files/FileFilters.css b/src/components/Files/FileFilters.css index 7606270..ff9a1f9 100644 --- a/src/components/Files/FileFilters.css +++ b/src/components/Files/FileFilters.css @@ -2,14 +2,14 @@ padding: 4px 8px; gap: 8px; border-radius: 6px; - border: 1px solid #96969633; - background-color: #2f2f2f; + border: 1px solid rgba(150, 150, 150, 0.2); + background-color: rgb(47, 47, 47); font-family: Inter; font-size: 12px; font-weight: 500; line-height: 16px; text-align: left; - color: #969696; + color: rgba(150, 150, 150, 1); text-transform: capitalize; display: inline-flex; align-items: center; @@ -17,11 +17,11 @@ transition: box-shadow 0.35s; &:hover { - box-shadow: 0 0 0 3px var(--codex-border-color); + box-shadow: 0 0 0 3px rgba(150, 150, 150, 0.2); } svg { - color: #969696; + color: rgba(150, 150, 150, 1); } &.filter--active { diff --git a/src/components/Files/Files.css b/src/components/Files/Files.css index 6c6e059..09beff0 100644 --- a/src/components/Files/Files.css +++ b/src/components/Files/Files.css @@ -24,7 +24,7 @@ } table thead tr th { - background-color: #14141499; + background-color: rgba(20, 20, 20, 0.6); } @media (max-width: 800px) { diff --git a/src/components/Files/FolderButton.css b/src/components/Files/FolderButton.css index 3e1a900..37477cd 100644 --- a/src/components/Files/FolderButton.css +++ b/src/components/Files/FolderButton.css @@ -4,12 +4,12 @@ transform: translate(310px, -200px); opacity: 0; transition: opacity 0.15s; - background-color: var(--codex-background); + background-color: rgba(47, 47, 47, 1); padding: 0.5rem; - border-radius: var(--codex-border-radius); + border-radius: 8px; width: 150px; right: -40px; - border: 1px solid var(--codex-border-color); + border: 1px solid rgba(150, 150, 150, 0.2); z-index: -1; &[aria-expanded] { @@ -22,13 +22,13 @@ padding: 0.75rem; transition: background-color 0.35s; cursor: pointer; - border-radius: var(--codex-border-radius); + border-radius: 8px; display: flex; align-items: center; justify-content: space-between; &:hover { - background-color: var(--codex-background-light); + background-color: rgba(150, 150, 150, 0.1); } } diff --git a/src/components/HealthChecks/HealthChecks.css b/src/components/HealthChecks/HealthChecks.css index 6ff3ceb..58da689 100644 --- a/src/components/HealthChecks/HealthChecks.css +++ b/src/components/HealthChecks/HealthChecks.css @@ -87,7 +87,7 @@ font-size: 12px; font-weight: 400; line-height: 14px; - color: #828282; + color: rgb(130, 130, 130); padding-left: 1.25rem; margin-top: 1.75rem; margin-bottom: 3rem; @@ -101,8 +101,8 @@ align-items: center; padding: 16px 0; gap: 16px; - border-top: 1px solid #96969633; - border-bottom: 1px solid #96969633; + border-top: 1px solid rgba(150, 150, 150, 0.2); + border-bottom: 1px solid rgba(150, 150, 150, 0.2); &:first-child { font-family: Inter; diff --git a/src/components/LogLevel/LogLevel.css b/src/components/LogLevel/LogLevel.css index 74ac045..b225a22 100644 --- a/src/components/LogLevel/LogLevel.css +++ b/src/components/LogLevel/LogLevel.css @@ -11,7 +11,7 @@ position: absolute; top: 11px; left: 16px; - color: #969696; + color: rgba(150, 150, 150, 1); } } @@ -20,7 +20,7 @@ } select { - border-color: #969696; + border-color: rgba(150, 150, 150, 1); padding-left: 40px; } } diff --git a/src/components/Menu/menu.css b/src/components/Menu/menu.css index 9466962..7572ef4 100644 --- a/src/components/Menu/menu.css +++ b/src/components/Menu/menu.css @@ -1,8 +1,7 @@ .menu { display: flex; flex-direction: column; - background-color: #1c1c1c; - border-radius: var(--codex-border-radius); + background-color: rgb(28, 28, 28); transition: left 0.25s; position: sticky; z-index: 10; @@ -31,8 +30,8 @@ @media (min-width: 1200px) { &[aria-expanded] a[data-title]:hover::after { content: attr(data-title); - background-color: #2f2f2f; - color: #fff; + background-color: rgb(47, 47, 47); + color: rgb(255, 255, 255); padding: 8px; border-radius: 4px; font-size: 12px; @@ -80,7 +79,7 @@ display: flex; align-items: center; gap: 1.5rem; - background-color: #060606; + background-color: rgb(6, 6, 6); border-radius: 8px; > svg:first-child { @@ -121,7 +120,7 @@ height: 100%; margin-bottom: 2.5rem; gap: 0.5rem; - border-top: 1px solid #96969633; + border-top: 1px solid rgba(150, 150, 150, 0.2); &::before { height: 20px; @@ -195,7 +194,7 @@ hr { margin-top: 1.5rem; margin-bottom: 1.5rem; - border: 0.1px solid #96969633; + border: 0.1px solid rgba(150, 150, 150, 0.2); width: 100%; } @@ -214,7 +213,7 @@ font-weight: 500; line-height: 20px; letter-spacing: -0.006em; - color: #969696; + color: rgba(150, 150, 150, 1); border-radius: 8px; transition: background-color 0.35s; position: relative; @@ -222,8 +221,8 @@ &:hover:not([aria-disabled="true"]), &.active:not([aria-disabled="true"]) { - background-color: var(--codex-highlight-color); - color: #c7c7c7; + background-color: rgb(47, 47, 47); + color: rgb(199, 199, 199); } span:first-child { diff --git a/src/components/NodeSpace/NodeSpace.css b/src/components/NodeSpace/NodeSpace.css index 8c7c82d..166422a 100644 --- a/src/components/NodeSpace/NodeSpace.css +++ b/src/components/NodeSpace/NodeSpace.css @@ -8,6 +8,6 @@ text-align: left; padding-top: 16px; margin-bottom: 16px; - border-top: 1px solid #96969633; + border-top: 1px solid rgba(150, 150, 150, 0.2); } } diff --git a/src/components/OnBoarding/OnBoardingLayout.css b/src/components/OnBoarding/OnBoardingLayout.css index 40cf5f8..53ce617 100644 --- a/src/components/OnBoarding/OnBoardingLayout.css +++ b/src/components/OnBoarding/OnBoardingLayout.css @@ -85,7 +85,7 @@ } &[aria-selected] { - box-shadow: 0px 0px 12px 0px #fff; + box-shadow: 0px 0px 12px 0px rgb(255, 255, 255); opacity: 1; } } @@ -114,7 +114,7 @@ cursor: pointer; display: inline-flex; align-items: center; - color: var(--codex-color-error-hexa); + color: rgb(204, 108, 108); &:hover { animation-name: example; @@ -142,7 +142,7 @@ line-height: 16.34px; max-width: 532px; margin-top: 20px; - color: var(--codex-input-label-color); + color: rgba(130, 130, 130, 1); } label { @@ -166,13 +166,14 @@ letter-spacing: 0.01em; margin-top: 32px; font-family: Inter; - color: #7bfbaf; + color: rgb(123, 251, 175); gap: 4px; text-decoration: none; - border-bottom: 2px solid #7bfbaf; + border-bottom: 2px solid rgb(123, 251, 175); cursor: pointer; display: inline-flex; align-items: center; + gap: 8px; } } @@ -217,6 +218,10 @@ padding: 16px; max-width: 700px; } + + .input input { + --codex-input-background-color: rgba(35, 35, 35, 1); + } } @keyframes rotate { diff --git a/src/components/Peers/PeerCountryCell.css b/src/components/Peers/PeerCountryCell.css index b2489b3..fa61a27 100644 --- a/src/components/Peers/PeerCountryCell.css +++ b/src/components/Peers/PeerCountryCell.css @@ -4,7 +4,7 @@ gap: 1rem; span:first-child { - background-color: #141414; + background-color: rgb(20, 20, 20); border-radius: 50%; padding: 12px; } diff --git a/src/components/Peers/PeersCard.css b/src/components/Peers/PeersCard.css index 880a3bd..9b8c97f 100644 --- a/src/components/Peers/PeersCard.css +++ b/src/components/Peers/PeersCard.css @@ -2,8 +2,8 @@ position: relative; .peers-map { - border-top: 1px solid #96969633; - border-bottom: 1px solid #96969633; + border-top: 1px solid rgba(150, 150, 150, 0.2); + border-bottom: 1px solid rgba(150, 150, 150, 0.2); width: 100%; svg { diff --git a/src/components/Peers/PeersChart.css b/src/components/Peers/PeersChart.css index f1f3b92..108415e 100644 --- a/src/components/Peers/PeersChart.css +++ b/src/components/Peers/PeersChart.css @@ -27,7 +27,7 @@ content: ""; width: inherit; height: inherit; - border: 45px solid #323232; + border: 45px solid rgb(50, 50, 50); border-bottom: none; border-top-left-radius: 175px; border-top-right-radius: 175px; @@ -39,7 +39,7 @@ top: 100%; width: inherit; height: inherit; - border: 45px solid #323232; + border: 45px solid rgb(50, 50, 50); border-top: none; border-bottom-left-radius: 175px; border-bottom-right-radius: 175px; diff --git a/src/components/RequireAssitance/RequireAssitance.css b/src/components/RequireAssitance/RequireAssitance.css index c42492a..f109613 100644 --- a/src/components/RequireAssitance/RequireAssitance.css +++ b/src/components/RequireAssitance/RequireAssitance.css @@ -1,9 +1,9 @@ .require-assistance { - background-color: #0a1410; + background-color: rgb(10, 20, 16); box-sizing: border-box; padding: 16px; border-radius: 16px; - border-left: 4px solid #6ccc93; + border-left: 4px solid rgb(108, 204, 147); height: 144px; display: flex; flex-direction: column; @@ -21,7 +21,7 @@ font-weight: 400; line-height: 20px; text-align: left; - color: #6ccc93; + color: rgb(108, 204, 147); } h6 { @@ -31,7 +31,7 @@ line-height: 19.36px; letter-spacing: 0.01em; text-align: left; - color: #7bfbaf; + color: rgb(123, 251, 175); margin-bottom: 4px; } } diff --git a/src/components/StorageRequestSetup/StorageRequestCreate.css b/src/components/StorageRequestSetup/StorageRequestCreate.css index dbbf19b..6c6a2ec 100644 --- a/src/components/StorageRequestSetup/StorageRequestCreate.css +++ b/src/components/StorageRequestSetup/StorageRequestCreate.css @@ -11,7 +11,7 @@ font-weight: 400; line-height: 16px; text-align: left; - color: #969696; + color: rgba(150, 150, 150, 1); } } diff --git a/src/components/StorageRequestSetup/StorageRequestFileChooser.css b/src/components/StorageRequestSetup/StorageRequestFileChooser.css index 9ae8905..1824cf0 100644 --- a/src/components/StorageRequestSetup/StorageRequestFileChooser.css +++ b/src/components/StorageRequestSetup/StorageRequestFileChooser.css @@ -5,7 +5,7 @@ hr { flex: 1; - border: 1px solid #96969633; + border: 1px solid rgba(150, 150, 150, 0.2); margin-top: 24px; margin-bottom: 24px; @@ -16,7 +16,7 @@ line-height: 12px; letter-spacing: 0.02em; text-align: left; - color: #696969; + color: rgb(105, 105, 105); } } diff --git a/src/components/StorageRequestSetup/StorageRequestFileChooser.tsx b/src/components/StorageRequestSetup/StorageRequestFileChooser.tsx index 1c2601c..9f934ae 100644 --- a/src/components/StorageRequestSetup/StorageRequestFileChooser.tsx +++ b/src/components/StorageRequestSetup/StorageRequestFileChooser.tsx @@ -70,7 +70,7 @@ export function StorageRequestFileChooser({ value={storageRequest.cid || ""} options={options} onSelected={onSelected} - size="medium" + variant="medium" />
diff --git a/src/components/StorageRequestSetup/StorageRequestReview.css b/src/components/StorageRequestSetup/StorageRequestReview.css index ba3a2fa..b297ec1 100644 --- a/src/components/StorageRequestSetup/StorageRequestReview.css +++ b/src/components/StorageRequestSetup/StorageRequestReview.css @@ -1,6 +1,6 @@ .request-review { > header { - border-bottom: 1px solid #96969633; + border-bottom: 1px solid rgba(150, 150, 150, 0.2); padding-bottom: 16px; div { @@ -47,13 +47,13 @@ font-weight: 500; line-height: 18px; letter-spacing: -0.011em; - color: #969696cc; + color: rgba(150, 150, 150, 0.8); } } > div:nth-child(n + 2) { - --codex-preset-border-color: #494949; - --codex-preset-color: #969696; + --codex-preset-border-color: rgb(73, 73, 73); + --codex-preset-color: rgba(150, 150, 150, 1); border: 1px solid var(--codex-preset-border-color); border-radius: 12px; padding: 16px; @@ -76,8 +76,8 @@ } &[aria-selected] { - --codex-preset-border-color: #6fcb94; - --codex-preset-color: #6fcb94; + --codex-preset-border-color: var(--codex-color-primary); + --codex-preset-color: var(--codex-color-primary); } svg { @@ -96,14 +96,14 @@ color: var(--codex-preset-color); + span { - background: #6fcb9433; + background: var(--codex-color-primary) 33; padding: 2px 8px; font-family: Inter; font-size: 11px; font-weight: 500; line-height: 12px; letter-spacing: 0.02em; - color: #6fcb94; + color: var(--codex-color-primary); border-radius: 16px; margin-left: 4px; } @@ -112,7 +112,7 @@ } .row { - border-top: 1px solid #96969633; + border-top: 1px solid rgba(150, 150, 150, 0.2); margin-top: 16px; margin-bottom: 16px; padding-top: 16px; diff --git a/src/components/StorageRequestSetup/StorageRequestReview.tsx b/src/components/StorageRequestSetup/StorageRequestReview.tsx index 860a9ed..639a0f7 100644 --- a/src/components/StorageRequestSetup/StorageRequestReview.tsx +++ b/src/components/StorageRequestSetup/StorageRequestReview.tsx @@ -324,14 +324,9 @@ export function StorageRequestReview({ unit={"Expiration"} value={storageRequest.expiration.toString()} onChange={onExpirationChange} - className="storageRequestReview-expiration" onValidation={isInvalidNumber} title="Request expiration in minutes"> - } - title="Warning" - variant="warning" - className="storageRequestReview-alert"> + } title="Warning" variant="warning"> If no suitable hosts are found for the CID{" "} {Strings.shortId(storageRequest.cid)} matching your storage requirements, you will incur a charge a small amount of tokens. diff --git a/src/components/Versions/Versions.css b/src/components/Versions/Versions.css index 4e43756..f20e152 100644 --- a/src/components/Versions/Versions.css +++ b/src/components/Versions/Versions.css @@ -13,7 +13,7 @@ font-weight: 500; line-height: 24px; letter-spacing: -0.011em; - color: #99a0ae; + color: rgb(153, 160, 174); } small { diff --git a/src/components/Versions/Versions.tsx b/src/components/Versions/Versions.tsx index 23e0357..faa5cba 100644 --- a/src/components/Versions/Versions.tsx +++ b/src/components/Versions/Versions.tsx @@ -13,7 +13,7 @@ export function Versions() { return (
- +

Client

VER. {version} @@ -21,7 +21,7 @@ export function Versions() {

Vault

VER. {VersionsUtil.codexVersion()} - +
); diff --git a/src/components/WalletLogin/WalletLogin.css b/src/components/WalletLogin/WalletLogin.css index 2aeb48f..245e38e 100644 --- a/src/components/WalletLogin/WalletLogin.css +++ b/src/components/WalletLogin/WalletLogin.css @@ -3,7 +3,7 @@ display: flex; align-items: center; gap: 16px; - background-color: #252525; + background-color: rgb(37, 37, 37); filter: grayscale(30); transition: filter 0.5s; @@ -17,7 +17,7 @@ font-size: 8px; font-weight: 700; text-transform: uppercase; - color: #6e6e6e; + color: rgb(110, 110, 110); display: block; font-size: 10px; } @@ -27,7 +27,7 @@ font-family: Inter; font-size: 12px; font-weight: 700; - color: #ffffff99; + color: rgb(255, 255, 255, 0.6); font-style: normal; font-size: 16px; } @@ -45,7 +45,7 @@ font-weight: 700; line-height: 10px; text-align: left; - color: #3ee089; + color: rgb(62, 224, 137); font-style: normal; } @@ -54,7 +54,7 @@ font-size: 10px; font-weight: 700; line-height: 10px; - color: #6e6e6e; + color: rgb(110, 110, 110); cursor: pointer; } } diff --git a/src/components/Welcome/WelcomeCard.css b/src/components/Welcome/WelcomeCard.css index ccc4a6e..8ba9ed1 100644 --- a/src/components/Welcome/WelcomeCard.css +++ b/src/components/Welcome/WelcomeCard.css @@ -11,7 +11,7 @@ > div { padding: 16px; - background-color: #141414; + background-color: rgb(20, 20, 20); flex: 1; display: flex; flex-direction: column; @@ -40,7 +40,7 @@ font-weight: 400; line-height: 14px; text-align: left; - color: #7f948d; + color: rgb(127, 148, 141); } div { @@ -56,12 +56,22 @@ line-height: 19.36px; letter-spacing: 0.01em; text-align: left; - color: #7bfbaf; + color: rgb(123, 251, 175); + display: flex; + align-items: center; display: flex; align-items: center; + &:first-child { + border-bottom: 1px solid rgb(123, 251, 175); + text-decoration: none; + gap: 8px; + } + &:nth-child(2) { gap: 12px; + padding-bottom: 2px; + text-underline-offset: 5px; } } } diff --git a/src/components/Welcome/WelcomeCard.tsx b/src/components/Welcome/WelcomeCard.tsx index ed13ab3..76dcae2 100644 --- a/src/components/Welcome/WelcomeCard.tsx +++ b/src/components/Welcome/WelcomeCard.tsx @@ -6,6 +6,7 @@ import Logotype from "../../assets/icons/logotype.svg?react"; import Logo from "../../assets/icons/logo.svg?react"; import DiscordIcon from "../../assets/icons/discord.svg?react"; import WarningIcon from "../../assets/icons/warning.svg?react"; +import ArrowIcon from "../../assets/icons/arrow-onboarding.svg?react"; import { WelcomeImage } from "./WelcomeImage"; import { Link } from "react-router-dom"; @@ -46,11 +47,11 @@ export function WelcomeCard() {

- Learn more → + Learn more - Join Codex Discord + Join Codex Discord
diff --git a/src/index.css b/src/index.css index a144b1c..1ed3ae2 100644 --- a/src/index.css +++ b/src/index.css @@ -1,7 +1,3 @@ -@import url(./assets/css/container.css); -@import url(./assets/css/indicator.css); -@import url(./assets/css/text.css); - @font-face { font-family: Inter; font-weight: 300 800; @@ -15,38 +11,12 @@ } :root { - --codex-background: #1c1c1c; - --codex-color: white; - --codex-color-contrast: #f8f8f8; - --codex-color-error: 204, 108, 108; - --codex-color-error-hexa: #cc6c6c; - --codex-color-warning: 234, 179, 8; - --codex-color-success: 20, 184, 166; - --codex-color-blue: 30, 64, 175; - --codex-color-grey: 170, 170, 170; - --codex-color-primary: #6fcb94; - --codex-color-primary-rgb: 193, 240, 164; - --codex-color-primary-variant: #c1f0a4cc; - --codex-color-on-primary: #333; - --codex-color-disabled: #717171; - --codex-color-light: rgb(150 150 150); - --codex-border-color: #96969633; - --codex-input-border-color: #494949; - --codex-background-secondary: rgb(38 38 38); - --codex-highlight-color: #2f2f2f; - --codex-background-light: rgb(64 64 64); - --codex-background-backdrop: rgba(70, 70, 70, 0.75); - --codex-border-radius: 0.5rem; - --codex-font-size: 14px; + --codex-color-primary: rgb(111, 203, 148); + --codex-color-error: rgb(251, 55, 72); --codex-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; - --codex-input-label-color: #7b7b7b; - --codex-input-border-color: #494949; - --codex-input-background: #232323; - --codex-input-color-error: #fb3748; - --codex-row-gap: 16px; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; @@ -55,47 +25,46 @@ font-feature-settings: normal; font-variation-settings: normal; tab-size: 4; - font-size: 1.15rem; - font-size: var(--codex-font-size); + font-size: 14px; color-scheme: dark; - color: var(--codex-color); - background: #000000; /* Fallback color */ + color: white; + background: rgb(0, 0, 0); /* Fallback color */ background: -webkit-linear-gradient( 246.02deg, - #000000 30.36%, - #222222 91.05% + rgb(0, 0, 0) 30.36%, + rgb(34, 34, 34) 91.05% ); /* For Safari and older Chrome */ background: -moz-linear-gradient( 246.02deg, - #000000 30.36%, - #222222 91.05% + rgb(0, 0, 0) 30.36%, + rgb(34, 34, 34) 91.05% ); /* For older Firefox */ background: linear-gradient( 246.02deg, - #000000 30.36%, - #222222 91.05% + rgb(0, 0, 0) 30.36%, + rgb(34, 34, 34) 91.05% ); /* Standard syntax */ } ::selection { background: var(--codex-color-primary); - color: #3a0b5a; + color: rgb(58, 11, 90); } ::-webkit-scrollbar { height: 12px; width: 8px; - background: #aaa; + background: rgb(170, 170, 170); } ::-webkit-scrollbar-thumb { - background: #444; + background: rgb(68, 68, 68); -webkit-border-radius: 1ex; -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); } ::-webkit-scrollbar-corner { - background: #000; + background: rgb(0, 0, 0); } html { @@ -183,14 +152,14 @@ input:-webkit-autofill:active { } .gap { - gap: var(--codex-row-gap); + gap: 16px; } .card { - border: 1px solid #96969633; + border: 1px solid rgba(150, 150, 150, 0.2); border-radius: 16px; padding: 16px; - background-color: #232323; + background-color: rgb(35, 35, 35); > header { display: flex; @@ -200,7 +169,7 @@ input:-webkit-autofill:active { margin-bottom: 16px; svg { - color: #969696; + color: rgba(150, 150, 150, 1); } > div { diff --git a/src/routes/dashboard/availabilities.css b/src/routes/dashboard/availabilities.css index 8156850..3e7af3f 100644 --- a/src/routes/dashboard/availabilities.css +++ b/src/routes/dashboard/availabilities.css @@ -23,12 +23,12 @@ } table thead tr th { - background-color: #14141499; + background-color: rgba(20, 20, 20, 0.6); } table tbody tr.availabilty-row { td { - background-color: #292929; + background-color: rgb(41, 41, 41); padding: 6px 12px; &:first-child { @@ -63,7 +63,7 @@ font-weight: 400; line-height: 16px; text-align: left; - color: #ffffffcc; + color: rgba (255, 255, 255, 0.8); } } } @@ -88,7 +88,7 @@ } .node-space { - border-bottom: 1px solid #96969633; + border-bottom: 1px solid rgba(150, 150, 150, 0.2); padding-bottom: 16px; h6 { @@ -116,7 +116,7 @@ line-height: 20px; letter-spacing: -0.006em; text-align: left; - color: #969696cc; + color: rgba(150, 150, 150, 0.8); } } } diff --git a/src/routes/dashboard/dashboard.css b/src/routes/dashboard/dashboard.css index 1dc6b7c..65b8456 100644 --- a/src/routes/dashboard/dashboard.css +++ b/src/routes/dashboard/dashboard.css @@ -37,7 +37,7 @@ font-weight: 700; line-height: 14.52px; letter-spacing: 0.01em; - color: #969696cc; + color: rgba(150, 150, 150, 0.8); text-transform: uppercase; } @@ -60,7 +60,7 @@ border-radius: 50%; width: 52px; height: 52px; - background-color: #4a9a73; + background-color: rgb(74, 154, 115); display: flex; align-items: center; justify-content: center; diff --git a/src/routes/dashboard/help.css b/src/routes/dashboard/help.css index 014362c..5793bf0 100644 --- a/src/routes/dashboard/help.css +++ b/src/routes/dashboard/help.css @@ -10,7 +10,7 @@ > div { padding-bottom: 2rem; margin-bottom: 2rem; - border-bottom: 1px solid var(--codex-border-color); + border-bottom: 1px solid rgba(150, 150, 150, 0.2); gap: 1rem; display: flex; align-items: flex-start; @@ -28,11 +28,11 @@ } p { - color: var(--codex-color-light); + color: rgb(150 150 150); } svg { - color: var(--codex-color-disabled); + color: rgb(113, 113, 113); min-width: 1.5rem; height: auto; } diff --git a/src/routes/dashboard/logs.css b/src/routes/dashboard/logs.css index 61d2d02..75b83f8 100644 --- a/src/routes/dashboard/logs.css +++ b/src/routes/dashboard/logs.css @@ -1,7 +1,7 @@ .logs-card { display: flex; justify-content: space-between; - border: 1px solid #96969633; + border: 1px solid rgba(150, 150, 150, 0.2); border-radius: 16px; margin-bottom: 16px; @@ -31,7 +31,7 @@ font-weight: 400; line-height: 16px; text-align: left; - color: #969696cc; + color: rgba(150, 150, 150, 0.8); } .button { @@ -49,7 +49,7 @@ line-height: 24px; letter-spacing: -0.011em; text-align: left; - color: #757575; + color: rgb(117, 117, 117); } } } diff --git a/src/routes/dashboard/peers.css b/src/routes/dashboard/peers.css index 6be83ce..beaf10f 100644 --- a/src/routes/dashboard/peers.css +++ b/src/routes/dashboard/peers.css @@ -10,7 +10,7 @@ > div:first-child { width: 100%; - border: 1px solid #96969633; + border: 1px solid rgba(150, 150, 150, 0.2); border-radius: 16px; position: relative; @@ -37,7 +37,7 @@ } li { - border-bottom: 1px solid #969696cc; + border-bottom: 1px solid rgba(150, 150, 150, 0.8); padding: 16px 0; text-align: right; } @@ -48,7 +48,7 @@ line-height: 20px; letter-spacing: -0.006em; text-align: left; - color: #7b7b7b; + color: rgb(123, 123, 123); } li:not(:first-child) { @@ -88,8 +88,8 @@ } .connections { - background-color: #232323; - border: 1px solid #96969633; + background-color: rgb(35, 35, 35); + border: 1px solid rgba(150, 150, 150, 0.2); border-radius: 16px; max-width: 280px; padding: 16px; @@ -117,9 +117,9 @@ display: flex; align-items: center; gap: 8px; - color: #969696; + color: rgba(150, 150, 150, 1); padding-bottom: 16px; - border-bottom: 1px solid #96969633; + border-bottom: 1px solid rgba(150, 150, 150, 0.2); span { font-family: Inter; @@ -132,7 +132,7 @@ } footer { - border-top: 1px solid #96969633; + border-top: 1px solid rgba(150, 150, 150, 0.2); padding-top: 16px; } } @@ -153,13 +153,13 @@ border-radius: 8px; &.status--active { - color: #1daf61; - background-color: #6fcb9433; + color: rgb(29, 175, 97); + background-color: rgb(111, 203, 148, 0.2); } &.status--inactive { - color: #fb3748; - background-color: #fb374833; + color: rgb(251, 55, 72); + background-color: rgb(251, 55, 72, 0.2); } } } diff --git a/src/routes/dashboard/purchases.css b/src/routes/dashboard/purchases.css index 714d65c..c26a437 100644 --- a/src/routes/dashboard/purchases.css +++ b/src/routes/dashboard/purchases.css @@ -8,7 +8,7 @@ .table { table thead tr th { - background-color: #14141499; + background-color: rgba(20, 20, 20, 0.6); } @media (max-width: 800px) { diff --git a/src/routes/dashboard/settings.css b/src/routes/dashboard/settings.css index c4379c2..adcb085 100644 --- a/src/routes/dashboard/settings.css +++ b/src/routes/dashboard/settings.css @@ -24,7 +24,7 @@ .user-info { padding-bottom: 16px; margin-bottom: 16px; - border-bottom: 1px solid #96969633; + border-bottom: 1px solid rgba(150, 150, 150, 0.2); } } @@ -41,19 +41,8 @@ .address svg { top: 55px; } -} -/* -.settings-title { - font-weight: bold; - font-size: 1.125rem; - line-height: 1.75rem; - margin-bottom: 0.75rem; -} -.settings-input { - margin-bottom: 0.75rem; + .input input { + --codex-input-background-color: rgba(35, 35, 35, 1); + } } - -.settings-debug-loader { - margin: auto; -} */ diff --git a/src/routes/dashboard/wallet.css b/src/routes/dashboard/wallet.css index 3503b4d..4092469 100644 --- a/src/routes/dashboard/wallet.css +++ b/src/routes/dashboard/wallet.css @@ -13,7 +13,7 @@ } > ul li { - border-bottom: 1px solid #96969633; + border-bottom: 1px solid rgba(150, 150, 150, 0.2); margin-bottom: 16px; padding-bottom: 16px; } @@ -23,8 +23,8 @@ justify-content: space-between; margin-top: 16px; margin-bottom: 16px; - border-top: 1px solid #96969633; - border-bottom: 1px solid #96969633; + border-top: 1px solid rgba(150, 150, 150, 0.2); + border-bottom: 1px solid rgba(150, 150, 150, 0.2); padding-top: 16px; padding-bottom: 16px; display: none; @@ -48,24 +48,24 @@ font-weight: 500; line-height: 16px; text-align: left; - color: #969696; + color: rgba(150, 150, 150, 1); } } span { height: 36px; width: 1px; - background-color: #ffffff33; + background-color: rgb(255, 255, 255, 0.2); margin: auto 0; } } .button-icon { - background-color: #2f2f2f; + background-color: rgb(47, 47, 47); height: 60px; width: 60px; - color: #96969666; - border: 0.75px solid #96969633; + color: rgb(150, 150, 150, 0.4); + border: 0.75px solid rgba(150, 150, 150, 0.2); svg { mix-blend-mode: unset; @@ -90,7 +90,7 @@ align-items: center; justify-content: center; gap: 8px; - color: #969696; + color: rgba(150, 150, 150, 1); font-size: 20px; } } @@ -121,7 +121,7 @@ line-height: 20px; letter-spacing: -0.006em; text-align: left; - color: #ffffffb2; + color: rgb(255, 255, 255, 0.7); } p { diff --git a/src/routes/onboarding.tsx b/src/routes/onboarding.tsx index d800cfb..5abf615 100644 --- a/src/routes/onboarding.tsx +++ b/src/routes/onboarding.tsx @@ -5,6 +5,7 @@ import AlphaIcon from "../assets/icons/alpha.svg?react"; import AlphaText from "../assets/icons/alphatext.svg?react"; import ArrowCircleIcon from "../assets/icons/arrow-circle.svg?react"; import { useNavigate } from "react-router-dom"; +import ArrowIcon from "../assets/icons/arrow-onboarding.svg?react"; export function OnBoardingRoute() { const [modal, setModal] = useState(false); @@ -21,7 +22,7 @@ export function OnBoardingRoute() { <>
- +
- Let’s get started → + + Let’s get started + main { flex: 1; - background-color: #141414; + background-color: rgb(20, 20, 20); > div { padding: 16px; @@ -50,7 +50,7 @@ font-weight: 500; line-height: 24px; letter-spacing: -0.011em; - color: #99a0ae; + color: rgb(153, 160, 174); } .dashboard-welcome-versionValue {