Skip to content

Commit

Permalink
Merge branch 'feat/ui/integration' into mock
Browse files Browse the repository at this point in the history
  • Loading branch information
2-towns committed Nov 4, 2024
2 parents baace7d + 9aa8180 commit 0834d7e
Show file tree
Hide file tree
Showing 19 changed files with 327 additions and 163 deletions.
8 changes: 4 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
15 changes: 15 additions & 0 deletions src/components/AlertIcon/AlertIcon.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
6 changes: 0 additions & 6 deletions src/components/AppBar/appBar.css
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,6 @@
border-radius: 50%;
color: #969696;
}

@media (max-width: 999px) {
& {
cursor: pointer;
}
}
}

aside {
Expand Down
78 changes: 77 additions & 1 deletion src/components/ConnectedAccount/ConnectedAccount.css
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
26 changes: 26 additions & 0 deletions src/components/ConnectedAccount/ConnectedAccount.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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 changes: 23 additions & 0 deletions src/components/ConnectedAccount/ProgressCircle.css
Original file line number Diff line number Diff line change
@@ -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 changes: 13 additions & 0 deletions src/components/ConnectedAccount/ProgressCircle.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import "./ProgressCircle.css";

type Props = {
value: number;
};

export function ProgressCircle(_: Props) {
return (
<div className="progress-circle">
<div></div>
</div>
);
}
13 changes: 9 additions & 4 deletions src/components/ConnectedAccount/WalletCard.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -42,6 +43,11 @@
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}

svg {
position: relative;
top: -2px;
}
}
}

Expand Down Expand Up @@ -156,7 +162,6 @@
section:nth-child(2) {
margin-top: 16px;
margin-bottom: 10px;
height: 90px;
position: relative;

.wallet-lines {
Expand Down
7 changes: 1 addition & 6 deletions src/components/ConnectedAccount/WalletChart.tsx
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
24 changes: 11 additions & 13 deletions src/components/ConnectedAccount/WalletLines.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 0 additions & 1 deletion src/components/Files/Files.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
23 changes: 7 additions & 16 deletions src/components/Menu/Menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,35 +36,26 @@ 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) {
setIsExpanded(true);
}
};

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} />
Expand Down
Loading

0 comments on commit 0834d7e

Please sign in to comment.