mirror of
https://github.com/logos-storage/logos-storage-marketplace-ui.git
synced 2026-01-07 16:03:06 +00:00
Refactor css variables
This commit is contained in:
Arnaud
parent
9edf09bf93
commit
4f30b9d357
8
package-lock.json
generated
8
package-lock.json
generated
@ -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"
|
||||
},
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
.container {
|
||||
padding: 1.5rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding-inline: 1.5rem;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
@ -1,9 +1,4 @@
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M9.27273 17.5341L7.51705 15.7955L12.7756 10.5369H0V7.99716H12.7756L7.51705 2.74716L9.27273 1L17.5398 9.26705L9.27273 17.5341Z"
|
||||
fill="#7BFBAF" />
|
||||
|
||||
|
Before Width: | Height: | Size: 277 B After Width: | Height: | Size: 244 B |
@ -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)";
|
||||
|
||||
@ -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) {
|
||||
& {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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<HTMLDialogElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
ref.current?.showModal();
|
||||
} else {
|
||||
ref.current?.close();
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<dialog ref={ref} onCancel={onClose} className="dialog">
|
||||
<div>{children}</div>
|
||||
<Button onClick={onClose} label="Close"></Button>
|
||||
</dialog>
|
||||
);
|
||||
}
|
||||
@ -13,6 +13,6 @@
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
color: #7d7d7d;
|
||||
color: rgb(125, 125, 125);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -25,6 +25,7 @@ export function FileActions({
|
||||
<Cell className="file-actions">
|
||||
<div>
|
||||
<ButtonIcon
|
||||
variant="small"
|
||||
animation="bounce"
|
||||
onClick={() => window.open(url + content.cid, "_blank")}
|
||||
Icon={() => <DownloadIcon width={20}></DownloadIcon>}></ButtonIcon>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
}
|
||||
|
||||
table thead tr th {
|
||||
background-color: #14141499;
|
||||
background-color: rgba(20, 20, 20, 0.6);
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
gap: 1rem;
|
||||
|
||||
span:first-child {
|
||||
background-color: #141414;
|
||||
background-color: rgb(20, 20, 20);
|
||||
border-radius: 50%;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
color: #969696;
|
||||
color: rgba(150, 150, 150, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -70,7 +70,7 @@ export function StorageRequestFileChooser({
|
||||
value={storageRequest.cid || ""}
|
||||
options={options}
|
||||
onSelected={onSelected}
|
||||
size="medium"
|
||||
variant="medium"
|
||||
/>
|
||||
|
||||
<div className="row gap">
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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"></CardNumbers>
|
||||
<Alert
|
||||
Icon={<WarningIcon />}
|
||||
title="Warning"
|
||||
variant="warning"
|
||||
className="storageRequestReview-alert">
|
||||
<Alert Icon={<WarningIcon />} 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.
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.011em;
|
||||
color: #99a0ae;
|
||||
color: rgb(153, 160, 174);
|
||||
}
|
||||
|
||||
small {
|
||||
|
||||
@ -13,7 +13,7 @@ export function Versions() {
|
||||
|
||||
return (
|
||||
<div className="versions">
|
||||
<AlphaIcon color="var(--codex-color-error-hexa)" width={20} />
|
||||
<AlphaIcon color="rgb(204, 108, 108)" width={20} />
|
||||
<div>
|
||||
<p>Client</p>
|
||||
<small>VER. {version}</small>
|
||||
@ -21,7 +21,7 @@ export function Versions() {
|
||||
<div>
|
||||
<p>Vault</p>
|
||||
<small>VER. {VersionsUtil.codexVersion()}</small>
|
||||
<AlphaText color="var(--codex-color-error-hexa)" width={37}></AlphaText>
|
||||
<AlphaText color="rgb(204, 108, 108)" width={37}></AlphaText>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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() {
|
||||
</p>
|
||||
<div>
|
||||
<Link to="/dashboard/help" className="welcome-link">
|
||||
Learn more →
|
||||
Learn more <ArrowIcon width={14} height={14}></ArrowIcon>
|
||||
</Link>
|
||||
<a href={import.meta.env.VITE_DISCORD_LINK}>
|
||||
<DiscordIcon></DiscordIcon>
|
||||
Join Codex Discord
|
||||
<span>Join Codex Discord</span>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
.table {
|
||||
table thead tr th {
|
||||
background-color: #14141499;
|
||||
background-color: rgba(20, 20, 20, 0.6);
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
|
||||
@ -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;
|
||||
} */
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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() {
|
||||
<OnBoardingLayout defaultIsStepValid={false} step={0}>
|
||||
<>
|
||||
<section className="alpha">
|
||||
<AlphaIcon color="var(--codex-color-error-hexa)" width={26} />
|
||||
<AlphaIcon color="rgb(204, 108, 108)" width={26} />
|
||||
<div>
|
||||
<AlphaText
|
||||
color="rgba(255, 255, 255, 0.6)"
|
||||
@ -42,7 +43,9 @@ export function OnBoardingRoute() {
|
||||
</p>
|
||||
</section>
|
||||
<section className="get-started">
|
||||
<a onClick={onNextStep}>Let’s get started →</a>
|
||||
<a onClick={onNextStep}>
|
||||
Let’s get started <ArrowIcon width={18} height={18}></ArrowIcon>
|
||||
</a>
|
||||
|
||||
<Modal
|
||||
onClose={onLegalDisclaimerClose}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
> 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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user