mirror of
https://github.com/codex-storage/codex-marketplace-ui.git
synced 2025-02-23 21:28:26 +00:00
Integration
This commit is contained in:
Arnaud
parent
334dbafe4d
commit
9aa8180927
8
package-lock.json
generated
8
package-lock.json
generated
@ -9,7 +9,7 @@
|
||||
"version": "0.0.7",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codex-storage/marketplace-ui-components": "^0.0.32",
|
||||
"@codex-storage/marketplace-ui-components": "^0.0.33",
|
||||
"@codex-storage/sdk-js": "^0.0.15",
|
||||
"@sentry/browser": "^8.32.0",
|
||||
"@sentry/react": "^8.31.0",
|
||||
@ -379,9 +379,9 @@
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/@codex-storage/marketplace-ui-components": {
|
||||
"version": "0.0.32",
|
||||
"resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.32.tgz",
|
||||
"integrity": "sha512-6vJ9pacl2rzLE3GqBNtbaGEBSxZ6yxb5+ixY/Q6ORtgSgv54LPb6L9VOiwrjrRxD12HEVxosXEeyBLhek7C8tg==",
|
||||
"version": "0.0.33",
|
||||
"resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.33.tgz",
|
||||
"integrity": "sha512-Au/k1FNygejrcHNLdgghgxm8VuERb2bQsI0JjGaIdk4LGgTS0EuMCd0Y6fo6VuZeyuVPN/kFSWMVPBO5xdFEEw==",
|
||||
"dependencies": {
|
||||
"lucide-react": "^0.453.0"
|
||||
},
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
"React"
|
||||
],
|
||||
"dependencies": {
|
||||
"@codex-storage/marketplace-ui-components": "^0.0.32",
|
||||
"@codex-storage/marketplace-ui-components": "^0.0.33",
|
||||
"@codex-storage/sdk-js": "^0.0.15",
|
||||
"@sentry/browser": "^8.32.0",
|
||||
"@sentry/react": "^8.31.0",
|
||||
|
||||
15
src/components/AlertIcon/AlertIcon.tsx
Normal file
15
src/components/AlertIcon/AlertIcon.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
export function AlertIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="15"
|
||||
viewBox="0 0 16 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M8.61704 1.27732L15.4045 13.1692C15.4671 13.2788 15.5 13.4031 15.5 13.5296C15.5 13.6561 15.4671 13.7804 15.4045 13.89C15.342 13.9995 15.2521 14.0905 15.1438 14.1538C15.0354 14.217 14.9126 14.2503 14.7875 14.2503H1.21251C1.08743 14.2503 0.964565 14.217 0.85625 14.1538C0.747935 14.0905 0.65799 13.9995 0.595455 13.89C0.532921 13.7804 0.499999 13.6561 0.5 13.5296C0.500001 13.4031 0.532924 13.2788 0.59546 13.1692L7.38295 1.27732C7.44549 1.16777 7.53544 1.07679 7.64375 1.01354C7.75207 0.950291 7.87493 0.916992 8 0.916992C8.12507 0.916992 8.24793 0.950291 8.35625 1.01354C8.46456 1.07679 8.55451 1.16777 8.61704 1.27732V1.27732ZM7.28748 10.6467V12.0882H8.71252V10.6467H7.28748ZM7.28748 5.60166V9.20527H8.71252V5.60166H7.28748Z"
|
||||
fill="#FFC800"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@ -59,12 +59,6 @@
|
||||
border-radius: 50%;
|
||||
color: #969696;
|
||||
}
|
||||
|
||||
@media (max-width: 999px) {
|
||||
& {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
|
||||
@ -1,7 +1,83 @@
|
||||
.connected-account {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #96969633;
|
||||
border: 1px solid hsla(0, 0%, 59%, 0.2);
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
> footer {
|
||||
ul {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
margin-top: 16px;
|
||||
border: 1px solid #96969633;
|
||||
background-color: #14141499;
|
||||
height: 24px;
|
||||
border-radius: 6px;
|
||||
|
||||
li {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: Inter;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
color: #969696;
|
||||
|
||||
&[aria-selected] {
|
||||
background: #2f2f2f;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #161616;
|
||||
border: 1px solid #96969633;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.006em;
|
||||
text-align: left;
|
||||
color: #969696;
|
||||
}
|
||||
|
||||
var {
|
||||
font-family: Inter;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.015em;
|
||||
text-align: left;
|
||||
color: white;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
small {
|
||||
font-family: Inter;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,6 +3,8 @@ import { AccountIcon } from "../AccountIcon/AccountIcon";
|
||||
import "./ConnectedAccount.css";
|
||||
import { PlusIcon } from "../PlusIcon/PlusIcon";
|
||||
import { WalletCard } from "./WalletCard";
|
||||
import { ProgressCircle } from "./ProgressCircle";
|
||||
import { ArrowRightIcon } from "../ArrowRightIcon/ArrowRightIcon";
|
||||
|
||||
export function ConnectedAccount() {
|
||||
return (
|
||||
@ -17,6 +19,30 @@ export function ConnectedAccount() {
|
||||
<main>
|
||||
<WalletCard></WalletCard>
|
||||
</main>
|
||||
<footer>
|
||||
<ul>
|
||||
<li>Daily</li>
|
||||
<li aria-selected>Weekly</li>
|
||||
<li>Monthly</li>
|
||||
</ul>
|
||||
<div>
|
||||
<div className="row gap">
|
||||
<ProgressCircle value={10} />
|
||||
<div>
|
||||
<h6>Income</h6>
|
||||
<var>$15.00</var> <small>/ week</small>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h6>Spend</h6>
|
||||
<var>$5.00</var> <small>/ week</small>
|
||||
</div>
|
||||
</div>
|
||||
<button>
|
||||
<ArrowRightIcon></ArrowRightIcon>
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
23
src/components/ConnectedAccount/ProgressCircle.css
Normal file
23
src/components/ConnectedAccount/ProgressCircle.css
Normal file
@ -0,0 +1,23 @@
|
||||
.progress-circle {
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
background: #2f2f2f;
|
||||
|
||||
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%);
|
||||
|
||||
div {
|
||||
border-radius: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin: auto;
|
||||
background: #232323;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
13
src/components/ConnectedAccount/ProgressCircle.tsx
Normal file
13
src/components/ConnectedAccount/ProgressCircle.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import "./ProgressCircle.css";
|
||||
|
||||
type Props = {
|
||||
value: number;
|
||||
};
|
||||
|
||||
export function ProgressCircle(_: Props) {
|
||||
return (
|
||||
<div className="progress-circle">
|
||||
<div></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -3,16 +3,17 @@
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border: 1px solid #96969633;
|
||||
height: 286px;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
width: 217px;
|
||||
height: 148px;
|
||||
width: 42%;
|
||||
height: 50%;
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
right: 0;
|
||||
@ -42,6 +43,11 @@
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -156,7 +162,6 @@
|
||||
section:nth-child(2) {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 10px;
|
||||
height: 90px;
|
||||
position: relative;
|
||||
|
||||
.wallet-lines {
|
||||
|
||||
@ -1,11 +1,6 @@
|
||||
export function WalletChart() {
|
||||
return (
|
||||
<svg
|
||||
width="464"
|
||||
height="91"
|
||||
viewBox="0 0 464 91"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 464 91" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<line
|
||||
x1="15.5"
|
||||
x2="15.5"
|
||||
|
||||
@ -2,33 +2,31 @@ export function WalletLines() {
|
||||
return (
|
||||
<svg
|
||||
className="wallet-lines"
|
||||
width="464"
|
||||
height="46"
|
||||
viewBox="0 0 464 46"
|
||||
viewBox="0 0 683 46"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
opacity="0.5"
|
||||
d="M10.5131 44.5368H0.231579C0.103681 44.5368 0 44.6405 0 44.7684C0 44.8963 0.103681 45 0.231579 45H460C462.209 45 464 43.2091 464 41V5C464 2.79086 462.209 1 460 1H437.926C437.43 1 436.938 1.09246 436.475 1.27265L381.325 22.7489C380.862 22.9291 380.37 23.0215 379.874 23.0215H362.053C361.293 23.0215 360.548 22.8049 359.907 22.3971L327.232 1.62441C326.591 1.21659 325.846 1 325.086 1H291.727C290.845 1 289.988 1.29141 289.289 1.82891L262.803 22.1926C262.104 22.7301 261.254 23.0215 260.372 23.0215H216.323C215.661 23.0215 215.02 23.1857 214.437 23.4993L186.929 38.3042C186.346 38.6178 185.695 38.782 185.033 38.782H166.823C166.154 38.782 165.495 38.6138 164.907 38.2929L137.827 23.5106C137.24 23.1897 136.581 23.0215 135.911 23.0215H112.308C111.412 23.0215 110.542 22.7208 109.837 22.1676L83.9663 1.85392C83.2617 1.3007 82.3919 1 81.4961 1H50.9186C49.7391 1 48.6197 1.52056 47.8597 2.42254L13.572 43.1143C12.812 44.0163 11.6926 44.5368 10.5131 44.5368Z"
|
||||
fill="url(#paint0_linear_346_1558)"
|
||||
fillOpacity="0.06"
|
||||
d="M16.8017 44.5368H0.231579C0.103681 44.5368 0 44.6405 0 44.7684C0 44.8963 0.103681 45 0.231579 45H679C681.209 45 683 43.2091 683 41V5C683 2.79086 681.209 1 679 1H644.034C643.689 1 643.345 1.04472 643.011 1.13303L560.776 22.8885C560.443 22.9768 560.099 23.0215 559.753 23.0215H532.049C531.504 23.0215 530.964 22.91 530.463 22.6937L480.993 1.32786C480.493 1.11157 479.953 1 479.408 1H428.397C427.753 1 427.117 1.15593 426.546 1.45451L386.125 22.567C385.553 22.8656 384.945 23.0215 384.3 23.0215H317.645C317.177 23.0215 316.73 23.1039 316.289 23.2648L274.515 38.5387C274.075 38.6996 273.61 38.782 273.141 38.782H244.777C244.302 38.782 243.831 38.6975 243.386 38.5324L202.234 23.2711C201.789 23.1061 201.318 23.0215 200.843 23.0215H164.28C163.623 23.0215 162.977 22.8599 162.397 22.5508L122.879 1.47072C122.299 1.16166 121.653 1 120.996 1H73.6247C72.7112 1 71.8252 1.31267 71.1141 1.88603L19.3123 43.6508C18.6011 44.2242 17.7152 44.5368 16.8017 44.5368Z"
|
||||
fill="url(#paint0_linear_401_31774)"
|
||||
fill-opacity="0.06"
|
||||
/>
|
||||
<path
|
||||
opacity="0.6"
|
||||
d="M0 45H8.62753C11.0011 45 13.2521 43.946 14.772 42.123L46.6596 3.87702C48.1796 2.05398 50.4306 1 52.8041 1H80.0903C81.896 1 83.6486 1.6109 85.0631 2.73335L108.741 21.5225C110.155 22.6449 111.908 23.2558 113.714 23.2558H134.871C136.223 23.2558 137.552 23.5982 138.736 24.2511L163.999 38.1886C165.182 38.8415 166.512 39.1839 167.863 39.1839H184.007C185.342 39.1839 186.656 38.8496 187.829 38.2116L213.537 24.2281C214.71 23.5901 216.013 23.2558 217.348 23.2558C229.407 23.2558 251.34 23.2558 258.999 23.2558C260.776 23.2558 262.487 22.6637 263.891 21.5729L288.202 2.68288C289.605 1.59212 291.332 1 293.11 1H323.901C325.435 1 326.936 1.44066 328.226 2.26951L358.913 21.9863C360.203 22.8152 361.704 23.2558 363.237 23.2558H379.107C380.11 23.2558 381.104 23.0673 382.037 22.7L435.763 1.55577C436.696 1.18853 437.69 1 438.693 1L464 1"
|
||||
d="M0 45H15.3667C17.2079 45 18.9928 44.3649 20.4201 43.2019L70.0062 2.79813C71.4336 1.63509 73.2184 1 75.0596 1H119.977C121.302 1 122.607 1.32923 123.773 1.9581L161.502 22.2977C162.669 22.9266 163.973 23.2558 165.299 23.2558H200.111C201.07 23.2558 202.021 23.4282 202.919 23.7647L242.701 38.675C243.599 39.0115 244.55 39.1839 245.509 39.1839H272.419C273.365 39.1839 274.304 39.016 275.192 38.688L315.613 23.7517C316.5 23.4237 317.424 23.2558 318.37 23.2558C336.899 23.2558 374.308 23.2558 383.286 23.2558C384.587 23.2558 385.856 22.9382 387.007 22.3306L425.663 1.92521C426.814 1.31759 428.096 1 429.398 1H478.564C479.666 1 480.755 1.22743 481.765 1.66803L529.692 22.5878C530.701 23.0284 531.791 23.2558 532.892 23.2558H559.222C559.92 23.2558 560.615 23.1645 561.289 22.9843L642.499 1.27147C643.173 1.09126 643.867 1 644.565 1L683 1"
|
||||
stroke="#3EE089"
|
||||
strokeWidth="2"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_346_1558"
|
||||
x1="232"
|
||||
id="paint0_linear_401_31774"
|
||||
x1="341.5"
|
||||
y1="17.617"
|
||||
x2="232"
|
||||
x2="341.5"
|
||||
y2="45"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#CFD1D3" />
|
||||
<stop offset="1" stopColor="#E4E5E7" stopOpacity="0" />
|
||||
<stop stop-color="#CFD1D3" />
|
||||
<stop offset="1" stop-color="#E4E5E7" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
border: 1px solid var(--codex-border-color);
|
||||
background-color: var(--codex-background-secondary);
|
||||
padding: 1rem 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.files-cell-file {
|
||||
|
||||
@ -36,12 +36,10 @@ export type MenuItem =
|
||||
Component: ComponentType<MenuItemComponentProps>;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
isMobileMenuDisplayed: boolean;
|
||||
};
|
||||
type Props = {};
|
||||
|
||||
export function Menu({ isMobileMenuDisplayed }: Props) {
|
||||
const [isExpanded, setIsExpanded] = useState<boolean | null>(null);
|
||||
export function Menu({}: Props) {
|
||||
const [isExpanded, setIsExpanded] = useState(true);
|
||||
|
||||
const onLogoClick = () => {
|
||||
if (isExpanded === false) {
|
||||
@ -49,22 +47,15 @@ export function Menu({ isMobileMenuDisplayed }: Props) {
|
||||
}
|
||||
};
|
||||
|
||||
const onExpandMenu = () => setIsExpanded(isExpanded === false ? true : false);
|
||||
const onExpandMenu = () => setIsExpanded(!isExpanded);
|
||||
|
||||
return (
|
||||
<>
|
||||
<aside
|
||||
className={classnames([`menu`])}
|
||||
{...attributes(
|
||||
isExpanded === null
|
||||
? {
|
||||
"aria-hidden": (!isMobileMenuDisplayed).toString(),
|
||||
}
|
||||
: {
|
||||
"aria-expanded": isExpanded.toString(),
|
||||
"aria-hidden": (!isMobileMenuDisplayed).toString(),
|
||||
}
|
||||
)}>
|
||||
{...attributes({
|
||||
"aria-expanded": isExpanded,
|
||||
})}>
|
||||
<div>
|
||||
<header>
|
||||
<Logo onClick={onLogoClick} width={30} />
|
||||
|
||||
@ -15,18 +15,24 @@
|
||||
left 0.05s;
|
||||
min-width: 0;
|
||||
width: 272px;
|
||||
min-width: 80px;
|
||||
|
||||
@media (max-width: 999px) {
|
||||
&,
|
||||
&[aria-hidden] {
|
||||
width: 272px;
|
||||
position: fixed;
|
||||
z-index: 12;
|
||||
left: -300px;
|
||||
}
|
||||
@media (max-width: 1199px) {
|
||||
& {
|
||||
width: 80px;
|
||||
.items {
|
||||
a {
|
||||
width: 26px;
|
||||
gap: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&[aria-hidden="false"] {
|
||||
left: 0px;
|
||||
span + span {
|
||||
font-size: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,11 +51,7 @@
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
&[aria-expanded="true"] {
|
||||
width: 272px;
|
||||
}
|
||||
|
||||
&[aria-expanded="false"] {
|
||||
&:not([aria-expanded]) {
|
||||
width: 80px;
|
||||
|
||||
.items {
|
||||
@ -61,6 +63,7 @@
|
||||
|
||||
span + span {
|
||||
font-size: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -85,10 +88,15 @@
|
||||
border-radius: 8px;
|
||||
|
||||
> svg:first-child {
|
||||
cursor: pointer;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
> svg:first-child {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
|
||||
@ -9,6 +9,8 @@
|
||||
background-repeat: no-repeat;
|
||||
background-position: right;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
|
||||
@ -5,6 +5,7 @@ import { Logo } from "../Logo/Logo";
|
||||
import { Logotype } from "../Logotype/Logotype";
|
||||
import { DiscordIcon } from "./DiscordIcon";
|
||||
import { Alert } from "@codex-storage/marketplace-ui-components";
|
||||
import { AlertIcon } from "../AlertIcon/AlertIcon";
|
||||
|
||||
export function WelcomeCard() {
|
||||
return (
|
||||
@ -27,7 +28,7 @@ export function WelcomeCard() {
|
||||
</p>
|
||||
<div>
|
||||
<Link to="/dashboard/help" className="welcome-link">
|
||||
Explore more content<ArrowRight></ArrowRight>
|
||||
Learn more<ArrowRight></ArrowRight>
|
||||
</Link>
|
||||
<a href="">
|
||||
<DiscordIcon></DiscordIcon>
|
||||
@ -36,7 +37,7 @@ export function WelcomeCard() {
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<Alert variant="warning" title="Disclaimer">
|
||||
<Alert variant="warning" title="Disclaimer" Icon={<AlertIcon />}>
|
||||
The website and the content herein is not intended for public use
|
||||
and is for informational and demonstration purposes only.
|
||||
</Alert>
|
||||
|
||||
@ -16,12 +16,9 @@ const Layout = () => {
|
||||
|
||||
const onClose = () => setHasMobileMenu(false);
|
||||
|
||||
const isMobileMenuDisplayed =
|
||||
hasMobileMenu === true && window.innerWidth <= 999;
|
||||
|
||||
return (
|
||||
<div className="layout">
|
||||
<Menu isMobileMenuDisplayed={isMobileMenuDisplayed}></Menu>
|
||||
<Menu></Menu>
|
||||
|
||||
<main>
|
||||
<AppBar onIconClick={onIconClick} />
|
||||
|
||||
@ -1,63 +1,86 @@
|
||||
.dashboard {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
|
||||
h3 {
|
||||
font-family: Inter;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 14.52px;
|
||||
letter-spacing: 0.01em;
|
||||
color: #969696cc;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: Inter;
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
line-height: 38.73px;
|
||||
letter-spacing: 0.01em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
border-radius: 50%;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
background-color: #4a9a73;
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.welcome-card,
|
||||
.connected-account {
|
||||
min-width: 550px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.column {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.files {
|
||||
flex: 1;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
.dashboard-body {
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
|
||||
h3 {
|
||||
font-family: Inter;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 14.52px;
|
||||
letter-spacing: 0.01em;
|
||||
color: #969696cc;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: Inter;
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
line-height: 38.73px;
|
||||
letter-spacing: 0.01em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
border-radius: 50%;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
background-color: #4a9a73;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
> main {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
|
||||
.welcome-card,
|
||||
.connected-account {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 50%;
|
||||
}
|
||||
|
||||
.connected-account {
|
||||
min-width: 550px;
|
||||
}
|
||||
|
||||
.welcome-card {
|
||||
min-width: 420px;
|
||||
}
|
||||
|
||||
.column {
|
||||
min-width: 350px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
flex: 1 1 30%;
|
||||
}
|
||||
|
||||
.node-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 2000px) {
|
||||
.welcome-card,
|
||||
.connected-account {
|
||||
flex: 1 1 34%;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 1 1 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.files {
|
||||
flex: 1;
|
||||
flex-basis: 66%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,8 +23,8 @@ function Dashboard() {
|
||||
const emoji = WebStorage.onBoarding.getEmoji();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="dashboard">
|
||||
<div className="dashboard">
|
||||
<header>
|
||||
<div className="row gap">
|
||||
<div className="emoji">{emoji}</div>
|
||||
<div>
|
||||
@ -33,23 +33,10 @@ function Dashboard() {
|
||||
</div>
|
||||
</div>
|
||||
<Versions />
|
||||
</div>
|
||||
<div>
|
||||
<div className="dashboard-body">
|
||||
<ConnectedAccount></ConnectedAccount>
|
||||
<div className="column">
|
||||
<ErrorBoundary
|
||||
fallback={({ error }) => (
|
||||
<ErrorPlaceholder
|
||||
error={error}
|
||||
subtitle="Cannot retrieve the data."
|
||||
/>
|
||||
)}>
|
||||
<NodeSpace></NodeSpace>
|
||||
</ErrorBoundary>
|
||||
<PeersCard></PeersCard>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<main>
|
||||
<ConnectedAccount></ConnectedAccount>
|
||||
<div className="column">
|
||||
<ErrorBoundary
|
||||
fallback={({ error }) => (
|
||||
<ErrorPlaceholder
|
||||
@ -57,34 +44,45 @@ function Dashboard() {
|
||||
subtitle="Cannot retrieve the data."
|
||||
/>
|
||||
)}>
|
||||
<WelcomeCard />
|
||||
</ErrorBoundary>
|
||||
|
||||
<div className="column">
|
||||
<ErrorBoundary
|
||||
fallback={({ error }) => (
|
||||
<ErrorPlaceholder
|
||||
error={error}
|
||||
subtitle="Cannot retrieve the data."
|
||||
/>
|
||||
)}>
|
||||
<UploadCard />
|
||||
</ErrorBoundary>
|
||||
<Download></Download>
|
||||
<ManifestFetchCard />
|
||||
</div>
|
||||
|
||||
<ErrorBoundary
|
||||
fallback={({ error }) => (
|
||||
<ErrorPlaceholder
|
||||
error={error}
|
||||
subtitle="Cannot retrieve the data."
|
||||
/>
|
||||
)}>
|
||||
<Files />
|
||||
<NodeSpace></NodeSpace>
|
||||
</ErrorBoundary>
|
||||
<PeersCard></PeersCard>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
<ErrorBoundary
|
||||
fallback={({ error }) => (
|
||||
<ErrorPlaceholder
|
||||
error={error}
|
||||
subtitle="Cannot retrieve the data."
|
||||
/>
|
||||
)}>
|
||||
<WelcomeCard />
|
||||
</ErrorBoundary>
|
||||
|
||||
<div className="column">
|
||||
<ErrorBoundary
|
||||
fallback={({ error }) => (
|
||||
<ErrorPlaceholder
|
||||
error={error}
|
||||
subtitle="Cannot retrieve the data."
|
||||
/>
|
||||
)}>
|
||||
<UploadCard />
|
||||
</ErrorBoundary>
|
||||
<Download></Download>
|
||||
<ManifestFetchCard />
|
||||
</div>
|
||||
|
||||
<ErrorBoundary
|
||||
fallback={({ error }) => (
|
||||
<ErrorPlaceholder
|
||||
error={error}
|
||||
subtitle="Cannot retrieve the data."
|
||||
/>
|
||||
)}>
|
||||
<Files />
|
||||
</ErrorBoundary>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user